آموزش دوره کامل جاوا اسکریپت 2023: از صفر تا متخصص!

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

خوش آمدید، خوش آمدید، خوش آمدید! Welcome, Welcome, Welcome!

• ساختار و پروژه های دوره Course Structure and Projects

• قبل از شروع بخوانید! Read Before You Start!

• قبل از شروع تماشا کنید! Watch Before You Start!

• راهنمای مهاجرت به نسخه 2 + دوره قدیمی Migration Guide to v2 + Old Course

• راه اندازی ویرایشگر کد ما Setting Up Our Code Editor

مبانی جاوا اسکریپت – قسمت 1 JavaScript Fundamentals – Part 1

• بخش معرفی Section Intro

• سلام دنیا! Hello World!

• مقدمه ای کوتاه بر جاوا اسکریپت A Brief Introduction to JavaScript

• پیوند دادن یک فایل جاوا اسکریپت Linking a JavaScript File

• ارزش ها و متغیرها Values and Variables

• تکالیف تمرینی Practice Assignments

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

• let، const و var let, const and var

• اپراتورهای پایه Basic Operators

• اولویت اپراتور Operator Precedence

• چالش کدنویسی شماره 1 Coding Challenge #1

• رشته ها و الفاظ الگو Strings and Template Literals

• تصمیم گیری: بیانیه های if/else Taking Decisions: if / else Statements

• چالش کدنویسی شماره 2 Coding Challenge #2

• تبدیل نوع و اجبار Type Conversion and Coercion

• ارزش های درست و نادرست Truthy and Falsy Values

• اپراتورهای برابری: == در مقابل === Equality Operators: == vs. ===

• منطق بولی Boolean Logic

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

• چالش کدنویسی شماره 3 Coding Challenge #3

• بیانیه سوئیچ The switch Statement

• اظهارات و عبارات Statements and Expressions

• اپراتور مشروط (سه تایی). The Conditional (Ternary) Operator

• چالش کدنویسی شماره 4 Coding Challenge #4

• نسخه های جاوا اسکریپت: ES5، ES6+ و ESNext JavaScript Releases: ES5, ES6+ and ESNext

مبانی جاوا اسکریپت – قسمت 2 JavaScript Fundamentals – Part 2

• بخش معرفی Section Intro

• فعال کردن حالت سختگیرانه Activating Strict Mode

• کارکرد Functions

• اعلان تابع در مقابل عبارات Function Declarations vs. Expressions

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

• توابع فراخوانی توابع دیگر Functions Calling Other Functions

• بررسی توابع Reviewing Functions

• چالش کدنویسی شماره 1 Coding Challenge #1

• مقدمه ای بر آرایه ها Introduction to Arrays

• عملیات آرایه پایه (روش ها) Basic Array Operations (Methods)

• چالش کدنویسی شماره 2 Coding Challenge #2

• مقدمه ای بر اشیاء Introduction to Objects

• علامت گذاری نقطه در مقابل براکت Dot vs. Bracket Notation

• روش های شی Object Methods

• چالش کدنویسی شماره 3 Coding Challenge #3

• تکرار: حلقه for Iteration: The for Loop

• حلقه زدن آرایه ها، شکستن و ادامه دادن Looping Arrays, Breaking and Continuing

• حلقه به عقب و حلقه در حلقه ها Looping Backwards and Loops in Loops

• حلقه while The while Loop

• چالش کدنویسی شماره 4 Coding Challenge #4

نحوه پیمایش در این دوره How to Navigate This Course

• مسیرها و نقشه‌های راه بخش Pathways and Section Roadmaps

• مسیرهای دوره Course Pathways

مهارت های توسعه دهنده و راه اندازی ویرایشگر Developer Skills & Editor Setup

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• راه اندازی Prettier و VS Code Setting up Prettier and VS Code

• نصب Node.js و راه اندازی یک محیط توسعه دهنده Installing Node.js and Setting Up a Dev Environment

