آموزش جاوا اسکریپت مدرن از ابتدا - ویرایش دوم [ویدئو]

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

معرفی دوره Course Introduction

• به دوره خوش آمدید Welcome to the Course

• طرح کلی دوره و پروژه ها Course Outline and Projects

• جاوا اسکریپت چیست؟ What Is JavaScript?

• ابزارها و راه اندازی Tools and Setup

• اجرای جاوا اسکریپت در مرورگر Running JavaScript in the Browser

متغیرها، انواع داده ها، روش ها و موارد دیگر Variables, Data Types, Methods, and More

• بخش مقدمه Section Introduction

• فایل های Sandbox The Sandbox Files

• با استفاده از کنسول Using the Console

• نظرات و میانبرها Comments and Shortcuts

• متغیرها و ثابت ها Variables and Constants

• انواع داده ها Data Types

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

• تبدیل نوع Type Conversion

• اپراتورها Operators

• نوع اجبار Type Coercion

• کار با رشته ها Working with Strings

• چالش را با حروف بزرگ بنویسید Capitalize Challenge

• کار با اعداد Working with Numbers

• شیء ریاضی The Math Object

• چالش شماره Number Challenge

• تاریخ و زمان Dates and Times

• Date Methods و DateTimeFormat API Date Methods and DateTimeFormat API

آرایه ها و اشیاء Arrays and Objects

• بخش مقدمه Section Introduction

• ایجاد آرایه ها Creating Arrays

• روش های پایه آرایه Basic Array Methods

• Nesting، Concat و Spread Operator Nesting, Concat and the Spread Operator

• چالش های آرایه Array Challenges

• لفظ شیء Object Literals

• اپراتور و روش های گسترش اشیا Object Spread Operator and Methods

• تخریب و نامگذاری Destructuring and Naming

• مقدمه JSON JSON Introduction

• چالش های شی Object Challenges

توابع، دامنه، و زمینه اجرا Functions, Scope, and Execution Context

• بخش مقدمه Section Introduction

• ایجاد یک تابع Creating a Function

• بیشتر در مورد آرگومان ها و پارامترها More on Arguments and Parameters

• دامنه جهانی و عملکرد Global and Function Scope

• Block Scope Block Scope

• دامنه تو در تو Nested Scope

• اعلان در مقابل بیان Declaration Versus Expression

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

• عبارات تابع فوری فراخوانی شده (IIFE) Immediately Invoked Function Expressions (IIFE)

• چالش های عملکرد Function Challenges

• زمینه اجرا Execution Context

• متن اجرا در عمل Execution Context in Action

• پشته تماس The Call Stack

منطق و جریان کنترل Logic and Control Flow

• بخش مقدمه Section Introduction

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

• Else-If و Nesting Else-If and Nesting

• سوئیچ ها Switches

• چالش ماشین حساب Calculator Challenge

• راست و دروغ Truthy and Falsy

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

• تکلیف منطقی Logical Assignment

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

حلقه ها، تکرار، و روش های آرایه مرتبه بالا Loops, Iteration, and High-Order Array Methods

• بخش مقدمه Section Introduction

• برای حلقه For Loop

• بشکن و ادامه بده Break and Continue

• حلقه های while و Do while While and Do While Loops

• چالش FizzBuzz FizzBuzz Challenge

• برای...از حلقه For...of Loop

• برای ... در حلقه For...in Loop

• روش Array.forEach Array.forEach Method

• روش Array.filter Array.filter Method

• روش Array.map Array.map Method

• روش Array.reduce Array.reduce Method

• چالش های روش آرایه Array Method Challenges

دستکاری DOM DOM Manipulation

• بخش مقدمه Section Introduction

• مقدمه ای بر DOM Introduction to the DOM

• ویژگی های عنصر سند Document Element Properties

• انتخابگرهای DOM - عناصر منفرد DOM Selectors - Single Elements

• انتخابگرهای DOM - عناصر چندگانه DOM Selectors - Multiple Elements

• عبور از DOM - عناصر Traversing the DOM - Elements

• عبور از DOM - همه گره ها Traversing the DOM - All Nodes

• ایجاد و الحاق عناصر Create and Append Elements

• InnerHTML در مقابل createElement() InnerHTML Versus createElement()

• Refactor به چند تابع Refactor to Multiple Functions

• عناصر، متن و HTML را درج کنید Insert Elements, Text, and HTML

