آموزش *به روز شده* DOM 2023 ساخت وب سایت های پویا جاوا اسکریپت قسمت 2

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

مقدمه ای بر رویدادها Introduction to Events

• مقدمه - رویداد چیست Introduction - what is an event

• قبل از شروع ... یک قدم به عقب بردارید Before we begin ... take a step back

• 2 نکته مهم در مورد رویدادها The 2 most important things when it comes to events

• تفاوت بین Event Liner و Event Handler چیست؟ What is the difference between an Event Listener and Event Handler

• Inline Event Listeners - معرفی مختصر Inline Event Listeners - brief introduction

• آیا باید مقادیر ویژگی های خود را در علامت نقل قول قرار دهیم؟ Do we need to wrap our attribute values in quotation marks?

• چرا یادگیری در مورد شنوندگان رویداد درون خطی مهم است؟ Why is it important to learn about inline event listeners?

• Inline Properties - معرفی مختصر Inline Properties - brief introduction

• متد addEventListener() - معرفی مختصر addEventListener() method - brief introduction

• خلاصه - 3 روش برای افزودن شنونده رویداد به عناصر HTML Summary - the 3 ways to add an event listener to HTML elements

• 3 روش برای افزودن شنونده رویداد 3 ways to add an event listener

• یک کلمه کوتاه در مورد رویدادها A quick word on events

• آیا شنوندگان رویداد برای اجرا سنگین هستند؟ Are event listeners heavy on performance?

• شنوندگان رویداد درون خطی - مروری دقیق Inline Event Listeners - detailed overview

• Inline Event Listeners - مقدمه TEST (قسمت 1 از 3) Inline Event Listeners - TEST introduction (part 1 of 3)

• شنوندگان رویداد درون خطی - راه اندازی تست (قسمت 2 از 3) Inline Event Listeners - TEST setup (part 2 of 3)

• شنوندگان رویداد درون خطی - راه حل تست (قسمت 3 از 3) Inline Event Listeners - TEST solution (part 3 of 3)

• ویژگی های درون خطی - نمای کلی دقیق Inline Properties - detailed overview

• ویژگی های HTML در مقابل ویژگی های DOM HTML attributes vs DOM properties

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

• ویژگی های درون خطی - راه اندازی تست (قسمت 2 از 3) Inline Properties - TEST setup (part 2 of 3)

• ویژگی های درون خطی - راه حل تست (قسمت 3 از 3) Inline Properties - TEST solution (part 3 of 3)

• مدیریت رویداد به روشی بهتر Event handling the better way

• متد addEventListener () - نمای کلی addEventListener() method - detailed overview

• توابع پاسخ به تماس - مروری سریع Callback functions - a quick overview

• عملکرد برگشت به تماس - نترسید Callback function - don't get intimidated

• addEventListener - مقدمه TEST (قسمت 1 از 3) addEventListener - TEST introduction (part 1 of 3)

• چالش دایره - کاری که من از شما می خواهم انجام دهید Circle Challenge - what I want you to do

• addEventListener - راه اندازی تست (قسمت 2 از 3) addEventListener - TEST setup (part 2 of 3)

• addEventListener - راه حل تست (قسمت 3 از 3) addEventListener - TEST solution (part 3 of 3)

• صبر کنید، آیا می‌توانیم آرگومان‌هایی را به تابع callback addEventListener ارسال کنیم؟ Wait, can we pass arguments into the addEventListener callback function?

• بهبود کد ما Improving our code

• سخنرانی اضافی - 3 روش برای تعریف یک رنگ EXTRA lecture - 3 ways to define a color

• سخنرانی EXTRA - ارقام، بایت ها و فرمت هگزادسیمال EXTRA lecture - digits, bytes and hexadecimal format

• ارقام، بایت ها و خلاصه هگزادسیمال Digits, bytes and hexadecimal recap

• سخنرانی EXTRA - روش toString(). EXTRA lecture - toString() method

• چیزی که من ذکر نکردم What I didn't mention

• مناسبت ها Events

انواع مختلف رویدادها Different types of events

• معرفی بخش Section introduction

• رویدادها فقط با جاوا اسکریپت استفاده نمی شوند Events are not only used with JavaScript

• مثال رویداد کلیک سریع - قسمت 1 از 2 Quick click event example - part 1 of 2

• نمونه رویداد کلیک سریع - قسمت 2 از 2 Quick click event example - part 2 of 2

• کلمه سریع در <فرم ها> Quick word on <forms>

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

• حوادث از کجاست؟ Where are events from?

• رویداد Keydown - مثال Keydown event - example

• همه رویدادها از رابط رویداد به ارث می برند All events inherit from the Event interface

• رویدادهای فرم - مقدمه Form events - intro

• نمای کلی از فرمی که می خواهم بسازید Overview of what form I want you to build

• فرم: ساخت صفحه ما - HTML + CSS Form: building our page - HTML + CSS

• نحوه پیدا کردن فرم ها و رفتار پیش فرض آن How to find forms and its default behavior

• رویداد ورودی، رویداد تمرکز و کپی/پیست رویدادها Input event, focus event and copy/paste events

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

• جمع بندی سریع - رایج ترین انواع رویداد چیست؟ Quick recap - what are the most common event types?

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

