آموزش JavaScript از پایه تا ساخت وب‌اپ تعاملی

<div class='lesson-rich-content'> <h2>جلسه 1: JavaScript و اجرای کد در مرورگر</h2> <h3>تمرکز جلسه</h3> <p> syntax پایه، console، script، let، const و نوع داده. </p> <h3>چرا این مبحث مهم است؟</h3> <p> JavaScript لایه رفتار و منطق سمت کاربر را فراهم می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک صفحه تعاملی بسازید که اطلاعات کاربر را دریافت و در صفحه نمایش دهد. </p> <h3>اشتباه رایج</h3> <p> استفاده از var و متغیرهای بدون نام‌گذاری روشن. </p> <h3>چالش جلسه</h3> <p> سه ورودی بگیرید و با منطق مشخص نتیجه را در DOM نمایش دهید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 2: عملگرها، شرط و منطق برنامه</h2> <h3>تمرکز جلسه</h3> <p> عملگرهای مقایسه، منطقی، if و ternary. </p> <h3>چرا این مبحث مهم است؟</h3> <p> منطق کسب‌وکار سمت کلاینت از شرط‌ها ساخته می‌شود. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> منطق نمایش وضعیت ثبت‌نام دوره را پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> مقایسه نادرست == و === یا شرط‌های پیچیده و تکراری. </p> <h3>چالش جلسه</h3> <p> یک rule engine کوچک برای سه سطح دسترسی بسازید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 3: حلقه‌ها و کار با مجموعه داده</h2> <h3>تمرکز جلسه</h3> <p> for، for...of، while و پیمایش آرایه‌ها. </p> <h3>چرا این مبحث مهم است؟</h3> <p> رابط‌های واقعی اغلب از داده‌های چندتایی ساخته می‌شوند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> لیست دوره‌ها را پیمایش و کارت HTML برای هر دوره تولید کنید. </p> <h3>اشتباه رایج</h3> <p> دستکاری مستقیم داده در چند حلقه تو در تو. </p> <h3>چالش جلسه</h3> <p> یک آرایه 10تایی را فیلتر و به خروجی HTML تبدیل کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 4: Function و Arrow Function</h2> <h3>تمرکز جلسه</h3> <p> پارامتر، return، scope و arrow function. </p> <h3>چرا این مبحث مهم است؟</h3> <p> تابع کوچک و مشخص تست و نگهداری کد را ساده می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> توابع مستقل برای محاسبه تخفیف و ساخت کارت دوره بنویسید. </p> <h3>اشتباه رایج</h3> <p> تابع‌های بسیار بزرگ با چند مسئولیت. </p> <h3>چالش جلسه</h3> <p> یک تابع بزرگ را به حداقل سه تابع کوچک‌تر تقسیم کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 5: Object و Destructuring</h2> <h3>تمرکز جلسه</h3> <p> object، property، method، destructuring، spread و optional chaining. </p> <h3>چرا این مبحث مهم است؟</h3> <p> APIها و رابط‌های مدرن عمدتاً با objectها و JSON کار می‌کنند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> داده یک دوره آموزشی را به صورت object مدل کنید. </p> <h3>اشتباه رایج</h3> <p> دسترسی مستقیم به propertyهای ممکن است undefined باشند. </p> <h3>چالش جلسه</h3> <p> مدل Course را تعریف کنید و با destructuring داده‌های لازم را استخراج کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 6: Array Methods حرفه‌ای</h2> <h3>تمرکز جلسه</h3> <p> map، filter، find، some، every، reduce و sort. </p> <h3>چرا این مبحث مهم است؟</h3> <p> این متدها منطق داده را خواناتر و قابل ترکیب می‌کنند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> جستجو و فیلتر دوره‌ها را فقط با متدهای آرایه پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از reduce برای کارهای ساده و مبهم. </p> <h3>چالش جلسه</h3> <p> یک کاتالوگ دوره بسازید که filter و sort چندمرحله‌ای داشته باشد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 7: DOM و ساخت UI تعاملی</h2> <h3>تمرکز جلسه</h3> <p> querySelector، createElement، textContent، classList و event. </p> <h3>چرا این مبحث مهم است؟</h3> <p> DOM پل اصلی بین داده JavaScript و رابط HTML است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک accordion سرفصل دوره بسازید. </p> <h3>اشتباه رایج</h3> <p> استفاده از innerHTML برای داده غیرقابل اعتماد. </p> <h3>چالش جلسه</h3> <p> accordion و modal ساده بسازید و state باز/بسته را کنترل کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 8: Event و فرم‌ها</h2> <h3>تمرکز جلسه</h3> <p> click، submit، input، preventDefault و اعتبارسنجی. </p> <h3>چرا این مبحث مهم است؟</h3> <p> فرم‌های واقعی به بازخورد سریع و رفتار قابل پیش‌بینی نیاز دارند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> فرم ثبت‌نام دوره را قبل از ارسال اعتبارسنجی کنید. </p> <h3>اشتباه رایج</h3> <p> وابستگی کامل به validation سمت کلاینت. </p> <h3>چالش جلسه</h3> <p> برای سه خطای ورودی پیام مشخص بسازید و submit نامعتبر را متوقف کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 9: Async JavaScript و Promise</h2> <h3>تمرکز جلسه</h3> <p> Promise، async/await، try/catch و چرخه درخواست. </p> <h3>چرا این مبحث مهم است؟</h3> <p> تقریباً تمام برنامه‌های وب مدرن با عملیات asynchronous کار می‌کنند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> لیست دوره‌ها را از یک API دریافت و در UI نمایش دهید. </p> <h3>اشتباه رایج</h3> <p> نادیده گرفتن loading و error state. </p> <h3>چالش جلسه</h3> <p> یک fetch کامل با loading، success و error state پیاده کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 10: Fetch و کار با REST API</h2> <h3>تمرکز جلسه</h3> <p> GET، POST، JSON، headers و credentials. </p> <h3>چرا این مبحث مهم است؟</h3> <p> اتصال frontend به backend بخش مهم توسعه واقعی است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> ثبت‌نام در یک دوره را با POST به API ارسال کنید. </p> <h3>اشتباه رایج</h3> <p> فرض کردن اینکه هر پاسخ API موفق است. </p> <h3>چالش جلسه</h3> <p> برای سه status code مختلف رفتار UI تعریف کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 11: Modules و ساختار پروژه</h2> <h3>تمرکز جلسه</h3> <p> export، import و جداسازی utility و service. </p> <h3>چرا این مبحث مهم است؟</h3> <p> ماژولار بودن وابستگی و تغییرات آینده را کنترل می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> کد جستجوی دوره‌ها را به چند ماژول مستقل تقسیم کنید. </p> <h3>اشتباه رایج</h3> <p> یک فایل JavaScript بزرگ برای همه قابلیت‌ها. </p> <h3>چالش جلسه</h3> <p> یک service برای API و یک utility برای format کردن داده بسازید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 12: Local Storage و state موقت</h2> <h3>تمرکز جلسه</h3> <p> localStorage، JSON.stringify، JSON.parse و محدودیت‌های ذخیره محلی. </p> <h3>چرا این مبحث مهم است؟</h3> <p> ذخیره محلی برای preferenceهای غیرحساس کاربرد دارد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> آخرین دوره مشاهده‌شده کاربر را ذخیره کنید. </p> <h3>اشتباه رایج</h3> <p> ذخیره token یا اطلاعات حساس در localStorage بدون بررسی معماری امنیتی. </p> <h3>چالش جلسه</h3> <p> تاریخچه سه دوره اخیر را ذخیره و نمایش دهید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 13: Error Handling و Debugging</h2> <h3>تمرکز جلسه</h3> <p> خطاهای runtime، network، console و breakpoint. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Debugging مهارتی جدا از کدنویسی است و زمان توسعه را کم می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک صفحه API را عمداً با خطای شبکه مواجه و سپس عیب‌یابی کنید. </p> <h3>اشتباه رایج</h3> <p> catch کردن خطا بدون ثبت یا توضیح مناسب. </p> <h3>چالش جلسه</h3> <p> سه نوع خطا را بازتولید کنید و مسیر تشخیص آن‌ها را بنویسید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 14: Performance و امنیت JavaScript</h2> <h3>تمرکز جلسه</h3> <p> debounce، event delegation، XSS و مدیریت داده غیرقابل اعتماد. </p> <h3>چرا این مبحث مهم است؟</h3> <p> کد سریع و امن بخشی از کیفیت محصول واقعی است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> جستجوی دوره‌ها را با debounce و نمایش امن متن پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> قرار دادن داده کاربر با innerHTML و listenerهای زیاد. </p> <h3>چالش جلسه</h3> <p> جستجوی زنده 300 آیتم را با debounce و event delegation بهینه کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 15: پروژه نهایی JavaScript؛ کاتالوگ دوره</h2> <h3>تمرکز جلسه</h3> <p> ترکیب DOM، API، جستجو، فیلتر، فرم، async و مدیریت خطا. </p> <h3>چرا این مبحث مهم است؟</h3> <p> پروژه نهایی نشان می‌دهد JavaScript را برای یک رابط واقعی می‌توانید به کار ببرید. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک کاتالوگ دوره کامل با جستجو و فیلتر و ثبت‌نام بسازید. </p> <h3>اشتباه رایج</h3> <p> قرار دادن همه منطق در یک فایل و نادیده گرفتن حالت‌های خطا. </p> <h3>چالش جلسه</h3> <p> کاتالوگ را با معماری ماژولار، API service و UI state کامل کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>