جافاسكربتالمتغيرات
- مفهوم المتغيرات
- تعريف متغير بشكل تلقائي
- تعريف متغير باستخدام الكلمة
var
- تعريف متغير باستخدام الكلمة
let
- تعريف متغير باستخدام الكلمة
const
- الفرق بين
var
وlet
وconst
- ما معنى
undefined
- تخزين عناصر HTML في متغيرات
مفهوم المتغيرات
المتغيرات في جافاسكربت عبارة عن حاويات تُستعمل لتخزين القيم بشكل مؤقت مهما كان نوعها.
هناك 4 طرق يمكن من خلالها تعريف متغير و هي:
- التعريف التلقائي.
- باستخدام الكلمة
var
- باستخدام الكلمة
let
- باستخدام الكلمة
const
في هذا الدرس سنتعرف على جميع الطرق التي يمكن من خلالها تعريف متغيرات و كيفية التعامل معها.
في عالم الويب، المتغيرات يتم حذفها بشكل تلقائي عند الخروج من الصفحة.
تعريف متغير بشكل تلقائي
أي إسم تضعه و تسند له قيمة يصبح عبارة عن متغير عام ( Global ) مما يعني أنه يصبح بالإمكان الوصول له من أي مكان في الكود.
في المثال التالي width
، height
، و area
عبارة عن متغيرات تلقائية التعريف.
مثال
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم width = 100; height = 50; area = width * height; // area هنا قمنا بطباعة القيمة الموجودة في المتغير document.write('Area = ' + area + 'cm');
النتيجة
دائماً إختر أسماء مناسبة و ذات معنى للمتغيرات لأنك ذلك يساعدك في تطوير و الكود و مراجعته بشكل عام.
تعريف متغير باستخدام الكلمة var
الكلمة var
يمكن استخدامها لإنشاء متغير ليس بالضرورة أن يملك قيمة أولية، و يمكن تغيير قيمته في أي وقت لاحق.
الكلمة المفتاحية var
تعمل في جميع إصدارات جافاسكربت لذا إن كان هدفك دعم المتصفحات القديمة جداً فيمكنك استخدامها لتعريف جميع المتغيرات.
في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.
المثال الأول
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم var name = 'Mhamad'; var age = 25; var isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات أولاً و إعطاءها قيم لاحقاً.
المثال الثاني
// هنا قمنا بتعريف المتغيرات var name; var age; var isWorking; // هنا قمنا بوضع قيم فيها name = 'Mhamad'; age = 25; isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.
المثال الثالث
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم var name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.
المثال الرابع
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم var name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
تعريف متغير باستخدام الكلمة let
الكلمة let
يمكن استخدامها لإنشاء متغير ليس بالضرورة أن يملك قيمة أولية، و يمكن الوصول إليه و تغيير قيمته ضمن الحدود التي تم تعريفه فيها فقط.
الكلمة المفتاحية let
تم إضافتها في الإصدار ES6 في جافاسكربت.
في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.
المثال الأول
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم let name = 'Mhamad'; let age = 25; let isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات أولاً و إعطاءها قيم لاحقاً.
المثال الثاني
// هنا قمنا بتعريف المتغيرات let name; let age; let isWorking; // هنا قمنا بوضع قيم فيها name = 'Mhamad'; age = 25; isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.
المثال الثالث
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم let name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.
المثال الرابع
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم let name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
تعريف متغير باستخدام الكلمة const
الكلمة const
يمكن استخدامها لإنشاء متغير قيمته ثابتة لا تتغير و يمكن الوصول إليه ضمن الحدود التي تم تعريفه فيها فقط.
إذاً هنا يجب تحديد قيمة المتغير مباشرةً عند تعريفه لأنه لا يمكن تعيينها أو تغييرها لاحقاً.
الكلمة المفتاحية const
تم إضافتها في الإصدار ES6 في جافاسكربت.
في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.
المثال الأول
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم const name = 'Mhamad'; const age = 25; const isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.
المثال الثاني
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم const name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.
المثال الثالث
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم const name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + '<br>'); document.write(age + '<br>'); document.write(isWorking);
النتيجة
25
true
إذا حاولت إعادة تعريف متغير ثابت أو حاولت فقط تغيير قيمته فهذا الأمر سيؤدي لحدوث خطأ و بالتالي فإنه لن يتم متابعة تنفيذ أي أوامر موجودة في السكربت.
تذكر أن الخطأ لا يظهر لك في صفحة الويب بشكل مباشر بل يظهر في تبويب Console المخصص للمبرمجين و الذي يمكنك إظهاره أو إخفاؤه عادةً بالنقر على الزر F12.
الفرق بين var
و let
و const
var
موجودة في جميع إصدارات جافاسكربت.let
وconst
تم إضافتهم في الإصدار ES6 و جميع الإصدارات التي تليه.- المتغير الذي يتم تعريفه بواسطة
var
يمكن الوصول إليه و تغيير قيمته من أي مكان سواء ضمن نطاقه أم خارج نطاقه. - المتغير الذي يتم تعريفه بواسطة
let
يمكن الوصول إليه و تغيير قيمته ضمن نطاقه فقط. - المتغير الذي يتم تعريفه بواسطة
const
قيمته ثابتة لا تتغير و يمكن الوصول إليه ضمن نطاقه فقط.
يُفضّل دائماً محاولة استخدام let
أو const
بدلاً من استخدام var
لأن الهدف من تعريف المتغير سيكون أكثر وضوحاً.
ما معنى undefined
الكلمة undefined
في جافاسكربت تعني أن المتغير لا يملك قيمة.
إذاً عند تعريف متغير بدون إعطائه قيمة أوليّة فإنه في حال طباعة قيمته سيتم طباعة الكلمة undefined
للدلالة على أنه لا يملك قيمة كما ستلاحظ في المثال التالي.
مثال
// هنا قمنا بتعريف متغير بدون إعطائه قيمه أولية var website; // هنا حاولنا طباعة قيمة المتغير مع علمنا بأنه لا يملك قيمة document.write(website);
النتيجة:
تخزين عناصر HTML في متغيرات
أي عنصر موجود في صفحات الويب يمكنك الوصول إليه و من ثم تخزينه في متغير.
بعدها تستطيع التعامل مع المتغير و كأنك تتعامل بشكل مباشر مع العنصر.
مثال
// هنا قمنا بتعريف متغير مع وضع قيمة فيها var website = 'Harmash.com'; // demo يساوي id هنا قمنا بوضع قيمة المتغير في العنصر الذي يملك document.getElementById('demo').innerHTML = website;
كيفية الوصول لعناصر الصفحة و تخزينها بشكل مؤقت في متغيرات أمر ستتعلمه بشكل مفصّل لاحقاً.
ما نريده منك الآن هو أن تعلم فقط أن المتغيرات تستخدم أيضاً لهذا الغرض.