آموزش DOM 2023 - استفاده از DOM و جاوا اسکریپت برای ساخت وب سایت های پویا [ویدئو]

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

قسمت 1 - مقدمه Part 1 - Introduction

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

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

• معرفی Introduction

• معرفی Introduction

• همه چیز یک شی است Everything Is an Object

• همه چیز یک شی است Everything Is an Object

• ساختن صفحه ساده خودمان Building Our Own Simple Page

• ساختن صفحه ساده خودمان Building Our Own Simple Page

• سلسله مراتب DOM DOM Hierarchy

• سلسله مراتب DOM DOM Hierarchy

• نتیجه گیری سلسله مراتب DOM DOM Hierarchy Conclusion

• نتیجه گیری سلسله مراتب DOM DOM Hierarchy Conclusion

• BOM چیست؟ What Is the BOM?

• BOM چیست؟ What Is the BOM?

• DOM در مقابل جاوا اسکریپت در مقابل پایتون DOM Versus JavaScript Versus Python

• DOM در مقابل جاوا اسکریپت در مقابل پایتون DOM Versus JavaScript Versus Python

• DOM با HTML شما یکسان نیست The DOM Is not the Same as Your HTML

• DOM با HTML شما یکسان نیست The DOM Is not the Same as Your HTML

• DOM آن چیزی نیست که در مرورگر می بینید The DOM Is not What You See in the Browser

• DOM آن چیزی نیست که در مرورگر می بینید The DOM Is not What You See in the Browser

• DOM آن چیزی نیست که در DevTools می بینید The DOM Is not What You See in DevTools

• DOM آن چیزی نیست که در DevTools می بینید The DOM Is not What You See in DevTools

• عناصر شبه Pseudo Elements

• عناصر شبه Pseudo Elements

• خلاصه: DOM چیست؟ Summary: What Is the DOM?

• خلاصه: DOM چیست؟ Summary: What Is the DOM?

• چه کاری می توانیم با DOM انجام دهیم؟ What Can We Do with the DOM?

• چه کاری می توانیم با DOM انجام دهیم؟ What Can We Do with the DOM?

• مثال سریع تغییر DOM Quick Example of Changing the DOM

• مثال سریع تغییر DOM Quick Example of Changing the DOM

قسمت 1 - جاوا اسکریپت در مقابل DOM Part 1 - JavaScript Versus DOM

قسمت 1 - جاوا اسکریپت در مقابل DOM Part 1 - JavaScript Versus DOM

• DOM API چیست؟ What Is the DOM API?

• DOM API چیست؟ What Is the DOM API?

• جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript Lives in Different Environments

• جاوا اسکریپت در محیط های مختلف زندگی می کند JavaScript Lives in Different Environments

• بیایید یک تابع setTimeout() بسازیم Let's Build a setTimeout() Function

• بیایید یک تابع setTimeout() بسازیم Let's Build a setTimeout() Function

• setTimeout - جاوا اسکریپت در مقابل DOM setTimeout - JavaScript Versus DOM

• setTimeout - جاوا اسکریپت در مقابل DOM setTimeout - JavaScript Versus DOM

• DOM فقط برای جاوا اسکریپت نبود The DOM Was not Solely for JavaScript

• DOM فقط برای جاوا اسکریپت نبود The DOM Was not Solely for JavaScript

قسمت 1 - دسترسی به DOM Part 1 - Accessing the DOM

قسمت 1 - دسترسی به DOM Part 1 - Accessing the DOM

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• دسترسی به DOM - مقدمه Accessing the DOM - Introduction

• دسترسی به DOM - مقدمه Accessing the DOM - Introduction

• درک HTML شما Understanding Your HTML

• درک HTML شما Understanding Your HTML

• بیایید صفحه خود را برای این بخش بسازیم Let's Build Our Page for this Section

• بیایید صفحه خود را برای این بخش بسازیم Let's Build Our Page for this Section

• getElementById() getElementById()

• getElementById() getElementById()

• Recap () getElementById getElementById() Recap

• Recap () getElementById getElementById() Recap

• getElementsByClassName() getElementsByClassName()

• getElementsByClassName() getElementsByClassName()

• تست: مقدمه Test: Introduction

• تست: مقدمه Test: Introduction

• تست: ساخت کد تست ما Test: Building Our Test Code

• تست: ساخت کد تست ما Test: Building Our Test Code

• راه حل Solution

• راه حل Solution

• getElementsByTagName() getElementsByTagName()

• getElementsByTagName() getElementsByTagName()

• querySelector - مقدمه querySelector - Introduction

• querySelector - مقدمه querySelector - Introduction

• querySelector - مثال عملی querySelector - Practical Example

• querySelector - مثال عملی querySelector - Practical Example

• خلاصه Summary

• خلاصه Summary

قسمت 1 - گره ها Part 1 - Nodes

قسمت 1 - گره ها Part 1 - Nodes

• گره ها - بخش مقدمه Nodes - Section Introduction

• گره ها - بخش مقدمه Nodes - Section Introduction

• گره ها - مقدمه Nodes - Introduction

• گره ها - مقدمه Nodes - Introduction

• گره ها در عمل Nodes in Action

• گره ها در عمل Nodes in Action

• childNodes - چگونه گره ها را می بینیم؟ childNodes - How Do We See Nodes?

• childNodes - چگونه گره ها را می بینیم؟ childNodes - How Do We See Nodes?

• ایجاد گره های مختلف Creating Different Nodes

• ایجاد گره های مختلف Creating Different Nodes

• انواع مختلف گره ها چیست؟ What Are the Different Types of Nodes?

• انواع مختلف گره ها چیست؟ What Are the Different Types of Nodes?

• گره - درخت خانواده Node - Family Tree

• گره - درخت خانواده Node - Family Tree

• شناسایی گره ها Identifying Nodes

• شناسایی گره ها Identifying Nodes

• HTMLCollection در مقابل NodeList HTMLCollection Versus NodeList

• HTMLCollection در مقابل NodeList HTMLCollection Versus NodeList

• لیست های زنده در مقابل استاتیک Live Versus Static lists

• لیست های زنده در مقابل استاتیک Live Versus Static lists

قسمت 1 - عبور از DOM Part 1 - Traversing the DOM

قسمت 1 - عبور از DOM Part 1 - Traversing the DOM

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• عبور از DOM - مقدمه Traversing the DOM - Introduction

• عبور از DOM - مقدمه Traversing the DOM - Introduction

• ساختن صفحه بخش ما با هم Building Our Section Page Together

• ساختن صفحه بخش ما با هم Building Our Section Page Together

• چرا باید از DOM عبور کنیم؟ Why Do We Need to Traverse the DOM?

• چرا باید از DOM عبور کنیم؟ Why Do We Need to Traverse the DOM?

• سه شیء مهم در DOM The Three Most Important Objects in the DOM

• سه شیء مهم در DOM The Three Most Important Objects in the DOM

• والدین، فرزند و خواهر و برادر - مقدمه ای سریع Parent, Child, and Siblings - A Quick Introduction

• والدین، فرزند و خواهر و برادر - مقدمه ای سریع Parent, Child, and Siblings - A Quick Introduction

• گره والد Parent Node

• گره والد Parent Node

• خواهر و برادر در DOM Siblings in the DOM

• خواهر و برادر در DOM Siblings in the DOM

• اولین فرزند، آخرین فرزند و فرزندان - مقدمه firstChild, lastChild, and Children - Introduction

• اولین فرزند، آخرین فرزند و فرزندان - مقدمه firstChild, lastChild, and Children - Introduction

• اولین فرزند، آخرین فرزند و فرزندان - مثال عملی firstChild, lastChild, and Children - Practical Example

• اولین فرزند، آخرین فرزند و فرزندان - مثال عملی firstChild, lastChild, and Children - Practical Example

• اموال کودکان Children Property

• اموال کودکان Children Property

• childNode در مقابل کودکان - چه تفاوت هایی دارند؟ childNode Versus Children - What Are the Differences?

• childNode در مقابل کودکان - چه تفاوت هایی دارند؟ childNode Versus Children - What Are the Differences?

• تست - انواع گره Test - Node Types

• تست - انواع گره Test - Node Types

• تست - راه حل Test - Solution

• تست - راه حل Test - Solution

• خواهر و برادر - یک کلمه سریع Siblings - A Quick Word

• خواهر و برادر - یک کلمه سریع Siblings - A Quick Word

