شرح المتغيرات في JavaScript للمبتدئين: 12 مثالًا عمليًا بالحل والشرح

شرح المتغيرات في JavaScript للمبتدئين: 12 مثالًا عمليًا بالحل والشرح

مقدمة

تُعتبر المتغيرات (Variables) من أهم أساسيات لغة JavaScript، لأنها بتساعدنا نخزن البيانات ونستخدمها في 

الأكواد بسهولة. ممكن نخزن اسم شخص، أو عمره، أو سعر منتج، أو نتيجة عملية حسابية.

في المقالة دي، هنتعلم استخدام المتغيرات من خلال 12 مثالًا عمليًا بسيطًا، مع شرح كل مثال وتوضيح الناتج، 

علشان أي مبتدئ يقدر يفهم الأساسيات ويطبقها بنفسه.

ما هي المتغيرات في JavaScript؟

المتغير هو اسم بنستخدمه لتخزين قيمة معينة. لإنشاء المتغيرات، بنستخدم كلمات زي let وconst.

let: لإنشاء متغير يمكن تغيير قيمته.

const: لإنشاء متغير لا يمكن إعادة إسناد قيمة جديدة له.

خلينا نبدأ بالأمثلة!

المثال الأول: تخزين اسم شخص

المطلوب: إنشاء متغير يحتوي على اسم.

let name = "Ahmed";
console.log(name);

الناتج:

Ahmed

الشرح: أنشأنا متغيرًا اسمه name وخزّنا فيه الاسم Ahmed، وبعدها استخدمنا console.log() لعرض القيمة.

المثال الثاني: تخزين العمر

let age = 15;
console.log(age);

الناتج: 15

الشرح: خزّنا العمر في المتغير age. لاحظ إن الأرقام بنكتبها من غير علامات تنصيص.

المثال الثالث: تخزين اسم الدولة

const country = "Egypt";
console.log(country);

الناتج: Egypt

الشرح: استخدمنا const لأننا مش محتاجين نعيد إسناد قيمة جديدة للمتغير country.

المثال الرابع: تغيير قيمة متغير

let score = 10;
score = 20;
console.log(score);

الناتج: 20

الشرح: بدأنا بقيمة 10، وبعدها غيّرناها إلى 20. استخدمنا let لأننا محتاجين نغيّر القيمة.

المثال الخامس: جمع رقمين

let a = 5;
let b = 3;
let result = a + b;
console.log(result);

الناتج: 8

الشرح: جمعنا قيمة a مع قيمة b، وخزّنا الناتج في المتغير result.

المثال السادس: طرح رقمين

let a = 10;
let b = 4;
console.log(a - b);

الناتج: 6

الشرح: استخدمنا علامة الطرح - لطرح 4 من 10.

المثال السابع: ضرب رقمين

let a = 6;
let b = 2;
console.log(a * b);

الناتج: 12

الشرح: علامة الضرب في JavaScript هي *، واستخدمناها لضرب الرقمين.

المثال الثامن: قسمة رقمين

let a = 20;
let b = 5;
console.log(a / b);

الناتج: 4

الشرح: استخدمنا علامة القسمة / لتقسيم 20 على 5.

المثال التاسع: دمج نصين

let first = "Hello";
let second = "World";
console.log(first + " " + second);

الناتج: Hello World

الشرح: استخدمنا علامة + لدمج النصين، وأضفنا مسافة بينهما حتى تظهر الرسالة بشكل صحيح.

المثال العاشر: تخزين قيمة منطقية

const isStudent = true;
console.log(isStudent);

الناتج: true

الشرح: القيم المنطقية بتكون true أو false، وبنستخدمها للتعبير عن كون شيء صحيحًا أو غير صحيح.

المثال الحادي عشر: حساب السعر بعد الخصم

المطلوب: سعر منتج 100 جنيه، والخصم 20 جنيهًا.

let price = 100;
let discount = 20;
let finalPrice = price - discount;
console.log(finalPrice);

الناتج: 80

الشرح: طرحنا قيمة الخصم من السعر الأصلي، فحصلنا على السعر النهائي وهو 80 جنيهًا.

المثال الثاني عشر: تصحيح خطأ في المتغيرات

الكود الخطأ:

const price = 100;
price = 200;
console.log(price);

الحل الصحيح:

let price = 100;
price = 200;
console.log(price);

الناتج: 200

الشرح: الخطأ كان استخدام const مع محاولة تغيير القيمة. استبدلناها بـ let لأننا محتاجين نغيّر السعر.

نصائح مهمة للمبتدئين

اختار أسماء واضحة للمتغيرات، مثل userName وproductPrice.

استخدم let لما تحتاج إلى تغيير القيمة.

استخدم const لما لا تحتاج إلى إعادة إسناد قيمة جديدة.

اكتب النصوص بين علامتي تنصيص.

جرّب الأكواد بنفسك، وغيّر الأرقام والأسماء ولاحظ النتائج.

الخاتمة

اتعلمنا في المقالة دي أساسيات المتغيرات في JavaScript من خلال 12 مثالًا عمليًا، بدايةً من تخزين الأسماء والأرقام،

 مرورًا بالعمليات الحسابية ودمج النصوص، وصولًا إلى تصحيح الأخطاء البسيطة.

تذكّر أن تعلم البرمجة محتاج تدريبًا مستمرًا، ومش كفاية إنك تقرأ الكود فقط؛ الأفضل تكتبه بنفسك وتجرب تعدّل عليه.

تابعوا KINGDOM للمزيد من الشروحات المبسطة في JavaScript والبرمجة والذكاء الاصطناعي، 

8وخطوة بخطوة هتقدروا تبنوا أساسًا قويًا في عالم التقنية.