شرح جملة if الشرطية في JavaScript للمبتدئين خطوة بخطوة

🧠 فهم if الشرطية في جافا سكريبت: كيف تجعل برنامجك "يفكر"؟ 🤔

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

في هذا الدرس، ستتعلم كيف تستخدم if لجعل برامج جافا سكريبت تتخذ قرارات بسيطة بناءً على شروط معينة. هيا نبدأ! 🚀

📝 ما هي الجملة الشرطية if؟

ببساطة شديدة، جملة if هي أداة في البرمجة تسمح لك بتنفيذ جزء معين من الكود فقط في حالة تحقق شرط معين. إنها تشبه تماماً قولك في الحياة الواقعية: "إذا كان الجو ممطراً، فسأخذ المظلة."

هنا، الشرط هو: هل الجو ممطراً؟ والفعل (الكود الذي سيُنفَّذ) هو: أخذ المظلة.

في جافا سكريبت، تكتب هذه الفكرة هكذا:

if (condition) {
    // الكود الذي سيتم تنفيذه إذا كان الشرط صحيحاً (true)
}

🔧 تركيب جملة if الأساسي (Syntax)

لنفكك التركيب الأساسي لجملة if:

1. نكتب الكلمة المفتاحية if.
2. نضع الشرط بين قوسين عاديين ( ). يجب أن يكون ناتج هذا الشرط إما true (صحيح) أو false (خطأ).
3. نضع الكود الذي نريد تنفيذه بين قوسين معقوفين { }. هذا الكتلة من الكود.

// مثال بسيط
let age = 20; // عرفنا متغير age وقيمته 20

if (age >= 18) { // الشرط: هل age أكبر من أو يساوي 18؟
    console.log("أنت بالغ."); // هذا الكود سينفذ فقط إذا كان الشرط صحيحاً
}
// مخرجات الكود: "أنت بالغ."

في المثال أعلاه:

• تم تقييم الشرط (age >= 18). بما أن age تساوي 20، فالشرط يصبح true.
• لأن الشرط true، تم تنفيذ الكود داخل { } وظهرت الرسالة في الكونسول.

⚖️ ما هي أنواع الشروط التي يمكنني استخدامها؟

يمكنك بناء شرطك باستخدام مُعاملات المقارنة (Comparison Operators). هذه المُعاملات تقارن بين قيمتين وتعطينا نتيجة true أو false.

مثال تطبيقي:

let score = 85;
let passingScore = 50;

if (score > passingScore) {
    console.log("مبروك! لقد نجحت في الاختبار. 🎉");
}
// بما أن 85 أكبر من 50، الشرط صحيح وستظهر الرسالة.

❓ ماذا لو لم يتحقق الشرط؟ التعرف على else

ماذا عن حالة "الجو غير ممطر" في مثالنا الأول؟ هنا يأتي دور else، والتي تعني "وإلا".

if (الشرط) {
    // نفذ هذا الكود إذا كان الشرط صحيحاً
} else {
    // نفذ هذا الكود إذا كان الشرط خاطئاً (false)
}

مثال واقعي:

let isRaining = false; // افترض أن الجو ليس ممطراً

if (isRaining === true) {
    console.log("خذ المظلة معك. ☔");
} else {
    console.log("الجو جميل، لا حاجة للمظلة. ☀️");
}
// مخرجات الكود: "الجو جميل، لا حاجة للمظلة. ☀️"

🔄 ماذا لو كان لدينا أكثر من خيارين؟ اكتشف else if

لنفترض أن لديك ثلاثة احتمالات: نجاح بامتياز، نجاح، أو رسوب. هنا نستخدم else if لفحص شرط ثانٍ إذا فشل الشرط الأول.

let grade = 92;

if (grade >= 90) {
    console.log("درجتك: A - ممتاز! 🌟");
} else if (grade >= 70) {
    console.log("درجتك: C - جيد.");
} else {
    console.log("درجتك: F - راسب، تحتاج للمزيد من الجهد.");
}
// مخرجات الكود: "درجتك: A - ممتاز! 🌟"

كيف يعمل؟

1. يفحص الشرط الأول: (grade >= 90) → true، فينفذ الكود الخاص به ويتوقف عن فحص بقية الشروط (else if و else).
2. إذا كان false، ينتقل لفحص شرط else if.
3. إذا فشل جميع شروط if و else if، ينفذ كود else.

🧪 أمثلة عملية وتطبيقات بسيطة

لنرى كيف يمكننا تطبيق if في سياقات بسيطة تشبه البرامج الحقيقية.

المثال 1: التحقق من صلاحية الدخول لموقع

let userAge = 16;
let requiredAge = 18;

if (userAge >= requiredAge) {
    console.log("مرحباً! يمكنك الدخول إلى الموقع.");
} else {
    console.log("عذراً، يجب أن تكون عمرك 18 سنة على الأقل للدخول.");
}

المثال 2: خصم على سعر المنتج

let cartTotal = 120;
let discountThreshold = 100;

if (cartTotal > discountThreshold) {
    console.log("مؤهل للحصول على خصم 10%!");
    // هنا يمكننا إضافة كود لحساب السعر بعد الخصم
} else {
    console.log("أضف المزيد من المنتجات إلى سلة التسوق لتحصل على خصم.");
}

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

1. لا تنسَ الأقواس { }: خاصة عند بدايتك، دائماً ضع الكود المرتبط بـ if أو else بين { } حتى لو كان سطراً واحداً. هذا يجعل الكود أوضح وأقل عرضة للأخطاء.
2. المسافات والتنسيق: لاحظ كيف نضع مسافة بعد if وقبل القوس (. هذا التنسيق (يسمى Style) يجعل الكود مقروءاً.
3. الشرط يجب أن يعطي true أو false: تأكد أن التعبير داخل ( ) يمكن تقييمه إلى قيمة منطقية (Boolean).