دوره آموزشی جاوا اسکریپت: تقویت DOM

جزئیات دوره

Document Object Model (DOM) در هسته هر صفحه وب قرار دارد. به منظور توسعه صفحات HTML پویا، یک توسعه‌دهنده فرانت‌اند باید بداند که چگونه جاوا اسکریپت متصل می‌شود و به شما امکان می‌دهد DOM را کنترل کنید تا محتوای موجود را در یک صفحه ایجاد، اصلاح، حذف و ویرایش کنید. در این دوره آموزشی که برای طراحان و توسعه دهندگان وب با تجربه طراحی شده است، مربی Maaike van Putten مروری بر عناصر اصلی DOM، راه های مختلف دسترسی جاوا اسکریپت به عناصر و نحوه کار با DOM برای ایجاد صفحات وب پویا ارائه می دهد.

مهارت های اساسی مورد نیاز برای انتخاب عناصر DOM، عبور از DOM، اصلاح عناصر DOM و ایجاد، افزودن و مدیریت گره ها را بیاموزید. در طول مسیر، نکاتی در مورد مدیریت رویداد، دستکاری پیشرفته DOM، دسترسی، عملکرد، و بهترین شیوه‌ها دریافت کنید. در پایان دوره، شما این شانس را خواهید داشت که با ساختن یک برنامه رزومه تعاملی با یک بک اند Node.js، مهارت های جدید خود را در یک پروژه واقعی آزمایش کنید.

سرفصل ها

0. مقدمه

01 - دانش جاوا اسکریپت DOM خود را افزایش دهید
02 - نحوه استفاده از فایل‌های تمرینی میزبان GitHub

1. درک DOM

03 - DOM چیست
04 - DOM در مقابل HTML در مقابل جاوا اسکریپت
05 - کاوش DOM با DevTools
06 - انواع درخت و گره DOM
07 - چالش - کارآگاه DOM
08 - راه حل - کارآگاه DOM

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

09 - getElementById، getElementsByClassName، getElementsByTagName
10 - querySelector و querySelectorAll
11 - استفاده از انتخابگرهای CSS برای هدف قرار دادن عنصر
12 - روش کبریت
13 - چالش - شکارچی عنصر
14 - راه حل - شکارچی عنصر

3. عبور از DOM

15 - Nodeهای والد، فرزند و خواهر و برادر
16 - کار با روش‌هایی برای به دست آوردن Nodeهای والدین، فرزند و خواهر و برادر
17 - پیمودن با نزدیکترین و حاوی
18 - چالش - پیمایش درخت حیوانات
19 - راه حل - پیمایش درخت حیوانات

4. اصلاح عناصر DOM

20 - تغییر متن و محتوای HTML
21 - تغییر مقادیر عناصر ورودی
22 - دستکاری صفات و صفات داده
23 - کار با کلاس ها
24 - سبک‌های درون خطی با جاوا اسکریپت
25 - چالش - Shapeshifter
26 - حلال - شکل دهنده

5. ایجاد، افزودن و مدیریت گره ها

27 - ایجاد عناصر با createElement
28 - سازنده برای ایجاد انواع خاصی از عناصر
29 - درج عناصر
30 - شبیه سازی، جایگزینی و حذف گره ها
31 - چالش - سازنده عنصر
32 - راه حل - سازنده عنصر

6. مدیریت رویداد

33 - شنوندگان رویداد، کنترل کننده رویداد و اشیاء رویداد
34 - رویدادهای رایج DOM
35 - حذف کنترل کننده رویداد
36 - انتشار رویداد - گرفتن و حباب
37 - هیئت رویداد
38 - کار با preventDefault
39 - چالش - برنامه رویداد
40 - راه حل - برنامه رویدادی

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

41 - کار با فرم‌ها و عناصر ورودی
42 - دستکاری لیست ها
43 - ایجاد جداول
44 - DOM و AJAX - Fetch API
45 - اجزای وب و عناصر سفارشی
46 - چالش - اعتبار سنجی فرم کوتاه
47 - راه حل - اعتبار سنجی فرم مینی

8. دسترسی، عملکرد، و بهترین شیوه ها

48 - نکات عملکرد دستکاری DOM
49 - ملاحظات دسترسی
50 - سازگاری بین مرورگرها
51 - چالش - ممیزی دسترسی
52 - راه حل - ممیزی دسترسی

9. پروژه دنیای واقعی - برنامه رزومه تعاملی

53 - نمای کلی پروژه
54 - از Node.js استفاده کنید
55 - نمایش بخشها
56 - نمایش و افزودن تجربیات
57 - افزودن و نمایش اطلاعات تماس
58 - چالش - اضافه کردن یک ویژگی
59 - راه حل - افزودن یک ویژگی

نتیجه

60 - مراحل بعدی