آموزش *به روز شده* JavaScript Complete Grandmaster 2023

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

برنامه نویسی، کد ماشین و مفسر Programming, machine code and interpretors

• معرفی Introduction

• چه کسی باید این بخش را انجام دهد؟ Who should do this section?

• برنامه نویسی - چیست؟ Programming - what is it?

• قیاس انگلیسی English Analogy

• سفارش مهم است Order Matters

• گیگو GIGO

• جمع بندی سریع Quick Recap

• صدها زبان Hundreds of Languages

• کد ماشین - مقدمه Machine Code - Intro

• کد ماشین - کمی عمیق تر Machine Code - A Little Deeper

• پردازنده ها Processors

• زبان های سطح پایین Low Level Languages

• زبان های سطح بالا High Level Languages

• گام به عقب - مقایسه بین زبان های سطح پایین و سطح بالا Step Back - a comparison between Low Level and High Level Languages

• نوشتن جاوا اسکریپت - چگونه چگونه چگونه Writing JavaScript - How How How

• تدوین Compiling

• مترجمان Interpretors

• کامپایل در مقابل تفسیر Compiling vs Interpreting

• کد کامپایل شده در مقابل تفسیر شده Compiled vs Interpreted Code

• حد واسط Intermediate

• انگیزه Motivation

• خلاصه: کامپایل، تفسیر و جاوا اسکریپت Recap: Compiling, Interpreting and JavaScript

• آزمون برنامه نویسی Programming Quiz

• Outro Outro

برنامه نویسی، کد ماشین و مفسر Programming, machine code and interpretors

HTML، CSS، و جاوا اسکریپت (و جایزه ECMAScript) HTML, CSS, and JavaScript (and bonus ECMAScript)

• چه کسی باید این بخش را انجام دهد؟ Who should do this section?

• بخش مقدمه Section Introduction

• ارتباط بین HTML، CSS و جاوا اسکریپت Relationship between HTML, CSS and JavaScript

• مثال عملی: مرورگرها سبک های پیش فرض CSS Practical Example: Browsers Default CSS Styles

• مثال عملی: تغییر متن دکمه Practical Example: Changing Button Text

• زبان برنامه نویسی Scripting Language

• آیا جاوا اسکریپت یک زبان "ایمن" است؟ Is JavaScript a 'safe' language?

• جاوا در مقابل جاوا اسکریپت Java vs JavaScript

• بخش 1 - ECMAScript و ES6 PART 1 - ECMAScript and ES6

• بخش 2 - ECMAScript و ES6 PART 2 - ECMAScript and ES6

• آزمون HTML، CSS و جاوا اسکریپت HTML, CSS and JavaScript Quiz

HTML، CSS، و جاوا اسکریپت (و جایزه ECMAScript) HTML, CSS, and JavaScript (and bonus ECMAScript)

موتورهای جاوا اسکریپت JavaScript Engines

• بخش مقدمه Section Introduction

• موتورها - مقدمه Engines - Introduction

• چرا موتورهای JS مختلف وجود دارد؟ Why are there different JS Engines?

• موتور V8 V8 Engine

• جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript lives in different environments

• Frontend در مقابل Backend Frontend vs Backend

• Outro Outro

• مسابقه موتورها Engines Quiz

• ادامه بده Keep going

موتورهای جاوا اسکریپت JavaScript Engines

نوشتن جاوا اسکریپت در کنسول Writing JavaScript in the Console

• معرفی بخش Section introduction

• کنسول - مقدمه Console - Introduction

• تابع هشدار - مقدمه Alert Function - Introduction

• اولین فایل جاوا اسکریپت First JavaScript File

• گزارش کنسول Console Log

• عبارات در مقابل عبارات Statements vs Expressions

• مدل شیء مرورگر (BOM) Browser Object Model (BOM)

• Window Object - Playaround Window Object - Playaround