• کار با روش خواهر و برادر Working with Sibling Methods

• کار با روش خواهر و برادر Working with Sibling Methods

• خلاصه ای از عبور از DOM Summary of Traversing the DOM

• خلاصه ای از عبور از DOM Summary of Traversing the DOM

بخش 1 - ایجاد، حذف و شبیه سازی عناصر DOM Part 1 - Creating, Removing, and Cloning DOM Elements

بخش 1 - ایجاد، حذف و شبیه سازی عناصر DOM Part 1 - Creating, Removing, and Cloning DOM Elements

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• وب سایت های استاتیک در مقابل پویا Static Versus Dynamic Websites

• وب سایت های استاتیک در مقابل پویا Static Versus Dynamic Websites

• چگونه عناصر را ایجاد می کنید How Do You Create Elements

• چگونه عناصر را ایجاد می کنید How Do You Create Elements

• سند در مقابل سند Document Versus Document

• سند در مقابل سند Document Versus Document

• آشنایی با متد ()createElement Understanding the createElement() Method

• آشنایی با متد ()createElement Understanding the createElement() Method

• بیایید عنصر خود را به DOM متصل کنیم Let's Attach Our Element to the DOM

• بیایید عنصر خود را به DOM متصل کنیم Let's Attach Our Element to the DOM

• استفاده از ویژگی textContent برای افزودن متن به عنصر تازه ایجاد شده ما Using the textContent Property to Add Text to Our Newly Created Element

• استفاده از ویژگی textContent برای افزودن متن به عنصر تازه ایجاد شده ما Using the textContent Property to Add Text to Our Newly Created Element

• appendChild چگونه کار می کند؟ How Does appendChild Work?

• appendChild چگونه کار می کند؟ How Does appendChild Work?

• روش insertBefore() insertBefore() Method

• روش insertBefore() insertBefore() Method

• آیا روش insertAfter() وجود دارد؟ Is There an insertAfter() Method?

• آیا روش insertAfter() وجود دارد؟ Is There an insertAfter() Method?

• بیایید روش insertBefore() را فریب دهیم Let's Trick the insertBefore() Method

• بیایید روش insertBefore() را فریب دهیم Let's Trick the insertBefore() Method

• نحوه حذف عناصر How to Remove Elements

• نحوه حذف عناصر How to Remove Elements

• removeChild() removeChild()

• removeChild() removeChild()

• برداشتن() remove()

• برداشتن() remove()

• زمان کلون است It's Time to Clone

• زمان کلون است It's Time to Clone

• کلون کردن مثال با استفاده از setInterval() Clone Example Using setInterval()

• کلون کردن مثال با استفاده از setInterval() Clone Example Using setInterval()

• بیایید کد کلون خود را تجزیه و تحلیل کنیم Let's Analyze Our Clone Code

• بیایید کد کلون خود را تجزیه و تحلیل کنیم Let's Analyze Our Clone Code

• مهارت های خود را بیازمایید Test Your Skills

• مهارت های خود را بیازمایید Test Your Skills

• تست - راه حل Test - Solution

• تست - راه حل Test - Solution

قسمت 1 - کجا بعدی؟ Part 1 - Where to Next?

قسمت 1 - کجا بعدی؟ Part 1 - Where to Next?

• دوره Outro Course Outro

• دوره Outro Course Outro

قسمت 2 - مقدمه ای بر رویدادها Part 2 - Introduction to Events

قسمت 2 - مقدمه ای بر رویدادها Part 2 - Introduction to Events

• معرفی introduction

• معرفی introduction

• مقدمه - رویداد چیست Introduction - What Is an Event

• مقدمه - رویداد چیست Introduction - What Is an Event

• دو نکته مهم در مورد رویدادها The Two Most Important Things When It Comes to Events

• دو نکته مهم در مورد رویدادها The Two Most Important Things When It Comes to Events

• شنوندگان رویداد درون خطی - معرفی مختصر Inline Event Listeners - Brief Introduction

• شنوندگان رویداد درون خطی - معرفی مختصر Inline Event Listeners - Brief Introduction

• Inline Properties - معرفی مختصر Inline Properties - Brief Introduction

• Inline Properties - معرفی مختصر Inline Properties - Brief Introduction

