المتغيّرات
سبق أن رأيت التعليق: ملاحظة للإنسان، لا مخزن للبرنامج. الآن دور المتغيّر — صندوق باسم يحفظ قيمة حتى لا تعيد كتابة الرقم أو النص مرارًا.
ما هو المتغيّر في JavaScript وكيف تعلنه؟
المتغيّر اسم يحتفظ بقيمة. تنشئ الاسم بـ let أو const (الإعلان)، ثم تضع قيمة بـ =. بعد ذلك تستدعي الاسم بدل تكرار القيمة نفسها. إن جاز أن تتغيّر لاحقًا فاستخدم let؛ وإن وجب أن تبقى بعد الإسناد الأول فاستخدم const. في الأمثلة القديمة قد ترى var؛ لعمل المبتدئ في هذه الدورة يكفي ويفضّل let و const.
أي كلمة مفتاحية تختار؟
📊 اختيار let أو const أو var للمبتدئ
| الكلمة | مثال | نصيحة للمبتدئ |
|---|---|---|
let |
let score = 10; |
أنشئ اسمًا؛ يمكنك لاحقًا وضع قيمة جديدة |
const |
const city = "Oslo"; |
أنشئ اسمًا؛ لا تغيّره بعد القيمة الأولى |
var |
var old = 1; |
أسلوب قديم؛ يعمل، لكن في هذه الدورة اتجه إلى let / const |
علامة = |
score = 15; |
تضع قيمة داخل اسم أعلنته مسبقًا بـ let |
| قراءة الاسم | console.log(score); |
تجلب القيمة المخزّنة — الاسم ينوب عن البيانات |
أنشئ بـ let واعرض القيمة
let ينشئ الاسم. أول = يضع القيمة داخله. ثم console.log يعرضها في وحدة التحكم.
let greeting = "Hello";
console.log(greeting);
أنشئ بـ const
const يحفظ قيمة أيضًا؛ اعتبر الإسناد الأول نهائيًا لهذا الاسم.
const course = "JavaScript";
console.log(course);
غيّر قيمة let
مع let يمكنك وضع = مرة أخرى. الاسم لا يتغيّر؛ يتغيّر فقط ما داخل الصندوق.
let score = 10;
score = 15;
console.log(score);
تظهر وحدة التحكم 15؛ القيمة اللاحقة حلّت محل 10.
الاسم أولًا، ثم القيمة
أحيانًا تكتب فقط let status; وتسند في السطر التالي. ما لم تضع شيئًا داخله، لا تستخدمه وكأنّه يحمل قيمة مفيدة مسبقًا.
let status;
status = "Ready";
console.log(status);
اسمان داخل تعبير واحد
يمكنك وضع الأسماء داخل تعبير. المحرّك يقرأ قيمة كلٍّ منهما ثم يحسب النتيجة.
let a = 2;
let b = 3;
console.log(a + b);
اعرض قيمة المتغيّر على الصفحة
احفظ النص في متغيّر، ثم مرّر ذلك الاسم إلى textContent. غيّر السلسلة داخل المتغيّر وحدّث الصفحة؛ يتغيّر العنوان.
<!DOCTYPE html>
<html>
<head>
<title>Variables — Page value</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
let message = "Variables hold values";
document.getElementById("msg").textContent = message;
</script>
</body>
</html>
العنوان يعرض ما يحمله message. المتغيّر هو الصندوق القابل لإعادة الاستخدام؛ سطر DOM يضع الناتج على الصفحة فقط — المهارة التي تدربت عليها سابقًا.
جرّب بنفسك
- أنشئ
letباسمك كنص، اطبعه، ثم أسند نصًا آخر واطبع مرة ثانية. - أنشئ
constلاسم مدينة واطبعه. لا تُعد الإسناد؛ إن جرّبت سترى خطأ — احذف ذلك السطر. - اكتب
let total;ثم في السطر التاليtotal = 5;واطبعtotal. - أنشئ رقمين بـ
letواطبع مجموعهما بـ+. - في مثال HTML غيّر فقط السلسلة داخل
message، حدّث الصفحة، وتحقق من العنوان.
أخطاء شائعة
- استخدام الاسم قبل الإعلان (أو قبل أي قيمة مفيدة)
- كتابة
const score = 1;ثمscore = 2;—constيرفض ذلك - وضع الرقم داخل تعليق فقط وتوقع أن «يتذكّره» البرنامج — التعليق ليس مخزنًا
- الاعتقاد أن كل مثال يجب أن يستخدم
var— هذه الدورة تفضّلletوconst - أسماء غير صالحة أو مربكة (مسافات، بدء برقم) — راجع قواعد المعرّفات في جلسة الصياغة
خلاصة
- المتغيّر صندوق باسم يحفظ قيمة تعيد استخدامها
- أعلن بـ
letأوconstوأسند بـ= - أعد الإسناد بـ
let؛ أبقِconstثابتًا بعد القيمة الأولى - لعمل المبتدئ فضّل
letوconstعلىvarالقديم - التالي أنواع البيانات: ما أنواع القيم التي يمكن للمتغيّر أن يحملها
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى