معرفی دوره

در این دورهٔ جامع و عملی که توسط پلتفرم Pluralsight ارائه شده، شما خواهید آموخت چگونه با استفاده از زبان قدرتمند TypeScript مستقیماً در سند HTML تغییرات ایجاد کنید یا به عبارت دیگر، DOM را به‌صورت حرفه‌ای دست‌کاری نمایید. نسخهٔ ۲۰۲۴-۱ این دوره شامل به‌روزترین روش‌ها، بهترین تمرین‌ها و مثال‌های کاربردی است تا مهارت‌های شما در ساخت رابط‌های داینامیک و مدرن تقویت شود.

آنچه در این دوره خواهید آموخت

• مفاهیم پایهٔ DOM و تفاوت آن با BOM
• چگونگی راه‌اندازی پروژه تایپ‌اسکریپت و پیکربندی tsconfig.json
• انتخاب و دسترسی به المان‌های HTML با استفاده از متدهای getElementById، querySelector و querySelectorAll
• ایجاد، درج و حذف المان‌های جدید در درخت DOM به‌صورت پویا
• مدیریت رویدادها، افزودن و حذف ایونت‌لیسنرها و پردازش داده‌های کاربر
• استفاده از Generics و Decorators تایپ‌اسکریپت برای ساخت کامپوننت‌های منعطف
• بهینه‌سازی کار با المان‌ها برای افزایش کارایی و کاهش فراخوانی‌های زائد
• مدیریت استایل و کلاس‌های CSS به‌صورت داینامیک
• کار عملی با مثال‌های پیاده‌سازی منوی کشویی، تب‌بندی و اسلایدر ساده

مزایا و فواید دوره

• کسب مهارت‌های بروز در زمینه توسعهٔ رابط‌های کاربری داینامیک
• افزایش کیفیت و اطمینان در پروژه‌های بزرگ با کمک تایپ‌اسکریپت
• کاهش خطاهای زمان اجرا به‌واسطه تایپ استاتیک
• امکان استفاده از مثال‌های واقعی در پروژه‌های سازمانی
• تسلط بر تکنیک‌های بهینه‌سازی دسترسی و تغییر DOM برای کارایی بیشتر
• افزایش جذابیت و تجربۀ کاربری از طریق انیمیشن‌ها و ایونت‌های پیشرفته
• دریافت مدرک معتبر از Pluralsight به‌عنوان گواهینامهٔ پایان دوره

پیش‌نیازها

• آشنایی مقدماتی با HTML و CSS
• درک پایه‌ای از JavaScript (ES6+)
• نصب Node.js و تجربه کار با npm یا yarn
• آشنایی مختصر با مفاهیم اولیهٔ TypeScript (انواع رشته‌ای، عددی، آرایه، interface)

ساختار سرفصل‌های دوره

این دوره به بخش‌های زیر تقسیم شده است:

• بخش اول: معرفی و نصب ابزارها
• بخش دوم: مفاهیم پایه DOM و APIهای مرتبط
• بخش سوم: تایپ‌اسکریپت و تعریف انواع سفارشی
• بخش چهارم: انتخاب و تغییر المان‌ها
• بخش پنجم: ایجاد و مدیریت رویدادها
• بخش ششم: روش‌های بهینه‌سازی دسترسی و به‌روزرسانی DOM
• بخش هفتم: پروژهٔ عملی: ساخت یک گالری تصاویر داینامیک
• بخش هشتم: پروژهٔ نهایی: پیاده‌سازی یک پنل مدیریت محتوا
• بخش نهم: نکات پیشرفته و معرفی کتابخانه‌های جانبی

مثال‌های عملی

در ادامه چند مثال از تمرینات این دوره آورده شده است:

• مثال ۱: افزودن رویداد click به دکمه و تغییر متن یک پاراگراف

  const btn = document.querySelector('button') as HTMLButtonElement;
  btn.addEventListener('click', () => {
    const para = document.getElementById('message') as HTMLParagraphElement;
    para.textContent = 'سلام دنیا با تایپ‌اسکریپت!';
  });

• مثال ۲: ساخت المان تصویر و درج آن در یک کارت

  function createCard(title: string, imgUrl: string): HTMLElement {
    const card = document.createElement('div');
    card.className = 'card';
    const image = document.createElement('img');
    image.src = imgUrl;
    const header = document.createElement('h3');
    header.textContent = title;
    card.append(image, header);
    return card;
  }
  document.getElementById('gallery')?.append(createCard('غروب آفتاب','sunset.jpg'));

• مثال ۳: استفاده از Generics برای کنترل نوع داده در ایونت‌ها

  function onEvent(element: HTMLElement, eventName: string, handler: (e: T) => void) {
    element.addEventListener(eventName, handler as EventListener);
  }
  onEvent(btn, 'click', (e) => console.log(e.clientX, e.clientY));

نحوه دانلود و دسترسی رایگان

برای دانلود رایگان این دوره کافی است به لینک رسمی Pluralsight مراجعه کنید، در آن ثبت‌نام نمایید و از ۱۰ روز آزمون رایگان بهره‌مند شوید. همچنین می‌توانید با استفاده از افزونه‌های مدیریت دانلود یا ابزارهای CLI مانند pluralsight-downloader محتوای ویدیویی را دریافت کنید. پس از اتمام دوره می‌توانید گواهینامهٔ پایان دوره را نیز رایگان دریافت کنید.

جمع‌بندی

دورهٔ دست‌کاری DOM با تایپ‌اسکریپت ۲۰۲۴-۱ از Pluralsight، ترکیبی از نظریه و عمل است که شما را از مباحث پایه تا ساخت پروژه‌های واقعی همراهی می‌کند. اگر به دنبال توسعهٔ رابط‌های کاربری پیچیده و بهینه هستید و می‌خواهید بهترین شیوه‌های دنیای وب را در پروژه‌های خود به‌کار گیرید، این دوره انتخاب ایده‌آل شماست.