الشرطيات في جافا سكريبت conditional statements

الشروط في جافاسكريبت تستخدم لاتخاذ قرارات معينة بناءً على قيم محددة. يتم ذلك باستخدام بنية التحكم الشرطية، والتي تشمل عادة العبارات الشرطية مثل if و else و else if

if Statement

يُستخدم العبارة if لتنفيذ كتلة من الكود إذا تحققت الشرط المعطى.

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

				
					let x = 10;
if (x > 5) {
    console.log("x is greater than 5");
}

في المثال نعطي قيمة لل x وهي 10 ثم نضع الشرط اذا كانت x اكبر من 5 اطبع الجملة الاتية x is greater than 5

مثـــــــــــــــــــال اخر

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

				
					<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فحص الرقم</title>
    <script>
        function checkNumber() {
            // الحصول على الرقم الذي أدخله المستخدم
            let number = parseFloat(document.getElementById("number").value);

            // فحص ما إذا كان الرقم موجبًا
            let message;
            if (number > 0) {
                message = "الرقم موجب.";
            }

            // عرض الرسالة
            document.getElementById("result").innerText = message || "الرقم ليس موجبًا.";
        }
    </script>
</head>
<body>
    <h2>فحص الرقم</h2>
    <label for="number">أدخل الرقم:</label>
    <input type="number" id="number"><br><br>

    <button onclick="checkNumber()">فحص</button><br><br>

    <div id="result"></div>
</body>
</html>

لدينا نموذج HTML يحتوي على حقل إدخال حيث يمكن للمستخدم إدخال الرقم.
عندما ينقر المستخدم على الزر “فحص”، يتم استدعاء الدالة checkNumber().
داخل الدالة، نسترد الرقم الذي أدخله المستخدم، ثم نستخدم العبارة if للتحقق مما إذا كان الرقم موجبًا أم لا.
ليس لدينا جزء else. إذا كانت الشرطية (number > 0) غير صحيحة، فإن المتغير message سيبقى undefined.
أخيرًا، نقوم بعرض الرسالة. إذا كان message undefined، نعرض رسالة افتراضية باستخدام مشغل ||.

هذا المثال يوضح كيف يمكنك استخدام العبارة if بدون الجزء else لتنفيذ الإجراءات استنادًا فقط إلى شروط معينة، دون الحاجة لتحديد ما يجب القيام به إذا لم تتم الاستجابة لتلك الشروط.

if...else Statement

يُستخدم العبارة if...else لتنفيذ كتلة من الكود إذا تحقق الشرط، وكتلة أخرى من الكود إذا لم يتحقق الشرط.

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

				
					let x = 3;
if (x > 5) {
    console.log("x is greater than 5");
} else {
    console.log("x is less than or equal to 5");
}

في المثال نعطي قيمة لل x وهي 3 ثم نضع الشرط اذا كانت x اكبر من 5 اطبع الجملة الاتية x is greater than 5 اما اذا لم يتحقق الشرط اطبع الجملة x is less than or equal to 5

مثـــــــــــــــــــال اخر

سنقوم بإنشاء برنامج بسيط يتحقق ما إذا كانت الشخص مؤهل للحصول على خصم استنادًا إلى عمره

				
					<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فحص مؤهلية الخصم</title>
    <script>
        function checkDiscountEligibility() {
            // الحصول على العمر الذي أدخله المستخدم
            let age = parseInt(document.getElementById("age").value);

            // فحص مؤهلية الخصم
            let message;
            if (age >= 60) {
                message = "أنت مؤهل للحصول على خصم كبار السن.";
            } else {
                message = "أنت غير مؤهل للحصول على خصم كبار السن.";
            }

            // عرض الرسالة
            document.getElementById("result").innerText = message;
        }
    </script>
</head>
<body>
    <h2>فحص مؤهلية الخصم</h2>
    <label for="age">أدخل عمرك:</label>
    <input type="number" id="age"><br><br>

    <button onclick="checkDiscountEligibility()">فحص المؤهلية</button><br><br>

    <div id="result"></div>
</body>
</html>

لدينا نموذج HTML يحتوي على حقل إدخال حيث يمكن للمستخدم إدخال عمره.
عندما ينقر المستخدم على زر “فحص المؤهلية”، يتم استدعاء الدالة checkDiscountEligibility().
داخل الدالة، نسترد العمر الذي أدخله المستخدم، ثم نستخدم العبارة if...else للتحقق مما إذا كان العمر أكبر من أو يساوي 60 (العمر المعتبر لكبار السن).
إذا كان العمر أكبر من أو يساوي 60، نعين الرسالة التي تشير إلى أهلية للحصول على خصم لكبار السن. في حالة أخرى، نعين الرسالة التي تشير إلى عدم أهلية للحصول على خصم لكبار السن.