• آیا می توانیم با جاوا اسکریپت به یک شی پنجره جدید دسترسی داشته باشیم؟ Can we access a new Window object with JavaScript?

• ویژگی های پنجره منسوخ شده Deprecated Window Properties

• کنسول - ورود، اطلاعات، هشدار و خطا Console - Log, Info, Warn and Error

• کنسول - ادعا Console - Assert

• کنسول - تعداد، مسیر، گروه، زمان، جدول Console - Count, Dir, Group, Time, Table

• تعویض ها Substitutions

• جایگزینی ها در مقابل الگوهای واقعی Substitutions vs Template Literals

• الحاق در مقابل الفاظ الگو Concatenation vs Template Literals

• آزمون کنسول جاوا اسکریپت JavaScript Console Quiz

نوشتن جاوا اسکریپت در کنسول Writing JavaScript in the Console

IDE و ویرایشگرهای متن - مقدمه IDE and Text Editors - Introduction

• قبل از اینکه شروع کنی Before you begin

• IDEs - مقدمه IDEs - Intro

• 3 افزونه جالبی که می توانید با VSCode استفاده کنید چیست؟ What are 3 cool extensions you can use with VSCode?

• سرور محلی Local Server

• چگونه جاوا اسکریپت را در HTML خود بگنجانیم How to include JavaScript in your HTML

• کد جاوا اسکریپت خود را کجا می نویسید؟ Where do you write your JavaScript code?

• جاوا اسکریپت باید با چه تگ HTML نوشته شود؟ What HTML tag does JavaScript have to be written in?

• برچسب <Script> - نمونه ای از Inline و External <Script> Tag - Example of Inline and External

• چگونه یک فایل جاوا اسکریپت خارجی اضافه کنیم؟ How to include an external JavaScript file?

• مثال جاوا اسکریپت درون خطی در تگ <head> و تگ <body> Inline JavaScript example within the <head> tag and <body> tag

• سفارش مهم است Order Matters

• سوال ترفند - انتظار دارید چه اتفاقی بیفتد؟ Trick Question - What do you expect to happen?

• نظم مهم است - مشکل Order Matters - The Problem

• نظم مهم است - چرا عنصر بارگیری نشد؟ Order Matters - Why did the element not load?

• نظم مهم است - رفع مشکل Order Matters - Fixing the Problem

• جاوا اسکریپت خارجی و ویژگی Async External JavaScript and the Async Attribute

• آزمون IDE IDE Quiz

IDE و ویرایشگرهای متن - مقدمه IDE and Text Editors - Introduction

نحو Syntax

• نحو - مقدمه Syntax - Introduction

• نحو - چیست؟ Syntax - What is it?

• تجزیه کننده نحو Syntax Parser

• فضای سفید White Space

• نقطه ویرگول و عبارت "بازگشت". Semicolons and the 'return' statement

• نظرات Comments

• انواع داده ها و متد typeof(). Data Types and the typeof() method

• انواع داده های اولیه - یک مثال Primitive Data Types - An Example

• نوع داده رشته = مثال دکمه "Click Me". String data type = "Click Me" button example

• خواص Properties

• نوع تاریخ شماره - امتیاز شناور Number date type - Floating Points

• نوع داده شماره: 0.1 + 0.2 Number data type: 0.1 + 0.2

• نوع داده اعداد - پایه 10 در مقابل پایه 2 Number data type - Base 10 vs Base 2

• نوع داده شماره - Number()، Infinity و موارد دیگر Number data type - Number(), Infinity and more

• انواع داده های تهی و تعریف نشده Null and Undefined data types

• چرا typeof(null) یک شی است؟؟؟ Why is typeof(null) an object ???

• فرار کردن Escaping

• اپراتورها - معرفی Operators - Intro

• اپراتورها - باینری در مقابل Unary Operators - Binary vs Unary

• اجبار - مقدمه Coercion - Introduction

• اجبار - رشته، عدد و بولی Coercion - String, Number and Boolean

• امتحان نحوی Syntax Quiz

