کار بر روی Dom بوسیله JavaScript

در نیمه اول دوره ، ما همه چیزهایی را که برای شروع برنامه نویسی سایت های پویا توسط خودتان نیاز دارید ، پوشش خواهیم داد. این به شما اصول صوتی و عملی اساسی در مورد DOM را به شما می دهد. شما با یک درک اساسی و تجربه عملی از قسمت 1 پدیدار خواهید شد. این شما را به جایی می رساند که شما می فهمید DOM چیست ، چرا ما به آن احتیاج داریم ، چگونه به آن دسترسی پیدا کنیم ، از کجا پیدا کنیم و چگونه آن را دستکاری کنیم. در پایان قسمت 1 ، شما با تسلط بر مدل شیء سند در مورد توسعه وب جلوی آن مطلع خواهید شد. شما را به سطح بعدی منجنیق کنید و شما را به خوبی در مسیر خود قرار دهید تا به عنوان یک مادربزرگ واقعی در توسعه وب جلو تبدیل شوید. در پایان قسمت 2 ، شما با کار با رویدادها در مدل Object Document ، در مورد توسعه وب جلوی اطلاعات اطلاعات بیشتری کسب خواهید کرد.
تا پایان این دوره ، شما قادر خواهید بود "صحبت کنید" و "راه بروید "DOM با درک این مسئله که چگونه می توانید آن را به روش های معنی دار و عملی دستکاری کنید. -Dom-and-javascript-to-build-dynamic-websites

عنوان اصلی : DOM 2022 - Using the DOM and JavaScript to Build Dynamic Websites

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

قسمت 1 - مقدمه:
به دوره خوش آمدید
مقدمه
همه چیز یک شی است
ساخت صفحه ساده خودمان
سلسله مراتب DOM
نتیجه گیری سلسله مراتبی DOM
BOM چیست؟
DOM در مقابل جاوا اسکریپت در مقابل پایتون
DOM با HTML شما یکسان نیست
DOM آن چیزی نیست که در مرورگر می بینید
DOM آن چیزی نیست که در DevTools می بینید
عناصر شبه
خلاصه: DOM چیست؟
چه کاری می توانیم با DOM انجام دهیم؟
نمونه سریع تغییر DOM
بخش 1 - جاوا اسکریپت در مقابل DOM:
DOM API چیست؟
جاوا اسکریپت در محیط های مختلف زندگی می کند
بیایید یک تابع setTimeout() بسازیم
setTimeout - جاوا اسکریپت در مقابل DOM
DOM فقط برای جاوا اسکریپت نبود
بخش 1 - دسترسی به DOM:
مقدمه بخش
دسترسی به DOM - مقدمه
درک HTML شما
بیایید صفحه خود را برای این بخش بسازیم
getElementById() Recap
getElementById()
getElementsByClassName()
تست: مقدمه
تست: ساخت کد تست ما
راه حل
getElementsByTagName()
querySelector - مقدمه
querySelector - مثال عملی
خلاصه
قسمت 1 - گره ها:
گره ها - مقدمه بخش
گره ها - مقدمه
گره ها در عمل
childNodes - چگونه گره ها را می بینیم؟
ایجاد گره های مختلف
انواع مختلف گره ها چیست؟
گره - درخت خانواده
شناسایی گره ها
HTMLCollection در مقابل NodeList
لیست‌های زنده در مقابل استاتیک
بخش 1 - عبور از DOM:
مقدمه بخش
عبور از DOM - مقدمه
صفحه بخش ما را با هم بسازیم
چرا باید از DOM عبور کنیم؟
سه شیء مهم در DOM
والدین، فرزند و خواهر و برادر - معرفی سریع
گره والد
خواهر و برادر در DOM
firstChild، lastChild، and Children - مقدمه
firstChild، lastChild، and Children - مثال عملی
املاک کودکان
childNode در مقابل کودکان - چه تفاوت هایی دارند؟
تست - انواع گره
تست - راه حل
خواهر و برادر - یک کلمه سریع
کار با روش های خواهر و برادر
خلاصه عبور از DOM
بخش 1 - ایجاد، حذف و شبیه سازی عناصر DOM:
مقدمه بخش
وب سایت های استاتیک در مقابل پویا
چگونه عناصر را ایجاد می کنید؟
سند در مقابل سند
آشنایی با متد ()createElement
بیایید عنصر خود را به DOM متصل کنیم
استفاده از ویژگی textContent برای افزودن متن به عنصر تازه ایجاد شده ما
appendChild چگونه کار می کند؟ روش
insertBefore().
آیا روش insertAfter() وجود دارد؟
بیایید متد ()insertBefore را فریب دهیم
چگونه عناصر را حذف کنیم
removeChild()
حذف()
زمان شبیه سازی فرا رسیده است
کلون کردن مثال با استفاده از setInterval()
بیایید کد کلون خود را تجزیه و تحلیل کنیم
مهارت های خود را بیازمایید
تست - راه حل
قسمت 1 - بعد کجا؟ :
دوره خارج از کشور
بخش 2 - مقدمه ای بر رویدادها:
مقدمه
مقدمه - رویداد چیست
دو نکته مهم در مورد رویدادها
شنوندگان رویداد درون خطی - معرفی مختصر
خواص Inline - معرفی مختصر روش
addEventListener() - معرفی مختصر
خلاصه - سه راه برای افزودن شنونده رویداد به عناصر HTML
یک کلمه سریع در مورد رویدادها
شنوندگان رویداد درون خطی - مروری دقیق
شنوندگان رویداد درون خطی - معرفی آزمون (قسمت 1 از 3)
شنوندگان رویداد درون خطی - راه اندازی آزمایشی (بخش 2 از 3)
شنوندگان رویداد درون خطی - راه حل آزمایشی (بخش 3 از 3)
خواص درون خطی - بررسی اجمالی تفصیلی
خواص درون خطی - مقدمه تست (بخش 1 از 3)
خواص درون خطی - تنظیم تست (قسمت 2 از 3)
خواص درون خطی - راه حل تست (بخش 3 از 3) روش
addEventListener() - بررسی اجمالی تفصیلی
توابع پاسخ به تماس - مروری سریع
addEventListener - مقدمه تست (بخش 1 از 3)
addEventListener - تنظیم آزمایشی (قسمت 2 از 3)
addEventListener - راه حل تست (بخش 3 از 3)
سخنرانی اضافی - سه راه برای تعریف رنگ
سخنرانی اضافی - ارقام، بایت ها و قالب هگزادسیمال
سخنرانی اضافی - روش toString().
بخش 2 - انواع مختلف رویدادها:
مقدمه بخش
مثال رویداد کلیک سریع - قسمت 1 از 2
مثال رویداد کلیک سریع - قسمت 2 از 2
انواع رویداد
رویداد Keydown - مثال
رویدادهای فرم - مقدمه
نمای کلی از چه فرمی خواهیم ساخت
فرم: ساخت صفحه ما - HTML + CSS
نحوه یافتن فرم ها و رفتار پیش فرض آن
ورودی رویداد، تمرکز رویداد، و کپی/پیست کردن رویدادها
رویدادها را لمس و پنجره کنید
قسمت 2 - چالش های رویداد:
مقدمه
چالش 1 - مقدمه
چالش 1 - روی تصویر و نمایش متن کلیک کنید
چالش 2 - مقدمه
چالش 2 - وقتی ماوس روی تصویر حرکت می کند، متن را آشکار کنید
چالش 2 - Creوقتی ماوس روی تصویر حرکت می کند، نقطه سیاهی خورد
چالش 2 - حرکت پویا نقطه و راه حل کامل
چالش 3 - سبیل
چالش 3 - قرار دادن سبیل روی تصویر
بخش 2 - سلسله مراتب شی و گره:
مقدمه بخش
اشیاء JS در مقابل اشیاء DOM در کنسول
میزبان در مقابل اشیاء بومی
اهمیت درک وراثت
یافتن متد ()createElement
گره عنصر - سلسله مراتب شی
Recap سریع در سلسله مراتب شی
DOM Extension چیست؟
افزودن پسوند DOM خودمان - مثال عملی
آیا برنامه های افزودنی DOM چیز خوبی هستند؟
مشکلات برنامه های افزودنی DOM ...
قسمت 2 - گرفتن و حباب کردن:
مقدمه بخش
یک رویداد یک رخداد مجزا نیست
دو مرحله یک رویداد - گرفتن و حباب
نحوه گوش دادن به یک رویداد در مرحله ضبط
مثال - بیایید در هر دو مرحله به یک رویداد گوش دهیم
مثال - گرفتن و حباب زدن با استفاده از for... حلقه
چه کسی به گرفتن عکس در مقابل حباب اهمیت می دهد؟
چگونه ضبط رویداد و حباب کردن رویداد را متوقف کنیم؟
نمونه stopPropagation()
قسمت 2 - هیئت اعزامی رویداد و چالش ها:
معرفی هیئت های رویداد
چالش جعبه - مقدمه
چالش جعبه - ساخت
چالش جعبه - راه حل
ویژگی classList چیست؟
چالش جعبه - کامل کردن راه حل ما
چالش نقل قول - مقدمه
چالش نقل قول - ساخت
چالش نقل قول - راه حل
فهرست چالش - مقدمه
فهرست چالش - ساخت
فهرست چالش - راه حل
قسمت 2 - پروژه وب سایت - لیست خرید:
ما قرار است چه چیزی بسازیم؟
مروری بر ساختار وب سایت در سطح بالا
ساخت HTML وب سایت ما
کدنویسی CSS برای هدر
کدنویسی CSS برای بخش Form and List
روش‌های دسترسی DOM، روش forEach و گره‌ها - جمع‌بندی سریع
حذف اقلام - روش قدیمی
حذف موارد - استفاده از حباب کردن رویداد و نمایندگی رویداد
مقدمه ای بر برخورد با فرم ها
رفتار پیش‌فرض با فرم‌ها و نحوه جلوگیری از رفتار پیش‌فرض
افزودن موارد به لیست ما - ایجاد عناصر به صورت پویا
افزودن موارد به لیست ما - افزودن کلاس ها با classList API
پنهان کردن و پنهان کردن لیست خرید ما
خلاصه ای از شنوندگان رویدادهای مختلف که قبلاً با آنها سروکار داشته ایم
دسترسی به در

Element
روش ()toLowerCase چیست؟
دسترسی به تگ‌های

• و معرفی روش Array.from()
  مقدمه ای بر روش Array.from().
  Array.from() چگونه کار می کند - چند مثال عملی
  استفاده از forEach() برای حلقه زدن از طریق آرایه مواد غذایی ما
  مقدمه ای بر indexOf()
  استفاده از متد indexOf() با آرایه ها
  استفاده از متد indexOf() با رشته ها
  تکمیل عملکرد جستجوی ما
  بهبود: وقتی کاربر روی دکمه کلیک می کند، متن را پاک کنید
  بهبود: اجازه دهید برگه ها را اضافه کنیم
  بهبود: ساختن برگه‌های ما (HTML + CSS)
  داده* ویژگی چیست؟
  استفاده از classList API برای افزودن کلاس‌های پویا به برگه‌های عنوان
  بهبود: نمایش و پنهان کردن پانل های ما با کلیک بر روی برگه عنوان
  بهبود: اضافه کردن یک دکمه برای پاسخ ما
  بخش 2 - Outro :
  بعد از کجا؟