• چالش سفارشی insertAfter(). Custom insertAfter() Challenge

• عناصر را جایگزین کنید Replace Elements

• حذف عناصر Remove Elements

• دستکاری سبک ها و کلاس ها Manipulating Styles and Classes

مناسبت ها Events

• بخش مقدمه Section Introduction

• شنوندگان رویداد Event Listeners

• رویدادهای ماوس Mouse Events

• شی رویداد The Event Object

• رویدادهای صفحه کلید و ویژگی های کلیدی Keyboard Events and Key Properties

• مینی پروژه KeyCode KeyCode Mini-Project

• رویدادهای ورودی Input Events

• Form Submission و FormData Object Form Submission and FormData Object

• حباب رویداد Event Bubbling

• نمایندگی رویداد و رویدادهای متعدد Event Delegation and Multiple Events

• بارگذاری صفحه و رویدادهای پنجره Page Loading and Window Events

پروژه لیست خرید Shopping List Project

• بخش مقدمه Section Introduction

• افزودن موارد به لیست (فقط DOM) Add Items to List (DOM Only)

• راه اندازی Git و GitHub (اختیاری) Setting Up Git and GitHub (Optional)

• حذف و پاک کردن موارد Remove and Clear Items

• وضعیت رابط کاربری را پاک کنید Clear UI State

• موارد را فیلتر کنید Filter Items

• دوره خرابی حافظه محلی Local Storage Crash Course

• موارد را به فضای ذخیره‌سازی محلی اضافه کنید Add Items to Local Storage

• نمایش موارد از محل ذخیره سازی Display Items from Local Storage

• موارد را از فضای ذخیره‌سازی محلی حذف کنید Remove Items from Local Storage

• مورد را روی Edit قرار دهید Set Item to Edit

• آیتم را به روز کنید و وضعیت را بازنشانی کنید Update Item and Reset State

• جلوگیری از موارد تکراری Prevent Duplicate Items

• در Netlify مستقر شوید Deploy to Netlify

جاوا اسکریپت ناهمزمان Asynchronous JavaScript

• بخش مقدمه Section Introduction

• Under the Hood: Thread of Execution Under the Hood: Thread of Execution

• Under the Hood: Async JS چگونه کار می کند Under the Hood: How Async JS Works

• توابع setTimeout و clearTimeout setTimeout and clearTimeout Functions

• توابع setInterval و clearInterval setInterval and clearInterval Functions

• تماس های تلفنی Callbacks

• دوره Crash در مورد درخواست های HTTP Crash Course on HTTP Requests

• برگه DevTools Network DevTools Network Tab

• AJAX و XHR Object AJAX and XHR Object

• چالش پروژه جوک مولد Joke Generator Project Challenge

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

• وعده ها Promises

• بازگشت به تماس به Promise Refactor Callback to Promise Refactor

• وعده زنجیر Promise Chaining

• وعده ها در مقابل جهنم پاسخ به تماس Promises Versus Callback Hell

• مدیریت چند وعده با () premt.all Handling Multiple Promises with promise.all()

واکشی API و Async Await Fetch API and Async Await

• بخش مقدمه Section Introduction

• واکشی اصول اولیه Fetch Basics

• مینی پروژه کاربر تصادفی Random User Mini-Project

• گزینه‌های واکشی - روش، سرصفحه‌های بدنه Fetch Options - Method, Body Headers

• مینی پروژه تایپیکد تودوس - قسمت 1 Typicode Todos Mini-Project - Part 1

• مینی پروژه تایپیکد تودوس - قسمت 2 Typicode Todos Mini-Project - Part 2

• واکشی مدیریت خطای API Fetch API Error Handling

• Async و Await Async and Await

• سعی کنید ... بیانیه ها را بگیرید Try...Catch Statements

• مدیریت خطا با Async و Await Error Handling with Async and Await

• چند وعده با Async و Await Multiple Promises with Async and Await

پروژه برنامه فیلم Flixx Flixx Movie App Project

• بخش مقدمه Section Introduction

• بررسی اجمالی تم و آماده سازی Theme Overview and Prep

• نمای کلی API و کلید API API Overview and API Key

• مسیریاب صفحه و لینک فعال Page Router and Active Link

• نمایش فیلم های محبوب Display Popular Movies

• اسپینر و برنامه های تلویزیونی محبوب Spinner and Popular TV Shows

