JS / المتغيرات

الناشر :كودا فوكس -

المتغيرات

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

المتغيرات في جافاسكربت عبارة عن حاويات تُستعمل لتخزين القيم بشكل مؤقت مهما كان نوعها.

JS - المتغيرات


هناك 4 طرق يمكن من خلالها تعريف متغير و هي:

  • التعريف التلقائي.
  • باستخدام الكلمة var
  • باستخدام الكلمة let
  • باستخدام الكلمة const

في هذا الدرس سنتعرف على جميع الطرق التي يمكن من خلالها تعريف متغيرات و كيفية التعامل معها.

في عالم الويب، المتغيرات يتم حذفها بشكل تلقائي عند الخروج من الصفحة.

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

أي إسم تضعه و تسند له قيمة يصبح عبارة عن متغير عام ( Global ) مما يعني أنه يصبح بالإمكان الوصول له من أي مكان في الكود.

في المثال التالي width، height، و area عبارة عن متغيرات تلقائية التعريف.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
width = 100;
height = 50;
area = width * height;

// area هنا قمنا بطباعة القيمة الموجودة في المتغير
document.write('Area = ' + area + 'cm');
        </script>
    </body>
</html>

النتيجة

Area = 500cm

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

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
var name = 'Ahmed';
var age = 25;
var isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات
var name;
var age;
var isWorking;

// هنا قمنا بوضع قيم فيها
name = 'Ahmed';
age = 25;
isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
var name = 'Ahmed', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
var name = 'Ahmed',
    age = 25,
    isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
let name = 'Ahmed';
let age = 25;
let isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات
let name;
let age;
let isWorking;

// هنا قمنا بوضع قيم فيها
name = 'Ahmed';
age = 25;
isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
let name = 'Ahmed', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
let name = 'Ahmed',
    age = 25,
    isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

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


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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
let name = 'Ahmed';
let age = 25;
let isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات
let name;
let age;
let isWorking;

// هنا قمنا بوضع قيم فيها
name = 'Ahmed';
age = 25;
isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف المتغيرات و إعطاءها قيم
let name = 'Ahmed', age = 25, isWorking = true;

// هنا قمنا بطباعة جميع القيم الموجودة فيها
document.write(name + '<br>');
document.write(age + '<br>');
document.write(isWorking);
        </script>
    </body>
</html>

النتيجة

Ahmed
25
true

إذا حاولت إعادة تعريف متغير ثابت أو حاولت فقط تغيير قيمته فهذا الأمر سيؤدي لحدوث خطأ و بالتالي فإنه لن يتم متابعة تنفيذ أي أوامر موجودة في السكربت.


تذكر أن الخطأ لا يظهر لك في صفحة الويب بشكل مباشر بل يظهر في تبويب Console المخصص للمبرمجين و الذي يمكنك إظهاره أو إخفاؤه عادةً بالنقر على الزر F12.

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

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

يُفضّل دائماً محاولة استخدام let أو const بدلاً من استخدام var لأن الهدف من تعريف المتغير سيكون أكثر وضوحاً.

ما معنى undefined

الكلمة undefined في جافاسكربت تعني أن المتغير لا يملك قيمة.

إذاً عند تعريف متغير بدون إعطائه قيمة أوليّة فإنه في حال طباعة قيمته سيتم طباعة الكلمة undefined للدلالة على أنه لا يملك قيمة كما ستلاحظ في المثال التالي.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <body>
        <script>
// هنا قمنا بتعريف متغير بدون إعطائه قيمه أولية
var website;

// هنا حاولنا طباعة قيمة المتغير مع علمنا بأنه لا يملك قيمة
document.write(website);
        </script>
    </body>
</html>

النتيجة:

undefined

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="demo"></p>
        <script>
// هنا قمنا بتعريف متغير مع وضع قيمة فيها
var website = 'codafox.blogspot.com';

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

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

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال