قم بمراجعة درس أنواع البيانات سريعاً ﻷن هذا الدرس سيعتمد عليه

ما هو المتغير؟

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

أمثلة على المتغيرات

مثال غير حقيقي (1)

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

مثال حقيقي لاستخدام المتغير (2)

لنفرض أنك اﻵن مبرمجاً لشركة يوتيوب، وتصنع صفحة عرض الفيديو، ولكل فيديو عنواناً... إذا أردت أن تكتب أمر ليجلب عنوان الفيديو ويضعه تحت الفيديو، لكن المشكلة أن لكل فيديو عنوان مختلف، فلا يوجد شيء ثابت تقول له ضعه هنا، فكيف سيتم ؟ سيتم عن طريق المتغير، سيكون هناك متغيراً أعطيناه اسم title مثلاً، ويمكننا كتابة اﻷمر البرمجي فيما يعني "اجلب قيمة (ما بداخل) المتغير title ثم ضعها هنا تحت الفيديو"... وبهذا نكون قد نفذنا ما نريد، فأيا كان ما بداخل المتغير title وأيا كان عنوان الفيديو، أنا قلت له ضع ما بداخل title هنا تحت الفيديو... بالتالي إن كان عنوان الفيديو "تعلم المتغيرات بسهولة" أو كان اسم الفيديو "تعلم البرمجة اﻵن" سيتم تنفيذ اﻷمر البرمجي ويوضع اسم الفيديو تحت الفيديو!

مم يتكون المتغير؟

من هنا يمكنك فتح محرر النصوص (vscode) ﻹجراء التجارب وتشغيل الكود ومعرفة الناتج... هل ليس عندك محرر النصوص vscode أو لم تجهز بيئة العمل حتى اﻵن؟ يمكنك الرجوع لدرس إعداد بيئة العمل

تتكون المتغيرات من:

• اسم (name): اسم المتغير الذي يمكننا أن نستدعيه به
• قيمة (value): وهي القيمة الموجودة داخل المتغير، ما يحمله المتغير
• نوع (type): وهو نوع المتغير وتم ذكرها بالتفصيل في درس أنواع البيانات (Data types)

اسم المتغير (name)

لكل متغير اسم، وهذا الاسم مهم ﻷبعد درجة ﻷن بدونه لن نستطيع الوصول للمتغير! فاسم المتغير يُعرّفه، فنستخدم اسم المتغير عندما نستدعي المتغير أو نغير قيمته (ما بداخله). وﻹسم المتغير قواعد، وكل لغة لها اسلوب في كتابة المتغيرات، أما القواعد اﻷساسية فهي :

• لا يمكن أن يبدأ اسم المتغير برقم
• اسم المتغير يكون فقط باللغة اﻹنجليزية
• لا يمكن أن يبدأ اسم المتغير إلا بالحروف اﻹنجليزية أو علامة _، وهناك بعض اللغات تسمح بعلامات أخرى، ستدرس قواعد كل لغة عند تعلمها منفصلة.

قيمة المتغير (value)

قيمة المتغير هي ما يحويه المتغير من بيانات، ففي المثال (2) المتغير اسمه title وقيمته هي عنوان الفيديو! وبالتالي إذا تغير عنوان الفيديو ﻷي سبب، ﻷن المستخدم مثلاً ضغط على فيديو آخر، يظل المتغير اسمه title فإن أردت معرفة ما عنوان الفيديو الحالي، أو أردت إظهاره تحت الفيديو، أقوم فقط باستدعاء المتغير title

نوع المتغير (type)

ولقيمة المتغير أنواع، يتفق معظمها في كل اللغات ويختلف بعضها من لغة للأخرى، وهناك لغات برمجة تجبرك على كتابة نوع المتغير الذي تريد إنشاؤه أثناء إنشاؤه، وهناك لغات أخرى كـ (python, javascript, php) لا تجبرك على كتابة نوع المتغير فهي تحدد النوع تلقائياً، ويمكنك تعلم هذه اﻷنواع في درس أنواع البيانات:

