اختبار الوحدة: JavaScript في المتصفّح

خمسة أسئلة عن هذه الوحدة. أجب عنها كلها، ثم شاهد نتيجتك وسبب صحة كل إجابة أو خطئها.

سكربت في <head> ينفّذ document.querySelector("#total").textContent = "$0.00"; ويرمي Cannot set properties of null. والـ id مكتوب بشكل صحيح. ما الذي يُصلح ذلك؟

استخدم getElementById("total") بدلًا من ذلك.
غلّف السطر بـ try/catch.
استخدم innerHTML بدلًا من textContent.
أضف defer إلى وسم السكربت (أو حمّله بـ type="module")، كي يُنفَّذ بعد تحليل الصفحة.

يضيف Pocket مستمع نقرات لكل <li> عند تحميل الصفحة. والمصاريف المضافة لاحقًا لا تستجيب للنقرات. ما أفضل إصلاح؟

ضع مستمعًا واحدًا على حاوية القائمة واستخدم event.target.closest("li") لتجد العنصر المنقور.
أضف المستمعين من جديد بعد ثانية باستخدام setTimeout.
ضع سمة onclick="..." في نص HTML لكل عنصر.
أعِد إضافة المستمعين إلى كل عنصر كل ثانية باستخدام setInterval.

بعد الضغط على Enter في نموذج Pocket، يُعاد تحميل الصفحة ويظهر في الرابط ?label=Tea. ومعالج الحدث هو form.addEventListener("submit", () => { addExpense(); });. ما السبب؟

حدث submit لا يُطلق إلا مع نقرات الفأرة، لا مع Enter.
يجب أن تكون addExpense دالة async.
معالج الحدث لا يستدعي event.preventDefault() أبدًا، فيُجري المتصفّح الإرسال المعتاد.
النموذج تنقصه السمة action.

بعد إعادة التحميل، تُرجع localStorage.getItem("pocket") النص [object Object]. ما الخطأ الذي وقع عند الحفظ؟

كان التخزين ممتلئًا، فقُطعت البيانات.
مُرّر الكائن إلى setItem دون JSON.stringify، فحُوّل بـ String().
استُدعيت JSON.parse مرتين عند التحميل.
كُتب المفتاح بشكل خاطئ عند التحميل.

يجيب الخادم عن هذا الطلب برمز الحالة 500 وصفحة خطأ HTML. ماذا يحدث؟

JavaScript

async function load() {
  const res = await fetch("/api/expenses");
  return res.json();
}

تُرفض fetch بخطأ يقول “HTTP 500”.
load() تُنجَز بالقيمة undefined.
fetch تُنجَز، ثم تُرفض res.json() بخطأ SyntaxError لأن الجسم HTML لا JSON.
يعيد المتصفّح محاولة الطلب حتى ينجح.

5 أسئلة بلا إجابة