• آموزش کدنویسی Learning How to Code

• چگونه مانند یک توسعه دهنده فکر کنیم: حلال مشکل شوید! How to Think Like a Developer: Become a Problem Solver!

• با استفاده از Google، StackOverflow و MDN Using Google, StackOverflow and MDN

• اشکال زدایی (رفع خطاها) Debugging (Fixing Errors)

• اشکال زدایی با کنسول و نقاط شکست Debugging with the Console and Breakpoints

• چالش کدنویسی شماره 1 Coding Challenge #1

[اختیاری] دوره خرابی HTML و CSS [OPTIONAL] HTML & CSS Crash Course

• بخش معرفی Section Intro

• ساختار و عناصر اولیه HTML Basic HTML Structure and Elements

• ویژگی ها، کلاس ها و شناسه ها Attributes, Classes and IDs

• یک ظاهر طراحی اولیه با CSS Basic Styling with CSS

• مقدمه ای بر CSS Box Model Introduction to the CSS Box Model

جاوا اسکریپت در مرورگر: مبانی DOM و رویدادها JavaScript in the Browser: DOM and Events Fundamentals

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• پروژه شماره 1: شماره من را حدس بزنید! PROJECT #1: Guess My Number!

• دستکاری DOM و DOM چیست؟ What's the DOM and DOM Manipulation

• انتخاب و دستکاری عناصر Selecting and Manipulating Elements

• مدیریت رویدادهای کلیک Handling Click Events

• پیاده سازی منطق بازی Implementing the Game Logic

• دستکاری سبک های CSS Manipulating CSS Styles

• چالش کدنویسی شماره 1 Coding Challenge #1

• اجرای امتیازات برتر Implementing Highscores

• Refactoring Code Our: The DRY Principle Refactoring Our Code: The DRY Principle

• پروژه شماره 2: پنجره مودال PROJECT #2: Modal Window

• کار با کلاس ها Working With Classes

• مدیریت یک رویداد کلید "Esc". Handling an "Esc" Keypress Event

• پروژه شماره 3: بازی خوک PROJECT #3: Pig Game

• انداختن تاس Rolling the Dice

• تعویض پخش کننده فعال Switching the Active Player

• نگه داشتن امتیاز فعلی Holding Current Score

• بازنشانی بازی Resetting the Game

نحوه عملکرد جاوا اسکریپت در پشت صحنه How JavaScript Works Behind the Scenes

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• مروری بر سطح بالا از جاوا اسکریپت An High-Level Overview of JavaScript

• موتور جاوا اسکریپت و زمان اجرا The JavaScript Engine and Runtime

• زمینه های اجرا و پشته تماس Execution Contexts and The Call Stack

• دامنه و زنجیره دامنه Scope and The Scope Chain

• محدوده بندی در عمل Scoping in Practice

• محیط متغیر: بالابر و TDZ Variable Environment: Hoisting and The TDZ

• بالا بردن و TDZ در عمل Hoisting and TDZ in Practice

• این کلمه کلیدی The this Keyword

• این کلمه کلیدی در عمل The this Keyword in Practice

• توابع منظم در مقابل توابع پیکان Regular Functions vs. Arrow Functions

• اولیه در مقابل اشیاء (اولیه در مقابل انواع مرجع) Primitives vs. Objects (Primitive vs. Reference Types)

• بدوی در مقابل اشیاء در عمل Primitives vs. Objects in Practice

ساختارهای داده، اپراتورهای مدرن و رشته ها Data Structures, Modern Operators and Strings

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• تخریب ساختار آرایه ها Destructuring Arrays

• تخریب اشیاء Destructuring Objects

• اپراتور Spread (...) The Spread Operator (...)

• الگوی استراحت و پارامترها Rest Pattern and Parameters

• اتصال کوتاه (&& و ||) Short Circuiting (&& and ||)