• روش addEventListener() - معرفی مختصر addEventListener() Method - Brief Introduction

• روش addEventListener() - معرفی مختصر addEventListener() Method - Brief Introduction

• خلاصه - سه راه برای افزودن شنونده رویداد به عناصر HTML Summary - the Three Ways to Add an Event Listener to HTML Elements

• خلاصه - سه راه برای افزودن شنونده رویداد به عناصر HTML Summary - the Three Ways to Add an Event Listener to HTML Elements

• یک کلمه سریع در مورد رویدادها A Quick Word on Events

• یک کلمه سریع در مورد رویدادها A Quick Word on Events

• شنوندگان رویداد درون خطی - بررسی اجمالی مفصل Inline Event Listeners - Detailed Overview

• شنوندگان رویداد درون خطی - بررسی اجمالی مفصل Inline Event Listeners - Detailed Overview

• شنوندگان رویداد درون خطی - مقدمه تست (قسمت 1 از 3) Inline Event Listeners - Test Introduction (Part 1 of 3)

• شنوندگان رویداد درون خطی - مقدمه تست (قسمت 1 از 3) Inline Event Listeners - Test Introduction (Part 1 of 3)

• شنوندگان رویداد درون خطی - تنظیم آزمایشی (بخش 2 از 3) Inline Event Listeners - Test Setup (Part 2 of 3)

• شنوندگان رویداد درون خطی - تنظیم آزمایشی (بخش 2 از 3) Inline Event Listeners - Test Setup (Part 2 of 3)

• شنوندگان رویداد درون خطی - راه حل تست (بخش 3 از 3) Inline Event Listeners - Test Solution (Part 3 of 3)

• شنوندگان رویداد درون خطی - راه حل تست (بخش 3 از 3) Inline Event Listeners - Test Solution (Part 3 of 3)

• خصوصیات درون خطی - بررسی اجمالی تفصیلی Inline Properties - Detailed Overview

• خصوصیات درون خطی - بررسی اجمالی تفصیلی Inline Properties - Detailed Overview

• ویژگی های درون خطی - مقدمه تست (قسمت 1 از 3) Inline Properties - Test Introduction (Part 1 of 3)

• ویژگی های درون خطی - مقدمه تست (قسمت 1 از 3) Inline Properties - Test Introduction (Part 1 of 3)

• ویژگی های درون خطی - تنظیم تست (بخش 2 از 3) Inline Properties - Test Setup (Part 2 of 3)

• ویژگی های درون خطی - تنظیم تست (بخش 2 از 3) Inline Properties - Test Setup (Part 2 of 3)

• ویژگی های درون خطی - راه حل تست (بخش 3 از 3) Inline Properties - Test Solution (Part 3 of 3)

• ویژگی های درون خطی - راه حل تست (بخش 3 از 3) Inline Properties - Test Solution (Part 3 of 3)

• روش addEventListener() - بررسی اجمالی تفصیلی addEventListener() Method - Detailed Overview

• روش addEventListener() - بررسی اجمالی تفصیلی addEventListener() Method - Detailed Overview

• توابع پاسخ به تماس - مروری سریع Callback Functions - A Quick Overview

• توابع پاسخ به تماس - مروری سریع Callback Functions - A Quick Overview

• addEventListener - مقدمه تست (بخش 1 از 3) addEventListener - Test Introduction (Part 1 of 3)

• addEventListener - مقدمه تست (بخش 1 از 3) addEventListener - Test Introduction (Part 1 of 3)

• addEventListener - تنظیم تست (بخش 2 از 3) addEventListener - Test Setup (Part 2 of 3)

• addEventListener - تنظیم تست (بخش 2 از 3) addEventListener - Test Setup (Part 2 of 3)

• addEventListener - راه حل تست (بخش 3 از 3) addEventListener - Test Solution (Part 3 of 3)

• addEventListener - راه حل تست (بخش 3 از 3) addEventListener - Test Solution (Part 3 of 3)

• سخنرانی اضافی - سه راه برای تعریف یک رنگ Extra Lecture - Three Ways to Define a Color

• سخنرانی اضافی - سه راه برای تعریف یک رنگ Extra Lecture - Three Ways to Define a Color

• سخنرانی اضافی - ارقام، بایت ها و قالب هگزادسیمال Extra Lecture - Digits, Bytes, and Hexadecimal Format

