محتويات الدورة

JavaScript / أساسي: القيم وأسس المتصفح / الدرس 1

قيم JavaScript وبيئات التنفيذ

ابنِ تصوراً موثوقاً للقيم والارتباطات وواجهات البيئة قبل إضافة سلوك الصفحة. استخدم أمثلة فواتير صغيرة لتمييز قواعد اللغة من إمكانات المتصفح وNode.

وقت القراءة التقريبي: 4 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • تمييز القيم الأولية والكائنات.
  • شرح الارتباطات والتحويل الصريح.
  • فصل ECMAScript عن واجهات البيئة.

تعمل اللغة داخل بيئة مضيفة

JavaScript لغة ينفذها محرك داخل بيئة. تحدد ECMAScript القيم والعوامل والدوال والكائنات القياسية، ويضيف المتصفح المستندات وأحداث المستخدم والعرض وواجهات الويب، بينما يضيف Node واجهات العمليات والملفات الخاصة به. لا يعني اشتراك اسم مثل fetch تطابق جميع الإمكانات المحيطة. حدّد البيئة والإصدار المفترضين قبل نسخ مثال. تستخدم الدورة Node للتحقق من أمثلة اللغة المحمولة فقط، وتشرح أمثلة المتصفح سلوك الصفحة. ولا تتناول نشر الخوادم أو تعتبر document متغيراً عاماً توفره اللغة دائماً.

تصنيف القيمة قبل معالجتها

تشمل الأنواع الأولية undefined وnull والقيم المنطقية وNumber وBigInt والنص وSymbol. تشمل الكائنات المصفوفات والدوال، مع تمييز typeof للدوال. تعطي الخاصية الغائبة عادة undefined، ويستخدم التطبيق null غالباً لغياب مقصود. تعيد typeof null النص "object" تاريخياً، لكن ذلك لا يجعل null كائناً يمكن قراءة خصائصه. افحص القيم عند الحدود ولا تستنتج النوع من الاسم؛ فقد يحوي حقل quantity نصاً بسبب عقد النموذج أو مصدر JSON.

javascript تحويل صريح للمدخل
const invoice = { quantity: "3", unitCents: 250 };
const quantity = Number(invoice.quantity);
console.log(typeof invoice.quantity, typeof quantity);
console.log(quantity * invoice.unitCents);
الناتج المتوقع
string number
750

تبقى الخاصية الأصلية نصية. ويجعل الارتباط العددي المنفصل قصد الضرب واضحاً وينتج 750 سنتاً.

الارتباط أسماء لا صناديق ذات نوع ثابت

يربط الارتباط اسماً بقيمة. فضّل const إن لم يتغير الارتباط وlet إن كانت إعادة الإسناد جزءاً من الخوارزمية. تمنع const إعادة الربط ولا تمنع تعديل كائن تصل إليه. النوع للقيمة، ويمكن لارتباط let أن يشير لاحقاً إلى نوع آخر، لكن التبديل غير الضروري يصعّب الفهم. عبّر بالأسماء عن العقد؛ فـquantityText وquantity أوضح من data لكليهما. افصل التحليل عن الحساب التجاري حتى لا ينتج المدخل غير الصالح إجمالياً يبدو معقولاً.

نسخ القيم الأولية وهوية الكائن المشتركة

لا ينسخ إسناد كائن إلى ارتباط آخر خصائصه، بل قد يشير الاسمان إلى الكائن نفسه ويظهر التعديل عبر كليهما. أما القيمة الأولية فيمكن إعادة إسناد ارتباطها الآخر مستقلاً. يهم الفرق عندما تعدّل الواجهة مسودة فاتورة؛ فقد يغيّر الاسم البديل الأصل قبل ضغط الحفظ. اختر نسخاً مقصوداً بعمق مناسب وحدد مالك التغيير. يفصل النسخ بالنشر الخصائص العليا فقط ويبقي الكائنات المتداخلة مشتركة، وسنعود لذلك في المجموعات.

javascript الهوية والنسخة السطحية
const original = { seats: 2 };
const alias = original;
alias.seats = 1;
const copy = { ...original };
copy.seats = 0;
console.log(original.seats, alias === original, copy === original);
الناتج المتوقع
1 true false

يغيّر الاسم البديل الأصل. وللكائن الجديد مقاعد مستقلة على المستوى الأعلى، ولا توجد هنا حالة متداخلة.

التحقق من الحد وتحديد النتيجة

التحويل ليس تحققاً؛ فـNumber("") يساوي صفراً وNumber("three") ينتج NaN، ولذلك يلزم فحص المجال. قد تتطلب الكمية عدداً صحيحاً من واحد إلى عشرين. قرر معالجة المسافات والفراغ والغياب قبل الحساب. سجّل معلومات تشخيصية صغيرة كنوع القيمة ومثال مصطنع لا فواتير شخصية. توقع مخرج المثال قبل تشغيله ثم فسر الاختلاف بقاعدة لغة أو افتراض بيئة. تفيد هذه العادة أكثر من حفظ مفاجآت وحدة التحكم.

الأخطاء الشائعة وإصلاحها

قراءة document في مثال لغة محمول

لماذا يحدث؟
الخلط بين واجهة المتصفح ومتغير توفره اللغة.
كيف تصلحه؟
تشغيل DOM في المتصفح وعزل الحساب المحمول.
كيف تتجنب تكراره؟
تحديد افتراضات البيئة لكل مثال.

افتراض أن const يجمد الكائن

لماذا يحدث؟
الخلط بين إسناد الارتباط وتعديل الكائن.
كيف تصلحه؟
تحديد الملكية ونسخ الحالة بالعمق اللازم.
كيف تتجنب تكراره؟
مراجعة المراجع المشتركة قبل تعديل المسودات.

اعتبار التحويل إثبات صلاحية

لماذا يحدث؟
إغفال النص الفارغ وNaN.
كيف تصلحه؟
فحص الفراغ والمحدودية والصحة العددية وحدود المجال.
كيف تتجنب تكراره؟
اختبار الغائب والفارغ والمعتاد والحدي.

اختبر فهمك

1. يحوي حقل الكمية "4" والسعر 125 سنتاً. ماذا يدخل الحاسب؟

اعرض الحل المشروح

تحقق من النص غير الفارغ وحوله إلى Number واشترط كمية صحيحة، ثم مرر 4 و125 عددياً. المتوقع 500 سنت. يمنع إبعاد النص الجمع النصي ويجعل مسار المدخل غير الصالح صريحاً.

2. يشير متغيران إلى كائن سلة واحد ويغير أحدهما العدد. ماذا يرى الآخر؟

اعرض الحل المشروح

يرى العدد المعدل لأن الهوية مشتركة. ولا تعيد إحالة متغير لسلة جديدة إحالة الآخر. تلزم نسخة مقصودة لعزل المسودة وسياسة نسخ مناسبة للحقول المتداخلة.

أهم ما تعلمته

  • افصل نوع القيمة والارتباط وهوية الكائن.
  • واجهات البيئة والمدخل المتحقق منه اعتمادان صريحان.

المراجع الرسمية