آموزش جاوا اسکریپت حرفه ای 2023 (از مبتدی تا پیشرفته!)

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

معرفی Introduction

• مقدمه (چرا JS بسیار سودآور است و پروژه های دوره ای) Introduction (Why JS Is So Profitable & Course Projects)

• یادگیری کد شماره 1 - طرز فکر (سندرم و اعتماد به نفس تقلب کننده) Learning to Code #1 - Mindset (Imposter Syndrome & Confidence)

• آموزش کد شماره 2 - منحنی یادگیری شیب دار = مانع ورود Learning to Code #2 - Steep Learning Curve = Barrier to Entry

• آموزش کد شماره 3 - StackOverflow برای مبتدیان Learning to Code #3 - StackOverflow for Beginners

• راه اندازی محیط توسعه ما شماره 1: مرورگر (سهم بازار) Setting Up Our Development Environment #1: Browser (Market Share)

• راه اندازی محیط توسعه ما شماره 2: ویرایشگر کد Setting Up Our Development Environment #2: Code Editor

• قبل از شروع بخوانید: منابع پروژه (مانند نشانی‌های اینترنتی تصویر) READ BEFORE STARTING: Project resources (e.g. image URLs)

جاوا اسکریپت مبتدی Beginner JavaScript

• اصول HTML و CSS برای توسعه دهندگان جاوا اسکریپت HTML & CSS Fundamentals for JavaScript Developers

• متغیرها و انواع داده ها (مقدمه) Variables and Data Types (Intro)

• 'var' & strings 'var' & Strings

• شماره Numbers

• snake_case vs kebab-case vs camelcase snake_case vs kebab-case vs camelCase

• var vs let vs const var vs let vs const

• بولین ها Booleans

• آرایه ها Arrays

• اشیاء Objects

• خروجی مقادیر متغیر در کنسول Outputting Variable Values in Console

• توابع سنتی (اعلام عملکرد) Traditional Functions (Function Declarations)

• ورودی تابع (که «پارامتر» یا «آرگومنت» نیز نامیده می‌شود) Function Input (Also Called 'Parameter' or 'Argument')

• برگرداندن چیزی از عملکرد Returning Something From Function

• خلاصه توابع Summary of Functions

• تابع سنتی جایگزین (عبارات تابع) Alternative Traditional Function (Function Expressions)

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

• توابع پیکان ( نحو کوتاهتر) Arrow Functions (Shorter Syntax)

• نحوه نامگذاری توابع How to Name Functions

• الحاق رشته String Concatenation

• الفاظ قالب (`` -- بک تیک در جاوا اسکریپت) Template Literals (`` -- Backticks in JavaScript)

• بیانیه if-else (> و <اپراتورها) if-else Statement (> and < Operators)

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

• سایر اپراتورها (>=، <=، !، !=، &&، ||) Other Operators (>=, <=, !, !=, &&, ||)

• اپراتور سه تایی (؟ :) Ternary Operator (? :)

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

• var vs let var vs let

• انتخاب عناصر HTML با جاوا اسکریپت Selecting HTML-Elements With JavaScript

• دستکاری HTML با جاوا اسکریپت (دستکاری DOM) Manipulating HTML With JavaScript (DOM Manipulation)

• متن در مقابل innerHTML textContent vs innerHTML

• innerHTML در مقابل insertAdjacentHTML (درج HTML با جاوا اسکریپت) innerHTML vs insertAdjacentHTML (Inserting HTML With JavaScript)

• گزینه 1 - دستکاری CSS با جاوا اسکریپت ('style') Option 1 - Manipulating CSS With JavaScript ('style')

• گزینه 2 - دستکاری CSS با جاوا اسکریپت ('classList') Option 2 - Manipulating CSS With JavaScript ('classList')

• رویدادها و عملکردهای مدیریت رویداد Events and Event Handler Functions

• اشتباه رایج با addEventListener Common Mistake With addEventListener

• این بخش تمام شد! آفرین! Finished This Section! Well Done!

مینی پروژه: کانتر فانتزی Mini-Project: Fancy Counter

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