else if Statement

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

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

مثالًا على استخدام عبارة else if في جافاسكريبت. سنقوم بإنشاء برنامج يحدد تصنيف درجة حرارة الماء استنادًا إلى درجة الحرارة التي يدخلها المستخدم.

				
					<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصنيف درجة حرارة الماء</title>
    <script>
        function classifyWaterTemperature() {
            // الحصول على درجة الحرارة التي يدخلها المستخدم
            let temperature = parseFloat(document.getElementById("temperature").value);

            // تحديد تصنيف درجة حرارة الماء
            let classification;
            if (temperature <= 0) {
                classification = "الجليد";
            } else if (temperature > 0 && temperature < 100) {
                classification = "السائل";
            } else {
                classification = "البخار";
            }

            // عرض التصنيف
            document.getElementById("result").innerText = "تصنيف درجة حرارة الماء: " + classification;
        }
    </script>
</head>
<body>
    <h2>تصنيف درجة حرارة الماء</h2>
    <label for="temperature">أدخل درجة الحرارة:</label>
    <input type="number" id="temperature"><br><br>

    <button onclick="classifyWaterTemperature()">تحديد التصنيف</button><br><br>

    <div id="result"></div>
</body>
</html>

لدينا نموذج HTML يحتوي على حقل إدخال حيث يمكن للمستخدم إدخال درجة الحرارة.
عندما ينقر المستخدم على زر “تحديد التصنيف”، يتم استدعاء الدالة classifyWaterTemperature().
داخل الدالة، نسترد درجة الحرارة التي أدخلها المستخدم، ثم نستخدم العبارة else if لتحديد تصنيف درجة حرارة الماء بناءً على الشروط المعطاة.
إذا كانت درجة الحرارة أقل من أو تساوي 0، يتم تصنيف الماء على أنه جليد. إذا كانت درجة الحرارة أكبر من 0 وأقل من 100، يتم تصنيفه على أنه سائل. في حالة أخرى، يتم تصنيفه على أنه بخار.

Ternary Operator (Conditional Operator)

العملية الشرطية التي تستخدم لتحديد قيمة متغير بناءً على شرط معين.

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

مثالًا على استخدام المشغل الشرطي (المشغل الثلاثي) في جافاسكريبت. سنقوم بإنشاء برنامج بسيط يتحقق ما إذا كانت الشخص مؤهلاً للتصويت استنادًا إلى عمره.

				
					<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فحص مؤهلية التصويت</title>
    <script>
        function checkVotingEligibility() {
            // الحصول على العمر الذي أدخله المستخدم
            let age = parseInt(document.getElementById("age").value);

            // فحص مؤهلية التصويت باستخدام المشغل الشرطي
            let message = (age >= 18) ? "أنت مؤهل للتصويت." : "أنت غير مؤهل للتصويت.";

            // عرض الرسالة
            document.getElementById("result").innerText = message;
        }
    </script>
</head>
<body>
    <h2>فحص مؤهلية التصويت</h2>
    <label for="age">أدخل عمرك:</label>
    <input type="number" id="age"><br><br>

    <button onclick="checkVotingEligibility()">التحقق من المؤهلية</button><br><br>

    <div id="result"></div>
</body>
</html>

لدينا نموذج HTML يحتوي على حقل إدخال حيث يمكن للمستخدم إدخال عمره.
عندما ينقر المستخدم على زر “التحقق من المؤهلية”، يتم استدعاء الدالة checkVotingEligibility().
داخل الدالة، نسترد العمر الذي أدخله المستخدم.
ثم نستخدم المشغل الشرطي (age >= 18) ? "أنت مؤهل للتصويت." : "أنت غير مؤهل للتصويت." للتحقق مما إذا كان العمر أكبر من أو يساوي 18. إذا كان، يتم تعيين الرسالة “أنت مؤهل للتصويت.” للمتغير message؛ وإلا، يتم تعيين “أنت غير مؤهل للتصويت.”.

مصادر اخري لتعلم جافا سكريبت:

1. MDN Web Docs – JavaScript Guide : مصدر رائع للمبتدئين والمتقدمين، يغطي جميع جوانب جافا سكريبت بطريقة مفصلة وبأسلوب سهل الفهم. [الرابط] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

2. freeCodeCamp : يوفر دورات تعليمية مجانية عبر الإنترنت لتعلم جافا سكريبت والعديد من التقنيات الأخرى لتطوير الويب. [الرابط] https://www.freecodecamp.org/learn/

3. JavaScript.info : موقع يقدم دورات تعليمية شاملة لجافا سكريبت، تبدأ من المستوى الأساسي وتصل إلى المتقدم. [الرابط] https://javascript.info/

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

Sharing to