• سخنرانی اضافی - ارقام، بایت ها و قالب هگزادسیمال Extra Lecture - Digits, Bytes, and Hexadecimal Format

• سخنرانی اضافی - روش toString(). Extra Lecture - toString() Method

• سخنرانی اضافی - روش toString(). Extra Lecture - toString() Method

قسمت 2 - انواع مختلف رویدادها Part 2 - Different Types of Events

قسمت 2 - انواع مختلف رویدادها Part 2 - Different Types of Events

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• مثال رویداد کلیک سریع - قسمت 1 از 2 Quick Click Event Example - Part 1 of 2

• مثال رویداد کلیک سریع - قسمت 1 از 2 Quick Click Event Example - Part 1 of 2

• مثال رویداد کلیک سریع - قسمت 2 از 2 Quick Click Event Example - Part 2 of 2

• مثال رویداد کلیک سریع - قسمت 2 از 2 Quick Click Event Example - Part 2 of 2

• انواع رویداد Event Types

• انواع رویداد Event Types

• رویداد Keydown - مثال Keydown Event - Example

• رویداد Keydown - مثال Keydown Event - Example

• رویدادهای فرم - مقدمه Form Events - Introduction

• رویدادهای فرم - مقدمه Form Events - Introduction

• نمای کلی از چه فرمی خواهیم ساخت Overview of What Form We Will Build

• نمای کلی از چه فرمی خواهیم ساخت Overview of What Form We Will Build

• فرم: ساخت صفحه ما - HTML + CSS Form: Building Our Page - HTML + CSS

• فرم: ساخت صفحه ما - HTML + CSS Form: Building Our Page - HTML + CSS

• نحوه یافتن فرم ها و رفتار پیش فرض آن How to Find Forms and Its Default Behavior

• نحوه یافتن فرم ها و رفتار پیش فرض آن How to Find Forms and Its Default Behavior

• رویداد ورودی، رویداد تمرکز، و کپی/پیست رویدادها Input Event, Focus Event, and Copy/Paste Events

• رویداد ورودی، رویداد تمرکز، و کپی/پیست رویدادها Input Event, Focus Event, and Copy/Paste Events

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

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

قسمت 2 - چالش های رویداد Part 2 - Event Challenges

قسمت 2 - چالش های رویداد Part 2 - Event Challenges

• معرفی Introduction

• معرفی Introduction

• چالش 1 - مقدمه Challenge 1 - Introduction

• چالش 1 - مقدمه Challenge 1 - Introduction

• چالش 1 - روی تصویر و نمایش متن کلیک کنید Challenge 1 - Click Image and Display Text

• چالش 1 - روی تصویر و نمایش متن کلیک کنید Challenge 1 - Click Image and Display Text

• چالش 2 - مقدمه Challenge 2 - Introduction

• چالش 2 - مقدمه Challenge 2 - Introduction

• چالش 2 - وقتی ماوس روی تصویر حرکت می کند، متن را آشکار کنید Challenge 2 - Reveal Text When Mouse Moves over Image

• چالش 2 - وقتی ماوس روی تصویر حرکت می کند، متن را آشکار کنید Challenge 2 - Reveal Text When Mouse Moves over Image

• چالش 2 - هنگامی که ماوس روی تصویر حرکت می کند یک نقطه سیاه ایجاد کنید Challenge 2 - Create a Black Dot When Mouse Moves over Image

• چالش 2 - هنگامی که ماوس روی تصویر حرکت می کند یک نقطه سیاه ایجاد کنید Challenge 2 - Create a Black Dot When Mouse Moves over Image

• چالش 2 - حرکت پویا نقطه و راه حل کامل Challenge 2 - Dynamic Dot Movement and Complete Solution

• چالش 2 - حرکت پویا نقطه و راه حل کامل Challenge 2 - Dynamic Dot Movement and Complete Solution

• چالش 3 - سبیل Challenge 3 - Mustache

• چالش 3 - سبیل Challenge 3 - Mustache

• چالش 3 - قرار دادن سبیل روی یک تصویر Challenge 3 - Placing a Mustache on an Image

• چالش 3 - قرار دادن سبیل روی یک تصویر Challenge 3 - Placing a Mustache on an Image

قسمت 2 - سلسله مراتب شی و گره Part 2 - Object and Node Hierarchy

قسمت 2 - سلسله مراتب شی و گره Part 2 - Object and Node Hierarchy

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• اشیاء JS در مقابل اشیاء DOM در کنسول JS objects Versus DOM Objects in the Console

• اشیاء JS در مقابل اشیاء DOM در کنسول JS objects Versus DOM Objects in the Console

• میزبان در مقابل اشیاء بومی Host Versus Native Objects

• میزبان در مقابل اشیاء بومی Host Versus Native Objects

• اهمیت درک وراثت The Importance of Understanding Inheritance

• اهمیت درک وراثت The Importance of Understanding Inheritance

• پیدا کردن متد ()createElement Finding the createElement() Method

• پیدا کردن متد ()createElement Finding the createElement() Method

• گره عنصر - سلسله مراتب شی Element Node - Object Hierarchy

• گره عنصر - سلسله مراتب شی Element Node - Object Hierarchy

• خلاصه نویسی سریع در سلسله مراتب شی Quick Recap on Object Hierarchy

• خلاصه نویسی سریع در سلسله مراتب شی Quick Recap on Object Hierarchy

• پسوند DOM چیست؟ What Is DOM Extension?

• پسوند DOM چیست؟ What Is DOM Extension?

• افزودن پسوند DOM خودمان - مثال عملی Adding Our Own DOM Extension - Practical Example

• افزودن پسوند DOM خودمان - مثال عملی Adding Our Own DOM Extension - Practical Example

• آیا برنامه های افزودنی DOM چیز خوبی هستند؟ Are DOM Extensions a Good Thing?

• آیا برنامه های افزودنی DOM چیز خوبی هستند؟ Are DOM Extensions a Good Thing?

• مشکلات برنامه های افزودنی DOM ... The Problems with DOM Extensions Are ...

• مشکلات برنامه های افزودنی DOM ... The Problems with DOM Extensions Are ...

قسمت 2 - گرفتن و حباب Part 2 - Capturing and Bubbling

قسمت 2 - گرفتن و حباب Part 2 - Capturing and Bubbling

• بخش مقدمه Section Introduction

• بخش مقدمه Section Introduction

• یک رویداد یک اتفاق مجزا نیست An Event Is not an Isolated Occurrence

• یک رویداد یک اتفاق مجزا نیست An Event Is not an Isolated Occurrence

• دو مرحله از یک رویداد - گرفتن و حباب The Two Phases of an Event - Capturing and Bubbling

• دو مرحله از یک رویداد - گرفتن و حباب The Two Phases of an Event - Capturing and Bubbling

• نحوه گوش دادن به یک رویداد در مرحله ضبط How to Listen to an Event During the Capturing Phase

• نحوه گوش دادن به یک رویداد در مرحله ضبط How to Listen to an Event During the Capturing Phase

• مثال - بیایید در هر دو مرحله به یک رویداد گوش دهیم Example - Let's Listen to an Event During Both Phases

• مثال - بیایید در هر دو مرحله به یک رویداد گوش دهیم Example - Let's Listen to an Event During Both Phases

• مثال - گرفتن و حباب زدن با استفاده از for... حلقه Example - Capturing and Bubbling Using the for... of Loop

• مثال - گرفتن و حباب زدن با استفاده از for... حلقه Example - Capturing and Bubbling Using the for... of Loop

• چه کسی به گرفتن عکس در مقابل حباب اهمیت می دهد؟ Who Cares about Capturing Versus Bubbling?

• چه کسی به گرفتن عکس در مقابل حباب اهمیت می دهد؟ Who Cares about Capturing Versus Bubbling?

• چگونه ضبط رویداد و حباب رویداد را متوقف کنیم؟ How to Stop Event Capturing and Event Bubbling?

• چگونه ضبط رویداد و حباب رویداد را متوقف کنیم؟ How to Stop Event Capturing and Event Bubbling?

• نمونه ای از stopPropagation() Example of stopPropagation()

• نمونه ای از stopPropagation() Example of stopPropagation()

قسمت 2 - هئیت رویداد و چالش ها Part 2 - Event Delegation and Challenges

قسمت 2 - هئیت رویداد و چالش ها Part 2 - Event Delegation and Challenges