• النص (string)
• العدد (integer)

العدد الصحيح (integer)

هذا النوع مشهور جداً ومهم جداً وله عمليات خاصة ودعم خاص في كل لغات البرمجة... ويتم كتابة الأعداد (integers) بدون علامات تنصيص وبدون إضافات... مثال:

var num = 10;

في المثال السابق قمت بإنشاء متغير اسمه num وقيمته 10 وبالتالي يكون نوعه عدد صحيح (integer).

ميزة هذا النوع من المتغيرات أنه يمكن إجراء العمليات الحسابية عليه بكل سهولة! لاحظ عملية الجمع التالية:

console.log(num + 5);

ويمكنك أيضاً جمعه مع نفسه وضربه في نفسه!

console.log(num + num);
console.log(num * num);

تمرين طباعة ناتج ضرب متغيرين

• قم بإنشاء متغير اسمه n وقيمته تساوي 10
• ثم قم بإنشاء متغير آخر اسمه i وقيمته تساوي 5
• أخيراً قم بطباعة حاصل ضرب المتغيرين!

هل يظهر الناتج ؟ بالتأكيد الناتج 50

var n = 10;
var i = 5;
console.log(n*i);

إنشاء / تعريف المتغير في جافاسكريبت

يتم إنشاء المتغير باستخدام اﻷمر var وهو اختصار لكلمة (variable) وتعني متغير مثال:

var title = "دليل مبرمج";

فهذا اﻷمر البسيط يقوم بإنشاء متغير جديد اسمه title وقيمته "دليل مبرمج" مم يتكون هذا اﻷمر؟

• var وهي علامة إنشاء متغير جديد
• title وهو اسم المتغير الذي يمكننا أن نستدعيه به
• = وهي علامة تُستخدم لإرفاق القيمة إلى المتغير، ما بعدها يكون القيمة التي ستوضع داخل المتغير، فيصبح مثلاً المتغير title يساوي القيمة دليل مبرمج
• "دليل مبرمج": وهي القيمة الموجودة داخل المتغير

فلنسأل سؤالاً اﻵن... ما هو نوع هذا المتغير؟ نوعه ببساطة نصّstring

لاحظ أن لغة جافاسكريبت لم تجبرنا على إدخال نوع المتغير أثناء إنشاؤه

من اﻵن، إذا ما وضعت الكلمة title في أي مكان داخل الكود الخاص بك، سيقوم المفسر بترجمتها على أنها "دليل مبرمج" بالتالي إن قلت له اطبع title سيطبع قيمته وهي "دليل مبرمج"

تمرين طباعة المتغير بعد إنشاؤه

• قم بإنشاء متغير اسمه name وضع قيمته تساوي اسمك أنت
• ثم قم بطباعة هذا المتغير ليكون الناتج هو اسمك

الحل:

var name = "Ebrahim Maher";
console.log(name)

console.log("name")

console.log(name)

متغير بدون قيمة

يمكن إنشاء متغير بدون أن يحتوي على قيمة، وإرفاق قيمة له لاحقاً في أي مكان في التطبيق، مثال:

var name;

جرب طباعة المتغير الآن وهو بدون قيمة، وانظر ما الناتج!

ثم يمكنك إرفاق قيمة له في أي وقت أو أي مكان في الكود:

name = "Ebrahim";
console.log(name);

بهذه الطريقة أنت أرفقت قيمة للمتغير الذي أنشأناه بلا قيمة، والسطر الثاني سيطبع قيمة المتغير الحالية بالتالي سيكون الناتج Ebrahim Maher

تغيير قيمة المتغير

ويمكنك بنفس الطريقة السابقة تغيير قيمة متغير؛ مثال:

var name = "Ebrahim";
console.log(name);
name = "Mohammed";
console.log(name);

