آموزش جاوا اسکریپت مدرن (راهنمای کامل، از مبتدی تا نینجا)

سرفصل ها و درس ها

معرفی Introduction

• چرا باید این دوره را بگذرانید Why You Should Take This Course

• چرا جاوا اسکریپت شگفت انگیز است Why JavaScript is Amazing

• تنظیم محیط شما Setting up Your Environment

• فایل های دوره Course Files

مبانی جاوا اسکریپت JavaScript Basics

• افزودن جاوا اسکریپت به یک صفحه وب Adding JavaScript to a Web Page

• کنسول مرورگر The Browser Console

• متغیرها، ثابت ها و نظرات Variables, Constants & Comments

• انواع داده ها در یک نگاه Data Types at a Glance

• رشته های Strings

• روش های رایج رشته Common String Methods

• شماره Numbers

• رشته های الگو Template Strings

• آرایه ها Arrays

• پوچ و تعریف نشده Null & Undefined

• بولی ها و مقایسه ها Booleans & Comparisons

• مقایسه سست در مقابل دقیق Loose vs Strict Comparison

• تبدیل نوع Type Conversion

اصول کنترل جریان Control Flow Basics

• جریان کنترل چیست؟ What is Control Flow?

• برای حلقه ها For Loops

• در حالی که حلقه ها While Loops

• حلقه ها را انجام دهید Do While Loops

• اگر بیانیه ها If Statements

• Else & Else If Else & Else If

• عملگرهای منطقی Logical Operators

• منطقی نه Logical NOT

• استراحت و ادامه Break & Continue

• تغییر بیانیه ها Switch Statements

• متغیرها و محدوده بلوک Variables & Block Scope

توابع و روش ها Functions & Methods

• توابع چیست؟ What are Functions?

• اعلان ها و عبارات تابع Function Declarations & Expressions

• آرگومان ها و پارامترها Arguments & Parameters

• ارزش های برگشتی Returning Values

• توابع پیکان Arrow Functions

• توابع در مقابل روش ها Functions vs Methods

• روش Foreach & Callbacks Foreach Method & Callbacks

• توابع پاسخ به تماس در عمل Callback Functions in Action

لفظ شیء Object Literals

• اشیاء در یک نگاه Objects at a Glance

• ایجاد یک شی به معنای واقعی کلمه Creating an Object Literal

• روش های اضافه کردن Adding Methods

• کلمه کلیدی "این". 'this' Keyword

• اشیاء در آرایه ها Objects in Arrays

• شیء ریاضی Math Object

• بدوی در مقابل انواع مرجع Primitive vs Reference Types

مدل شیء سند The Document Object Model

• تعامل با مرورگر Interacting with the Browser

• DOM توضیح داد The DOM Explained

• انتخابگر پرس و جو The Query Selector

• راه های دیگر برای پرس و جو از DOM Other Ways to Query the DOM

• افزودن و تغییر محتوای صفحه Adding & Changing Page Content

• دریافت و تنظیم ویژگی ها Getting & Setting Attributes

• تغییر سبک های CSS Changing CSS Styles

• افزودن و حذف کلاس ها Adding & Removing Classes

• والدین، فرزندان و خواهران و برادران Parents, Children & Siblings

• اصول رویداد (رویدادها را کلیک کنید) Event Basics (click events)

• ایجاد و حذف عناصر Creating & Removing Elements

• حباب رویداد (و نمایندگی) Event Bubbling (and delegation)

• رویدادهای DOM بیشتر More DOM Events

• ساخت پاپ آپ Building a Popup

فرم ها و رویدادهای فرم Forms & Form Events

• رویدادهای درون فرم ها Events Inside Forms

• رویدادها را ارسال کنید Submit Events

• عبارات با قاعده Regular Expressions

• تست الگوهای RegEx Testing RegEx Patterns

• اعتبار سنجی فرم پایه Basic Form Validation

• رویدادهای صفحه کلید Keyboard Events

پروژه - مسابقه نینجا تعاملی Project - Interactive Ninja Quiz

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• مبانی بوت استرپ Bootstrap Basics

• قالب HTML HTML Template

• بررسی پاسخ ها Checking Answers

• نمایش امتیاز Showing the Score

• شی پنجره The Window Object

• فواصل و متحرک کردن امتیاز Intervals & Animating the Score

روش های آرایه Array Methods

• روش فیلتر Filter Method

• روش نقشه Map Method

• روش کاهش Reduce Method

• روش را پیدا کنید Find Method

• روش مرتب سازی Sort Method

• روش های زنجیره ای آرایه Chaining Array Methods

پروژه - فهرست کارها Project - Todo List

• پیش نمایش و راه اندازی پروژه Project Preview and Setup

• قالب HTML و CSS HTML & CSS Template

• اضافه کردن Todos Adding Todos

• حذف Todos Deleting Todos

• جستجو و فیلتر کردن کارها Searching & Filtering Todos

تاریخ و زمان Dates & Times

• تاریخ و زمان در جاوا اسکریپت Dates & Times in JavaScript

• مُهر زمان و مقایسه Timestamps & Comparisons

• ساخت ساعت دیجیتال Building a Digital Clock

• کتابخانه Date-fns Date-fns Library

جاوا اسکریپت غیر همگام Async JavaScript

• جاوا اسکریپت ناهمزمان چیست؟ What is Asynchronous JavaScript?

• کد Async در عمل Async Code in Action

• درخواست های HTTP چیست؟ What are HTTP Requests?

• ایجاد درخواست های HTTP (XHR) Making HTTP Requests (XHR)

• وضعیت پاسخگویی Response Status

• توابع پاسخ به تماس Callback Functions

• داده های JSON JSON Data

• برگشت به تماس جهنم Callback Hell

• مبانی وعده Promise Basics

• وعده های زنجیره ای Chaining Promises

• Fetch API The Fetch API

• Async & Await Async & Await

• خطاهای پرتاب و گرفتن Throwing & Catching Errors

پروژه - برنامه آب و هوا Project - Weather App

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• قالب HTML و CSS HTML & CSS Template

• AccuWeather API AccuWeather API

• دریافت City API Call Get City API Call

• دریافت تماس API آب و هوا Get Weather API Call

• به روز رسانی مکان Updating the Location

• نماد نویسی شیء Object Shorthand Notation

• به روز رسانی رابط کاربری Updating the UI

• در حال تخریب Destructuring

• نمادها و تصاویر آب و هوا Weather Icons & images

• اپراتور سه تایی Ternary Operator

محل ذخیره سازی Local Storage

• Local Storage چیست؟ What is Local Storage?

• ذخیره و دریافت داده ها Storing & Getting Data

• حذف داده های ذخیره سازی Deleting Storage Data

• سخت‌گیری و تجزیه داده‌ها Stringifying & Parsing Data

• به روز رسانی برنامه آب و هوا Updating the Weather App

جاوا اسکریپت شی گرا Object Oriented JavaScript

• OOP چیست؟ What is OOP?

• خلاصه لفظی شی Object Literal Recap

• کلاس ها Classes

• سازندگان کلاس Class Constructors

• روش های کلاس و روش زنجیره ای Class Methods & Method Chaining

• ارث بری کلاس (زیر کلاس ها) Class Inheritance (subclasses)

• فوق العاده ( ) Super( )

• سازندگان (زیر کاپوت) Constructors (under the hood)

• نمونه اولیه مدل Prototype Model

• وراثت نمونه اولیه Prototypal Inheritance

• اشیاء داخلی Built-in Objects

• ساخت کلاس پیش بینی (برنامه آب و هوا) Making a Forecast Class (weather app)

پایگاه های داده (Firebase) Databases (Firebase)

• پایگاه های داده NoSQL NoSQL Databases