• تکلیف اجباری Coercion Assignment

نحو Syntax

متغیرها Variables

• متغیرها - بخش مقدمه Variables - Section Intro

• متغیرها - چه هستند؟ Variables - what are they?

• ایجاد متغیر: Declare، Initialize و Assign Variable creation: Declare, Initialize and Assign

• شناسه ها Identifiers

• VAR - روش قدیمی برای اعلام یک متغیر VAR - the old way to declare a variable

• LET - روش جدید برای اعلام یک متغیر LET - the new way to declare a variable

• CONST - روش جدید برای اعلام یک متغیر ثابت CONST - the new way to declare a constant variable

• CONST - سعی کنید و بگیرید CONST - try and catch

• متغیرها - جمع بندی سریع Variables - quick recap

• دامنه - چیست؟ Scope - What is it?

• محدوده محلی در مقابل جهانی، و عملکرد در مقابل محدوده بلوک Local vs Global Scope, and Function vs Block Scope

• محدوده - VAR در مقابل LET و یک بلوک NESTED Scope - VAR vs LET and a NESTED block

• استفاده از DevTools برای تعیین محدوده Using DevTools to determine scope

• آزمون متغیرها Variables Quiz

متغیرها Variables

جعبه های گفتگو در جاوا اسکریپت Dialog Boxes in JavaScript

• هشدار - ایجاد یک رویداد onclick برای یک دکمه Alert - creating an onclick event for a button

• هشدار - نوشتن متن روی صفحه پس از تایید هشدار Alert - writing text to a screen after the alert has been acknowledged

• عبارت Confirm - شرطی if Confirm - conditional if statement

• سریع Prompt

• هشدار - طراحی سفارشی با HTML خالص، CSS و JS Alert - custom design with pure HTML, CSS and JS

جعبه های گفتگو در جاوا اسکریپت Dialog Boxes in JavaScript

تاریخ های جاوا اسکریپت JavaScript Dates

• شیء تاریخ Date Object

• چرا کلمه کلیدی جدید هنگام نمونه سازی شیء Date مهم است؟ Why is the new keyword important when instantiating the Date object?

• زمان دوران Epoch time

• 4 روش برای ایجاد یک شیء تاریخ در جاوا اسکریپت 4 ways to create a date object in JavaScript

• روش‌ها را روی شی تاریخ دریافت کنید Get methods on the date object

• روش‌ها را روی شی تاریخ تنظیم کنید Set methods on the date object

• 3 مثال عملی: تولد، UTC و قالب بندی مجدد 3 practical examples: birthday, UTC and re-formatting

• مسابقه خرما Dates Quiz

تاریخ های جاوا اسکریپت JavaScript Dates

اشیاء Objects

• بخش مقدمه Section Introduction

• اشیاء - مقدمه Objects - Introduction

• نام: جفت ارزش name:value pairs

• اشیاء و داده ها - نحوه ارتباط آنها با یکدیگر Objects and data - how they relate to each other

• اشیاء در مقابل متغیرها Objects vs Variables

• خواص و روش ها Properties and methods

• دسترسی به خواص Accessing properties

• ایجاد اشیا - 4 راه Creating objects - 4 ways

• ایجاد اشیاء - 1. Object Literal Creating objects - 1. Object Literal

• ایجاد اشیاء - 2. معرفی تابع سازنده Creating objects - 2. Constructor Function Intro

• ایجاد اشیا - 2. مثال تابع سازنده Creating objects - 2. Constructor Function Example

• سریع مکث کن Pause quickly

• تابع ساخت و ساز در مقابل شی تحت اللفظی - قسمت 1 Construction function vs object literal - part 1

• تابع ساخت و ساز در مقابل شی تحت اللفظی - نمونه سازی در مقابل رویکرد تک تن Construction function vs object literal - instantiation vs singleton approach

• تابع ساخت و ساز در مقابل شی لفظی - تابع init و اینکه کدام را انتخاب کنید Construction function vs object literal - init function and which to choose

