دوره آموزشی Javascript و پروژه ها (2023)

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

معرفی Introduction

• مقدمه Intro

• اهداف Goals

• ساختار Structure

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

معرفی Introduction

• مقدمه Intro

• اهداف Goals

• ساختار Structure

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

کد ویژوال استودیو و گوگل کروم Visual Studio Code and Google Chrome

• مقدمه Intro

• گوگل کروم را نصب کنید Install Google Chrome

• VS-CODE را نصب کنید Install VS-CODE

• بررسی اجمالی VS-CODE VS-CODE Overview

• Live-Preview را نصب کنید Install Live-Preview

• Prettier را نصب کنید Install Prettier

• امت Emmet

• تنظیم من My Setup

کد ویژوال استودیو و گوگل کروم Visual Studio Code and Google Chrome

• مقدمه Intro

• گوگل کروم را نصب کنید Install Google Chrome

• VS-CODE را نصب کنید Install VS-CODE

• بررسی اجمالی VS-CODE VS-CODE Overview

• Live-Preview را نصب کنید Install Live-Preview

• Prettier را نصب کنید Install Prettier

• امت Emmet

• تنظیم من My Setup

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

• مقدمه مبانی Basics Intro

• پروژه پایه Basic Project

• جاوا اسکریپت درون خطی Inline Javascript

• جاوا اسکریپت داخلی Internal Javascript

• جاوا اسکریپت خارجی External Javascript

• پاکسازی فضای کاری Cleanup Workspace

• روش های کمکی Helper Methods

• اظهارات و نظرات Statements and Comments

• متغیرها Variables

• مقدار متغیر را بعداً تعیین کنید Assign Variable Value Later

• قوانین نامگذاری متغیرها Variable Naming Rules

• const, let, var const, let, var

• معرفی چالش ها Challenges Intro

• چالش متغیرها Variables Challange

• تنظیمات زیباتر Prettier Settings

• نقل قول ها Quotation Marks

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

• چالش رشته Concat String Concat Challenge

• مبانی اعداد Numbers Basics

• اعداد - ویژگی های اضافی Numbers - Additional Features

• چالش اعداد Numbers Challenge

• تبدیل نوع ضمنی Implicit Type Conversion

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

• آرایه ها Arrays

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

• توابع - اعلام، فراخوانی Functions - Declare, Invoke

• توابع - پارامترها، آرگومان ها Functions - Parameters, Arguments

• توابع - بازگشت Functions - Return

• عبارات تابع Function Expressions

• چالش عملکرد Function Challenge

• اشیاء Objects

• چالش شی Object Challenge

• اظهارات مشروط - مبانی Conditional Statements - Basics

• اظهارات مشروط ادامه دارد Conditional Statements Continued

• برابری Equality

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

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

• چالش شرایط Conditionals Challenge

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

• حلقه های while انجام دهید do while loops

• برای حلقه for loop

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

• مقدمه مبانی Basics Intro

• پروژه پایه Basic Project

• جاوا اسکریپت درون خطی Inline Javascript

• جاوا اسکریپت داخلی Internal Javascript

• جاوا اسکریپت خارجی External Javascript

• پاکسازی فضای کاری Cleanup Workspace

• روش های کمکی Helper Methods

• اظهارات و نظرات Statements and Comments

• متغیرها Variables

• مقدار متغیر را بعداً تعیین کنید Assign Variable Value Later

• قوانین نامگذاری متغیرها Variable Naming Rules

• const, let, var const, let, var

• معرفی چالش ها Challenges Intro

• چالش متغیرها Variables Challange

• تنظیمات زیباتر Prettier Settings

• نقل قول ها Quotation Marks

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

• چالش رشته Concat String Concat Challenge

• مبانی اعداد Numbers Basics

• اعداد - ویژگی های اضافی Numbers - Additional Features

• چالش اعداد Numbers Challenge

• تبدیل نوع ضمنی Implicit Type Conversion

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

• آرایه ها Arrays

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

• توابع - اعلام، فراخوانی Functions - Declare, Invoke

• توابع - پارامترها، آرگومان ها Functions - Parameters, Arguments

• توابع - بازگشت Functions - Return

• عبارات تابع Function Expressions

• چالش عملکرد Function Challenge

• اشیاء Objects

• چالش شی Object Challenge

• اظهارات مشروط - مبانی Conditional Statements - Basics

• اظهارات مشروط ادامه دارد Conditional Statements Continued

• برابری Equality

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

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

• چالش شرایط Conditionals Challenge

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

• حلقه های while انجام دهید do while loops

• برای حلقه for loop

آموزش جاوا اسکریپت ادامه دارد Javascript Tutorial Continued

• اتصال نقاط Connecting The Dots

• ویژگی ها و روش های رشته String Properties and Methods

• الفاظ الگو Template Literals

• چالش رشته Strings Challenge

• خواص و روش های آرایه Array Properties and Methods

• ورزش - نام کامل Exercise - Full Name

• تمرین - مجموع را محاسبه کنید Exercise - Calculate Total

• ارزش در مقابل مرجع Value vs Reference

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

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

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

• دامنه جهانی Global Scope

• محدوده محلی Local Scope

• جستجوی متغیر Variable Lookup

• توابع پاسخ به تماس، توابع مرتبه بالاتر Callback Functions, Higher Order Functions

• تکرار کننده های آرایه Array Iterators

• برای هر forEach

• نقشه map

• فیلتر filter

• پیدا کردن find

• كاهش دادن reduce

• چالش آرایه - مقدمه Array Challenge - Intro

• چالش آرایه - داده های راه اندازی Array Challenge - Setup Data