• صفحه جزئیات فیلم Movie Details Page

• جزئیات صفحه پس زمینه Details Page Backdrop

• صفحه جزئیات نمایش تلویزیونی TV Show Details Page

• Swiper Slider Swiper Slider

• قابلیت جستجو Search Functionality

• نمایش نتایج جستجو Display Search Results

• صفحه بندی را برای جستجو اضافه کنید Add Pagination for Search

API های مرورگر وب Web Browser APIs

• بخش مقدمه Section Introduction

• GeoLocation API GeoLocation API

• نمایش مکان روی نقشه Show Location on a Map

• Canvas Element و API Canvas Element and API

• روش requestAnimationFrame() requestAnimationFrame() Method

• ساعت متحرک - قسمت 1 Animated Clock - Part 1

• ساعت متحرک - قسمت 2 Animated Clock - Part 2

• Web Audio API Web Audio API

• پروژه پخش کننده موسیقی Music Player Project

• پروژه ماشین درام Drum Machine Project

• API ویدئو Video API

• پروژه پخش کننده ویدیو Video Player Project

• Web Animations API - Ball Project Web Animations API - Ball Project

• Speech Recognition API - Color Say Project Speech Recognition API - Color Say Project

• Speech Synthesis API - متن به گفتار Speech Synthesis API - Text to Speech

OOP - سازندگان و نمونه های اولیه OOP - Constructors and Prototypes

• بخش مقدمه Section Introduction

• OOP چیست؟ What Is OOP?

• اصول اولیه OOP Basic Principles of OOP

• بیشتر در مورد Object Literals و این کلمه کلیدی More on Object Literals and this Keyword

• توابع سازنده Constructor Functions

• Literals در مقابل سازنده های داخلی Literals Versus Built-In Constructors

• کار با Object Properties Working with Object Properties

• نمونه های اولیه و زنجیره اولیه Prototypes and the Prototype Chain

• افزودن متدها به نمونه اولیه Adding Methods to the Prototype

• استفاده از Object.create() Using Object.create()

• وراثت اولیه و call() Prototypical Inheritance and call()

• چالش بازی OOP OOP Game Challenge

OOP - کلاس ها، دریافت کننده ها، تنظیم کننده ها و خصوصیات خصوصی OOP - Classes, Getters, Setters, and Private Properties

• کلاس ها Classes

• وراثت طبقاتی Class Inheritance

• روش های استاتیک Static Methods

• bind() و تعریف این bind() and Defining this

• دریافت کننده ها و ستترها با کلاس ها Getters and Setters with Classes

• دریافت کننده ها و تنظیم کننده ها با defineProperty() Getters and Setters with defineProperty()

• کنوانسیون تأکید بر مالکیت خصوصی Private Property Underscore Convention

• فیلدهای کلاس خصوصی ES2022 ES2022 Private Class Fields

• پرچم ها و توصیف کننده های دارایی Property Flags and Descriptors

• آب بندی و انجماد اجسام Sealing and Freezing Objects

برنامه Tracalorie (پروژه OOP) Tracalorie App (OOP Project)

• معرفی پروژه Project Introduction

• تنظیم تم UI UI Theme Setup

• برنامه ریزی پروژه و نمودار Project Planning and Diagram

• پایه ردیاب، غذا و کلاس تمرینی Base Tracker, Meal, and Workout Class

• نمایش آمار ردیاب Display Tracker Stats

• نوار پیشرفت و هشدار کالری Progress Bar and Calorie Alert

• کلاس برنامه، غذای جدید و تمرین App Class, New Meal, and Workout

• Refactor to Single _newItem Method Refactor to Single _newItem Method

• نمایش وعده غذایی و تمرین جدید Display New Meal and Workout

• وعده غذایی و تمرین را حذف کنید Remove Meal and Workout

• فیلتر و تنظیم مجدد Filter and Reset

• تعیین محدودیت کالری Set Calorie Limit

• کلاس ذخیره سازی و محدودیت کالری باقی می ماند Storage Class and Calorie Limit Persist

• حفظ کل کالری به ذخیره محلی Persist Total Calories to Local Storage

• وعده‌های غذایی را در محل ذخیره‌سازی ذخیره کنید Save Meals to Local Storage

• تمرینات را در فضای ذخیره‌سازی محلی ذخیره کنید Save Workouts to Local Storage

