طرح جامع مطالعه جاوا اسکریپت (قانون 80-20)

تمرکز بر روی 20 درصد مفاهیمی که 80 درصد پروژه های دنیای واقعی را تامین می کند. ابتدا بر این اصول مسلط شوید، سپس از طریق پروژه ها گسترش دهید.

یادگیری اصلی (2 هفته)

ساختار روزانه:

• صبح: مفاهیم مطالعه (1-2 ساعت).
• بعد از ظهر: تمرینات (1 تا 2 ساعت) را تمرین کنید.
• عصر: بازتاب، اشکال زدایی و بررسی (30 دقیقه).

هفته 1: پایه ها

روز 1: اصول

• موضوعات: متغیرها (let، constانواع داده ها (رشته ها، اعداد، بولی ها)، عملگرها (+، ===، !).
• منابع: MDN JavaScript Basics، دوره دستوری JS freeCodeCamp.
• تمرین کنید: برای محاسبه BMI یا تبدیل سانتیگراد به فارنهایت کد بنویسید.

روز 2: کنترل جریان

• موضوعات: شرایط (if/else، switch، حلقه ها (for، while).
• منابع: شرایط و حلقه های JavaScript.info.
• تمرین کنید: حل FizzBuzz، چاپ اعداد اول.

روز 3: توابع

• موضوعات: اعلان تابع، پارامترها، return، توابع فلش، دامنه.
• منابع: راهنمای توابع MDN.
• تمرین کنید: یک تابع برای معکوس کردن یک رشته یا محاسبه فاکتوریل ایجاد کنید.

روز 4: دستکاری DOM

• موضوعات: انتخاب عناصر (querySelector، اصلاح محتوا (textContent، innerHTML)، سبک ها (classList).
• منابع: آموزش دستکاری DOM freeCodeCamp.
• تمرین کنید: دکمه ای بسازید که رنگ پس زمینه صفحه را تغییر می دهد.

روز پنجم: رویدادها

• موضوعات: شنوندگان رویداد (click، submit)، اشیاء رویداد، preventDefault().
• منابع: JavaScript.info مقدمه ای بر رویدادها.
• تمرین کنید: یک دکمه جابجایی برای حالت تاریک/روشن ایجاد کنید.

روز ششم: آرایه ها

• موضوعات: روش های آرایه (push، pop، map، filter، forEach).
• منابع: راهنمای آرایه MDN.
• تمرین کنید: اعداد زوج را از یک آرایه فیلتر کنید یا نام ها را بر اساس حروف الفبا مرتب کنید.

روز هفتم: بررسی و مینی پروژه

• مرور کنید: تمرینات قبلی را بدون ارجاع کد بازسازی کنید.
• مینی پروژه: برنامه شمارنده ساده (دکمه های افزایش/کاهش).

هفته دوم: مفاهیم متوسط

روز هشتم: اشیاء

• موضوعات: واژه های شیء، روش ها، this کلمه کلیدی، تخریب
• منابع: JavaScript.info Objects Basics.
• تمرین کنید: ایجاد یک user شی با روش هایی برای به روز رسانی داده های نمایه.

روز نهم: JS ناهمزمان

• موضوعات: پاسخ به تماس ها، قول ها، async/await، fetch().
• منابع: جاوا اسکریپت ناهمزمان MDN.
• تمرین کنید: داده ها را از JSONPlaceholder API و نمایش عناوین واکشی کنید.

روز 10: رسیدگی به خطا

• موضوعات: try/catch، پرتاب خطاها، اشکال زدایی با console.
• منابع: JavaScript.info مدیریت خطا.
• تمرین کنید: مدیریت خطا را به کد واکشی API خود اضافه کنید.

روز یازدهم: ویژگی های ES6+

• موضوعات: حروف الفبای الگو، عملگرهای spread/rest، ماژول ها (import/export).
• منابع: ES6 برای همه (دوره رایگان).
• تمرین کنید: کدهای قدیمی را با استفاده از نحو ES6 بازسازی کنید.

روز دوازدهم: ذخیره‌سازی محلی

• موضوعات: localStorage، JSON.stringify()، JSON.parse().
• منابع: MDN Web Storage API.
• تمرین کنید: تنظیمات برگزیده کاربر را ذخیره و بازیابی کنید (به عنوان مثال، حالت تاریک).

روز 13: بسته شدن و تماس های تلفنی

• موضوعات: دامنه واژگانی، مثال های بسته، توابع مرتبه بالاتر.
• منابع: بسته شدن MDN.
• تمرین کنید: یک کارخانه عملکرد ایجاد کنید (به عنوان مثال، توابع ضرب).

روز چهاردهم: بررسی نهایی و آماده سازی برای پروژه ها

• مرور کنید: یک برنامه کوچک با ترکیب DOM، رویدادها و محل ذخیره سازی بسازید.
• آماده سازی: یک پوشه پروژه با فایل های HTML/CSS/JS راه اندازی کنید.

5 پروژه برای اعمال و گسترش دانش

اینها را بساز به ترتیب، افزایش پیچیدگی و استقلال. از اسناد و گوگل برای حل موانع استفاده کنید.

1. فهرست کارها (مبتدی)

• توضیحات: اضافه کردن، حذف، و علامت گذاری وظایف به عنوان کامل.
• مفاهیم کلیدی:
  • دستکاری DOM (پرداخت وظایف به صورت پویا).
  • مدیریت رویداد (ارسال فرم، روی رویدادها کلیک کنید).
  • روش های آرایه (filter برای حذف وظایف).
  • ذخیره سازی محلی (تداوم وظایف در بارگذاری مجدد).

2. برنامه هواشناسی (متوسط)

• توضیحات: داده های آب و هوای زمان واقعی را از یک API (به عنوان مثال، OpenWeatherMap) واکشی کنید.
• مفاهیم کلیدی:
  • fetch() و async/wait.
  • کار با داده های JSON
  • مدیریت خطا برای خرابی API.
  • به روز رسانی های DOM پویا بر اساس ورودی کاربر (جستجوی شهر).

3. بازی مسابقه (متوسط ​​+)

• توضیحات: مسابقه زمان بندی شده با سوالات چند گزینه ای و تابلوی امتیاز.
• مفاهیم کلیدی:
  • طراحی شی گرا (کوئیز و کلاس های سوال).
  • setInterval برای تایمرها
  • مدیریت دولتی (ردیابی سوال فعلی، نمره).
  • تفویض رویداد برای دکمه‌های پاسخ.

4. ردیاب بودجه (پیشرفته)

• توضیحات: درآمد/هزینه ها را با نمودارها پیگیری کنید (از Chart.js استفاده کنید).
• مفاهیم کلیدی:
  • حالت پیچیده (معاملات، تعادل، دسته ها).
  • ادغام با کتابخانه های شخص ثالث (Chart.js).
  • اعتبار سنجی فرم و بازخورد خطا.
  • ذخیره سازی محلی برای ماندگاری داده ها

5. کتابفروشی تمام پشته (پیشرفته +)

• توضیحات: برنامه CRUD با باطن Node.js/Express و وانیلی JS.
• مفاهیم کلیدی:
  • طراحی REST API (GET, POST, DELETE).
  • عملیات ناهمگام پیشرفته (ارتباط frontend-backend).
  • کد ماژولار (ماژول سرویس API جداگانه).
  • اصول استقرار (DigitalOcean، Netlify).

نکاتی برای موفقیت

1. کد روزانه: حتی 30 دقیقه حافظه عضلانی را تقویت می کند.
2. مشکلات را از بین ببرید: برای برنامه ریزی گام به گام پروژه ها از کد شبه استفاده کنید.
3. اشکال زدایی را در آغوش بگیرید: استفاده را یاد بگیرید console.log() و Chrome DevTools.
4. Refactor بی رحمانه: بهبود خوانایی و کارایی کد پس از شروع به کار.

این طرح یادگیری ساختار یافته را با حل خلاقانه مسئله متعادل می کند. کوچک شروع کنید، اغلب تکرار کنید و پیشرفت را جشن بگیرید! 🚀