• چالش آرایه - چندین فایل Array Challenge - Multiple Files

• چالش آرایه - نقشه Array Challenge - Map

• چالش آرایه - فیلتر Array Challenge - Filter

• چالش آرایه - نحو جایگزین را فیلتر کنید Array Challenge - Filter Alternative Syntax

• چالش آرایه - پیدا کنید Array Challenge - Find

• چالش آرایه - کاهش شماره 1 Array Challenge - Reduce #1

• نماد براکت مربع Square Bracket Notation

• چالش آرایه - کاهش شماره 2 Array Challenge - Reduce #2

• شیء ریاضی Math Object

• شیء تاریخ Date Object

آموزش جاوا اسکریپت ادامه دارد Javascript Tutorial Continued

• اتصال نقاط Connecting The Dots

• ویژگی ها و روش های رشته String Properties and Methods

• الفاظ الگو Template Literals

• چالش رشته Strings Challenge

• خواص و روش های آرایه Array Properties and Methods

• ورزش - نام کامل Exercise - Full Name

• تمرین - مجموع را محاسبه کنید Exercise - Calculate Total

• ارزش در مقابل مرجع Value vs Reference

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

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

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

• دامنه جهانی Global Scope

• محدوده محلی Local Scope

• جستجوی متغیر Variable Lookup

• توابع پاسخ به تماس، توابع مرتبه بالاتر Callback Functions, Higher Order Functions

• تکرار کننده های آرایه Array Iterators

• برای هر forEach

• نقشه map

• فیلتر filter

• پیدا کردن find

• كاهش دادن reduce

• چالش آرایه - مقدمه Array Challenge - Intro

• چالش آرایه - داده های راه اندازی Array Challenge - Setup Data

• چالش آرایه - چندین فایل Array Challenge - Multiple Files

• چالش آرایه - نقشه Array Challenge - Map

• چالش آرایه - فیلتر Array Challenge - Filter

• چالش آرایه - نحو جایگزین را فیلتر کنید Array Challenge - Filter Alternative Syntax

• چالش آرایه - پیدا کنید Array Challenge - Find

• چالش آرایه - کاهش شماره 1 Array Challenge - Reduce #1

• نماد براکت مربع Square Bracket Notation

• چالش آرایه - کاهش شماره 2 Array Challenge - Reduce #2

• شیء ریاضی Math Object

• شیء تاریخ Date Object

DOM DOM

• DOM - مقدمه DOM - Intro

• DOM - مفاهیم عمومی DOM - General Concepts

• نمای کلی پنجره و سند Window and Document Overview

• دریافت عنصر با شناسه Get Element By ID

• دریافت عناصر بر اساس نام برچسب Get Elements By Tag Name

• دریافت عنصر بر اساس نام کلاس Get Element By Class Name

• Query Selector و Query Selector ALL Query Selector and Query Selector ALL

• DOM - کودکان را پیمایش کنید Navigate the DOM - Children

• DOM - parentElement را پیمایش کنید Navigate the DOM - parentElement

• پیمایش DOM - nextSibling، previousSibling Navigate the DOM - nextSibling, previousSibling

• DOM - nextElementSibling، previousElementSibling را پیمایش کنید Navigate the DOM - nextElementSibling, previousElementSibling

• textContent nodeValue textContent nodeValue

• getAttribute() setAttribute() getAttribute() setAttribute()

• classList و className classList and className

• createElement - createTextNode - appendChild createElement - createTextNode - appendChild

• درج قبل از insertBefore

• جایگزین کودک replaceChild

• innerText را اضافه کنید prepend innerText

• حذف removeChild remove removeChild

• innerHTML و محتوای متنی innerHTML and textContent

• CSS را با ویژگی style تغییر دهید Change CSS with style property

• بررسی اجمالی رویدادها Events Overview

• روی رویداد کلیک کنید Click Event

• مرجع تابع Function Reference

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

• اتفاقات کلیدی Key Events

• شی رویداد Event Object

• CurrentTarget در مقابل Target CurrentTarget vs Target

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

• مثال انتشار رویداد Event Propagation Example

• تشکیل می دهد Forms

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

• ذخیره سازی محلی با مقادیر چندگانه Local Storage With Multiple Values

• setTimeout setTimeout

• setInterval setInterval

• رویدادها - "DOMContentLoaded" Events - "DOMContentLoaded"

• رویدادها - "بارگیری" Events - "load"

• رویدادها - "پیمایش" Events - "scroll"

• عرض، ارتفاع، GetBoundingClientRect Width, Height, GetBoundingClientRect

• رویدادها - "تغییر اندازه" Events - "resize"

DOM DOM

• DOM - مقدمه DOM - Intro

• DOM - مفاهیم عمومی DOM - General Concepts

• نمای کلی پنجره و سند Window and Document Overview

• دریافت عنصر با شناسه Get Element By ID

• دریافت عناصر بر اساس نام برچسب Get Elements By Tag Name

• دریافت عنصر بر اساس نام کلاس Get Element By Class Name

• Query Selector و Query Selector ALL Query Selector and Query Selector ALL

• DOM - کودکان را پیمایش کنید Navigate the DOM - Children

• DOM - parentElement را پیمایش کنید Navigate the DOM - parentElement

• پیمایش DOM - nextSibling، previousSibling Navigate the DOM - nextSibling, previousSibling

• DOM - nextElementSibling، previousElementSibling را پیمایش کنید Navigate the DOM - nextElementSibling, previousElementSibling

• textContent nodeValue textContent nodeValue

• getAttribute() setAttribute() getAttribute() setAttribute()

