في هذا الدرس 7تصفّح المواضيع
يمثل المتغير (Variable) صندوق تخزين مسمى داخل ذاكرة المتصفح، نودع فيه قيمة رقمية أو نصية أو منطقية لنتمكن من استدعائها وإجراء الحسابات عليها وتحديثها باسمها الواضح بدلاً من تكرار القيم المجردة يدوياً في كل سطر.
يشبه اسم المتغير بطاقة التعريف الملصقة على الصندوق؛ فعندما نختار اسماً معبراً مثل cartSubtotal يفهم المحرك والمطور معاً وظيفة هذه القيمة فور قراءتها.
تُسمى عملية إنشاء متغير جديد في JavaScript بالتصريح (Declaration). منذ نشأة اللغة وحتى الإصدار الخامس ES5 كانت الكلمة المحجوزة var هي الأداة الوحيدة للتصريح عن المتغيرات، متبوعةً باسم المتغير ومعامل التعيين = لإسناد قيمته الأولية.
انتبه دائماً إلى أن الرمز = هنا هو معامل إسناد وتخزين لا علامة تساوٍ جبرية؛ إذ يحسب المحرك الطرف الأيمن أولاً ثم يودع الناتج داخل المتغير المكتوب على اليسار.
var platformName = 'CloseTag Academy';
var activeTrack = 'JavaScript';
document.getElementById('var-out').textContent =
platformName + ' - ' + activeTrack;عند التصريح عن متغير بالكلمة var دون إسناد قيمة فورية له مثل var couponCode;، لا يترك المحرك الذاكرة عشوائية، بل يمنح المتغير تلقائياً القيمة الخاصة undefined التي تعني «لم تُسند له قيمة بعد».
وبمجرد إسناد قيمة فعلية له في سطر لاحق، تحل القيمة الجديدة محل undefined فوراً.
لتعديل قيمة متغير موجود مسبقاً نكتب اسمه مباشرةً قبل علامة = دون إعادة كتابة الكلمة var، ويمكننا استخدام قيمته الحالية داخل التعبير الأيمن مثل walletBalance = walletBalance + 50; لقراءة الرصيد السابق وإضافة 50 إليه ثم حفظ الناتج الجديد.
var walletBalance = 120;
walletBalance = walletBalance + 30;
document.getElementById('bal-box').textContent =
'Updated Balance: ' + walletBalance + ' USD';تخضع أسماء المتغيرات في JavaScript لضوابط نحوية صارمة يفحصها المحرك قبل التشغيل، مع اعتماد أسلوب الجمل camelCase عرفاً قياسياً للتسمية:
| القاعدة النحوية | أسماء صحيحة مقبولة | أسماء مرفوضة وسبب الخطأ |
|---|---|---|
| الرموز المسموحة | userAge، _token، $price، item2 | user-age، total% (تُمنع المسافات والعوامل الحسابية) |
| أول محرف في الاسم | حرف لاتيني أو شرطة سفلية _ أو رمز $ | 1stRank، 9lives (يُمنع البدء بأي رقم من 0 إلى 9) |
| الكلمات المحجوزة | isVarReady، nullCount | var، true، null (كلمات محجوزة للغة) |
تتيح JavaScript التصريح عن أكثر من متغير داخل تعليمة var واحدة بفصلها بفواصل عادية ,؛ ورغم إيجاز هذا الأسلوب في القيم المتقاربة كالإحداثيات، يفضل المهندسون غالباً إفراد سطر مستقل لكل متغير لتوضيح القراءة وتسهيل تتبع التعديلات.
var currency = 'SAR', unitPrice = 75, qty = 3;
var totalCost = unitPrice * qty;
document.getElementById('multi-out').textContent =
'Total: ' + totalCost + ' ' + currency;ستصادف الكلمة var كثيراً عند قراءة المشاريع السابقة أو فحص الملفات المحولة، غير أن لتصميمها التاريخي ثلاث نقاط ضعف دفعت معيار ES6 الحديث إلى تقديم بدائل أدق وأكثر أماناً سنتعلمها في الدرسين القادمين مباشرةً:
- قبول إعادة التصريح بصمت: تكرار تعريف نفس المتغير بـ
varفي النطاق ذاته يستبدل القيمة دون إطلاق أي تنبيه برمجي. - عدم احترام حدود الكتل الفرعية: المتغير المعرف داخل أقواس معقوفة
{ ... }يتسرب خارجها إلى النطاق المحيط. - تلويث الكائن العام للمتصفح: المتغيرات العامة المعرفة بـ
varفي السكربت الكلاسيكي تُضاف كخصائص مباشرة داخل كائنwindow.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس مفهوم المتغيرات كصناديق مسماة في الذاكرة، وطريقة التصريح بـ var وتحديث القيم، ومعنى القيمة التلقائية undefined، وقواعد تسمية المعرفات وحدود var التاريخية. الخطوة التالية: انتقل الآن إلى درس «الثوابت بالكلمة المحجوزة const في JavaScript» لتأمين القيم الثابتة من التغيير العرضي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Variable المتغير البرمجي
- حاوية مسماة في ذاكرة المتصفح تُحفظ بداخلها قيمة بيانات ليتم استدعاؤها أو تحديثها أثناء تشغيل البرنامج.
- للمراجعة
- 02 Declaration التصريح عن المتغير
- تعريف اسم متغير جديد في النطاق الحالي ليحجز محرك اللغة مكاناً له في الذاكرة.
- للمراجعة
- 03 undefined القيمة غير المهيأة undefined
- القيمة الأولية التلقائية التي يمنحها محرك JavaScript لأي متغير صُرّح عنه دون إسناد قيمة ابتدائية له.
- للمراجعة
- 04 Hoisting رفع التصريحات Hoisting
- آلية تسجيل تصريحات var في بداية النطاق بالذاكرة قبل البدء بتنفيذ التعليمات البرمجية سطراً بسطر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ES5 ES5
- ECMAScript 5th Edition
- الإصدار الخامس القياسي للغة الصادر عام 2009 والذي كانت فيه الكلمة var الأداة الوحيدة لتعريف المتغيرات.
- للمراجعة
- 02 RAM RAM
- Random Access Memory
- ذاكرة الوصول العشوائي السريعة التي يحتفظ فيها محرك المتصفح بقيم المتغيرات النشطة طوال فتح الصفحة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
تنقل بين التبويبات الثلاثة في محاكي متغيرات var لمقارنة القيمة undefined وتحديث النقاط ومشكلة إعادة التصريح الصامتة.
-
افتح مثال التصريح المتعدد في محرر التجربة وغيّر قيمة qty من 3 إلى 5 للتحقق من تحديث إجمالي التكلفة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.