• معرفی هیئت رویداد Event Delegation Introduction

• معرفی هیئت رویداد Event Delegation Introduction

• چالش جعبه - مقدمه Box Challenge - Introduction

• چالش جعبه - مقدمه Box Challenge - Introduction

• چالش جعبه - ساخت Box Challenge - Build

• چالش جعبه - ساخت Box Challenge - Build

• چالش جعبه - راه حل Box Challenge - Solution

• چالش جعبه - راه حل Box Challenge - Solution

• ویژگی classList چیست؟ What Is the classList Property?

• ویژگی classList چیست؟ What Is the classList Property?

• چالش جعبه - کامل کردن راه حل ما Box Challenge - Perfecting Our Solution

• چالش جعبه - کامل کردن راه حل ما Box Challenge - Perfecting Our Solution

• چالش نقل قول - مقدمه Quote Challenge - Introduction

• چالش نقل قول - مقدمه Quote Challenge - Introduction

• چالش نقل قول - ساخت Quote Challenge - Build

• چالش نقل قول - ساخت Quote Challenge - Build

• چالش نقل قول - راه حل Quote Challenge - Solution

• چالش نقل قول - راه حل Quote Challenge - Solution

• فهرست چالش - مقدمه List Challenge - Introduction

• فهرست چالش - مقدمه List Challenge - Introduction

• فهرست چالش - ساخت List Challenge - Build

• فهرست چالش - ساخت List Challenge - Build

• فهرست چالش - راه حل List Challenge - Solution

• فهرست چالش - راه حل List Challenge - Solution

قسمت 2 - پروژه وب سایت - لیست خرید Part 2 - Website Project - A Shopping List

قسمت 2 - پروژه وب سایت - لیست خرید Part 2 - Website Project - A Shopping List

• قرار است چه چیزی بسازیم؟ What Are We Going to Build?

• قرار است چه چیزی بسازیم؟ What Are We Going to Build?

• بررسی اجمالی سطح بالا از ساختار وب سایت High-Level Overview of the Website Structure

• بررسی اجمالی سطح بالا از ساختار وب سایت High-Level Overview of the Website Structure

• ساخت HTML وب سایت ما Building Our Website HTML

• ساخت HTML وب سایت ما Building Our Website HTML

• کدنویسی CSS برای هدر Coding the CSS for the Header

• کدنویسی CSS برای هدر Coding the CSS for the Header

• کدگذاری CSS برای بخش Form and List Coding the CSS for the Form and List Section

• کدگذاری CSS برای بخش Form and List Coding the CSS for the Form and List Section

• روش‌های دسترسی DOM، روش forEach و گره‌ها - جمع‌بندی سریع DOM Access Methods, the forEach Method, and Nodes - Quick Recap

• روش‌های دسترسی DOM، روش forEach و گره‌ها - جمع‌بندی سریع DOM Access Methods, the forEach Method, and Nodes - Quick Recap

• حذف اقلام - روش قدیمی مدرسه Removing Items - The Old-School Way

• حذف اقلام - روش قدیمی مدرسه Removing Items - The Old-School Way

• حذف آیتم ها - استفاده از حباب رویداد و نمایندگی رویداد Removing Items - Using Event Bubbling and Event Delegation

• حذف آیتم ها - استفاده از حباب رویداد و نمایندگی رویداد Removing Items - Using Event Bubbling and Event Delegation

• مقدمه ای بر برخورد با فرم ها Introduction to Dealing with Forms

• مقدمه ای بر برخورد با فرم ها Introduction to Dealing with Forms

• رفتار پیش‌فرض با فرم‌ها و نحوه جلوگیری از رفتار پیش‌فرض Default Behavior with Forms and How to Prevent Default Behavior

• رفتار پیش‌فرض با فرم‌ها و نحوه جلوگیری از رفتار پیش‌فرض Default Behavior with Forms and How to Prevent Default Behavior

• افزودن موارد به لیست ما - ایجاد عناصر به صورت پویا Adding Items to Our List - Creating Elements Dynamically

• افزودن موارد به لیست ما - ایجاد عناصر به صورت پویا Adding Items to Our List - Creating Elements Dynamically

• افزودن آیتم ها به لیست ما - افزودن کلاس ها با classList API Adding Items to Our List - Adding Classes with the classList API