• اپراتور Nullish Coalescing (??) The Nullish Coalescing Operator (??)

• عملگرهای تخصیص منطقی Logical Assignment Operators

• چالش کدنویسی شماره 1 Coding Challenge #1

• آرایه های حلقه ای: حلقه for-of Looping Arrays: The for-of Loop

• لغوی شیء پیشرفته Enhanced Object Literals

• زنجیربندی اختیاری (?.) Optional Chaining (?.)

• Looping Objects: کلیدهای شی، مقادیر و ورودی ها Looping Objects: Object Keys, Values, and Entries

• چالش کدنویسی شماره 2 Coding Challenge #2

• مجموعه ها Sets

• نقشه ها: اصول Maps: Fundamentals

• نقشه ها: تکرار Maps: Iteration

• خلاصه: از کدام ساختار داده استفاده کنیم؟ Summary: Which Data Structure to Use?

• چالش کدنویسی شماره 3 Coding Challenge #3

• کار با رشته ها - قسمت 1 Working With Strings - Part 1

• کار با رشته ها - قسمت 2 Working With Strings - Part 2

• کار با رشته ها - قسمت 3 Working With Strings - Part 3

• چالش کدنویسی شماره 4 Coding Challenge #4

• تمرین روش های رشته ای String Methods Practice

نگاهی دقیق تر به توابع A Closer Look at Functions

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• پارامترهای پیش فرض Default Parameters

• نحوه عملکرد آرگومان های عبور: ارزش در مقابل مرجع How Passing Arguments Works: Value vs. Reference

• توابع درجه یک و درجه بالاتر First-Class and Higher-Order Functions

• توابع پذیرش توابع پاسخ به تماس Functions Accepting Callback Functions

• توابع توابع بازگشتی Functions Returning Functions

• فراخوانی و اعمال روش ها The call and apply Methods

• روش bind The bind Method

• چالش کدنویسی شماره 1 Coding Challenge #1

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

• بسته شدن Closures

• نمونه های بیشتر بسته شدن More Closure Examples

• چالش کدنویسی شماره 2 Coding Challenge #2

کار با آرایه ها Working With Arrays

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• روش های آرایه ساده Simple Array Methods

• روش جدید The new at Method

• آرایه های حلقه ای: forEach Looping Arrays: forEach

• برای هر کدام با نقشه ها و مجموعه ها forEach With Maps and Sets

• پروژه: برنامه "بانکیست". PROJECT: "Bankist" App

• ایجاد عناصر DOM Creating DOM Elements

• چالش کدنویسی شماره 1 Coding Challenge #1

• تبدیل داده ها: نقشه، فیلتر، کاهش Data Transformations: map, filter, reduce

• روش نقشه The map Method

• محاسبه نام های کاربری Computing Usernames

• روش فیلتر The filter Method

• روش کاهش The reduce Method

• چالش کدنویسی شماره 2 Coding Challenge #2

• جادوی روش های زنجیره ای The Magic of Chaining Methods

• چالش کدنویسی شماره 3 Coding Challenge #3

• روش یافتن The find Method

• پیاده سازی ورود Implementing Login

• اجرای نقل و انتقالات Implementing Transfers

• روش FindIndex The findIndex Method

• برخی و هر some and every

• مسطح و مسطح نقشه flat and flatMap

• مرتب سازی آرایه ها Sorting Arrays

• راه های بیشتر ایجاد و پر کردن آرایه ها More Ways of Creating and Filling Arrays

• خلاصه: از کدام روش آرایه استفاده کنیم؟ Summary: Which Array Method to Use?

• تمرین روش های آرایه Array Methods Practice

• چالش کدنویسی شماره 4 Coding Challenge #4

اعداد، تاریخ ها، بین المللی و تایمرها Numbers, Dates, Intl and Timers

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• تبدیل و بررسی اعداد Converting and Checking Numbers