• classList و className classList and className

• createElement - createTextNode - appendChild createElement - createTextNode - appendChild

• درج قبل از insertBefore

• جایگزین کودک replaceChild

• innerText را اضافه کنید prepend innerText

• حذف removeChild remove removeChild

• innerHTML و محتوای متنی innerHTML and textContent

• CSS را با ویژگی style تغییر دهید Change CSS with style property

• بررسی اجمالی رویدادها Events Overview

• روی رویداد کلیک کنید Click Event

• مرجع تابع Function Reference

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

• اتفاقات کلیدی Key Events

• شی رویداد Event Object

• CurrentTarget در مقابل Target CurrentTarget vs Target

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

• مثال انتشار رویداد Event Propagation Example

• تشکیل می دهد Forms

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

• ذخیره سازی محلی با مقادیر چندگانه Local Storage With Multiple Values

• setTimeout setTimeout

• setInterval setInterval

• رویدادها - "DOMContentLoaded" Events - "DOMContentLoaded"

• رویدادها - "بارگیری" Events - "load"

• رویدادها - "پیمایش" Events - "scroll"

• عرض، ارتفاع، GetBoundingClientRect Width, Height, GetBoundingClientRect

• رویدادها - "تغییر اندازه" Events - "resize"

پروژه های DOM DOM Projects

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• Color Flipper - HTML ساده Color Flipper - Simple HTML

• Color Flipper - جاوا اسکریپت ساده Color Flipper - Simple Javascript

• فلیپر رنگی - هگز Color Flipper - Hex

• شمارنده HTML Counter HTML

• شمارنده JS Counter JS

• HTML را بررسی می کند Reviews HTML

• نظرات JS Reviews JS

• نوار HTML Navbar HTML

• مفاهیم کلی نوار ناوبری Navbar General Concepts

• Navbar JS Navbar JS

• HTML نوار کناری Sidebar HTML

• تنظیم دستی نوار کناری Sidebar Manual Setup

• سایدبار JS Sidebar JS

• HTML معین Modal HTML

• چالش مودال Modal Challange

• Modal JS Modal JS

• سوالات HTML Questions HTML

• سوالات مفهوم کلی Questions General Concept

• Questions JS - عبور از DOM Questions JS - Traversing the DOM

• سوالات JS - استفاده از انتخابگرها در داخل عنصر Questions JS - Using Selectors Inside the Element

• منو HTML Menu HTML

• نمایش موارد هنگام بارگیری صفحه Display Items When Page Loads

• Refactor Refactor

• دکمه های فیلتر HTML Filter Buttons HTML

• دکمه های فیلتر JS Filter Buttons JS

• دکمه های فیلتر پویا Dynamic Filter Buttons

• دسته بندی های منحصر به فرد Unique Categories

• دکمه های فیلتر پویا کامل شد Dynamic Filter Buttons Complete

• معرفی ویدیویی Video Intro

• HTML ویدیویی Video HTML

• راه اندازی همپوشانی ویدیو Video Overlay Setup

• ویدئو JS Video JS

• پیش بارگزاری ویدیو Video Preloader

• اسکرول کنید Scroll Intro

• HTML را اسکرول کنید Scroll HTML

• اسکرول - تاریخ تنظیم Scroll - Setup Date

• اسکرول - تنظیم ساده را تغییر دهید Scroll - Toggle Simple Setup

• اسکرول - پویا را تغییر دهید Scroll - Toggle Dynamic

• اسکرول - نوار ناوبری ثابت شد Scroll - Fixed Navbar

• تنظیم اسکرول صاف Smooth Scroll Setup

• اسکرول صاف کامل شد Smooth Scroll Complete

• زبانه ها HTML Tabs HTML

• Tabs JS Tabs JS

• HTML شمارش معکوس Countdown HTML

• تنظیم تاریخ Set Date

• محاسبه زمان باقی مانده Calculate Remaining Time

• زمان از هم اکنون Time From Now

• لورم ایپسوم HTML Lorem Ipsum HTML

• لورم ایپسوم جی اس Lorem Ipsum JS

• GroceryBud - مقدمه GroceryBud - Intro

• GroceryBud - HTML GroceryBud - HTML

• GroceryBud - عناصر را انتخاب کنید GroceryBud - Select Elements

• GroceryBud - راه اندازی addItem GroceryBud - addItem Setup

• GroceryBud - میانبر حقیقت GroceryBud - truthy shortcut

• GroceryBud - نمایش هشدار GroceryBud - display alert

• GroceryBud - addItem GroceryBud - addItem

• GroceryBud - setBackToDefault GroceryBud - setBackToDefault

• GroceryBud - اقلام را پاک کنید GroceryBud - clear items

• GroceryBud - دکمه های ویرایش و حذف را انتخاب کنید GroceryBud - select edit and delete buttons

• GroceryBud - حذف مورد GroceryBud - delete item

• GroceryBud - ویرایش مورد GroceryBud - edit item

• GroceryBud - اطلاعات محلی ذخیره سازی GroceryBud - localStorage info

• GroceryBud - addToLocalStorage GroceryBud - addToLocalStorage

• GroceryBud - removeFromLocalStorage GroceryBud - removeFromLocalStorage

• GroceryBud - ویرایشLocalStorage GroceryBud - editLocalStorage

• GroceryBud - موارد را از localStorage بارگیری کنید GroceryBud - load items from localStorage

• معرفی لغزنده Slider Intro

• اسلایدر HTML Slider HTML

• مفاهیم کلی اسلایدر Slider General Concepts

• Slider JS Setup Slider JS Setup