• افزودن آیتم ها به لیست ما - افزودن کلاس ها با classList API Adding Items to Our List - Adding Classes with the classList API

• پنهان کردن و پنهان کردن لیست خرید ما Hiding and Un-Hiding Our Shopping List

• پنهان کردن و پنهان کردن لیست خرید ما Hiding and Un-Hiding Our Shopping List

• خلاصه ای از شنوندگان رویدادهای مختلف که قبلاً با آنها سروکار داشته ایم Recap of the Different Event Listeners We Have Already Dealt With

• خلاصه ای از شنوندگان رویدادهای مختلف که قبلاً با آنها سروکار داشته ایم Recap of the Different Event Listeners We Have Already Dealt With

• دسترسی به <ورودی> در عنصر <form> Accessing an <input> within a <form> Element

• دسترسی به <ورودی> در عنصر <form> Accessing an <input> within a <form> Element

• روش ()toLowerCase چیست؟ What Is the toLowerCase() Method?

• روش ()toLowerCase چیست؟ What Is the toLowerCase() Method?

• دسترسی به تگ‌های <li> و معرفی متد ()Array.from Accessing our <li> Tags and Introduction to the Array.from() Method

• دسترسی به تگ‌های <li> و معرفی متد ()Array.from Accessing our <li> Tags and Introduction to the Array.from() Method

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

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

• چگونه Array.from() کار می کند - چند مثال عملی How Does Array.from() Work - Some Practical Examples

• چگونه Array.from() کار می کند - چند مثال عملی How Does Array.from() Work - Some Practical Examples

• استفاده از forEach() برای حلقه زدن از طریق آرایه مواد غذایی ما Using forEach() to Loop Through Our Groceries Array

• استفاده از forEach() برای حلقه زدن از طریق آرایه مواد غذایی ما Using forEach() to Loop Through Our Groceries Array

• مقدمه ای بر indexOf() Introduction to indexOf()

• مقدمه ای بر indexOf() Introduction to indexOf()

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

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

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

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

• اتمام کارکرد جستجوی ما Finishing Off Our Search Functionality

• اتمام کارکرد جستجوی ما Finishing Off Our Search Functionality

• بهبود: وقتی کاربر روی دکمه ای کلیک می کند، متن <input> را پاک کنید Improvement: Clear the <input>Text When the User Clicks a Button

• بهبود: وقتی کاربر روی دکمه ای کلیک می کند، متن <input> را پاک کنید Improvement: Clear the <input>Text When the User Clicks a Button

• بهبود: بیایید برگه ها را اضافه کنیم Improvement: Let's Add Tabs

• بهبود: بیایید برگه ها را اضافه کنیم Improvement: Let's Add Tabs

• بهبود: ساختن برگه‌های ما (HTML + CSS) Improvement: Building Our Tabs (HTML + CSS)

• بهبود: ساختن برگه‌های ما (HTML + CSS) Improvement: Building Our Tabs (HTML + CSS)

• داده* ویژگی چیست؟ What is the data* Attribute?

• داده* ویژگی چیست؟ What is the data* Attribute?

• استفاده از classList API برای افزودن کلاس‌های پویا به تب‌های سرفصل ما Using the classList API to Add Dynamic Classes to Our Heading Tabs

• استفاده از classList API برای افزودن کلاس‌های پویا به تب‌های سرفصل ما Using the classList API to Add Dynamic Classes to Our Heading Tabs

• بهبود: نمایش و مخفی کردن پانل های ما با کلیک بر روی برگه عنوان Improvement: Showing and Hiding Our Panels When the Heading Tab Is Clicked

• بهبود: نمایش و مخفی کردن پانل های ما با کلیک بر روی برگه عنوان Improvement: Showing and Hiding Our Panels When the Heading Tab Is Clicked

• بهبود: اضافه کردن یک دکمه برای پاسخ ما Improvement: Adding a Button for Our Answer

• بهبود: اضافه کردن یک دکمه برای پاسخ ما Improvement: Adding a Button for Our Answer

قسمت 2 - Outro Part 2 - Outro

قسمت 2 - Outro Part 2 - Outro

• کجا بعدی؟ Where to Next?

• کجا بعدی؟ Where to Next?