• ریاضی و گرد کردن Math and Rounding

• اپراتور باقی مانده The Remainder Operator

• جداکننده های عددی Numeric Separators

• کار با BigInt Working with BigInt

• ایجاد تاریخ Creating Dates

• اضافه کردن تاریخ به برنامه "بانکیست". Adding Dates to "Bankist" App

• عملیات با خرما Operations With Dates

• تاریخ های بین المللی (بین المللی) Internationalizing Dates (Intl)

• بین المللی کردن اعداد (بین المللی) Internationalizing Numbers (Intl)

• تایمر: setTimeout و setInterval Timers: setTimeout and setInterval

• پیاده سازی تایمر شمارش معکوس Implementing a Countdown Timer

DOM و رویدادهای پیشرفته Advanced DOM and Events

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• پروژه: وب سایت "بانکیست". PROJECT: "Bankist" Website

• چگونه DOM واقعاً کار می کند How the DOM Really Works

• انتخاب، ایجاد و حذف عناصر Selecting, Creating, and Deleting Elements

• سبک ها، ویژگی ها و کلاس ها Styles, Attributes and Classes

• پیاده سازی اسکرول صاف Implementing Smooth Scrolling

• انواع رویدادها و رویدادها Types of Events and Event Handlers

• انتشار رویداد: حباب زدن و گرفتن Event Propagation: Bubbling and Capturing

• انتشار رویداد در عمل Event Propagation in Practice

• نمایندگی رویداد: پیاده سازی پیمایش صفحه Event Delegation: Implementing Page Navigation

• پیمایش DOM DOM Traversing

• ساخت کامپوننت Tabbed Building a Tabbed Component

• انتقال آرگومان ها به گردانندگان رویداد Passing Arguments to Event Handlers

• پیاده سازی یک ناوبری چسبنده: رویداد اسکرول Implementing a Sticky Navigation: The Scroll Event

• یک راه بهتر: رابط برنامه‌نویسی نرم‌افزار Intersection Observer A Better Way: The Intersection Observer API

• آشکار کردن عناصر در اسکرول Revealing Elements on Scroll

• لود تنبل تصاویر Lazy Loading Images

• ساخت مولفه اسلایدر: قسمت 1 Building a Slider Component: Part 1

• ساختن یک جزء اسلایدر: قسمت 2 Building a Slider Component: Part 2

• رویدادهای DOM چرخه حیات Lifecycle DOM Events

• بارگیری کارآمد اسکریپت: به تعویق انداختن و همگام سازی Efficient Script Loading: defer and async

برنامه نویسی شی گرا (OOP) با جاوا اسکریپت Object-Oriented Programming (OOP) With JavaScript

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• برنامه نویسی شی گرا چیست؟ What is Object-Oriented Programming?

• OOP در جاوا اسکریپت OOP in JavaScript

• توابع سازنده و اپراتور جدید Constructor Functions and the new Operator

• نمونه های اولیه Prototypes

• وراثت اولیه و زنجیره اولیه Prototypal Inheritance and The Prototype Chain

• وراثت نمونه اولیه روی اشیاء داخلی Prototypal Inheritance on Built-In Objects

• چالش کدنویسی شماره 1 Coding Challenge #1

• کلاس های ES6 ES6 Classes

• تنظیم کننده ها و دریافت کننده ها Setters and Getters

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

• شیء.ایجاد Object.create

• چالش کدنویسی شماره 2 Coding Challenge #2

• وراثت بین "کلاس ها": توابع سازنده Inheritance Between "Classes": Constructor Functions

• چالش کدنویسی شماره 3 Coding Challenge #3

• وراثت بین "کلاس ها": کلاس های ES6 Inheritance Between "Classes": ES6 Classes

• وراثت بین "کلاس ها": Object.create Inheritance Between "Classes": Object.create

• یک نمونه کلاس دیگر Another Class Example