• Slider JS - Slides Approach Slider JS - Slides Approach

• Slider JS - Button Approach Slider JS - Button Approach

پروژه های DOM DOM Projects

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• Color Flipper - HTML ساده Color Flipper - Simple HTML

• Color Flipper - جاوا اسکریپت ساده Color Flipper - Simple Javascript

• فلیپر رنگی - هگز Color Flipper - Hex

• شمارنده HTML Counter HTML

• شمارنده JS Counter JS

• HTML را بررسی می کند Reviews HTML

• نظرات JS Reviews JS

• نوار HTML Navbar HTML

• مفاهیم کلی نوار ناوبری Navbar General Concepts

• Navbar JS Navbar JS

• HTML نوار کناری Sidebar HTML

• تنظیم دستی نوار کناری Sidebar Manual Setup

• سایدبار JS Sidebar JS

• HTML معین Modal HTML

• چالش مودال Modal Challange

• Modal JS Modal JS

• سوالات HTML Questions HTML

• سوالات مفهوم کلی Questions General Concept

• Questions JS - عبور از DOM Questions JS - Traversing the DOM

• سوالات JS - استفاده از انتخابگرها در داخل عنصر Questions JS - Using Selectors Inside the Element

• منو HTML Menu HTML

• نمایش موارد هنگام بارگیری صفحه Display Items When Page Loads

• Refactor Refactor

• دکمه های فیلتر HTML Filter Buttons HTML

• دکمه های فیلتر JS Filter Buttons JS

• دکمه های فیلتر پویا Dynamic Filter Buttons

• دسته بندی های منحصر به فرد Unique Categories

• دکمه های فیلتر پویا کامل شد Dynamic Filter Buttons Complete

• معرفی ویدیویی Video Intro

• HTML ویدیویی Video HTML

• راه اندازی همپوشانی ویدیو Video Overlay Setup

• ویدئو JS Video JS

• پیش بارگزاری ویدیو Video Preloader

• اسکرول کنید Scroll Intro

• HTML را اسکرول کنید Scroll HTML

• اسکرول - تاریخ تنظیم Scroll - Setup Date

• اسکرول - تنظیم ساده را تغییر دهید Scroll - Toggle Simple Setup

• اسکرول - پویا را تغییر دهید Scroll - Toggle Dynamic

• اسکرول - نوار ناوبری ثابت شد Scroll - Fixed Navbar

• تنظیم اسکرول صاف Smooth Scroll Setup

• اسکرول صاف کامل شد Smooth Scroll Complete

• زبانه ها HTML Tabs HTML

• Tabs JS Tabs JS

• HTML شمارش معکوس Countdown HTML

• تنظیم تاریخ Set Date

• محاسبه زمان باقی مانده Calculate Remaining Time

• زمان از هم اکنون Time From Now

• لورم ایپسوم HTML Lorem Ipsum HTML

• لورم ایپسوم جی اس Lorem Ipsum JS

• GroceryBud - مقدمه GroceryBud - Intro

• GroceryBud - HTML GroceryBud - HTML

• GroceryBud - عناصر را انتخاب کنید GroceryBud - Select Elements

• GroceryBud - راه اندازی addItem GroceryBud - addItem Setup

• GroceryBud - میانبر حقیقت GroceryBud - truthy shortcut

• GroceryBud - نمایش هشدار GroceryBud - display alert

• GroceryBud - addItem GroceryBud - addItem

• GroceryBud - setBackToDefault GroceryBud - setBackToDefault

• GroceryBud - اقلام را پاک کنید GroceryBud - clear items

• GroceryBud - دکمه های ویرایش و حذف را انتخاب کنید GroceryBud - select edit and delete buttons

• GroceryBud - حذف مورد GroceryBud - delete item

• GroceryBud - ویرایش مورد GroceryBud - edit item

• GroceryBud - اطلاعات محلی ذخیره سازی GroceryBud - localStorage info

• GroceryBud - addToLocalStorage GroceryBud - addToLocalStorage

• GroceryBud - removeFromLocalStorage GroceryBud - removeFromLocalStorage

• GroceryBud - ویرایشLocalStorage GroceryBud - editLocalStorage

• GroceryBud - موارد را از localStorage بارگیری کنید GroceryBud - load items from localStorage

• معرفی لغزنده Slider Intro

• اسلایدر HTML Slider HTML

• مفاهیم کلی اسلایدر Slider General Concepts

• Slider JS Setup Slider JS Setup

• Slider JS - Slides Approach Slider JS - Slides Approach

• Slider JS - Button Approach Slider JS - Button Approach

گسترش Deployment

• معرفی Netlify Netlify Intro

• گزینه کشیدن و رها کردن Drag and Drop Option

• استقرار مداوم Continuous Deployment

گسترش Deployment

• معرفی Netlify Netlify Intro

• گزینه کشیدن و رها کردن Drag and Drop Option

• استقرار مداوم Continuous Deployment

اشیاء Objects

• مقدمه Intro

• مبانی شی Object Basics

• اشیاء تو در تو، علامت گذاری براکت Nested Objects, Bracket Notation

• "این" - مبانی کلمات کلیدی 'this' - Keyword Basics

• "this" - کلمه کلیدی پیشرفته "this" - Keyword Advanced

• توابع کارخانه Factory Functions

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

• املاک سازنده Constructor Property

• دارایی نمونه اولیه Prototype Property

• جستجوی اموال Property Lookup

• نحو کلاس ES6 ES6 Class Syntax

• زنگ زدن Call

• اعمال، استدلال Apply, Arguments

• بستن Bind

• مثال دکمه Button Example

اشیاء Objects