• Firebase & Firestore Firebase & Firestore

• اتصال به Firestore Connecting to Firestore

• گرفتن مجموعه ها Getting Collections

• ذخیره اسناد Saving Documents

• حذف اسناد Deleting Documents

• شنوندگان زمان واقعی Real-time Listeners

• لغو اشتراک Unsubscribing

پروژه - چت روم بلادرنگ Project - Real-time Chatroom

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• قالب HTML HTML Template

• اتصال به Firebase Connecting to Firebase

• کلاس چت روم و افزودن چت Chatroom Class & Adding Chats

• راه اندازی شنونده بلادرنگ Setting up a Real-time Listener

• پرس و جوهای پیچیده Complex Queries

• به روز رسانی اتاق و نام کاربری Updating the Room & Username

• ایجاد کلاس ChatUI Creating a ChatUI Class

• قالب بندی تاریخ ها Formatting the Dates

• ارسال چت های جدید Sending New Chats

• تغییر نام کاربری و فضای ذخیره سازی محلی Changing Username & Local Storage

• به روز رسانی اتاق Updating the Room

• تست اپلیکیشن Testing the App

ویژگی های بیشتر ES6 More ES6 Features

• گسترش و استراحت Spread & Rest

• مجموعه ها Sets

• نمادها Symbols

گردش کار مدرن با Babel & Webpack Modern Workflow with Babel & Webpack

• پشتیبانی از ویژگی های مدرن Modern Feature Support

• مقدمه ای بر بابل An Introduction to Babel

• نصب Node.js & Babel Installing Node.js & Babel

• با استفاده از Babel CLI Using the Babel CLI

• اسکریپت های NPM و تماشای فایل ها NPM Scripts & Watching Files

• وب پک چیست؟ What is Webpack?

• راه اندازی یک فایل Webpack Setting up a Webpack File

• وب پک CLI Webpack CLI

• مقدمه ای بر ماژول ها Introduction to Modules

• صادرات پیش فرض Default Exports

• تماشای تغییرات Watching for Changes

• سرور توسعه دهنده Webpack The Webpack Dev Server

• حالت های تولید و توسعه Production & Development Modes

• Babel & Webpack با هم Babel & Webpack Together

• دیگ بخار وب پک Webpack Boilerplate

پروژه - کتابخانه UI Project - UI Library

• پیش نمایش و راه اندازی پروژه Project Preview & Setup

• لودرهای CSS و سبک (وبک) CSS & Style Loaders (webpack)

• نکات ابزار Tooltips

• کشویی Dropdowns

• محتوای جدول بندی شده Tabbed Content

• اسنک بار Snackbars

• گسترش کتابخانه Extending the Library

استفاده از پایگاه داده Firebase (& Auth) نسخه 9 Using Firebase Database (& Auth) Version 9

• چه چیزی در Firebase 9 جدید است؟ What's New in Firebase 9?

• راه اندازی پک وب Webpack Setup

• ایجاد پروژه Firebase Creating a Firebase Project

• راه اندازی Firestore و واکشی داده ها Firestore Setup & Fetching Data

• افزودن و حذف اسناد Adding & Deleting Documents

• داده های جمع آوری زمان واقعی Real Time Collection Data

• پرس و جوهای Firestore Firestore Queries

• مهر زمان و داده های سفارش Timestamps & Ordering Data

• واکشی اسناد واحد Fetching Single Documents

• به روز رسانی اسناد Updating Documents

• Firebase Auth Setup Firebase Auth Setup

• ثبت نام کاربران Signing Users Up

• ورود به سیستم و خروج از سیستم Logging In & Logging Out

• گوش دادن به تغییرات Auth Listening to Auth Changes

• لغو اشتراک از تغییرات Unsubscribing from Changes

مراحل بعدی Next Steps

• سخنرانی پاداش: مراحل بعدی Bonus Lecture: Next Steps