• کپسولاسیون: خواص و روش های محافظت شده Encapsulation: Protected Properties and Methods

• کپسولاسیون: زمینه ها و روش های کلاس خصوصی Encapsulation: Private Class Fields and Methods

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

• خلاصه کلاس های ES6 ES6 Classes Summary

• چالش کدنویسی شماره 4 Coding Challenge #4

برنامه Mapty: OOP، موقعیت جغرافیایی، کتابخانه های خارجی و موارد دیگر! Mapty App: OOP, Geolocation, External Libraries, and More!

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• بررسی اجمالی پروژه Project Overview

• نحوه برنامه ریزی یک پروژه وب How to Plan a Web Project

• با استفاده از Geolocation API Using the Geolocation API

• نمایش نقشه با استفاده از کتابخانه برگه Displaying a Map Using Leaflet Library

• نمایش نشانگر نقشه Displaying a Map Marker

• رندر فرم ورودی تمرین Rendering Workout Input Form

• معماری پروژه Project Architecture

• Refactoring برای پروژه معماری Refactoring for Project Architecture

• مدیریت داده های تمرین: ایجاد کلاس ها Managing Workout Data: Creating Classes

• ایجاد یک تمرین جدید Creating a New Workout

• تمرینات رندر Rendering Workouts

• با کلیک به نشانگر بروید Move to Marker On Click

• کار با localStorage Working with localStorage

• ملاحظات نهایی Final Considerations

جاوا اسکریپت ناهمزمان: Promises، Async/Await و AJAX Asynchronous JavaScript: Promises, Async/Await, and AJAX

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• جاوا اسکریپت ناهمزمان، AJAX و API Asynchronous JavaScript, AJAX and APIs

• مهم: تغییر URL API IMPORTANT: API URL Change

• اولین تماس AJAX ما: XMLHttpRequest Our First AJAX Call: XMLHttpRequest

• [اختیاری] چگونه وب کار می کند: درخواست ها و پاسخ ها [OPTIONAL] How the Web Works: Requests and Responses

• به Callback Hell خوش آمدید Welcome to Callback Hell

• Promises و Fetch API Promises and the Fetch API

• وعده های مصرفی Consuming Promises

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

• رسیدگی به وعده های رد شده Handling Rejected Promises

• پرتاب خطاها به صورت دستی Throwing Errors Manually

• چالش کدنویسی شماره 1 Coding Challenge #1

• ناهمزمان پشت صحنه: حلقه رویداد Asynchronous Behind the Scenes: The Event Loop

• حلقه رویداد در عمل The Event Loop in Practice

• ساختن یک قول ساده Building a Simple Promise

• نوید دادن به API مکان جغرافیایی Promisifying the Geolocation API

• چالش کدنویسی شماره 2 Coding Challenge #2

• مصرف وعده ها با Async/Await Consuming Promises with Async/Await

• رسیدگی به خطا با تلاش... catch Error Handling With try...catch

• برگرداندن مقادیر از توابع Async Returning Values from Async Functions

• اجرای موازی وعده ها Running Promises in Parallel

• سایر ترکیب‌کننده‌های وعده: نژاد، همه حل و فصل و هر کدام Other Promise Combinators: race, allSettled and any

• چالش کدنویسی شماره 3 Coding Challenge #3

توسعه مدرن جاوا اسکریپت: ماژول ها، ابزارها، و عملکردی Modern JavaScript Development: Modules, Tooling, and Functional

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• مروری بر توسعه مدرن جاوا اسکریپت An Overview of Modern JavaScript Development

• مروری بر ماژول ها در جاوا اسکریپت An Overview of Modules in JavaScript

• صادرات و واردات در ماژول های ES6 Exporting and Importing in ES6 Modules

• سطح بالا در انتظار (ES2022) Top-Level await (ES2022)

• الگوی ماژول The Module Pattern

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

