❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتالشروط

  • مفهوم الشروط
  • جمل الشرط if - else - else if
  • جملة الشرط switch

مفهوم الشروط

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


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

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

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

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

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

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

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

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


جملة الشرط if

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

المثال الأول

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

النتيجة

You are allowed.
جرب الكود

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

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

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

النتيجة


جرب الكود

جملة الشرط else

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

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

المثال الأول

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.');
}
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.'); }

النتيجة

You can save your progress.

جرب الكود

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

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

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.');
}
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.'); }

النتيجة

You need to log in to save your progress.

جرب الكود


جملة الشرط else if

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

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

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

مثال

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.');
}
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.'); }

النتيجة

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.

المثال الأول

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.');
}
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.'); }

النتيجة

The language is set to Arabic.
جرب الكود

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

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

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.');
}
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.'); }

النتيجة

The language is not available.
جرب الكود

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

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

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.');
}
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.'); }

النتيجة

x contains 1 or 2 or 3.
جرب الكود

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


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

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

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.');
}
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.'); }

النتيجة

x contains the number 3.
جرب الكود
الدرس التالي❯ ❮الدرس السابق