في هذا المثال قمنا بالطباعة مرتين، المرة الأولى طباعة المتغير قبل تغيير قيمته، والمرة الثانية طباعته بعد تغييرها.. لذلك الناتج سيكون:

Ebrahim
Mohammed

إنشاء أكثر من متغير في أمر واحد

يمكنك إنشاء أكثر من متغير باستخدام أمر واحد والفصل بينهم بعلامة , الموجودة أسفل لوحة المفاتيح يمين حرف M:

var n = 5, i = 3, y = 4;
console.log(n);
console.log(i);
console.log(y);

ستجد أنه تم طباعة الثلاثة متغيرات وحتى يكون الكود نظيفاً سهل القراءة... نكتبه هكذا:

var n = 5,
    i = 3,
    y = 4;

وهذه المسافة الأولية في السطر الثاني والثالث يمكن إضافتها عن طريق مفتاح Tab الموجود أعلى يسار لوحة المفاتيح، يسار حرف Q

العمليات على المتغيرات

يمكن إجراء على المتغيرات أي عمليات تتم على أي نوع من أنواع البيانات ﻷن المفسر سيقوم بإستبدال المتغير بقيمته أثناء تشغيل الكود، أمثلة:

var n = 10, 
    i = 5,
    y = 2;
console.log(n*i/y);

var hello = "Hello, ",
    name = "Ebrahim";
console.log(hello + name);

قيمة المتغير يمكن أن تكون منطقية (Boolean)

يمكن أن تكون قيمة المتغير أي نوع من أنواع البيانات، بما فيهم القيم المنطقية؛ مثال:

var done = true;
console.log(done);
done = false;
console.log(done);

في المثال السابق نقوم بإنشاء متغير اسمه done ونرفق له القيمة المنطقية true وفي السطر الثاني نطبع قيمته، ثم في السطر الثالث نغير قيمة المتغير done إلى false ثم آخر سطر نطبع قيمة المتغير done والتي بالتأكيد ستكون القيمة الجديدة false

قيمة المتغير يمكن أن تكون تعبيراً (expression)

عند إنشاء متغير جديد، يمكن إرفاق قيمته على شكل تعبير برمجي (expression)، أي لا تقتصر قيمة المتغير على فقط النصوص واﻷرقام أو أي نوع من أنواع البيانات، بل ممكن أن تكون مثلاً عملية جمع رقمين! أو وعملية دمج نصّين أو أي تعبير (expression) درسته سابقاً أو ستدرسه لاحقاً في الدروس القادمة... أمثلة:

var i = 4*10;
var n = i / 2;
var name = "Ebrahim";
var text = "Hello, " + name;

وعلى سبيل المثال يمكننا انشاء متغير باستخدام متغيرين آخرين، فلنفرض أن لدينا منتجين لكلٍ منهم سعر، ونريد إنشاء متغير آخر بداخله مجموع أسعار المنتجين:

var price1 = 60;
var price2 = 40;
var total = price1 + price2;
console.log(total);

ناتج تشغيل الكود السابق: 100

اﻷخطاء وحل المشكلات

خطأ متغير لم يتم إنشاؤه

ماذا لو كتبت اسم متغير لم يتم تعريفه أو إنشاؤه ؟ مثال:

var name = dalilmobarmg;
console.log(name);

ربما من النظرة اﻷولى تتسائل أين الخطأ أساسا في الكود؟ اين المتغير الذي لم يتم تعريفه... المتغير هو dalilmobarmg ففي المثال السابق قمنا بكتابتها بدون علامات تنصيص " " بالتالي سيعتبر المفسر dalilmobarmg متغير وليس نصاً، وعندما حاول المفسر إيجاد هذا المتغير لم يجده! بالتالي ظهر اﻹيرور:

ومعناه أن المتغير dalilmobarmg لم يتم تعريفه أو إنشاؤه.