• وعده‌های غذایی و تمرین‌ها را از فضای ذخیره‌سازی محلی حذف کنید Remove Meals and Workouts from Local Storage

• پاک کردن موارد ذخیره سازی Clear Storage Items

ماژول ها و ابزار Modules and Tooling

• معرفی پروژه Project Introduction

• ماژول ها چیست؟ What Are Modules?

• نصب و استفاده از Node.js Installing and Using Node.js

• ماژول های CommonJS CommonJS Modules

• بسته ها/ماژول های NPM NPM Packages/Modules

• ماژول های ES ES Modules

• باندلرهای ماژول Module Bundlers

• راه اندازی اولیه Webpack Webpack Basic Setup

• CSS و بارگذارهای سبک CSS and Style Loaders

• افزونه HTML Webpack HTML Webpack Plugin

• افزونه Webpack DevServer Webpack DevServer Plugin

• راه اندازی بابل Babel Setup

• CSS Minify Extract Plugin CSS Minify Extract Plugin

• Tracalorie Refactor برای استفاده از Webpack Tracalorie Refactor to Use Webpack

• Tracalorie را برای Netlify مستقر کنید Deploy Tracalorie to Netlify

تکرار کننده ها، مولدها و ساختارهای داده Iterators, Generators, and Data Structures

• بخش مقدمه Section Introduction

• نمادها Symbols

• تکرار کننده ها Iterators

• ژنراتورها Generators

• پروژه اسکرول پروفایل Profile Scroller Project

• مجموعه ها Sets

• نقشه ها Maps

• پروژه نظرسنجی Poll Project

• پشته ها Stacks

• صف ها Queues

• لیست های پیوندی Linked Lists

الگوریتم های تست واحد Unit Testing Algorithms

• مقدمه و الگوریتم ها چیست؟ Introduction and What Are Algorithms?

• تست واحد چیست؟ What Is Unit Testing?

• شروع کار با Jest Getting Started with Jest

• گروه بندی تست ها با هم Grouping Tests Together

• الگوریتم رشته معکوس Reverse String Algorithm

• الگوریتم پالیندروم Palindrome Algorithm

• قطعه قطعه آرایه Array Chunking

• الگوریتم آناگرام Anagram Algorithm

• دریافت عناصر با برچسب - jsdom Get Elements by Tag - jsdom

• دارای شناسه های تکراری - jsdom Has Duplicate IDs - jsdom

ماژول های Node.js (ماژول جایزه) Node.js Modules (Bonus Module)

• بخش معرفی Section Intro

• ماژول fs (سیستم فایل). fs (filesystem) Module

• ماژول مسیر path Module

• ماژول OS os Module

• ماژول های url و querystring url and querystring Modules

• ماژول http http Module

پروژه RandomIdeas - Backend REST API (پروژه پاداش) RandomIdeas Project - Backend REST API (Bonus Project)

• بخش مقدمه Section Introduction

• اکسپرس راه اندازی و پایه API Express Setup and Basic API

• Nodemon و Route Clean-Up Nodemon and Route Clean-Up

• رسیدگی به درخواست های POST - اضافه کردن ایده Handle POST Requests - Add Idea

• قرار دادن و حذف درخواست - به روز رسانی و حذف ایده ها PUT and DELETE Requests - Update and Remove Ideas

• MongoDB چیست؟ What Is MongoDB?

• راه اندازی MongoDB Atlas MongoDB Atlas Setup

• Mongoose Connect و Dotenv Mongoose Connect and Dotenv

• طرح و مدل Mongoose Mongoose Schema and Model

• پرس و جوهای پایگاه داده Database Queries

پروژه RandomIdeas - Webpack Frontend (پروژه پاداش) RandomIdeas Project - Webpack Frontend (Bonus Project)

• گردش کار Fullstack Fullstack Workflow

• راه اندازی پوشه مشتری Client Folder Setup

• جزء معین Modal Component

• کامپوننت IdeaForm IdeaForm Component

• مؤلفه IdeaList IdeaList Component

• سرویس API - واکشی ایده ها API Service - Fetch Ideas

• ایجاد ایده از طریق فرم Create Idea through Form

• نام کاربری را در Local Storage ذخیره کنید Save Username to Local Storage

• افزودن اعتبار نام کاربری به سرور Add Username Validation to Server

• حذف ایده ها Delete Ideas

• استقرار یک برنامه Fullstack Deploying a Fullstack App