• مقدمه ای کوتاه بر خط فرمان A Brief Introduction to the Command Line

• مقدمه ای بر NPM Introduction to NPM

• بسته بندی با بسته و اسکریپت NPM Bundling With Parcel and NPM Scripts

• پیکربندی Babel و Polyfilling Configuring Babel and Polyfilling

• نقد و بررسی: نوشتن جاوا اسکریپت تمیز و مدرن Review: Writing Clean and Modern JavaScript

• بیایید برخی از کدهای بد را اصلاح کنیم: قسمت 1 Let's Fix Some Bad Code: Part 1

• اصول اعلانی و کاربردی جاوا اسکریپت Declarative and Functional JavaScript Principles

• بیایید برخی از کدهای بد را اصلاح کنیم: قسمت 2 Let's Fix Some Bad Code: Part 2

برنامه Forkify: ساخت یک برنامه مدرن Forkify App: Building a Modern Application

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• بررسی اجمالی و برنامه ریزی پروژه (I) Project Overview and Planning (I)

• آخرین به روز رسانی کد (Parcel v2 و بیشتر) Latest Code Updates (Parcel v2 and more)

• بارگیری یک دستور غذا از API Loading a Recipe from API

• ارائه دستور غذا Rendering the Recipe

• گوش دادن برای بارگذاری و رویدادهای تغییر هش Listening For load and hashchange Events

• معماری MVC The MVC Architecture

• Refactoring برای MVC Refactoring for MVC

• Helpers و فایل های پیکربندی Helpers and Configuration Files

• مدیریت رویداد در MVC: الگوی ناشر-مشترک Event Handlers in MVC: Publisher-Subscriber Pattern

• پیاده سازی پیام های خطا و موفقیت Implementing Error and Success Messages

• پیاده سازی نتایج جستجو - قسمت 1 Implementing Search Results - Part 1

• پیاده سازی نتایج جستجو - قسمت 2 Implementing Search Results - Part 2

• پیاده سازی صفحه بندی - قسمت 1 Implementing Pagination - Part 1

• پیاده سازی صفحه بندی - قسمت 2 Implementing Pagination - Part 2

• برنامه ریزی پروژه II Project Planning II

• به روز رسانی وعده های غذایی Updating Recipe Servings

• توسعه یک الگوریتم به روز رسانی DOM Developing a DOM Updating Algorithm

• پیاده سازی نشانک ها - قسمت 1 Implementing Bookmarks - Part 1

• پیاده سازی نشانک ها - قسمت 2 Implementing Bookmarks - Part 2

• ذخیره نشانک ها با localStorage Storing Bookmarks With localStorage

• برنامه ریزی پروژه III Project Planning III

• آپلود یک دستور غذای جدید - قسمت 1 Uploading a New Recipe - Part 1

• آپلود یک دستور غذای جدید - قسمت 2 Uploading a New Recipe - Part 2

• آپلود یک دستور غذای جدید - قسمت 3 Uploading a New Recipe - Part 3

• جمع بندی: ملاحظات نهایی Wrapping Up: Final Considerations

راه اندازی Git و Deployment Setting Up Git and Deployment

• بخش معرفی Section Intro

• بخش نقشه راه Section Roadmap

• استقرار ساده با Netlify Simple Deployment With Netlify

• راه اندازی Git و GitHub Setting Up Git and GitHub

• Git Fundamentals Git Fundamentals

• فشار دادن به GitHub Pushing to GitHub

• راه اندازی یکپارچه سازی مداوم با Netlify Setting Up Continuous Integration With Netlify

پایان! The End!

• از اینجا کجا برویم Where to Go from Here

• دوره های دیگر من + به روز رسانی My Other Courses + Updates

[LEGACY] به دوره قدیمی دسترسی پیدا کنید [LEGACY] Access the Old Course

• به دوره قدیمی دسترسی پیدا کنید Access the Old Course