• مقدمه Intro

• مبانی شی Object Basics

• اشیاء تو در تو، علامت گذاری براکت Nested Objects, Bracket Notation

• "این" - مبانی کلمات کلیدی 'this' - Keyword Basics

• "this" - کلمه کلیدی پیشرفته "this" - Keyword Advanced

• توابع کارخانه Factory Functions

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

• املاک سازنده Constructor Property

• دارایی نمونه اولیه Prototype Property

• جستجوی اموال Property Lookup

• نحو کلاس ES6 ES6 Class Syntax

• زنگ زدن Call

• اعمال، استدلال Apply, Arguments

• بستن Bind

• مثال دکمه Button Example

پروژه های OOP OOP Projects

• مقدمه Intro

• برپایی Setup

• شمارنده - HTML Counter - HTML

• راه اندازی شمارنده Counter Setup

• شمارنده - عناصر را انتخاب کنید Counter - Select Elements

• شمارنده - توابع Counter - Functions

• شمارنده - کامل Counter - Complete

• کانتر - کلاس Refactor Counter - Class Refactor

• معرفی گالری Gallery Intro

• گالری - HTML Gallery - HTML

• گالری - عناصر را انتخاب کنید Gallery - Select Elements

• گالری - راه اندازی Modal را باز کنید Gallery - Open Modal Setup

• گالری - Open Modal Complete Gallery - Open Modal Complete

• گالری - Close Modal Gallery - Close Modal

• گالری - قبلی و بعدی Gallery - Prev and Next

• گالری - تصاویر را انتخاب کنید Gallery - Select Images

• گالری - کلاس Refactor Gallery - Class Refactor

پروژه های OOP OOP Projects

• مقدمه Intro

• برپایی Setup

• شمارنده - HTML Counter - HTML

• راه اندازی شمارنده Counter Setup

• شمارنده - عناصر را انتخاب کنید Counter - Select Elements

• شمارنده - توابع Counter - Functions

• شمارنده - کامل Counter - Complete

• کانتر - کلاس Refactor Counter - Class Refactor

• معرفی گالری Gallery Intro

• گالری - HTML Gallery - HTML

• گالری - عناصر را انتخاب کنید Gallery - Select Elements

• گالری - راه اندازی Modal را باز کنید Gallery - Open Modal Setup

• گالری - Open Modal Complete Gallery - Open Modal Complete

• گالری - Close Modal Gallery - Close Modal

• گالری - قبلی و بعدی Gallery - Prev and Next

• گالری - تصاویر را انتخاب کنید Gallery - Select Images

• گالری - کلاس Refactor Gallery - Class Refactor

کارکرد Functions

• مقدمه Intro

• IIFE IIFE

• بالا بردن Hoisting

• بسته Closure

• بستن - مثال پایه Closure - Basic Example

• بستن - مثال کامل Closure - Complete Example

کارکرد Functions

• مقدمه Intro

• IIFE IIFE

• بالا بردن Hoisting

• بسته Closure

• بستن - مثال پایه Closure - Basic Example

• بستن - مثال کامل Closure - Complete Example

ES6 ES6

• معرفی ماژول ES6 ES6 Module Intro

• VAR، LET، CONST VAR, LET, CONST

• محدوده عملکرد و محدوده بلوک Function Scope and Block Scope

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

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

• برچسب‌گذاری شده الگوهای واقعی Tagged Template Literals

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

• توابع پیکان - اشیاء و "این" Arrow Functions - Objects and "this"

• توابع پیکان - عناصر و "this" را انتخاب کنید Arrow Functions - Select Elements and "this"

• پارامترهای پیش فرض و بلند کردن گوچاها Default Parameters and Hoisting Gotchas

• تخریب آرایه Array Destructuring

• تعویض متغیرها Swap Variables

• تخریب شی Object Destructuring

• پارامترهای تابع تخریب ساختار Destructuring Function Parameters

• روش های رشته ای جدید New String Methods

• "برای" - حلقه "for of" - Loop

• اپراتور گسترش - مبانی Spread Operator - Basics

• اپراتور گسترش - اشیاء Spread Operator - Objects

• اپراتور Spread - عناصر DOM Spread Operator - DOM Elements

• Spread Operator - Functions Arguments Spread Operator - Functions Arguments

• اپراتور استراحت Rest Operator

• آرایه ای از Array.of

• Array.from - رشته ها و آرگومان های شی Array.from - Strings and Arguments Object

• Array.from - عناصر DOM (NodeList) Array.from - DOM Elements(NodeList)

• پیدا کردن، پیدا کردن فهرست، هر، برخی find, findIndex,every,some

• "برای در" - حلقه "for in" - Loop

• Object.keys() Object.keys()

• Object.values() Object.values()

• Object.entries() Object.entries()

• new Set() - نمای کلی new Set() - General Overview

• new Set() - Use Case new Set() - Use Case

• رشته شامل() String includes()

• آرایه شامل() Array includes()

• اطلاعات مهم Important Info

ES6 ES6

• معرفی ماژول ES6 ES6 Module Intro

• VAR، LET، CONST VAR, LET, CONST

• محدوده عملکرد و محدوده بلوک Function Scope and Block Scope

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

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

• برچسب‌گذاری شده الگوهای واقعی Tagged Template Literals

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

• توابع پیکان - اشیاء و "این" Arrow Functions - Objects and "this"

• توابع پیکان - عناصر و "this" را انتخاب کنید Arrow Functions - Select Elements and "this"

• پارامترهای پیش فرض و بلند کردن گوچاها Default Parameters and Hoisting Gotchas

• تخریب آرایه Array Destructuring

