شروع، متغیر و انواع داده
جاوااسکریپت چیست؟، اجرای کد در مرورگر، اتصال فایل JS به HTML، …
شروع این بخش ←آموزش جاوااسکریپت؛ از اولین خط کد تا پروژه
جاوااسکریپت زبان تعاملی وب است. در این دوره از متغیر و شرط به آرایه، تابع، DOM، رویداد، ذخیره‌سازی، درخواست‌های ناهمگام و پروژه نهایی می‌رسی. ساختار دوره شبیه یک مرجع آموزشی مرحله‌ای طراحی شده: فهرست موضوعات، صفحه مستقل برای هر درس، مثال قابل ویرایش، اجرا، تمرین و حرکت به درس بعدی.
پیشرفت کلی دوره
۰ از ۷۰درس‌هایی که تکمیل می‌کنی در همین مرورگر ثبت می‌شوند.
رشته، شرط، آرایه و حلقه
قالب رشته با template literals، شرط if و else، else if چندحالته، …
شروع این بخش ←توابع و متدهای آرایه
حلقه while، for...of، break و continue، …
شروع این بخش ←ساختمان داده و DOM
reduce، find و some و every، مرتب‌سازی آرایه، …
شروع این بخش ←تعامل مرورگر و ماژول
انتخاب عناصر، تغییر متن و کلاس، ساخت و حذف عنصر، …
شروع این بخش ←Promise، API و ذخیره‌سازی
Promise، async و await، fetch و درخواست HTTP، …
شروع این بخش ←کلاس‌ها، کیفیت و پروژه
برنامه‌نویسی تابعی مقدماتی، کلاس‌ها، سازنده و متدها، …
شروع این بخش ←فهرست کامل درس‌ها
01جاوااسکریپت چیست؟جاوااسکریپت رفتار تعاملی صفحات وب را کنترل می‌کند و بیرون از مرورگر نیز کاربرد دارد.02اجرای کد در مرورگرابزار توسعه مرورگر و Console برای اجرای کد و دیدن خطاها مفیدند.03اتصال فایل JS به HTMLتگ script فایل جاوااسکریپت را به صفحه متصل می‌کند؛ محل بارگذاری روی زمان اجرا اثر دارد.04console.log و خطاهاconsole.log برای بررسی مقدارها و Console برای خواندن خطاها کاربرد دارد.05let و constconst برای ارجاعی که دوباره مقداردهی نمی‌شود و let برای متغیر قابل تغییر مناسب است.06انواع داده پایهعدد، رشته، بولی، undefined، null و symbol کاربردهای متفاوت دارند.07نام‌گذاری متغیرهانام معنادار و سبک camelCase خوانایی کد را بهتر می‌کند.08عملگرهای ریاضیعملگرهای حسابی برای محاسبه‌اند؛ + می‌تواند رشته‌ها را نیز به هم وصل کند.09مقایسه و برابری سخت‌گیرانه=== نوع و مقدار را بررسی می‌کند؛ معمولاً بر == ترجیح دارد.10تبدیل نوع دادهNumber، String و Boolean تبدیل نوع را انجام می‌دهند؛ ورودی فرم‌ها معمولاً رشته است.11قالب رشته با template literalsبک‌تیک و ${...} درج مقدار در رشته را ساده می‌کنند.12شرط if و elseشرط مسیر اجرای برنامه را براساس درست یا نادرست بودن عبارت انتخاب می‌کند.13else if چندحالتهچند شرط را به ترتیب بررسی می‌کند؛ شرط‌های خاص‌تر را زودتر بنویس.14عملگرهای منطقی&&، || و ! شرط‌ها را ترکیب می‌کنند و از short-circuit بهره می‌برند.15switchswitch برای چند حالت مشخص مناسب است؛ break از ادامه ناخواسته به case بعدی جلوگیری می‌کند.16آرایه چیست؟آرایه مجموعه‌ای مرتب و قابل تغییر است و اندیس آن از صفر شروع می‌شود.17خواندن و تغییر آرایهاندیس، length و روش‌های دسترسی به عضوها را تمرین کن.18متدهای push و poppush به انتهای آرایه می‌افزاید و pop عضو انتهایی را حذف می‌کند.19shift, unshift, spliceاین متدها عضوهای ابتدا یا بخش میانی آرایه را تغییر می‌دهند.20حلقه forfor زمانی مناسب است که شمارنده یا تعداد تکرار مشخص باشد.21حلقه whilewhile تا برقرار بودن شرط تکرار می‌کند؛ به به‌روزرسانی شرط توجه کن.22for...offor...of برای پیمایش مقدارهای آرایه و iterableها مناسب است.23break و continuebreak حلقه را تمام و continue تکرار جاری را رد می‌کند.24توابع declarationتابع بلوکی قابل استفاده مجدد است و می‌تواند ورودی بگیرد و نتیجه برگرداند.25پارامتر و returnپارامتر ورودی تابع است و return نتیجه را به فراخواننده می‌دهد.26Function expressionتابع را می‌توان در متغیر ذخیره کرد و به‌عنوان مقدار منتقل کرد.27Arrow functionتوابع پیکانی برای تابع‌های کوتاه و callbackها رایج‌اند؛ رفتار this در آن‌ها متفاوت است.28دامنه متغیرهاscope مشخص می‌کند متغیر کجا قابل دسترسی است؛ از var در کد جدید کمتر استفاده کن.29آرایه و mapmap آرایه جدیدی با تبدیل هر عضو می‌سازد.30filterfilter اعضایی را نگه می‌دارد که شرط را بگذرانند.31reducereduce اعضا را به یک نتیجه مانند مجموع یا شیء تجمیع می‌کند.32find و some و everyاین متدها برای یافتن عضو یا بررسی شرط روی آرایه کاربرد دارند.33مرتب‌سازی آرایهsort به تابع مقایسه نیاز دارد تا ترتیب عددی درست باشد.34شیء در جاوااسکریپتشیء ویژگی‌ها را به شکل کلید و مقدار نگه می‌دارد.35دسترسی به ویژگی‌هااز نقطه یا براکت برای خواندن و تغییر ویژگی‌ها استفاده می‌شود.36متدهای شیء و thisمتد تابعی درون شیء است؛ this به زمینه فراخوانی وابسته است.37Destructuringتجزیه ساختاری، مقادیر آرایه یا ویژگی‌های شیء را به متغیرها اختصاص می‌دهد.38Spread و Rest... برای گسترش مقادیر و گردآوری آرگومان‌ها استفاده می‌شود.39مقادیر null و undefinednull معمولاً نبود عمدی مقدار را نشان می‌دهد؛ undefined اغلب یعنی مقداردهی نشده.40DOM چیست؟DOM نمایش شیء‌محور ساختار صفحه است که JavaScript می‌تواند آن را بخواند و تغییر دهد.41انتخاب عناصرquerySelector و querySelectorAll عناصر را با CSS selector انتخاب می‌کنند.42تغییر متن و کلاسtextContent برای متن امن و classList برای مدیریت کلاس‌ها کاربرد دارد.43ساخت و حذف عنصرcreateElement و append برای افزودن عناصر و remove برای حذف آن‌هاست.44رویداد clickevent listener واکنش را به تعامل کاربر وصل می‌کند.45فرم‌ها و submitرویداد submit و preventDefault برای پردازش فرم بدون بارگذاری مجدد مفیدند.46اعتبارسنجی ورودیورودی را قبل از استفاده بررسی کن و پیام روشن برای اصلاح نشان بده.47setTimeout و setIntervalاین APIها اجرای تابع را به زمان‌بندی وصل می‌کنند؛ interval را پس از نیاز متوقف کن.48JSONJSON قالبی استاندارد برای تبادل داده است؛ stringify و parse آن را تبدیل می‌کنند.49ماژول‌های import/exportماژول‌ها کد را به فایل‌های مستقل تقسیم می‌کنند و قابلیت‌ها را صادر و وارد می‌کنند.50try/catchtry/catch برای مدیریت خطاهای قابل پیش‌بینی و حفظ تجربه کاربر به کار می‌رود.51PromisePromise نتیجه یک عملیات ناهمگام را در آینده نشان می‌دهد.52async و awaitasync/await خواندن عملیات ناهمگام را ساده می‌کند و خطاها را با try/catch می‌توان گرفت.53fetch و درخواست HTTPfetch برای درخواست شبکه است؛ پاسخ و وضعیت HTTP باید بررسی شود.54کار با پاسخ JSONبعد از دریافت پاسخ، json() را await کن و حالت خطا را هم در نظر بگیر.55localStoragelocalStorage داده متنی را در مرورگر نگه می‌دارد؛ اطلاعات حساس را در آن ذخیره نکن.56sessionStoragesessionStorage داده را برای نشست همان تب نگه می‌دارد.57تاریخ و زمانDate برای ساخت تاریخ و دریافت اجزای آن استفاده می‌شود.58Math و اعداد تصادفیMath ابزارهای محاسباتی دارد؛ برای عدد تصادفی در یک بازه باید مقیاس را درست بسازی.59عبارات منظم مقدماتیRegex برای جست‌وجو یا بررسی الگوهای متنی است؛ الگوهای پیچیده را قابل‌خواندن نگه دار.60کپی‌کردن آرایه و شیءآرایه و شیء مرجع‌اند؛ کپی سطحی با spread انجام می‌شود ولی اشیای تو در تو مشترک می‌مانند.61برنامه‌نویسی تابعی مقدماتیتوابع خالص و پرهیز از تغییر بی‌دلیل داده‌ها، آزمون و نگهداری را آسان می‌کند.62کلاس‌هاclass راهی نحوی برای تعریف نمونه‌ها، سازنده و متدها فراهم می‌کند.63سازنده و متدهاconstructor مقدارهای اولیه را می‌سازد و متدها رفتار نمونه را مشخص می‌کنند.64وراثت و extendsextends رابطه کلاس فرزند با کلاس پایه را تعریف می‌کند؛ super سازنده والد را فراخوانی می‌کند.65مدیریت خطا در asyncخطاهای شبکه، پاسخ ناموفق و داده نامعتبر باید جداگانه مدیریت شوند.66دسترس‌پذیری تعاملاتدکمه واقعی، برچسب فرم، تمرکز صفحه‌کلید و پیام قابل‌خواندن به همه کاربران کمک می‌کند.67طراحی واکنش‌گرا با JSرفتار تعاملی باید در اندازه‌های مختلف صفحه و لمس موبایل قابل استفاده باشد.68بهینه‌سازی DOMبه‌روزرسانی هدفمند و پرهیز از بازسازی غیرضروری صفحه، عملکرد را بهتر می‌کند.69آزمون دستی و اشکال‌زداییکنسول، breakpoint و بررسی حالت‌های مرزی برای یافتن خطاها استفاده می‌شوند.70پروژه نهایی: مدیریت کارهاپروژه نهایی فرم، آرایه، DOM، localStorage، فیلتر و رویدادها را ترکیب می‌کند.