خلاصه و گام‌های بعد

این صفحه دستور تازه‌ای یاد نمی‌دهد. دوره را روی یک سفارش جمع می‌کند: نوشیدنی tea و اندازه regular. خطی که باید بتوانی توضیحش بدهی tea / regular است.

این خط از کجا آمد

صفحهٔ دسترسی‌پذیری آن را با یک <button type="button"> نوشت. کلیک ماوس، Enter و Space هر سه همان رویداد click را اجرا می‌کنند. aria-live="polite" متن تازه را بعد از جملهٔ جاری می‌خواند. اگر size نباشد، button.disabled برابر true است و دکمه سر جایش می‌ماند. فوکوس هم روی همان دکمه است.

دو خط قبلی را قاطی نکن

در اشکال‌زدایی کد order.cup را روی { drink: "tea", size: "regular" } خواند. شیء ویژگی size دارد، نه cup. درستش این است که size خوانده شود. console.error خطا پرتاب نمی‌کند و اسکریپت ادامه پیدا می‌کند. خط آن صفحه fixed / tea / regular بود.
صفحهٔ خطاها تابع را واقعاً متوقف کرد. throw new Error("missing size") تابع label را پیش از return نگه می‌دارد. catch مقدار error.message را می‌خواند، یعنی missing size. error.name برابر Error است. finally در هر دو حالت اجرا می‌شود. خط آن صفحه caught / missing size بود.

هفت ردیف، یک سفارش

هر ردیف تکه‌ای از همین سفارش است. فقط اگر نتیجه برایت کم‌رنگ است برو سراغ همان جلسه.

این جدول یادآوری است. دورهٔ دوم نیست و پرسشی هم ندارد.

مقدار و تصمیم

tea و regular را نگه می‌داری، مقایسه می‌کنی و تکرار می‌کنی. if یک راه را انتخاب می‌کند. حلقه چیزهایی مثل mint و lemon را یکی‌یکی می‌بیند. break از حلقه بیرون می‌آید. continue همان یک مورد را رد می‌کند و بقیه را ادامه می‌دهد.

تابع

تابع سفارش را می‌گیرد و tea / regular را برمی‌گرداند. پارامتر می‌تواند مقدار پیش‌فرض داشته باشد. تابع پیکانی شکل کوتاه‌تر همان تابع است. scope معلوم می‌کند کدام نام دیده می‌شود. closure بعد از برگشتن تابع بیرونی هنوز به همان binding دسترسی دارد.

شیء، JSON و آرایه

order.drink برابر tea است و order.size برابر regular. JSON.parse متن را به شیء تبدیل می‌کند. آرایه اضافه‌ها را نگه می‌دارد. map آرایهٔ تازه می‌سازد. find یک مورد را برمی‌گرداند. spread سفارش را کپی می‌کند. rest آنچه را نام نبرده‌ای جمع می‌کند. این کپی سطحی است.

صفحه

querySelector دکمه را پیدا می‌کند. textContent خط را می‌نویسد. رویداد کلیک برای ماوس، Enter و Space اجرا می‌شود. مقدار فیلد را از خود فرم می‌خوانی. setTimeout کار را به بعد می‌اندازد و جای دکمه را نمی‌گیرد.

انتظار

callback وقتی انتظار تمام شد اجرا می‌شود. Promise یا fulfilled می‌شود یا rejected. await فقط همان تابع async را نگه می‌دارد. بقیهٔ صفحه ادامه پیدا می‌کند. تابع async همیشه یک Promise برمی‌گرداند. fetch درخواست را می‌فرستد و به یک Response می‌رسد، نه به بدنهٔ خوانده‌شده. response.json() بدنه را می‌خواند و خودش یک Promise دیگر برمی‌گرداند. پاسخ HTTP با وضعیت 404 معمولاً fetch را reject نمی‌کند. پیش از خواندن بدنه response.ok را ببین. قطع شدن شبکه می‌تواند reject کند.

نحو تازه‌تر

destructuring نام‌های drink و size را جدا می‌کند. اگر شیء تودرتو نباشد، همان‌جا ممکن است خطا بدهد. template literal شکست خط را نگه می‌دارد و ${...} را هنگام اجرا پر می‌کند. ماژول نام‌هایش را روی window نمی‌گذارد و مرورگر آن را با HTTP می‌گیرد. کلاس شیء را در constructor می‌سازد، از this استفاده می‌کند، و در کلاس فرزند پیش از this باید super را صدا بزند. فیلد خصوصی داخل همان کلاس می‌ماند.

وقتی سفارش غلط است

size را بخوان، نه ویژگی‌ای را که وجود ندارد. console.error شکست را نشان می‌دهد و خط بعدی هنوز اجرا می‌شود. throw تابع را متوقف می‌کند و فقط catch ادامه را به دست می‌گیرد. عمل را به یک دکمه بسپار. حاشیهٔ فوکوس را پنهان نکن.

گام بعد

صفحهٔ بعد یک فهرست کار کوتاه است: افزودن مورد، انجام‌شده کردنش، و حذفش. همان DOM و همان کلیک این دوره کافی است. آن صفحه هنوز جزو مسیر اصلی است.
بعد از آن، صفحه‌های اختیاری می‌آیند: strict mode، Map و Set، عبارت منظم، web storage، cookies، و وراثت کلاس. برای تمام کردن مسیر اصلی لازم نیستند.

این پنج جمله را بلند بگو

• دکمه tea / regular را می‌نویسد و aria-live polite آن را اعلام می‌کند
• console.error پرتاب نمی‌کند؛ خط اشکال‌زدایی fixed / tea / regular بود
• throw تابع label را متوقف می‌کند؛ catch پیام missing size را می‌خواند؛ آن خط caught / missing size بود
• fetch به یک Response می‌رسد؛ پیش از response.json() مقدار response.ok را ببین
• صفحهٔ بعد فهرست کارهاست