{"checkpoints":{"s-js-1":[{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
let total = \"0\";\ntotal = total + 450;\ntotal = total + 1220;\nconsole.log(total);
\n","options":[{"text":"1670","why":"هذا يحتاج إلى أرقام في الطرفين. يبدأ total نصًا هو “0”، لذلك تلصق كل + النصوص بدلًا من أن تجمع."},{"text":""1670"","why":"لا تحدث أي عملية جمع هنا. فـ + مع نص في أحد طرفيها تلصق الأجزاء نصًا."},{"text":"NaN","why":"تأتي NaN من عملية حسابية تفشل. ولصق النصوص لا يفشل أبدًا، فلا تظهر NaN."},{"text":"04501220","why":"صحيح. “0” + 450 تساوي “0450”، و"0450" + 1220 تساوي “04501220”. ابدأ المجموع بالرقم 0."}],"answer":3},{"q":"

const count = 0; ثم لاحقًا count++; يرمي TypeError: Assignment to constant variable. ما الإصلاح الصحيح؟

","options":[{"text":"صرّح به بـ var كي يعمل في كل مكان.","why":"var ستعمل، لكنها تجلب معها قواعد نطاق مربكة. وlet هي الطريقة الحديثة للسماح بإعادة الإسناد."},{"text":"صرّح به بـ let count = 0; لأن القيمة يجب أن تتغيّر.","why":"صحيح. let موجودة للأسماء التي يُعاد إسنادها؛ وconst للأسماء التي لا يُعاد إسنادها أبدًا."},{"text":"استبدل count++ بـ count = count + 1.","why":"هذه أيضًا إعادة إسناد، فترفضها const بالطريقة نفسها تمامًا."},{"text":"ضع الزيادة بين قوسين: (count)++.","why":"الأقواس لا تغيّر ما تفعله التعليمة. إنها ما زالت تحاول إعادة إسناد ثابت."}],"answer":1},{"q":"

تعرض صفحة الدفع “Total does not match” لأن subtotal === 0.3 تساوي false بعد جمع 0.1 و0.2. ما أفضل إصلاح لتطبيق مالي؟

","options":[{"text":"قارن باستخدام == بدلًا من ===.","why":"== لا تضيف إلا تحويل الأنواع. والطرفان رقمان أصلًا، وهما مختلفان فعلًا بفارق ضئيل."},{"text":"قارن subtotal.toFixed(2) === 0.3.","why":"toFixed تُرجع نصًا، والنص لا يساوي الرقم مساواةً صارمة أبدًا، لذلك تكون النتيجة false دائمًا."},{"text":"خزّن كل مبلغ سنتاتٍ صحيحة (integers)، فتصبح 10 + 20 === 30 صحيحة بالضبط.","why":"صحيح. الحساب بالأعداد الصحيحة دقيق، فلا تنحرف المجاميع أبدًا. ولا تحوّل إلى الدولار إلا عند العرض."},{"text":"استدعِ parseFloat(subtotal) قبل المقارنة.","why":"subtotal رقم أصلًا. وتحليله لا يغيّر شيئًا في خطأ التقريب الثنائي الضئيل."}],"answer":2},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
const label = \"  Rent \";\nconst clean = label.trim().toLowerCase();\nconsole.log(label.length, clean);
\n","options":[{"text":"7 rent","why":"صحيح. دوال النصوص تُرجع نصوصًا جديدة، فيحتفظ label بحروفه السبعة، بما فيها المسافات، وتكون clean هي “rent”."},{"text":"4 rent","why":"trim() لم تغيّر label؛ بل أرجعت نصًا جديدًا خُزّن في clean. وما زال label بمسافاته."},{"text":"7 Rent","why":"clean تأتي من toLowerCase()، لذلك حرفها الأول صغير."},{"text":"4 Rent","why":"لا جزء منهما صحيح: label لم يُمسّ (7 حروف) وclean حُوّلت إلى أحرف صغيرة."}],"answer":0},{"q":"

مع const cents = 1250; وconst item = "lunch";، أيّ تعبير يُنتج بالضبط Spent $12.50 on lunch؟

","options":[{"text":""Spent $" + cents / 100 + " on " + item","why":"الأرقام تُسقط الأصفار في آخرها حين تتحوّل إلى نص، لذلك يعطي هذا “Spent $12.5 on lunch”."},{"text":"`Spent ${cents / 100} on ${item}`","why":"هذا ينقصه رمز الدولار، ومثل الخيار الأول، يعرض 12.5 بدلًا من 12.50."},{"text":"'Spent $${(cents / 100).toFixed(2)} on ${item}'","why":"العلامات المفردة تصنع نصًا عاديًا، فتُطبع أجزاء ${...} حرفيًا بدلًا من أن تُملأ."},{"text":"`Spent $${(cents / 100).toFixed(2)} on ${item}`","why":"صحيح. علامات backtick تصنع template literal، و$ الأولى حرف عادي، وtoFixed(2) تحافظ على منزلتين عشريتين."}],"answer":3}],"s-js-2":[{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
function sizeLabel(amount) {\n  if (amount > 100) return \"big\";\n  if (amount > 1000) return \"huge\";\n  return \"small\";\n}\nconsole.log(sizeLabel(5000));
\n","options":[{"text":"huge","why":"أول if تطابق 5000 أصلًا وتُرجع، فلا يُوصل أبدًا إلى فحص “huge”. ضع الفحص الأضيق أولًا."},{"text":"small","why":"لا تُرجَع small إلا حين لا يكون أيّ الشرطين صحيحًا، لكن 5000 أكبر من 100."},{"text":"big","why":"صحيح، وهذا خطأ برمجي: return تُنهي الدالة عند أول شرط صحيح، لذلك ترتيب الفحوص مهم."},{"text":"undefined","why":"كل مسار في الدالة يُرجع نصًا، لذلك لا تكون النتيجة undefined أبدًا."}],"answer":2},{"q":"

تعرض دالة “No note” حين يكون if (note) خاطئًا. أيّ هذه الملاحظات تُعامَل على أنها مفقودة؟

","options":[{"text":""0"","why":"النص غير الفارغ truthy، حتى لو كان يحتوي على حرف الصفر."},{"text":"" " (مسافة واحدة)","why":"المسافة حرف، لذلك النص ليس فارغًا ويُعدّ truthy."},{"text":""false"","why":"هذا نص من خمسة حروف، لا القيمة المنطقية false، لذلك هو truthy."},{"text":""" (نص فارغ)","why":"صحيح. النص الفارغ إحدى القيم الثماني الـ falsy."}],"answer":3},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
let count = 0;\nfor (let i = 0; i < 5; i++) {\n  if (i === 3) break;\n  count++;\n}\nconsole.log(count);
\n","options":[{"text":"3","why":"صحيح. الدورات التي تكون فيها i تساوي 0 و1 و2 تزيد count؛ وحين تكون i تساوي 3، تُنهي break الحلقة قبل أن تُنفَّذ count++."},{"text":"4","why":"break تُنفَّذ قبل count++ في الدورة التي تكون فيها i تساوي 3، لذلك لا تُحتسب تلك الدورة."},{"text":"5","why":"هذا صحيح لو لم توجد break. لكن الحلقة تتوقّف مبكرًا."},{"text":"2","why":"الدورة التي تكون فيها i تساوي 0 تُحتسب أيضًا، لذلك تكتمل ثلاث دورات قبل break."}],"answer":0},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
const add = (a, b = 10) => a + b;\nconsole.log(add(5), add(5, 0), add(5, null));
\n","options":[{"text":"15 15 15","why":"القيمة الافتراضية لا تُطبَّق إلا حين يكون الوسيط مفقودًا أو undefined. أما 0 وnull فوسائط حقيقية."},{"text":"15 5 5","why":"صحيح. الاستدعاء الأول وحده يستخدم القيمة الافتراضية. وفي الاستدعاء الأخير تُستخدم null، وفي العمليات الحسابية تتحوّل إلى 0."},{"text":"15 5 15","why":"تمرير null لا يُفعّل القيمة الافتراضية؛ وحدها undefined تفعل ذلك."},{"text":"15 15 5","why":"تمرير 0 وسيط حقيقي، لذلك تكون b تساوي 0، لا 10."}],"answer":1},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
function makeLimiter(max) {\n  let used = 0;\n  return () => {\n    if (used >= max) return false;\n    used++;\n    return true;\n  };\n}\nconst canAdd = makeLimiter(2);\nconsole.log(canAdd(), canAdd(), canAdd());
\n","options":[{"text":"true true true","why":"الـ closure يتذكّر used بين الاستدعاءات، لذلك يُبلغ الحدّ 2."},{"text":"false false false","why":"أول استدعاءين يجدان used أقل من max، لذلك يُرجعان true."},{"text":"true true false","why":"صحيح. الـ closure يُبقي used حيًا: تصبح 0 ثم 1 ثم 2، ويجد الاستدعاء الثالث أن الحدّ قد بُلغ."},{"text":"true false false","why":"الحدّ 2، لذلك ينجح استدعاءان قبل أن تصبح used >= max صحيحة."}],"answer":2}],"s-js-3":[{"q":"

const names = expenses.map((e) => { e.label.toUpperCase(); }); تعطي مصفوفة من undefined. ما الإصلاح؟

","options":[{"text":"استخدم forEach بدلًا من map.","why":"forEach نفسها تُرجع undefined، فلن تحصل على أي مصفوفة أصلًا."},{"text":"احذف الأقواس المعقوفة، (e) => e.label.toUpperCase()، أو أضف return داخلها.","why":"صحيح. مع الأقواس المعقوفة يحتاج الـ callback إلى return صريحة؛ وإلا فإنه يُرجع undefined لكل عنصر."},{"text":"استخدم filter بدلًا من map.","why":"filter تحتفظ بالعناصر أو تُسقطها؛ ولا تحوّلها. ومع هذا الـ callback ستُرجع مصفوفة فارغة."},{"text":"صرّح بـ names باستخدام let بدلًا من const.","why":"طريقة تخزين النتيجة لا تغيّر ما تُرجعه map."}],"answer":1},{"q":"

ماذا تُرجع [5, 25, 100].sort()؟

","options":[{"text":"[5, 25, 100]","why":"هذا يحتاج إلى دالة مقارنة مثل (a, b) => a - b. الترتيب الافتراضي يقارن النصوص."},{"text":"[5, 100, 25]","why":"بصفتها نصوصًا، تُرتَّب “1” قبل “2” و"5"، لذلك تأتي “100” أولًا."},{"text":"[25, 5, 100]","why":"مقارنة النصوص تنظر إلى الحرف الأول أولًا: “1” < “2” < “5”."},{"text":"[100, 25, 5]","why":"صحيح. دون دالة مقارنة، تُقارن الأرقام على أنها نصوص: “100” < “25” < “5”."}],"answer":3},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
const settings = { currency: \"USD\", limits: { food: 400 } };\nconst copy = { ...settings };\ncopy.limits.food = 500;\ncopy.currency = \"EUR\";\nconsole.log(settings.currency, settings.limits.food);
\n","options":[{"text":"USD 400","why":"النشر سطحي: copy.limits وsettings.limits هما الكائن الداخلي نفسه، لذلك يتغيّر حدّ الطعام لكليهما."},{"text":"EUR 500","why":"currency خاصية في المستوى الأعلى، نُسخت قيمتها إلى الكائن الجديد، لذلك تغيير copy.currency يترك settings كما هو."},{"text":"USD 500","why":"صحيح. نُسخت خصائص المستوى الأعلى، لكن الكائن المتداخل limits مشترك. استخدم structuredClone لنسخة عميقة."},{"text":"EUR 400","why":"الجزءان معكوسان: تغيير المستوى الأعلى يبقى في النسخة، والتغيير المتداخل مشترك."}],"answer":2},{"q":"

أيّ تعبير يُرجع خصمًا محفوظًا قيمته 0 على أنه 0، ولا يستخدم 10 إلا حين لا يكون هناك خصم محفوظ؟

","options":[{"text":"user.discount ?? 10","why":"صحيح. ?? لا تلجأ إلى البديل إلا مع null وundefined، فيُحتفظ بالصفر الحقيقي."},{"text":"user.discount || 10","why":"|| تلجأ إلى البديل مع كل قيمة falsy، و0 قيمة falsy، فيُستبدل الخصم المحفوظ بـ 10."},{"text":"user.discount ? user.discount : 10","why":"العامل الثلاثي يفحص إن كانت القيمة truthy، تمامًا مثل ||، فيصبح 0 هو 10."},{"text":"user?.discount || 10","why":"?. تحمي فقط من غياب user؛ أما || فما زالت تتخلّص من الصفر."}],"answer":0},{"q":"

يعلّم Pocket المصاريف بأنها “reviewed” ويفحص isReviewed(id) لكل عنصر في كل عرض. أيّ بنية أنسب لمعرّفات المصاريف المُراجَعة؟

","options":[{"text":"نص فيه المعرّفات مفصولة بفواصل.","why":"النصوص يجب البحث فيها حرفًا حرفًا، وقد تطابق أجزاءً من معرّفات أخرى، مثل “exp-1” داخل “exp-12”."},{"text":"Map من المعرّف إلى كائن المصروف الكامل.","why":"أنت تحتاج فقط إلى إجابة نعم/لا، لذلك تخزين المصاريف كاملة يكرّر بيانات موجودة أصلًا في القائمة."},{"text":"مصفوفة تضيف إليها كل معرّف بـ push.","why":"هذا يعمل، لكنه يسمح بالتكرار، وincludes تبحث في المصفوفة كلها مع كل فحص."},{"text":"Set من المعرّفات.","why":"صحيح. الـ Set تخزّن كل معرّف مرة واحدة، وhas(id) تجيب بسرعة دون بحث."}],"answer":3}],"s-js-4":[{"q":"

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

","options":[{"text":"استخدم getElementById("total") بدلًا من ذلك.","why":"أي بحث يُرجع null حين لا يكون العنصر موجودًا بعد. المشكلة في التوقيت، لا في الدالة."},{"text":"غلّف السطر بـ try/catch.","why":"هذا يُخفي الخطأ، ويظل المجموع لا يُضبط أبدًا."},{"text":"استخدم innerHTML بدلًا من textContent.","why":"الفشل يحدث قبل ضبط أيّ من الخاصيتين: العنصر نفسه null."},{"text":"أضف defer إلى وسم السكربت (أو حمّله بـ type="module")، كي يُنفَّذ بعد تحليل الصفحة.","why":"صحيح. السكربت العادي في الـ head يُنفَّذ قبل وجود الـ body، فلا يكون العنصر موجودًا بعد."}],"answer":3},{"q":"

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

","options":[{"text":"ضع مستمعًا واحدًا على حاوية القائمة واستخدم event.target.closest("li") لتجد العنصر المنقور.","why":"صحيح. النقرات على العناصر الجديدة تنتشر للأعلى إلى الحاوية نفسها، لذلك يغطّي التفويض العناصر المضافة في أي وقت."},{"text":"أضف المستمعين من جديد بعد ثانية باستخدام setTimeout.","why":"العناصر المضافة بعد تلك الثانية ستفوتها أيضًا. التوقيت ليس المشكلة الحقيقية."},{"text":"ضع سمة onclick="..." في نص HTML لكل عنصر.","why":"هذا يخلط الكود بنصوص الوسوم، ويعرّضك لخطر الحقن، وما زال يتطلّب التعامل مع كل عنصر على حدة."},{"text":"أعِد إضافة المستمعين إلى كل عنصر كل ثانية باستخدام setInterval.","why":"إنه يهدر العمل ويكدّس مستمعين مكرّرين على عناصر كان لها مستمع أصلًا."}],"answer":0},{"q":"

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

","options":[{"text":"حدث submit لا يُطلق إلا مع نقرات الفأرة، لا مع Enter.","why":"submit يُطلق أيًّا كانت طريقة إرسال النموذج، ولهذا بالضبط تستمع إليه."},{"text":"يجب أن تكون addExpense دالة async.","why":"كونها غير متزامنة أو لا لا يؤثّر في إعادة التحميل. فالفعل الافتراضي للمتصفّح ما زال يحدث."},{"text":"معالج الحدث لا يستدعي event.preventDefault() أبدًا، فيُجري المتصفّح الإرسال المعتاد.","why":"صحيح. الفعل الافتراضي يرسل النموذج ويحمّل صفحة جديدة. ألغِه في أول سطر من معالج الحدث."},{"text":"النموذج تنقصه السمة action.","why":"دون action يُرسَل النموذج إلى الصفحة الحالية، وهذه إعادة التحميل التي تراها. والإصلاح هو إلغاء الإرسال."}],"answer":2},{"q":"

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

","options":[{"text":"كان التخزين ممتلئًا، فقُطعت البيانات.","why":"التخزين الممتلئ يرمي خطأ؛ ولا يستبدل البيانات بـ “[object Object]”."},{"text":"مُرّر الكائن إلى setItem دون JSON.stringify، فحُوّل بـ String().","why":"صحيح. التخزين لا يحتفظ إلا بالنصوص. حوّل إلى نص بـ JSON.stringify واقرأ مجددًا بـ JSON.parse."},{"text":"استُدعيت JSON.parse مرتين عند التحميل.","why":"التحليل يحدث عند التحميل ولا يستطيع تغيير ما خُزّن. النص كان خاطئًا أصلًا عند الحفظ."},{"text":"كُتب المفتاح بشكل خاطئ عند التحميل.","why":"المفتاح المكتوب خطأً يُرجع null، لا “[object Object]”."}],"answer":1},{"q":"

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

\n
JavaScript
async function load() {\n  const res = await fetch(\"/api/expenses\");\n  return res.json();\n}
\n","options":[{"text":"تُرفض fetch بخطأ يقول “HTTP 500”.","why":"fetch لا تُرفض إلا حين تفشل الشبكة. والـ 500 ما زالت استجابة HTTP كاملة."},{"text":"load() تُنجَز بالقيمة undefined.","why":"res.json() لا تُرجع undefined بهدوء؛ بل تحاول تحليل الجسم فتفشل."},{"text":"fetch تُنجَز، ثم تُرفض res.json() بخطأ SyntaxError لأن الجسم HTML لا JSON.","why":"صحيح. افحص res.ok قبل التحليل وارمِ خطأً واضحًا من عندك."},{"text":"يعيد المتصفّح محاولة الطلب حتى ينجح.","why":"المتصفّحات لا تعيد محاولة استجابات HTTP الفاشلة تلقائيًا. كودك يستلم استجابة الـ 500."}],"answer":2}],"s-js-5":[{"q":"

يحتوي money.js على export function formatMoney(cents) { … }. ويحتوي main.js على import formatMoney from "./money.js";. ماذا يحدث؟

","options":[{"text":"يفشل التحميل: ليس لـ money.js تصدير افتراضي. اكتب import { formatMoney } from "./money.js";.","why":"صحيح. الأقواس المعقوفة تستورد التصديرات المسمّاة؛ ودونها تطلب تصديرًا افتراضيًا غير موجود."},{"text":"يعمل، لأن الأسماء متطابقة.","why":"الأسماء لا تهمّ إلا في الاستيراد المسمّى، الذي يحتاج إلى أقواس معقوفة. ودون الأقواس يطلب الاستيراد التصدير الافتراضي."},{"text":"formatMoney تساوي undefined حتى أول استدعاء لها.","why":"الاستيرادات تُربط قبل تنفيذ أي كود. والتصدير المفقود يمنع الوحدة من التحميل أصلًا."},{"text":"يعمل فقط إن غُيّر اسم الملف إلى money.mjs.","why":"امتداد الملف لا يغيّر طريقة عمل التصديرات المسمّاة والافتراضية."}],"answer":0},{"q":"

ماذا يطبع هذا الكود؟

\n
JavaScript
class Store {\n  #items = [];\n  add(x) { this.#items.push(x); }\n  get size() { return this.#items.length; }\n}\nconst s = new Store();\ns.add(1);\nconsole.log(s.size, s.items);
\n","options":[{"text":"1 [1]","why":"#items وitems اسمان مختلفان. والحقل الخاص لا يُكشف على شكل خاصية عامة اسمها items."},{"text":"undefined undefined","why":"size هو getter، لذلك قراءة s.size تنفّذه فيُرجع 1."},{"text":"يرمي SyntaxError.","why":"وحدها كتابة s.#items خارج الصنف خطأ في الصياغة. أما قراءة خاصية غير موجودة فمسموحة."},{"text":"1 undefined","why":"صحيح. الـ getter يُرجع الطول، وs.items مجرّد خاصية غير موجودة."}],"answer":3},{"q":"

يلتقط كود التحميل لديك كل الأخطاء في هذه الكتلة. فصار خطأ برمجي داخل render يمرّ دون أن يُلاحَظ. ما البنية الأفضل؟

\n
JavaScript
try {\n  const data = JSON.parse(text);\n  render(data);\n} catch {\n  render([]);\n}
\n","options":[{"text":"أبقِها كما هي، واترك كتلة catch فارغة بدلًا من ذلك.","why":"كتلة catch الفارغة تُخفي أكثر: الآن لا يُعرض شيء ولا يُبلَّغ عن شيء."},{"text":"غلّف JSON.parse وحدها بـ try/catch مع قيمة بديلة، واستدعِ render خارجها، كي تظهر أخطاؤها.","why":"صحيح. التقط فقط ما تتوقّعه وتستطيع التعامل معه، وهنا هو JSON التالف. والأخطاء غير المتوقّعة يجب أن تصل إلى الـ console."},{"text":"غلّف التطبيق كله بكتلة try/catch كبيرة واحدة في الأعلى.","why":"هذا يلتقط كل شيء في كل مكان، فيجعل الأخطاء البرمجية الحقيقية أصعب في العثور عليها."},{"text":"احذف try كليًا.","why":"عندها ستُسقط قيمة محفوظة تالفة التطبيقَ عند البدء، وهذا فشل حقيقي ومتوقّع ينبغي أن تتعامل معه."}],"answer":1},{"q":"

يعرض Pocket Total: $NaN بعد أن تضيف مصروفًا. ونقطة توقّف في totalCents تُظهر أن المصروف الجديد فيه amount: undefined. أين تبحث بعد ذلك؟

","options":[{"text":"في ملف الأنماط، تحسّبًا لأن يكون المجموع مخفيًا.","why":"القيمة نفسها خاطئة، فلا يمكن أن يكون التنسيق هو السبب."},{"text":"في استدعاء reduce داخل totalCents.","why":"reduce تجمع بشكل صحيح؛ لكنها استلمت قيمة سيئة. الخطأ أبكر من ذلك، حيث صُنعت تلك القيمة."},{"text":"في كود معالج الإرسال الذي يبني كائن المصروف الجديد.","why":"صحيح. تتبّع القيمة السيئة إلى حيث أُنشئت، مثلًا اسم حقل مكتوب خطأً مثل data.get("amout")."},{"text":"في حدّ حجم التخزين.","why":"التخزين الممتلئ يرمي خطأ عند الحفظ. ولا يغيّر مبلغًا في الذاكرة إلى undefined."}],"answer":2},{"q":"

في Pocket، يستدعي معالج الحذف button.closest("li").remove(). فتعود المصاريف المحذوفة حين يتغيّر الفلتر. لماذا؟

","options":[{"text":"remove() غير متزامنة ولم تكن قد انتهت.","why":"remove() تسري فورًا. أُزيل العنصر فعلًا؛ لكن شيئًا ما رسمه من جديد."},{"text":"يحتفظ المتصفّح بنسخة مؤقتة من القائمة بين عمليات العرض.","why":"لا توجد نسخة مؤقتة. render تبني القائمة من جديد من الـ state في كل مرة."},{"text":"قائمة اختيار الفلتر تعيد تحميل الصفحة.","why":"حدث change لا يعيد تحميل الصفحة. بل يستدعي update، التي تعيد العرض."},{"text":"غيّر معالج الحدث الصفحة لكنه لم يغيّر state.expenses، فيرسم العرض التالي المصروف من جديد.","why":"صحيح. غيّر الـ state عبر update، ودع render تُزيله من الصفحة."}],"answer":3}]},"final":[{"q":"

ماذا يطبع console.log(typeof (450 + "50"), 450 - "50")؟

","options":[{"text":"number 400","why":"مع نص في أحد الطرفين، تلصق + النصوص، لذلك النتيجة الأولى نص."},{"text":"string 45050","why":"- لا تفعل إلا الحساب، لذلك تتحوّل “50” إلى رقم وتكون النتيجة 400."},{"text":"string 400","why":"صحيح. + تلصق فتعطي “45050”، وهو نص؛ و- تحوّل “50” إلى 50 وتطرح."},{"text":"number 500","why":"لا تجمع أيّ من العمليتين 450 و50 بصفتهما رقمين هنا."}],"answer":2},{"q":"

ماذا تُرجع [3, 1, 2].map((n) => n * 2).filter((n) => n > 2)؟

","options":[{"text":"[6, 4]","why":"صحيح. map تعطي [6, 2, 4]، ثم تحتفظ filter بالقيم الأكبر من 2، بترتيبها الأصلي."},{"text":"[4, 6]","why":"لا map ولا filter ترتّبان. العناصر تحتفظ بترتيبها."},{"text":"[6, 2, 4]","why":"هذه نتيجة map وحدها؛ ثم تُزيل filter الـ 2."},{"text":"[3, 2]","why":"filter تعمل على القيم المضاعفة، لا على المصفوفة الأصلية."}],"answer":0},{"q":"

مصروف ليست له خاصية receipt. أيّ تعبير يرمي خطأ؟

","options":[{"text":"expense.receipt?.url","why":"?. تتوقّف عند الإيصال المفقود وتُرجع undefined."},{"text":"expense?.receipt","why":"قراءة خاصية مفقودة لا بأس بها؛ فهي تعطي undefined."},{"text":"expense.receipt ?? "none"","why":"هذا يقرأ خاصية مفقودة، وهو مسموح، ثم يلجأ إلى البديل “none”."},{"text":"expense.receipt.url","why":"صحيح. expense.receipt تساوي undefined، وقراءة .url من undefined ترمي TypeError."}],"answer":3},{"q":"

بأي ترتيب تُطبع الحروف؟

\n
JavaScript
setTimeout(() => console.log(\"A\"), 0);\n(async () => {\n  console.log(\"B\");\n  await null;\n  console.log(\"C\");\n})();\nconsole.log(\"D\");
\n","options":[{"text":"A B C D","why":"callback المؤقّت مهمة (task)، تنتظر حتى ينتهي السكربت وكل المهام الدقيقة."},{"text":"B D C A","why":"صحيح. تُنفَّذ B بشكل متزامن، وتوقف await الدالة مؤقتًا، وتُنهي D السكربت، وتستأنف C على شكل مهمة دقيقة، وتُنفَّذ A أخيرًا على شكل مهمة."},{"text":"B C D A","why":"await توقف الدالة غير المتزامنة مؤقتًا حتى مع قيمة ليست promise، لذلك تُطبع D قبل C."},{"text":"D B C A","why":"الدالة غير المتزامنة تعمل بشكل متزامن حتى أول await، لذلك تُطبع B قبل D."}],"answer":1},{"q":"

totalsByCategory تستخدم reduce مع {} قيمةً ابتدائية، وترمي Cannot read properties of undefined عند المصروف الثاني. ما السبب الأرجح؟

","options":[{"text":"يجب أن تكون القيمة الابتدائية [] لا {}.","why":"الكائن هو الصحيح لمجاميع الفئات؛ والمصفوفة تحتاج إلى كود مختلف."},{"text":"يجب ترتيب المصاريف حسب الفئة أولًا.","why":"التجميع بـ reduce يعمل بأي ترتيب."},{"text":"reduce لا تستطيع بناء كائنات، بل أرقامًا فقط.","why":"يمكن أن يكون المُراكِم أي قيمة، بما في ذلك كائن."},{"text":"للـ callback أقواس معقوفة لكن ليس فيه return totals، فيستلم الاستدعاء الثاني undefined.","why":"صحيح. كل ما يُرجعه الـ callback يصبح المُراكِم التالي؛ ودون return يكون ذلك undefined."}],"answer":3},{"q":"

جزءان من Pocket يستدعي كلٌّ منهما createIdGenerator("exp")، وأحيانًا يُنتجان المعرّف نفسه. ما الإصلاح الصحيح؟

","options":[{"text":"خزّن العدّاد في var عام بدلًا من ذلك.","why":"العدّاد العام يمكن لأي كود أن يصفّره أو يغيّره، وهذه بالضبط المشكلة التي كانت الـ closures تحلّها."},{"text":"استدعِ createIdGenerator("exp") داخل كل معالج نقرات.","why":"كل استدعاء يُنشئ عدّادًا جديدًا يبدأ من 1، وهذا يجعل التكرار أكثر احتمالًا."},{"text":"أنشئ مولّدًا واحدًا في وحدة واحدة واستورد الدالة نفسها أينما احتجت إلى معرّفات.","why":"صحيح. مولّد واحد يعني عدّادًا واحدًا، فيكون كل معرّف يعطيه فريدًا."},{"text":"استخدم Math.round(Math.random() * 10) معرّفًا.","why":"مع 11 قيمة ممكنة فقط، التصادم مضمون. استخدم عدّادًا واحدًا أو crypto.randomUUID()."}],"answer":2},{"q":"

تُعرض قائمة تسميات بـ li.innerHTML = `<b>${label}</b>`; ويحفظ مستخدم التسمية <img src=x onerror=alert(1)>. ما الإصلاح الآمن؟

","options":[{"text":"ضع التسمية بين علامات تنصيص داخل القالب.","why":"علامات التنصيص مجرّد حروف بالنسبة لمحلّل HTML؛ فيظل الوسم يُنشأ ويظل كوده يُنفَّذ."},{"text":"أنشئ <b> بـ createElement واضبط textContent الخاصة به على التسمية.","why":"صحيح. textContent لا تحلّل HTML أبدًا، فتُعرض التسمية نصًا عاديًا."},{"text":"استخدم outerHTML بدلًا من innerHTML.","why":"outerHTML تحلّل HTML أيضًا، فلها مشكلة الحقن نفسها."},{"text":"حدّد طول التسميات بـ 20 حرفًا.","why":"الحمولات القصيرة ما زالت قادرة على تشغيل الكود. والإصلاح ألّا تحلّل نص المستخدم على أنه HTML أبدًا."}],"answer":1},{"q":"

getJson تُرجع promise يُرفض. ماذا تفعل safeLoad()؟

\n
JavaScript
async function safeLoad() {\n  try {\n    return getJson(\"/api/rates\");\n  } catch {\n    return {};\n  }\n}
\n","options":[{"text":"تُرجع promise يُرفض، لأنه دون await يحدث الرفض بعد انتهاء كتلة try.","why":"صحيح. اكتب return await getJson(...) كي يُرمى الرفض داخل try ويُلتقط."},{"text":"تُنجَز بالقيمة {}.","why":"الـ catch لا ترى إلا الأخطاء المرمية أثناء تنفيذ كتلة try، ولا شيء يُرمى هناك دون await."},{"text":"تُنجَز بالقيمة undefined.","why":"الـ promise المُعاد يُتبنّى، فتتبع النتيجة getJson: إنها تُرفض."},{"text":"ترمي خطأً بشكل متزامن عند استدعائها.","why":"الدالة غير المتزامنة لا ترمي بشكل متزامن أبدًا؛ إنها تُرجع promise دائمًا."}],"answer":0},{"q":"

تحتاج إلى amounts مرتّبة من الأكبر إلى الأصغر لرسم بياني، بينما ما زالت لوحة أخرى تعرض amounts بترتيبها الأصلي. أيّ سطر صحيح؟

","options":[{"text":"amounts.sort((a, b) => b - a)","why":"دالة المقارنة صحيحة، لكن sort تعيد ترتيب المصفوفة الأصلية، فتُفسد اللوحة الأخرى."},{"text":"amounts.toSorted()","why":"إنها تُرجع نسخة، لكنها دون دالة مقارنة ترتّب كنصوص، تصاعديًا."},{"text":"[...amounts].sort()","why":"النسخة تحمي الأصل، لكن الترتيب الافتراضي يقارن كنصوص ويرتّب تصاعديًا."},{"text":"amounts.toSorted((a, b) => b - a)","why":"صحيح. نسخة مرتّبة، رقميًا وتنازليًا، تترك الأصل دون مساس."}],"answer":3},{"q":"

items.forEach(store.add); ترمي Cannot read properties of undefined (reading '#items') داخل add. أيّ تغيير يُصلح ذلك؟

","options":[{"text":"صرّح بـ store باستخدام let بدلًا من const.","why":"طريقة التصريح بالمتغيّر لا تغيّر طريقة استدعاء add."},{"text":"اكتب items.forEach(store.add());.","why":"هذا يستدعي add مرة واحدة فورًا دون أي عنصر، ويمرّر ما أرجعته إلى forEach."},{"text":"اكتب items.forEach((item) => store.add(item));.","why":"صحيح. الدالة السهمية تستدعي add على store، فتعود this هي المخزن."},{"text":"أسند const add = store.add; أولًا ومرّر add.","why":"هذه الـ method المنفصلة نفسها باسم آخر، فما زالت this ضائعة."}],"answer":2},{"q":"

الفحص if (amountInput.value == 0) مقصود منه التقاط مبلغ قيمته صفر. لماذا يُنفَّذ أيضًا حين يكون الحقل فارغًا؟

","options":[{"text":"حقول الأرقام الفارغة تحتوي على النص “0”.","why":"قيمة الحقل الفارغ هي النص الفارغ “”، لا “0”."},{"text":"== تحوّل "" إلى الرقم 0 قبل المقارنة، لذلك "" == 0 صحيحة.","why":"صحيح. حوّل صراحةً، وافحص المدخلات الفارغة أولًا، وقارن بـ ===."},{"text":"value تساوي null حين يكون الحقل فارغًا.","why":"value نص دائمًا؛ ومع الحقل الفارغ تكون “”."},{"text":"حقول الأرقام تُرجع NaN حين تكون فارغة، وNaN == 0 صحيحة.","why":"value تساوي “” لا NaN، وNaN لا تساوي أي شيء، ولا حتى نفسها."}],"answer":1},{"q":"

ماذا يحدث مع JSON.parse(JSON.stringify({ when: new Date() })).when.getFullYear()؟

","options":[{"text":"يرمي TypeError، لأن when تعود نصًا، والنص ليست له دالة getFullYear.","why":"صحيح. يخزّن JSON التواريخ نصوصًا بصيغة ISO. حوّلها مجددًا بـ new Date(text)، أو خزّن التواريخ نصوصًا من البداية."},{"text":"يُرجع السنة الحالية.","why":"هذا يتطلّب أن تعود when كائن Date، لكن JSON.parse لا تملك طريقة لمعرفة أن النص كان تاريخًا."},{"text":"يُرجع NaN.","why":"لا يوجد كائن Date يُرجع NaN؛ فالدالة غير موجودة على النص أصلًا."},{"text":"يُرجع undefined.","why":"استدعاء شيء ليس دالة يرمي خطأ؛ ولا يُرجع undefined."}],"answer":0}],"glossary":[{"id":"type","term":"نوع البيانات (Type)","definition":"طبيعة القيمة، وهي التي تحدّد ما يمكنك فعله بها. من الأنواع الأساسية في JavaScript: number وstring وboolean وundefined وnull؛ والعامل typeof يخبرك بنوع أي قيمة.","lesson":"l-js-1-2"},{"id":"variable","term":"المتغيّر (Variable)","definition":"اسم يشير إلى قيمة كي يستخدمها البرنامج لاحقًا. في JavaScript يكون النوع للقيمة لا للمتغيّر، لذلك يمكن لمتغيّر واحد أن يشير إلى أنواع مختلفة مع الوقت.","lesson":"l-js-1-2"},{"id":"let-const","term":"let وconst","definition":"الطريقتان الحديثتان للتصريح بمتغيّر. الاسم المُصرَّح به بـ const لا يمكن توجيهه إلى قيمة أخرى أبدًا؛ أما let فيمكن إعادة إسنادها. ابدأ بـ const ولا تستخدم let إلا عند الحاجة.","lesson":"l-js-1-2"},{"id":"floating-point","term":"العدد العشري الثنائي (Floating-point)","definition":"رقم مخزّن بالنظام الثنائي بدقة محدودة، كما هي كل أرقام JavaScript. كثير من الأعداد العشرية لا يمكن تخزينها بدقة، فتعطي 0.1 + 0.2 القيمة 0.30000000000000004؛ لذلك خزّن المال سنتاتٍ صحيحة.","lesson":"l-js-1-3"},{"id":"strict-equality","term":"المساواة الصارمة (===)","definition":"مقارنة لا تكون صحيحة إلا حين يكون للقيمتين النوع نفسه والقيمة نفسها. وعلى عكس المساواة المتساهلة (==)، لا تحوّل الأنواع أولًا أبدًا، لذلك “5” === 5 تساوي false.","lesson":"l-js-1-3"},{"id":"template-literal","term":"Template literal","definition":"نص يُكتب بين علامات backtick، يستطيع إدراج قيمة أي تعبير عبر ${ } ويمكن أن يمتد على عدّة أسطر، مثل Total: ${total}.","lesson":"l-js-1-4"},{"id":"truthy-falsy","term":"Truthy وFalsy","definition":"طريقة معاملة JavaScript لأي قيمة تُستخدم شرطًا. ثماني قيم فقط falsy: false و0 و-0 و0n والنص الفارغ وnull وundefined وNaN. وكل قيمة أخرى truthy.","lesson":"l-js-2-1"},{"id":"function","term":"الدالة (Function)","definition":"كتلة كود لها اسم ويمكن إعادة استخدامها. تعلن عن معاملات، وتستلم وسائط حين تُستدعى، وتنفّذ جسمها وتُعيد نتيجة عبر return؛ ودون return تكون النتيجة undefined.","lesson":"l-js-2-3"},{"id":"arrow-function","term":"الدالة السهمية (Arrow function)","definition":"صياغة أقصر للدوال، مثل (cents) => cents / 100. إن جاء بعد السهم تعبير واحد، أُرجع تلقائيًا؛ أما مع الأقواس المعقوفة فتحتاج إلى return صريحة.","lesson":"l-js-2-3"},{"id":"callback","term":"Callback","definition":"دالة تُمرَّر إلى دالة أخرى، وتلك الأخرى هي التي تقرّر متى تستدعيها. دوال المصفوفات مثل map، ومستمعو الأحداث، والمؤقّتات، كلها تأخذ callbacks.","lesson":"l-js-2-3"},{"id":"scope","term":"النطاق (Scope)","definition":"منطقة الكود التي يمكن فيها استخدام اسم ما. نطاق let وconst هو أقرب كتلة، والبحث عن الأسماء يتّجه من النطاقات الداخلية إلى الخارجية، لا إلى الداخل أبدًا.","lesson":"l-js-2-4"},{"id":"closure","term":"Closure","definition":"دالة مقترنة بمتغيّرات النطاق الذي أُنشئت فيه. تحتفظ الدالة بإمكانية الوصول إليها حتى بعد انتهاء الدالة الخارجية، وهذا يمنحها حالة خاصة تتذكّرها.","lesson":"l-js-2-4"},{"id":"array","term":"المصفوفة (Array)","definition":"قائمة مرتّبة من القيم، تُكتب بين أقواس مربّعة وتبدأ فهارسها من 0. للمصفوفات دوال مثل map وfilter وfind وreduce لتحويل عناصرها والبحث فيها.","lesson":"l-js-3-1"},{"id":"object","term":"الكائن (Object)","definition":"قيمة تجمع خصائص مسمّاة، مثل { label: “Coffee”, amount: 450 }. تُقرأ الخصائص بصيغة النقطة، أو بالأقواس المربّعة حين يكون الاسم في متغيّر.","lesson":"l-js-3-2"},{"id":"reference","term":"المرجع (Reference)","definition":"ما يحمله المتغيّر حين تكون قيمته كائنًا أو مصفوفة: مؤشّر إليها، لا نسخة منها. وإسناده أو تمريره يتشارك الكائن نفسه، فيظهر التغيير عبر أي اسم من خلال الأسماء كلها.","lesson":"l-js-3-2"},{"id":"spread","term":"صيغة النشر (Spread)","definition":"ثلاث نقاط تنسخ عناصر مصفوفة أو خصائص كائن إلى مصفوفة أو كائن جديد، كما في […list, item] أو { …expense, amount: 500 }. والنسخة سطحية.","lesson":"l-js-3-2"},{"id":"destructuring","term":"التفكيك (Destructuring)","definition":"صياغة تفكّ خصائص كائن أو عناصر مصفوفة إلى متغيّرات في خطوة واحدة، مثل const { label, amount } = expense. وتدعم القيم الافتراضية وتعمل في معاملات الدوال.","lesson":"l-js-3-2"},{"id":"reduce","term":"reduce","definition":"دالة مصفوفات تمرّ على العناصر حاملةً مُراكِمًا (accumulator)، وتُرجع المُراكِم النهائي. تُستخدم للمجاميع والتجميع؛ ومرّر لها دائمًا قيمة ابتدائية وسيطًا ثانيًا.","lesson":"l-js-3-3"},{"id":"optional-chaining","term":"السلسلة الاختيارية (?.)","definition":"عامل يقرأ الخاصية فقط إن لم تكن القيمة على يساره null أو undefined، فيُرجع undefined بدلًا من رمي TypeError، كما في expense.receipt?.url.","lesson":"l-js-3-4"},{"id":"nullish-coalescing","term":"nullish coalescing (??)","definition":"عامل لا يُرجع طرفه الأيمن إلا حين يكون الطرف الأيسر null أو undefined. وعلى عكس ||، يحتفظ بالقيم الحقيقية مثل 0 والنص الفارغ.","lesson":"l-js-3-4"},{"id":"dom","term":"DOM","definition":"نموذج كائنات المستند (Document Object Model): شجرة الكائنات الحيّة في المتصفّح التي تمثّل الصفحة. وتغيير هذه الكائنات بـ JavaScript، مثل textContent لعنصر ما، يحدّث ما يراه المستخدم فورًا.","lesson":"l-js-4-1"},{"id":"event-delegation","term":"تفويض الأحداث (Event delegation)","definition":"التعامل مع أحداث عناصر أبناء كثيرة بمستمع واحد على الحاوية التي تضمّها. تنتشر الأحداث للأعلى إلى الحاوية، وتجد event.target.closest() الابن المعني، بما في ذلك الأبناء المضافون لاحقًا.","lesson":"l-js-4-2"},{"id":"json","term":"JSON","definition":"اختصار JavaScript Object Notation، وهو صيغة نصية للبيانات. تحوّل JSON.stringify القيم إلى نص JSON وتعيده JSON.parse قيمًا؛ ويحمل النصوص والأرقام والقيم المنطقية وnull والمصفوفات والكائنات البسيطة.","lesson":"l-js-4-4"},{"id":"promise","term":"Promise","definition":"كائن يمثّل نتيجة ليست جاهزة بعد. يبدأ معلّقًا (pending) ويستقرّ مرة واحدة، إمّا مُنجَزًا بقيمة أو مرفوضًا بخطأ؛ وتُلحق then وcatch ما يحدث بعد ذلك.","lesson":"l-js-4-5"},{"id":"async-await","term":"async/await","definition":"صياغة للعمل مع الـ promises. داخل دالة async، توقف await تلك الدالة مؤقتًا حتى يستقرّ الـ promise وتعطي قيمته، فيُقرأ الكود غير المتزامن من الأعلى إلى الأسفل وتُلتقط الأخطاء بـ try/catch.","lesson":"l-js-4-5"},{"id":"event-loop","term":"حلقة الأحداث (Event loop)","definition":"الآلية التي تتيح لـ JavaScript ذات الخيط الواحد أن تنتظر دون أن تتجمّد. حين يفرغ مكدّس الاستدعاءات، تنفّذ كل callbacks الـ promises المنتظرة (المهام الدقيقة)، ثم المهمة التالية مثل مؤقّت أو نقرة.","lesson":"l-js-4-5"},{"id":"module","term":"الوحدة (Module)","definition":"ملف JavaScript له نطاقه الخاص، ولا يتشارك القيم مع الملفات الأخرى إلا عبر export وimport. وفي المتصفّح، تُحمَّل وحدة الدخول بوسم script له type=“module”.","lesson":"l-js-5-1"},{"id":"class","term":"الصنف (Class)","definition":"مخطّط للكائنات يحزم البيانات مع الـ methods التي تعمل عليها. تنفّذ new الـ constructor وتُرجع instance جديدة؛ والحقول الخاصة الموسومة بـ # مخفية عن الكود الخارجي.","lesson":"l-js-5-2"},{"id":"stack-trace","term":"أثر المكدّس (Stack trace)","definition":"قائمة استدعاءات الدوال، مع أسماء الملفات وأرقام الأسطر، التي أدّت إلى خطأ ما، الأحدث أولًا. وهي تُظهر أين وقع الخطأ وكيف وصل البرنامج إلى هناك.","lesson":"l-js-5-3"},{"id":"breakpoint","term":"نقطة التوقّف (Breakpoint)","definition":"علامة في DevTools، أو تعليمة debugger في الكود، توقف التنفيذ مؤقتًا عند سطر ما كي تفحص كل متغيّر ومكدّس الاستدعاءات، وتتقدّم في الكود سطرًا سطرًا.","lesson":"l-js-5-3"}]}