الدرس التالي❯ ❮الدرس السابق

جافاسكربتالمتغيرات

مفهوم المتغيرات
تعريف متغير بشكل تلقائي
تعريف متغير باستخدام الكلمة 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');

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم width = 100; height = 50; area = width * height; // area هنا قمنا بطباعة القيمة الموجودة في المتغير document.write('Area = ' + area + 'cm');

النتيجة

Area = 500cm

جرب الكود

دائماً إختر أسماء مناسبة و ذات معنى للمتغيرات لأنك ذلك يساعدك في تطوير و الكود و مراجعته بشكل عام.

تعريف متغير باستخدام الكلمة var

الكلمة var يمكن استخدامها لإنشاء متغير ليس بالضرورة أن يملك قيمة أولية، و يمكن تغيير قيمته في أي وقت لاحق.

الكلمة المفتاحية var تعمل في جميع إصدارات جافاسكربت لذا إن كان هدفك دعم المتصفحات القديمة جداً فيمكنك استخدامها لتعريف جميع المتغيرات.

في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.

المثال الأول

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

var name = 'Mhamad';

var age = 25;

var isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم var name = 'Mhamad'; var age = 25; var isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات أولاً و إعطاءها قيم لاحقاً.

المثال الثاني

// هنا قمنا بتعريف المتغيرات

var name;

var age;

var isWorking;

// هنا قمنا بوضع قيم فيها

name = 'Mhamad';

age = 25;

isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات var name; var age; var isWorking; // هنا قمنا بوضع قيم فيها name = 'Mhamad'; age = 25; isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.

المثال الثالث

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

var name = 'Mhamad', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم var name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.

المثال الرابع

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

var name = 'Mhamad',

age = 25,

isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

تعريف متغير باستخدام الكلمة let

الكلمة let يمكن استخدامها لإنشاء متغير ليس بالضرورة أن يملك قيمة أولية، و يمكن الوصول إليه و تغيير قيمته ضمن الحدود التي تم تعريفه فيها فقط.

الكلمة المفتاحية let تم إضافتها في الإصدار ES6 في جافاسكربت.

في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.

المثال الأول

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

let name = 'Mhamad';

let age = 25;

let isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم let name = 'Mhamad'; let age = 25; let isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات أولاً و إعطاءها قيم لاحقاً.

المثال الثاني

// هنا قمنا بتعريف المتغيرات

let name;

let age;

let isWorking;

// هنا قمنا بوضع قيم فيها

name = 'Mhamad';

age = 25;

isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات let name; let age; let isWorking; // هنا قمنا بوضع قيم فيها name = 'Mhamad'; age = 25; isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.

المثال الثالث

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

let name = 'Mhamad', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم let name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.

المثال الرابع

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

let name = 'Mhamad',

age = 25,

isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

تعريف متغير باستخدام الكلمة const

الكلمة const يمكن استخدامها لإنشاء متغير قيمته ثابتة لا تتغير و يمكن الوصول إليه ضمن الحدود التي تم تعريفه فيها فقط.
إذاً هنا يجب تحديد قيمة المتغير مباشرةً عند تعريفه لأنه لا يمكن تعيينها أو تغييرها لاحقاً.

الكلمة المفتاحية const تم إضافتها في الإصدار ES6 في جافاسكربت.

في المثال التالي قمنا بتعريف متغيرات مع إعطاءها قيم أولية.

المثال الأول

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

const name = 'Mhamad';

const age = 25;

const isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم const name = 'Mhamad'; const age = 25; const isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة و على سطر واحد مع إعطاءها قيم أولية.

المثال الثاني

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

const name = 'Mhamad', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم const name = 'Mhamad', age = 25, isWorking = true; // هنا قمنا بطباعة جميع القيم الموجودة فيها document.write(name + ' '); document.write(age + ' '); document.write(isWorking);

النتيجة

Mhamad
25
true

جرب الكود

في المثال التالي قمنا بتعريف المتغيرات دفعة واحدة على عدة أسطر مع إعطاءها قيم أولية.

المثال الثالث

// هنا قمنا بتعريف المتغيرات و إعطاءها قيم

const name = 'Mhamad',

age = 25,

isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها

document.write(name + ' ');

document.write(age + ' ');

document.write(isWorking);

النتيجة

Mhamad
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);

// هنا قمنا بتعريف متغير بدون إعطائه قيمه أولية var website; // هنا حاولنا طباعة قيمة المتغير مع علمنا بأنه لا يملك قيمة document.write(website);

النتيجة:

undefined

جرب الكود

تخزين عناصر HTML في متغيرات

أي عنصر موجود في صفحات الويب يمكنك الوصول إليه و من ثم تخزينه في متغير.
بعدها تستطيع التعامل مع المتغير و كأنك تتعامل بشكل مباشر مع العنصر.

مثال

// هنا قمنا بتعريف متغير مع وضع قيمة فيها

var website = 'Harmash.com';

// demo يساوي id هنا قمنا بوضع قيمة المتغير في العنصر الذي يملك

document.getElementById('demo').innerHTML = website;

// هنا قمنا بتعريف متغير مع وضع قيمة فيها var website = 'Harmash.com'; // demo يساوي id هنا قمنا بوضع قيمة المتغير في العنصر الذي يملك document.getElementById('demo').innerHTML = website;

جرب الكود

كيفية الوصول لعناصر الصفحة و تخزينها بشكل مؤقت في متغيرات أمر ستتعلمه بشكل مفصّل لاحقاً.
ما نريده منك الآن هو أن تعلم فقط أن المتغيرات تستخدم أيضاً لهذا الغرض.

الدرس التالي❯ ❮الدرس السابق

جافاسكربتالمتغيرات

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

تعريف متغير بشكل تلقائي

مثال

تعريف متغير باستخدام الكلمة var

المثال الأول

المثال الثاني

المثال الثالث

المثال الرابع

تعريف متغير باستخدام الكلمة let

المثال الأول

المثال الثاني

المثال الثالث

المثال الرابع

تعريف متغير باستخدام الكلمة const

المثال الأول

المثال الثاني

المثال الثالث

الفرق بين var و let و const

ما معنى undefined

مثال

تخزين عناصر HTML في متغيرات

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث