الشروط

مفهوم الشروط

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

أساليب وضع الشروط

في جافاسكربت يوجد أسلوبين يمكنك اتباعهما لوضع الشروط:

وضع شرط أو سلسلة من الشروط بواسطة الجمل if، else if، else.
إختبار قيمة متغير واحد بواسطة الجملة switch.

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

جمل الشرط if - else - else if

ترتيب جمل الشرط في حال كنت ستستخدمها كلها هو التالي.

if (هنا تضع شرط)
{
هنا تضع الأوامر التي تريد
تنفيذها إذا تحقق الشرط
}
else if (هنا تضع شرط آخر)
{
هنا تضع الأوامر التي تريد
تنفيذها إذا تحقق الشرط
}
else
{
هنا تضع الأوامر التي تريد تنفيذها
في حال لم يتحقق أي شرط سابق
}

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

جملة الشرط if

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

المثال الأول

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let age = 20;

// أكبر أو تساوي 18 فإنه سيتم تنفيذ الأمر الموجود فيها age هذا الشرط يعني أنه إذا كانت قيمة
if(age >= 18)
{
    document.write("You are allowed.");
}
        </script>
    </body>
</html>

النتيجة

You are allowed.

هنا قمنا بإعادة المثال السابق مع تغيير قيمة المتغير age فقط.
هنا لن يتم تنفيذ أمر الطباعة لأن الشرط لم يتحقق.

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

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let age = 15;

// أكبر أو تساوي 18 فإنه سيتم تنفيذ الأمر الموجود فيها age هذا الشرط يعني أنه إذا كانت قيمة
if(age >= 18)
{
    document.write('You are allowed.');
}
        </script>
    </body>
</html>

النتيجة

جملة الشرط else

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

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

المثال الأول

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let isLogged = true;

// فإنه سيتم تنفيذ الأمر الموجود فيها true تساوي isLogged هذا الشرط يعني أنه إذا كانت قيمة
if(isLogged)
{
    document.write('You can save your progress.');
}
// إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا
else
{
    document.write('You need to log in to save your progress.');
}
        </script>
    </body>
</html>

النتيجة

You can save your progress.

هنا قمنا بإعادة المثال السابق مع تغيير قيمة المتغير isLogged فقط.
هنا بما أن الشرط الموضوع في جملة الشرط if لن يتحقق فإنه سيتم تنفيذ أمر الطباعة الموضوع في جملة الشرط else.

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

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let isLogged = false;

// فإنه سيتم تنفيذ الأمر الموجود فيها true تساوي isLogged هذا الشرط يعني أنه إذا كانت قيمة
if(isLogged)
{
    document.write('You can save your progress.');
}
// إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا
else
{
    document.write('You need to log in to save your progress.');
}
        </script>
    </body>
</html>

النتيجة

You need to log in to save your progress.

جملة الشرط else if

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

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

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

مثال

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let role = 'author';

// فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'admin' تساوي role إذا كانت قيمة
if(role == 'admin')
{
    document.write('You logged in as an admin.');
}
// فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'editor' تساوي role إذا كانت قيمة
else if(role == 'editor')
{
    document.write('You logged in as an editor.');
}
// فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'author' تساوي role إذا كانت قيمة
else if(role == 'author')
{
    document.write('You logged in as an author.');
}
// فإنه سيتم تنفيذ أمر الطباعة الموجود هنا 'contributer' تساوي role إذا كانت قيمة
else if(role == 'contributer')
{
    document.write('You logged in as a contributer.');
}
// إذا لم يتم تنفيذ الجملة الشرطية السابقة فإنه سيتم تنفيذ أمر الطباعة الموجود هنا
else
{
    document.write('You logged in as a subscriber.');
}
        </script>
    </body>
</html>

النتيجة

You logged in as an author.

جملة الشرط switch

switch تستخدم لاختبار قيمة متغير ما مع لائحة من الإحتمالات نقوم نحن بوضعها، و إذا تساوت هذه القيمة مع أي إحتمال وضعناه ستتنفذ الأوامر التي وضعناها في هذا الإحتمال فقط.

إستخدام الجملة switch يكون على الشكل التالي:

switch(expression) {
   case value:
      // Statements
      break;

   case value:
      // Statements
      break;

   default:
      // Statements
}

switch تعني إختبر قيمة المتغير الموضوع بين قوسين.
expression يقصد بها المتغير الذي نريد إختبار قيمته.
case تعني حالة و value تعني قيمة و Statements تعني أوامر. و يقصد من هذا كله أنه في حال كانت قيمة المتغير الذي يتم إختباره تساوي هذه القيمة فإنه تنفيذ الأوامر الموضوعة بعد النقطتين :
default هي حالة إحتياطية يتم تنفيذ أوامرها إن لم يتم تنفيذ أي case موضوعة في الجملة switch و لهذا توضع في الآخر.
break يجب وضعها في نهاية كل case لكي يتم الخروج من الجملة switch مباشرةً بدلاً من الإنتقال إلى للـ case التالية الموجودة بعدها.

يمكنك وضع العدد الذي تريده من الـ case بداخل الجملة switch.

في المثال التالي سيتم تنفيذ أمر الطباعة الموجود في الحالة التي تساوي 'ar' فهي نفس قيمة المتغير language.

المثال الأول

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let language = 'ar';

// language إختبر قيمة المتغير
switch(language)
{
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'en' في حال كانت تساوي 
    case 'en':
        document.write('The language is set to English.');
        break;
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'ar' في حال كانت تساوي
    case 'ar':
        document.write('The language is set to Arabic.');
        break;
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'fr' في حال كانت تساوي
    case 'fr':
        document.write('The language is set to French.');
        break;
    // موضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا case في حال لم يتم تنفيذ أي
    default:
        document.write('The language is not available.');
}
        </script>
    </body>
</html>

النتيجة

The language is set to Arabic.

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

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

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let language = 'de';

// language إختبر قيمة المتغير
switch(language)
{
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'en' في حال كانت تساوي 
    case 'en':
        document.write('The language is set to English.');
        break;
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'ar' في حال كانت تساوي
    case 'ar':
        document.write('The language is set to Arabic.');
        break;
    // سيتم تنفيذ أمر الطباعة الموضوع هنا 'fr' في حال كانت تساوي
    case 'fr':
        document.write('The language is set to French.');
        break;
    // موضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا case في حال لم يتم تنفيذ أي
    default:
        document.write('The language is not available.');
}
        </script>
    </body>
</html>

النتيجة

The language is not available.

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

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

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let x = 3;

// x إختبر قيمة المتغير
switch(x)
{
    // في حال كانت تساوي 1 أو 2 أو 3 سيتم تنفيذ أمر الطباعة الموضوع هنا
    case 1:
    case 2:
    case 3:
        document.write('x contains 1 or 2 or 3.');
        break;
 
    // في حال كانت لا تساوي أي قيمة من الإحتمالات الموضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا
    default:
        document.write('x contains a different value.');
}
        </script>
    </body>
</html>

النتيجة

x contains 1 or 2 or 3.

switch تقارن قيمة و نوع المتغير تماماً العامل === فهي ليست كالعامل == الذي يهتم بمقارنة القيم فقط بغض النظر على أنواعها.

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

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

<!DOCTYPE html>
<html>
    <body>
        <script>
let x = 3;

// x إختبر قيمة المتغير
switch(x)
{
    // في حال كانت تساوي النص '3' سيتم تنفيذ أمر الطباعة الموضوع هنا
    case '3':
        document.write('x contains the string 3.');
        break;
        
    // في حال كانت تساوي العدد '3' سيتم تنفيذ أمر الطباعة الموضوع هنا
    case 3:
        document.write('x contains the number 3.');
        break;
 
    // في حال كانت لا تساوي أي قيمة من الإحتمالات الموضوعة قبلها فإنه سيتم تنفيذ أمر الطباعة الموضوع هنا
    default:
        document.write('x contains a different value.');
}
        </script>
    </body>
</html>

النتيجة

x contains the number 3.

آخر الأخبار

HTML / رموز الإيموجي

JS / الكلاس

JS / البرمجة الكائنية

HTML / الرموز المطبعية

HTML / الروابط

إنشاء موقعك الإلكتروني أنيق ومخصص للجيم والرياضه الحديد HTML وCSS وJavaScript

JS / الشروط

الشروط

مفهوم الشروط

أساليب وضع الشروط

جمل الشرط if - else - else if

جملة الشرط if

المثال الأول

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

جملة الشرط else

المثال الأول

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

جملة الشرط else if

مثال

جملة الشرط switch

المثال الأول

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

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

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

إرسال تعليق

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