الملخص والخطوات التالية
هذه الصفحة لا تضيف صياغة جديدة. تجمع الدورة كلها في طلب واحد: المشروب tea والحجم regular. السطر الذي ينبغي أن تستطيع شرحه هو tea / regular.
من أين جاء هذا السطر
صفحة إمكانية الوصول كتبته بزر حقيقي button type=button. تشغّل Mouse وEnter وSpace النقرة نفسها. aria-live="polite" ينطق بعد الجملة الحالية. إذا غاب size صار button.disabled مساويًا true وبقي الزر في الصفحة. يبقى التركيز على الزر.
سطران سابقان
في التصحيح قُرئ order.cup على { drink: "tea", size: "regular" }. الكائن فيه size وليس cup. console.error لا يرمي، فيتابع النص البرمجي. كان ذلك السطر fixed / tea / regular.
يوقف throw new Error("missing size") الدالة label قبل return. يقرأ catch القيمة error.message وهي missing size. error.name هو Error. يعمل finally في الحالتين. كان ذلك السطر caught / missing size.
سبعة صفوف وترتيب واحد
كل صف جزء من الطلب نفسه. افتح الجلسة المطابقة فقط إذا بدا الناتج خفيفًا.
📊 ماذا تفعل هذه الدورة بطلب واحد
| المجموعة | تستطيع | نتيجة واحدة |
|---|---|---|
| القيم والتدفق | حفظ القيمة والاختيار بـ if والمرور على قائمة | tea / regular |
| الدوال | أخذ الطلب وإرجاع سطر | tea / regular |
| الكائنات والمصفوفات | قراءة الحقل وتحليل JSON والنسخ | { drink: "tea", size: "regular" } |
| الصفحة | إيجاد الزر وكتابة السطر | tea / regular |
| الانتظار | إيقاف دالة واحدة؛ fetch يعطي Response | response.ok ثم response.json() |
| صياغة أحدث | سحب الأسماء وملء القالب وبناء الصنف | tea / regular |
| العناية | قراءة الخاصية الحقيقية والرمي المقصود وإبقاء الزر | fixed / tea / regular ثم caught / missing size ثم tea / regular |
هذه الخريطة تذكير. ليست دورة ثانية، ولا فيها أسئلة.
القيم والقرارات
تخزّن tea وregular وتقارنهما وتكرّر. if يختار. break يغادر الحلقة. continue يتخطى عنصرًا واحدًا ويكمل.
الدوال
تُرجع الدالة tea / regular. الدالة السهمية دالة أقصر. يرى closure الربط بعد أن ترجع الدالة الخارجية.
الكائنات وJSON والمصفوفات
يحوّل JSON.parse النص إلى كائن. يبني map مصفوفة جديدة. يُرجع find تطابقًا واحدًا. spread ينسخ. rest يجمع ما لم يُسمَّ. النسخة سطحية.
الصفحة
يجد querySelector الزر. يكتب textContent السطر. يعمل setTimeout لاحقًا ولا يحل محل الزر.
الانتظار
يوقف await تلك الدالة غير المتزامنة فقط، وتبقى بقية الصفحة تعمل. تُرجع الدالة غير المتزامنة دائمًا Promise. ينتهي fetch إلى Response لا إلى جسم مقروء. يُرجع response.json() بدوره Promise أخرى. لا يرفض HTTP 404 عادةً استدعاء fetch. افحص response.ok. يمكن لفشل الشبكة أن يرفض.
صياغة أحدث
يسحب التفكيك drink وsize بالاسم. يمكن لكائن متداخل غائب أن يرمي. تُملأ القوالب ${...} عند التشغيل. الوحدات ليست على window وتُحمَّل عبر HTTP. يستدعي الصنف الابن super قبل this. يبقى الحقل الخاص داخل الصنف.
حين يختل الطلب
اقرأ size لا خاصية غير موجودة. console.error لا يرمي، والسطر التالي يجري. يوقف throw الدالة، ولا يتابع إلا catch. اجعل الفعل على زر. أبقِ إطار التركيز ظاهرًا.
ماذا بعد
الصفحة التالية قائمة مهام قصيرة: إضافة عنصر، وتعليمه منجزًا، وحذفه. ما زالت ضمن المسار الأساسي.
بعدها يأتي الاختياري: strict mode وMap وSet والتعبيرات النمطية وweb storage وcookies ووراثة الأصناف. ليست لازمة لإنهاء المسار الأساسي.
قل هذه الأسطر الخمسة بصوت عال
- الزر يكتب tea / regular وينطق aria-live="polite" بعد الجملة الحالية
- console.error لا يرمي؛ سطر التصحيح كان fixed / tea / regular
- throw new Error("missing size") يوقف label قبل return؛ يقرأ catch القيمة missing size؛ كان السطر caught / missing size
- ينتهي fetch إلى Response؛ افحص response.ok قبل response.json()
- الصفحة التالية قائمة مهام قصيرة