• تعویض متغیرها Swap Variables

• تخریب شی Object Destructuring

• پارامترهای تابع تخریب ساختار Destructuring Function Parameters

• روش های رشته ای جدید New String Methods

• "برای" - حلقه "for of" - Loop

• اپراتور گسترش - مبانی Spread Operator - Basics

• اپراتور گسترش - اشیاء Spread Operator - Objects

• اپراتور Spread - عناصر DOM Spread Operator - DOM Elements

• Spread Operator - Functions Arguments Spread Operator - Functions Arguments

• اپراتور استراحت Rest Operator

• آرایه ای از Array.of

• Array.from - رشته ها و آرگومان های شی Array.from - Strings and Arguments Object

• Array.from - عناصر DOM (NodeList) Array.from - DOM Elements(NodeList)

• پیدا کردن، پیدا کردن فهرست، هر، برخی find, findIndex,every,some

• "برای در" - حلقه "for in" - Loop

• Object.keys() Object.keys()

• Object.values() Object.values()

• Object.entries() Object.entries()

• new Set() - نمای کلی new Set() - General Overview

• new Set() - Use Case new Set() - Use Case

• رشته شامل() String includes()

• آرایه شامل() Array includes()

• اطلاعات مهم Important Info

پروژه ها Projects

• پروژه های AJAX - مقدمه AJAX Projects - Intro

• جوک های پدر - معرفی Dad Jokes - Intro

• جوک های پدر - ساختار HTML Dad Jokes - HTML Structure

• اصول API API Fundamentals

• شوخی های پدر - اسناد Dad Jokes - Docs

• جوک های پدر - عناصر را انتخاب کنید Dad Jokes - Select Elements

• جوک های پدر - واکشی جوک تصادفی Dad Jokes - Fetch Random Joke

• جوک های پدر - در حال بارگذاری Dad Jokes - Loading

• جوک های پدر - امتحان کن/بگیر Dad Jokes - Try / Catch

• شوخی های پدر - خطای جدید پرتاب کنید Dad Jokes - Throw New Error

• محصولات - معرفی Products - Intro

• محصولات - ساختار HTML Products - HTML Structure

• محصولات -ایالات احتمالی AJAX Products -Possible AJAX States

• محصولات - API Docs Products - API Docs

• محصولات - واکشی محصولات Products - Fetch Products

• محصولات - بارگیری و خطا Products - Loading and Error

• محصولات - عملکرد شروع Products - Start Function

• محصولات - نمایش محصولات Products - Display Products

• محصولات - Query Params Products - Query Params

• محصولات - HTML تک محصولی Products - Single Product HTML

• محصولات - منطق اولیه Products - Initial Logic

• محصولات - واکشی محصول Products - Fetch Product

• محصولات - نمایش محصول واحد Products - Display Single Product

• محصولات - رنگ های نمایشگر Products - Display Colors

• کاربر تصادفی - معرفی Random User - Intro

• کاربر تصادفی - HTML Random User - HTML

• کاربر تصادفی - API Random User - API

• کاربر تصادفی - عناصر را انتخاب کنید Random User - Select Elements

• کاربر تصادفی - واکشی کاربر Random User - Fetch User

• کاربر تصادفی - نمایش کاربر Random User - Display User

• کوکتل - معرفی Cocktails - Intro

• کوکتل - راه اندازی Cocktails - Setup

• کوکتل - HTML Cocktails - HTML

• کوکتل - API Cocktails - API

• کوکتل - نوشیدنی های حاضر Cocktails - Present Drinks

• کوکتل - نوشیدنی بیاورید Cocktails - Fetch Drinks

• کوکتل - نمایش نوشیدنی Cocktails - Display Drinks

• کوکتل - فرم جستجو Cocktails - Search Form

• کوکتل - در حال بارگذاری Cocktails - Loading

• کوکتل - نوشیدنی را تنظیم کنید Cocktails - Set Drink

• کوکتل - تک نوشیدنی HTML Cocktails - Single Drink HTML

• کوکتل - یک نوشیدنی Cocktails - Single Drink

• کوکتل - نمایش نوشیدنی تنها Cocktails - Display Single Drink

پروژه ها Projects

• پروژه های AJAX - مقدمه AJAX Projects - Intro

• جوک های پدر - معرفی Dad Jokes - Intro

• جوک های پدر - ساختار HTML Dad Jokes - HTML Structure

• اصول API API Fundamentals

• شوخی های پدر - اسناد Dad Jokes - Docs

• جوک های پدر - عناصر را انتخاب کنید Dad Jokes - Select Elements

• جوک های پدر - واکشی جوک تصادفی Dad Jokes - Fetch Random Joke

• جوک های پدر - در حال بارگذاری Dad Jokes - Loading

• جوک های پدر - امتحان کن/بگیر Dad Jokes - Try / Catch

• شوخی های پدر - خطای جدید پرتاب کنید Dad Jokes - Throw New Error

• محصولات - معرفی Products - Intro

• محصولات - ساختار HTML Products - HTML Structure

• محصولات -ایالات احتمالی AJAX Products -Possible AJAX States

• محصولات - API Docs Products - API Docs

• محصولات - واکشی محصولات Products - Fetch Products

• محصولات - بارگیری و خطا Products - Loading and Error

• محصولات - عملکرد شروع Products - Start Function

• محصولات - نمایش محصولات Products - Display Products

• محصولات - Query Params Products - Query Params

• محصولات - HTML تک محصولی Products - Single Product HTML

• محصولات - منطق اولیه Products - Initial Logic

• محصولات - واکشی محصول Products - Fetch Product

• محصولات - نمایش محصول واحد Products - Display Single Product

• محصولات - رنگ های نمایشگر Products - Display Colors

• کاربر تصادفی - معرفی Random User - Intro

• کاربر تصادفی - HTML Random User - HTML

• کاربر تصادفی - API Random User - API

• کاربر تصادفی - عناصر را انتخاب کنید Random User - Select Elements

• کاربر تصادفی - واکشی کاربر Random User - Fetch User

• کاربر تصادفی - نمایش کاربر Random User - Display User

• کوکتل - معرفی Cocktails - Intro

• کوکتل - راه اندازی Cocktails - Setup

• کوکتل - HTML Cocktails - HTML

• کوکتل - API Cocktails - API

• کوکتل - نوشیدنی های حاضر Cocktails - Present Drinks

• کوکتل - نوشیدنی بیاورید Cocktails - Fetch Drinks

• کوکتل - نمایش نوشیدنی Cocktails - Display Drinks

• کوکتل - فرم جستجو Cocktails - Search Form

• کوکتل - در حال بارگذاری Cocktails - Loading

• کوکتل - نوشیدنی را تنظیم کنید Cocktails - Set Drink

• کوکتل - تک نوشیدنی HTML Cocktails - Single Drink HTML

• کوکتل - یک نوشیدنی Cocktails - Single Drink

• کوکتل - نمایش نوشیدنی تنها Cocktails - Display Single Drink

ماژول ها Modules

• مقدمه Intro

• برپایی Setup

• به نام صادرات Named Export

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

• عنصر را دریافت کنید Get Element

ماژول ها Modules

• مقدمه Intro

• برپایی Setup

• به نام صادرات Named Export

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

• عنصر را دریافت کنید Get Element

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

• مقدمه Intro

• همزمان Synchronous

• نمونه دستور غذا Recipe Example

• نامتقارن Asynchronous

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

• Callback Hell - مثال DOM Callback Hell - DOM Example

• وعده ها Promises

• آپدیت مهم Unsplash API !!!! Important Unsplash API update !!!!

• رد مثال Reject Example

• Promises - مثال DOM Promises - DOM Example

• Async/Await Async/Await

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

• مقدمه Intro

• همزمان Synchronous

• نمونه دستور غذا Recipe Example

• نامتقارن Asynchronous

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

• Callback Hell - مثال DOM Callback Hell - DOM Example

• وعده ها Promises

• آپدیت مهم Unsplash API !!!! Important Unsplash API update !!!!

• رد مثال Reject Example

• Promises - مثال DOM Promises - DOM Example

• Async/Await Async/Await

AJAX AJAX

• مقدمه Intro

• AJAX، HTTP، API AJAX, HTTP, API

• متن ساده Simple Text

• دکمه افزودن Add Button

• JSON JSON

• رفتن و آوردن Fetch

• واکشی - خطاهای "gotcha" Fetch - Errors "gotcha"

• واکشی - تصویر بزرگ Fetch - Big Picture

• واکشی با تابع Fetch with Function

• واکشی - با async/wait Fetch - with async/await

• امتحان کن/بگیر Try / Catch

AJAX AJAX

• مقدمه Intro

• AJAX، HTTP، API AJAX, HTTP, API

• متن ساده Simple Text

• دکمه افزودن Add Button

• JSON JSON

• رفتن و آوردن Fetch

• واکشی - خطاهای "gotcha" Fetch - Errors "gotcha"

• واکشی - تصویر بزرگ Fetch - Big Picture

• واکشی با تابع Fetch with Function

• واکشی - با async/wait Fetch - with async/await

• امتحان کن/بگیر Try / Catch

پروژه های بیشتر More Projects

• پروژه های بیشتر - مقدمه More Projects - Intro

پروژه های بیشتر More Projects

• پروژه های بیشتر - مقدمه More Projects - Intro

لغزنده Slider

• مقدمه Intro

• پروژه شروع کننده Starter Project

• راه اندازی HTML HTML Setup

• نمایش افراد Display People

• CSS را اعمال کنید Apply CSS

• اسلاید بعدی Next Slide

• اسلاید بعدی - پایان آرایه Next Slide - End of Array

• اسلاید قبلی Prev Slide

لغزنده Slider

• مقدمه Intro

• پروژه شروع کننده Starter Project

• راه اندازی HTML HTML Setup

• نمایش افراد Display People

• CSS را اعمال کنید Apply CSS

• اسلاید بعدی Next Slide

• اسلاید بعدی - پایان آرایه Next Slide - End of Array

• اسلاید قبلی Prev Slide

منوهای فرعی Stripe Stripe Submenus

• مقدمه Intro

• پروژه شروع کننده Starter Project

• HTML HTML

• تغییر نوار کناری Sidebar Toggle

• نوار کناری کامل شد Sidebar Complete

• راه اندازی منوی فرعی Submenu Setup

• لینک های زیر منو Submenu Links

• منوی فرعی - پنهان کردن و طرح بندی ستون Submenu - Hide and Column Layout

منوهای فرعی Stripe Stripe Submenus

• مقدمه Intro

• پروژه شروع کننده Starter Project

• HTML HTML

• تغییر نوار کناری Sidebar Toggle

• نوار کناری کامل شد Sidebar Complete

• راه اندازی منوی فرعی Submenu Setup

• لینک های زیر منو Submenu Links

• منوی فرعی - پنهان کردن و طرح بندی ستون Submenu - Hide and Column Layout

صفحه بندی Pagination

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• واکشی دنبال کنندگان Fetch Followers

• نمایش فالوورها Display Followers