• ایجاد اشیا - 3. Object.create() Creating objects - 3. Object.create()

• نمونه هایی از Object.create() Examples of Object.create()

• مثال دیگری از Object.create() Another example of Object.create()

• ایجاد اشیاء - 4. کلاس ها Creating objects - 4. Classes

• درک کلاس ها با تابع سازنده شروع می شود Understanding classes starts with the constructor function

• نمونه کلاس Class example

• جمع بندی اشیاء و نمونه ای از نحوه انتقال اشیا به توابع دیگر Objects recap and an example of how objects can be passed into other functions

• مدل شی جاوا اسکریپت JavaScript Object Model

• امتحان اشیاء Objects Quiz

اشیاء Objects

بخش پیشرفته - ساخت پلی پر سفارشی Advanced Section - Building a Custom Polyfill

• معرفی Introduction

• مرورگر چیست؟ What is a browser?

• می خواهید بیشتر بدانید؟ Wanna know more?

• آیا مرورگرها از مجموعه ای از قوانین رایج پیروی می کنند؟ Do browsers follow a set of common rules?

• قبل از ادامه ... Before you continue ...

• پلی فیل چیست؟ What is a polyfill?

• آزمایش اینکه آیا متد forEach() در مرورگر ما وجود دارد یا خیر Testing whether the forEach() method exists in our Browser

• چه چیزی forEach () What is forEach()

• مثال عملی forEach() Practical example of forEach()

• محدوده ها مهم هستند Scopes Are Important

• سفارشی forEach() polyfill - مرحله اول Custom forEach() polyfill - first step

• سفارشی forEach() polyfill - مقدمه Custom forEach() polyfill - Intro

• صبر کن ... Wait ...

• سفارشی forEach() polyfill - تابع callback Custom forEach() polyfill - callback function

• این چیه What is THIS

• سفارشی forEach() polyfill - نهایی Custom forEach() polyfill - final

• Outro Outro

• پلی پرها Polyfills

بخش پیشرفته - ساخت پلی پر سفارشی Advanced Section - Building a Custom Polyfill

آرایه ها و حلقه ها Arrays and Loops

• معرفی آرایه ها Arrays intro

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

• فشار و پاپ Push and pop

• 3 نوع روش آرایه 3 types of array methods

• Mutator، Accessor و Iterator Mutator, Accessor and Iterator

• چرا توانایی حلقه زدن داده ها مهم است Why is being able to loop through data important

• حلقه زدن از طریق آرایه ها Looping through arrays

• حلقه زدن از میان اشیا Looping through objects

• اشکال شی (پیشرفته) Object Shapes (Advanced)

• آرایه ها و حلقه ها - آزمون Arrays and Loops - Quiz

آرایه ها و حلقه ها Arrays and Loops

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

• بخش مقدمه Section Introduction

• نمونه اولیه و متد isPrototypeOf(). Prototype example and isPrototypeOf() method

• نمونه اولیه چیست What is a prototype

• نمونه اولیه در برابر __proto__ Prototype vs __proto__

• نمونه اولیه در مقابل __proto__ قسمت 2 Prototype vs __proto__ Part 2

• نمونه اولیه در مقابل این Prototype vs this

• نمونه اولیه درخت و پوچ Prototype tree and null

• بیایید نمونه اولیه درخت را ثابت کنیم Lets prove the prototype tree

• نمونه اولیه - آزمون Prototype - Quiz

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

کارکرد Functions

• بخش مقدمه Section Introduction

• تابع چیست؟ What is a function?

• فراخوانی یک تابع در مقابل برگرداندن یک تابع Invoking a function vs returning a function

• مثال جالب: روی یک پاراگراف کلیک کنید و متن را تغییر دهید Cool example: click a paragraph and make text change

• آیا نیم دونقطه مورد نیاز است؟ Are semi-colons required?

