آموزش جاوا اسکریپت: ارتقای کار با DOM - آخرین آپدیت

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

مقدمه Introduction

• ارتقای دانش جاوا اسکریپت در زمینه DOM Enhance your JavaScript DOM knowledge

• نحوه استفاده از فایل‌های تمرینی در گیت‌هاب How to use the GitHub-hosted exercise files

1. درک مفهوم DOM 1. Understanding the DOM

• درخت DOM و انواع نودها DOM tree and node types

• کاوش در DOM با استفاده از DevTools Exploring the DOM with DevTools

• راه حل: کارآگاه DOM Solution: DOM detective

• مقایسه DOM در مقابل HTML و جاوا اسکریپت DOM vs. HTML vs. JavaScript

• چالش: کارآگاه DOM Challenge: DOM detective

• DOM چیست؟ What is the DOM?

2. انتخاب عناصر DOM 2. Selecting DOM Elements

• استفاده از انتخابگرهای CSS برای هدف قرار دادن عناصر Using CSS selectors to target element

• چالش: شکارچی عناصر Challenge: Element hunter

• متدهای getElementById، getElementsByClassName و getElementsByTagName getElementById, getElementsByClassName, getElementsByTagName

• متد matches The matches method

• راه حل: شکارچی عناصر Solution: Element hunter

• متدهای querySelector و querySelectorAll querySelector and querySelectorAll

3. پیمایش در DOM 3. Traversing the DOM

• کار با متدهای دریافت نودهای والد، فرزند و خواهر و برادر Working with methods to get parent, child, and sibling nodes

• راه حل: پیمایش درخت حیوانات Solution: Animal tree traversal

• پیمایش با استفاده از closest و contains Traversing with closest and contains

• چالش: پیمایش درخت حیوانات Challenge: Animal tree traversal

• نودهای والد، فرزند و خواهر و برادر Parent, child, and sibling nodes

4. تغییر عناصر DOM 4. Modifying DOM Elements

• چالش: تغییر شکل دهنده Challenge: Shapeshifter

• تغییر محتوای متنی و HTML Changing text and HTML content

• دستکاری ویژگی‌ها (Attributes) و داده‌های سفارشی (Data Attributes) Manipulating attributes and data attributes

• استایل‌های Inline با جاوا اسکریپت Inline styles with JavaScript

• کار با کلاس‌ها Working with classes

• تغییر مقادیر عناصر ورودی (Input) Changing values of input elements

• راه حل: تغییر شکل دهنده Solution: Shapeshifter

5. ایجاد، افزودن و مدیریت نودها 5. Creating, Adding, and Managing Nodes

• راه حل: سازنده عناصر Solution: Element creator

• شبیه‌سازی، جایگزینی و حذف نودها Cloning, replacing, and removing nodes

• درج عناصر Inserting elements

• ایجاد عناصر با createElement Creating elements with createElement

• سازنده‌ها برای ایجاد انواع خاصی از عناصر Constructors for creating specific types of elements

• چالش: سازنده عناصر Challenge: Element creator

6. مدیریت رویدادها 6. Event Handling

• تفویض رویداد (Event Delegation) Event delegation

• انتشار رویداد: Capture و Bubbling Event propagation: Capturing and bubbling

• حذف هندلرهای رویداد Removing event handlers

• کار با preventDefault Working with preventDefault

• چالش: اپلیکیشن رویدادمحور Challenge: Eventful app

• راه حل: اپلیکیشن رویدادمحور Solution: Eventful app

• شنوندگان رویداد، هندلرهای رویداد و اشیاء رویداد Event listeners, event handlers, and event objects

• رویدادهای رایج DOM Common DOM events

7. دستکاری پیشرفته DOM 7. Advanced DOM Manipulation

• کار با فرم‌ها و عناصر ورودی Working with forms and input elements

• دستکاری لیست‌ها Manipulating lists

• DOM و AJAX: رابط برنامه نویسی Fetch API DOM and AJAX: Fetch API

• راه حل: اعتبارسنج کوچک فرم Solution: Mini form validator

• اجزای وب (Web Components) و عناصر سفارشی Web components and custom elements

• چالش: اعتبارسنج کوچک فرم Challenge: Mini form validator

• ایجاد جداول Creating tables

8. دسترس‌پذیری، عملکرد و بهترین روش‌ها 8. Accessibility, Performance, and Best Practices

• چالش: ممیزی دسترس‌پذیری Challenge: Accessibility audit

• ملاحظات دسترس‌پذیری (Accessibility) Accessibility considerations

• نکاتی برای بهبود عملکرد دستکاری DOM DOM manipulation performance tips

• سازگاری با مرورگرهای مختلف Cross-browser compatibility

• راه حل: ممیزی دسترس‌پذیری Solution: Accessibility audit

9. پروژه واقعی: اپلیکیشن رزومه تعاملی 9. Real-World Project: Interactive Resume App

• افزودن و نمایش اطلاعات تماس Adding and displaying contact information

• راه حل: افزودن یک قابلیت Solution: Adding a feature

• نمایش و افزودن تجربیات کاری Showing and adding experiences

• بررسی گام به گام بک‌اند Node.js Walkthrough the Node.js backend

• چالش: افزودن یک قابلیت Challenge: Adding a feature

• نمایش بخش‌ها Showing sections

• مرور کلی پروژه Project overview

جمع‌بندی Conclusion

• گام‌های بعدی Next steps