چالش های رویداد Event Challenges

• کلمه سریع Quick word

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

• چالش 1 - روی تصویر کلیک کنید و متن را نمایش دهید Challenge 1 - click image and display text

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

• چالش 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 - Dynamic dot movement and complete solution

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

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

• توانجامش دادی! You did it!

سلسله مراتب شی و گره Object and node hierarchy

• معرفی بخش Section introduction

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

• موضوع پیشرفته Advanced topic

• سایه DOM Shadow DOM

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

• اهمیت درک وراثت The importance of understanding inheritance

• یافتن متد ()createElement Finding the createElement() method

• گره عنصر - سلسله مراتب شی Element node - object hierarchy

• خلاصه نویسی سریع سلسله مراتب شی Quick recap on object hierarchy

• پسوند DOM چیست؟ What is DOM extension?

• افزودن پسوند DOM خودمان - مثال عملی Adding our own DOM extension - practical example

• آیا پسوندهای DOM چیز خوبی هستند؟ Are DOM extensions a good thing?

• مشکلات پسوندهای DOM عبارتند از ... The problems with DOM extensions are ...

• سلسله مراتب شی و گره Object and node hierarchy

گرفتن و حباب Capturing and Bubbling

• معرفی بخش Section introduction

• یک رویداد یک اتفاق مجزا نیست An event is not an isolated occurrence

• 2 مرحله یک رویداد - گرفتن و حباب The 2 phases of an event - capturing & bubbling

• چرا رویدادها هم فاز ضبط و هم فاز حباب دارند؟ Why do events have both a capture phase and a bubble phase?

• نحوه گوش دادن به یک رویداد در مرحله ضبط How to listen to an event during the capturing phase

• مثال - اجازه می دهد در هر دو مرحله به یک رویداد گوش دهیم Example - lets listen to an event during both phases

• مثال - گرفتن و حباب زدن با استفاده از حلقه for ... Example - capturing and bubbling using the for ... of loop

• چه کسی به گرفتن عکس در مقابل حباب اهمیت می دهد؟ Who cares about capturing vs bubbling?

• چگونه ضبط رویداد و حباب رویداد را متوقف کنیم؟ How to stop event capturing and event bubbling?

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

• حباب و ضبط مسابقه Bubbling and Capturing Quiz

هیئت رویداد و چالش ها Event Delegation and Challenges

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

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

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

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

• ویژگی classList چیست؟ What is the classList property?

• چالش جعبه - کامل کردن راه حل ما Box Challenge - perfecting our solution

• خلاصه چالش جعبه Summary of the box challenge

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

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

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

• parentNode در مقابل parentElement parentNode vs parentElement

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

• لیست چالش - ساخت List Challenge - build

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

• چرا tagName() حروف بزرگ برمی گرداند؟ Why does tagName() return uppercase?

• ویژگی tagName - چرا همه CAPS؟ tagName property - why all CAPS?

• هیئت رویداد Event Delegation

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

• قراره چی بسازیم؟ What are we going to build?

• نمای کلی ساختار وب سایت در سطح بالا High level overview of the website structure

• ساخت وب سایت ما HTML Building our website HTML

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

• کدنویسی CSS برای بخش فرم و لیست Coding the CSS for the form and list section

• روش‌های دسترسی DOM، روش forEach و گره‌ها - جمع‌بندی سریع DOM access methods, the forEach method, and nodes - quick recap

• حذف اقلام - روش مدرسه قدیمی Removing items - the old school way

• حذف موارد - با استفاده از حباب رویداد و تفویض رویداد Removing items - using event bubbling and event delegation

• مقدمه ای بر برخورد با فرم ها Introduction to dealing with forms

• رفتار پیش‌فرض با فرم‌ها و نحوه جلوگیری از رفتار پیش‌فرض Default behavior with forms and how to prevent the default behavior

• افزودن موارد به لیست ما - ایجاد عناصر به صورت پویا Adding items to our list - creating elements dynamically

• افزودن موارد به لیست ما - افزودن کلاس ها با classList API Adding items to our list - adding classes with the classList API

• مخفی کردن و غیر مخفی کردن لیست خرید ما Hiding and un-hiding our shopping list

• خلاصه ای از شنوندگان رویدادهای مختلف که قبلاً با آنها برخورد کرده ایم Recap of the different event listeners we've already dealt with

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

• متد ()toLowerCase چیست؟ What is the toLowerCase() 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() چگونه کار می کند - چند مثال عملی How does Array.from() work - some practical examples

• با استفاده از ()forEach برای چرخش در آرایه مواد غذایی ما Using forEach() to loop through our groceries array

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

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

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

• در حال اتمام عملکرد جستجوی ما Finishing off our search functionality

• بهبود: وقتی کاربر روی دکمه کلیک می کند، متن <ورودی> را پاک کنید IMPROVEMENT: clear the <input> text when the user clicks a button

• بهبود: می خواهم برگه ها را اضافه کنید IMPROVEMENT: I want you to add tabs

• بهبود: ساخت برگه های ما (HTML + CSS) IMPROVEMENT: building our tabs (HTML + CSS)

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

• با استفاده از 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: adding a button for our answer

Outro Outro

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