• مثال جالب (پیشرفته): روی دکمه کلیک کنید و نقل قول های تصادفی را نمایش دهید Cool example (advanced): click button and display random quotes

• توضیح Math.Random() Explanation of Math.Random()

• کلمه کلیدی برگرداندن Return keyword

• کلمه کلیدی و نحو فلش را برگردانید Return keyword and the arrow syntax

• 2 نوع عملکرد وجود دارد There are 2 types of functions

• عبارات تابع در مقابل اعلان ها - مثال ها Function Expressions vs Declarations - Examples

• اعلان تابع در مقابل بیان تابع Function Declaration vs Function Expression

• توابع مانند مقادیر هستند Functions are like values

• نحو جدید پیکان New Arrow Syntax

• "بدون الزام این" به چه معناست؟ What does "No binding of this" mean?

• Recap - متغیرها، اشیاء و توابع Recap - variables, objects and functions

• مقدمه ای بر تابع ()toLowerCase Introduction to the toLowerCase() function

• مقدمه ای بر روش Array.from(). Introduction to the Array.from() method

• روش Array.from() چگونه کار می کند؟ How does the Array.from() method work?

• مقدمه ای بر روش indexOf(). Introduction to the indexOf() method

• استفاده از indexOf() با آرایه ها Using indexOf() with Arrrays

• استفاده از indexOf() با رشته ها Using indexOf() with Strings

• وعده ها Promises

• توابع - امتحان Functions - Quiz

کارکرد Functions

جاوا اسکریپت - THIS، زمینه اجرا و محیط های واژگانی JavaScript - THIS, execution context and lexical environments

• بخش مقدمه Section Introduction

• این چیه؟ What is this?

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

• زمینه اجرای جهانی در مقابل عملکرد عملکردی Global vs Functional Execution Context

• پشته اجرا Execution Stack

• پشته اجرا - مثال Execution Stack - Example

• محیط واژگانی چیست؟ What is a lexical environment?

• محیط لغوی - مثال پیشرفته Lexical environment - advanced example

• 6 قانون برای تعیین اینکه این به چه چیزی اشاره دارد 6 rules for determining what this refers to

• متدهای Call()، Apply() و Bind(). Call(), Apply() and Bind() methods

• این، زمینه اجرا و محیط های واژگانی - آزمون This, Execution Context and Lexical Environments - Quiz

جاوا اسکریپت - THIS، زمینه اجرا و محیط های واژگانی JavaScript - THIS, execution context and lexical environments

تیزر - جاوا اسکریپت چگونه بر مسیر رندر بحرانی تأثیر می گذارد Teaser - How does JavaScript effect the Critical Rendering Path

• معرفی Introduction

• یادداشت جانبی Side note

• CRP چیست؟ What is the CRP

• مرورگرها چگونه کار می کردند How browsers used to work

• مرورگرها چگونه کار می کنند How browsers today work

• آیا AJAX هنوز هم مربوط به امروز است؟ Is AJAX still relevant today?

• Render Blocking Resources - Intro Render Blocking Resources - Intro

• جاوا اسکریپت و DOM JavaScript and the DOM

• جاوا اسکریپت در حال مسدود کردن رندر است JavaScript is render blocking

• هشدار سریع Quick caveat

• جاوا اسکریپت را در پایین فایل خود قرار دهید Placing JavaScript at the bottom of your file

• با استفاده از ویژگی Async Using the Async attribute

• ما اینجا توقف می کنیم We'll stop here

• خلاصه ای از جایی که می توانیم JS خود را برای بهبود CRP قرار دهیم Summary of where we can place our JS to improve the CRP

• Outro Outro

تیزر - جاوا اسکریپت چگونه بر مسیر رندر بحرانی تأثیر می گذارد Teaser - How does JavaScript effect the Critical Rendering Path

بستن نظرات Closing Comments

• آفرین Well Done

• سخنرانی پاداش - کجا بعدی؟ Bonus lecture - where to next?

بستن نظرات Closing Comments