• صفحه بندی - ایجاد صفحات Paginate - Create Pages

• دکمه های نمایش Display Buttons

• عملکرد دکمه Button Functionality

صفحه بندی Pagination

• مقدمه Intro

• پروژه شروع کننده Starter Project

• برپایی Setup

• واکشی دنبال کنندگان Fetch Followers

• نمایش فالوورها Display Followers

• صفحه بندی - ایجاد صفحات Paginate - Create Pages

• دکمه های نمایش Display Buttons

• عملکرد دکمه Button Functionality

API ویکی پدیا Wikipedia API

• مقدمه Intro

• ساختار HTML HTML Structure

• API Docs API Docs

• راه اندازی اولیه Initial Setup

• واکشی صفحات Fetch Pages

• نمایش نتایج Render Results

API ویکی پدیا Wikipedia API

• مقدمه Intro

• ساختار HTML HTML Structure

• API Docs API Docs

• راه اندازی اولیه Initial Setup

• واکشی صفحات Fetch Pages

• نمایش نتایج Render Results

فروشگاه راحت Comfy Store

• مقدمه Intro

• در باره About

• پروژه شروع کننده Starter Project

• برپایی Setup

• نمای کلی شروع کننده Starter Overview

• نوار ناوبری، قهرمان - HTML Navbar, Hero - HTML

• HTML نوار کناری Sidebar HTML

• تغییر نوار کناری Sidebar Toggle

• سبد خرید HTML Cart HTML

• تعویض سبد خرید Cart Toggle

• درباره صفحه About Page

• نمای کلی API API Overview

• محصولات ویژه - HTML Featured Products - HTML

• واکشی محصولات Fetch Products

• راه اندازی فروشگاه Setup Store

• صادرات - نحو جایگزین Exports - Alternative Syntax

• LocalStorage LocalStorage

• محصولات ویژه Featured Products

• نمایش محصولات Display Products

• قیمت فرمت Format Price

• راه اندازی AddToCart AddToCart Setup

• HTML محصول Product HTML

• نمایش همه محصولات Display All Products

• در حال بارگذاری صفحه Page Loading

• HTML را فیلتر می کند Filters HTML

• فیلتر جستجو Search Filter

• فیلتر شرکت ها Companies Filter

• فیلتر قیمت Price Filter

• تک محصول - نمای کلی Single Product - Overview

• محصول واحد - HTML Single Product - HTML

• محصول واحد - JS اولیه Single Product - Initial JS

• محصول واحد - واکشی محصول Single Product - Fetch Product

• تک محصول - خطای واکشی Single Product - Fetch Error

• تک محصول - کامل Single Product - Complete

• setupCart - راه اندازی اولیه setupCart - Initial Setup

• addToCart - راه اندازی addToCart - Setup

• addToCartDOM addToCartDOM

• addToCart - مجموع addToCart - Totals

• setupCart - init setupCart - init

• سبد خرید - به روز رسانی اقلام Cart - Update Items

• سبد خرید - حذف مورد Cart - Remove Item

• سبد خرید - افزایش مبلغ Cart - Increase Amount

• سبد خرید - کاهش مقدار Cart - Decrease Amount

• رفع صفحه محصولات Products Page Fix

• رفع اشکال 2 Bug Fix 2

• پروژه تمام شده Finished Project

فروشگاه راحت Comfy Store

• مقدمه Intro

• در باره About

• پروژه شروع کننده Starter Project

• برپایی Setup

• نمای کلی شروع کننده Starter Overview

• نوار ناوبری، قهرمان - HTML Navbar, Hero - HTML

• HTML نوار کناری Sidebar HTML

• تغییر نوار کناری Sidebar Toggle

• سبد خرید HTML Cart HTML

• تعویض سبد خرید Cart Toggle

• درباره صفحه About Page

• نمای کلی API API Overview

• محصولات ویژه - HTML Featured Products - HTML

• واکشی محصولات Fetch Products

• راه اندازی فروشگاه Setup Store

• صادرات - نحو جایگزین Exports - Alternative Syntax

• LocalStorage LocalStorage

• محصولات ویژه Featured Products

• نمایش محصولات Display Products

• قیمت فرمت Format Price

• راه اندازی AddToCart AddToCart Setup

• HTML محصول Product HTML

• نمایش همه محصولات Display All Products

• در حال بارگذاری صفحه Page Loading

• HTML را فیلتر می کند Filters HTML

• فیلتر جستجو Search Filter

• فیلتر شرکت ها Companies Filter

• فیلتر قیمت Price Filter

• تک محصول - نمای کلی Single Product - Overview

• محصول واحد - HTML Single Product - HTML

• محصول واحد - JS اولیه Single Product - Initial JS

• محصول واحد - واکشی محصول Single Product - Fetch Product

• تک محصول - خطای واکشی Single Product - Fetch Error

• تک محصول - کامل Single Product - Complete

• setupCart - راه اندازی اولیه setupCart - Initial Setup

• addToCart - راه اندازی addToCart - Setup

• addToCartDOM addToCartDOM

• addToCart - مجموع addToCart - Totals

• setupCart - init setupCart - init

• سبد خرید - به روز رسانی اقلام Cart - Update Items

• سبد خرید - حذف مورد Cart - Remove Item

• سبد خرید - افزایش مبلغ Cart - Increase Amount

• سبد خرید - کاهش مقدار Cart - Decrease Amount

• رفع صفحه محصولات Products Page Fix

• رفع اشکال 2 Bug Fix 2

• پروژه تمام شده Finished Project

جایزه Bonus

• جایزه Bonus

جایزه Bonus

• جایزه Bonus