• HTML و CSS پروژه (از رد نشوید) Project HTML & CSS (Don't Skip)

• شمارنده فانتزی - کد نویسی جاوا اسکریپت Fancy Counter - Coding JavaScript

مینی پروژه: تحلیل ورد Mini-Project: Word Analytics

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

• HTML و CSS پروژه (از رد نشوید) Project HTML & CSS (Don't Skip)

• Word Analytics - کدنویسی جاوا اسکریپت Word Analytics - Coding JavaScript

جاوا اسکریپت متوسط Intermediate JavaScript

• رشته ها (متوسط) Strings (Intermediate)

• اعداد (متوسط) Numbers (Intermediate)

• بولی (متوسط) Booleans (Intermediate)

• آرایه ها (متوسط) Arrays (Intermediate)

• اشیاء (متوسط) Objects (Intermediate)

• افزایش (++) و کاهش (--) Increment (++) & Decrement (--)

• کنسول Console

• توابع (متوسط) Functions (Intermediate)

• بالا بردن Hoisting

• تایمر (setTimeout & setInterval) Timers (setTimeout & setInterval)

• حلقه ها (برای هر و برای) Loops (forEach & for)

• واکشی API Fetch API

• واکشی مثال API (دریافت داده و نمایش در صفحه) Fetch API Example (Get Data & Display On Page)

• واکشی خلاصه سریع API Fetch API Quick Summary

• DOM متوسط ​​شماره 1: دستکاری DOM Intermediate DOM #1: Manipulating the DOM

• DOM متوسط ​​شماره 2: شی رویداد Intermediate DOM #2: Event Object

• DOM متوسط ​​شماره 3: حباب رویداد و نمایندگی رویداد Intermediate DOM #3: Event Bubbling & Event Delegation

پروژه 1: CorpComment Project 1: CorpComment

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

• راه اندازی پروژه Project Setup

• VS Code Extension: Live-Server VS Code Extension: Live-Server

• Counter Component (JS Fundamentals، DOM Manipulation، رویدادها) Counter Component (JS Fundamentals, DOM Manipulation, Events)

• ارسال مؤلفه (فرم داده ها و If/Else و setTimeout() و روش های آرایه و `` & ? :) Submit Component (Form Data & If/Else & setTimeout() & Array Methods & `` & ? :)

• Refactoring (اصل DRY و ثابت و استخراج منطق تکراری به تابع) Refactoring (DRY Principle & Constants & Extract Repetitive Logic Into Function)

• جزء لیست بازخورد (دریافت داده با Fetch & AJAX & JSON & Promises & Errors) Feedback List Component (Get Data With Fetch & AJAX & JSON & Promises & Errors)

• Refactoring بیشتر (میانبر هنگامی که نام ویژگی شی = ارزش و [].forEach()) More Refactoring (Shortcut When Object Property Name = Value & [].forEach())

• فرم/ارسال مؤلفه (پست داده با واکشی و JSON و سرصفحه ها و مدیریت خطا) Form/Submit Component (Post Data With Fetch & JSON & Headers & Error Handling)

• مؤلفه فهرست بازخورد - گسترش و رأی موافق (تعویض رویداد/حباب و ++/--) Feedback List Component - Expand & Upvote (Event Delegation / Bubbling & ++/--)

• جزء لیست هشتگ (===/!== & forEach() & querySelector()) Hashtag List Component (=== / !== & forEach() & querySelector())

• Final Loose Ends (Modularity/IIFE & Naming Things & XSS) Final Loose Ends (Modularity / IIFE & Naming Things & XSS)

جاوا اسکریپت پیشرفته Advanced JavaScript

• میانبرهای کد VS VS Code Shortcuts

• آرایه ها (پیشرفته) Arrays (Advanced)

• اشیاء (پیشرفته) Objects (Advanced)

• توابع (پیشرفته) Functions (Advanced)

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

• اپراتور پخش (...) Spread Operator (...)

• مقادیر اولیه در مقابل مقادیر مرجع Primitives vs Reference Values

• تعریف نشده و پوچ undefined and null

• اتصال کوتاه با && و || Short Circuiting With && and ||

• واکشی API با Async Await Fetch API With Async Await

• ماژول های ES (واردات/صادرات) ES Modules (import / export)

• مسیرهای فایل File Paths

• حلقه های دیگر (در حالی که و برای از) Other Loops (while & for of)

• سوئیچ بیانیه Switch Statement

• شی پنجره Window Object

• ریاضی Math

• تاریخ Date

• برنامه نویسی OOP در جاوا اسکریپت OOP Programming in JavaScript

• وعده ها Promises

• حلقه رویداد (چگونه جاوا اسکریپت زیر سرپوش کار می کند) Event Loop (How JavaScript Works Under the Hood)

پروژه 2: rmtDev Project 2: rmtDev

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

• راه اندازی پروژه Project Setup

• مؤلفه جستجو (عبارات منظم و واکشی API و ساختارشکنی و [].slice()) Search Component (Regular Expressions & Fetch API & Destructuring & [].slice())

• جزء لیست شغل (تعریف نشده/تهی، &&، ? .، [].map، [].join()) Job List Component (Undefined / Null, &&, ? ., [].map, [].join())

• ماژولار بودن با ماژول های ES (ساختار پوشه و صادرات/واردات) Modularity with ES Modules (Folder Structure & Export / Import)

• مؤلفه خطا («Rendering» و پیش‌فرض در مقابل صادرات نام‌گذاری شده و پارامترهای پیش‌فرض Fn) Error Component ('Rendering' & Default vs Named Export & Default Fn Parameters)

• Refactoring (اهمیت ساختار خوب در Codebase) Refactoring (Importance Of Good Structure In Codebase)

• Refactoring بیشتر (جزئیات شغلی) More Refactoring (Job Details Component)

• بهبود تماس‌های واکشی (ساختار خوب برای تماس‌های fetch() و کدهای وضعیت 2xx، 4xx) Improving Fetch Calls (Good Structure For fetch() Calls & 2xx, 4xx Status Codes)

• Async/Await (در مقابل .then & try/catch & Promises) Async / Await (vs .then & try / catch & Promises)

• Refactor Fetch Calls (Helper/Utility Functions) Refactor Fetch Calls (Helper / Utility Functions)

• مرتب‌سازی جزء ۱ (مرتب‌سازی داده‌ها و «وضعیت») Sorting Component Part 1 (Sorting Data & 'State')

• وضعیت («وضعیت» و وضعیت محلی در مقابل وضعیت جهانی و اشیاء و آرایه‌های در حال تغییر چیست) State (What Is 'State' & Local vs Global State & Mutating Objects And Arrays)

• مرتب سازی جزء 2 - [].sort() Sorting Component Part 2 - [].sort()

• مؤلفه صفحه بندی (++ در مقابل -- & [].slice()) Pagination Component (++ vs -- & [].slice())

• مؤلفه روتر (History & pushState() & Window Object & DOMContentLoaded) Router Component (History & pushState() & Window Object & DOMContentLoaded)

• مورد فعال شغلی - [].find() Active Job Item - [].find()

• مؤلفه نشانک‌ها (رویدادهای Mouseenter در مقابل Mouseleave و [].some() و [].filter()) Bookmarks Component (Mouseenter vs Mouseleave Events & [].some() & [].filter())

• مولفه ذخیره سازی (LocalStorage for Persisting Data & Spread Operator ...) Storage Component (LocalStorage For Persisting Data & Spread Operator ...)

• مراقبت از جزئیات Taking Care of Details

• فرآیند ساخت (Webpack & Babel & PostCSS و بهینه‌سازی‌های دیگر) Build Process (Webpack & Babel & PostCSS & Other Optimizations)

مکمل Supplemental

• تابع کمکی برای قالب بندی تاریخ - new Date() Helper Function for Formatting Date - new Date()

• برای حلقه ([].forEach() و دیگر متدهای آرایه تقریباً به طور کامل جایگزین ()) For Loop ([].forEach() And Other Array Methods Almost Completely Replaced for())

• قالب بندی در JS (نقطه ویرگول و برگه ها در مقابل فضاها) Formatting in JS (Semicolons & Tabs vs Spaces)

بسته شدن Closing

• تبریک می گویم! (سخنرانی پاداش) Congratulations! (BONUS Lecture)