انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 30
دورة جافا سكريبت

قاعدة Switch الشرطية في لغة جافا سكريبتJavaScript Switch

ستتعلم في هذا الدرس عبارة switch الشرطية وطريقة كتابتها Switch Syntax وما الفرق بينها وبين ال If-else Condation ومتي تستخدمهم switch وستتعلم أيضاً الكُتل البرمجية داخل switch وعلاقتها ب expression في لغة جافا سكريبت.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,695
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

JavaScript Switch قاعدة Switch الشرطية في لغة جافا سكريبت

switch هي قاعدة شرطية برمجية تستخدم في وضع شروط معينة وبناء علي هذه الشروط يتم تنفيذ مجموعة أوامر برمجية بلغة جافا سكريبت.



  • تتكون switch من مجموعة كٌتل Case كل كُتلة تحتوي بداخلها علي أمر برمجي محجوز لحين تحقق شرط معين.
  • كل كًتلة برمجية لها قيمة هذة القيمة أما تكون نص ثابت أو رقم ثابت أو متغير.
  • قاعدة switch لها expression يتم تمريرة لها في حال تطابقه مع قيمة الكُتلة case سوف يتم تنفيذ الأوامر البرمجية المحجوزة بداخل Case.
  • يمكنك تنفيذ الأوامر البرمجية الموجودة في كُتلة واحدة case أو مجموعة كُتل cases في حال تطابقهم مع expression الموجود بداخل switch.
قاعدة Switch الشرطية في لغة جافا سكريبت

JavaScript Switch Syntax طريقة كتابة قاعدة Switch في لغة جافا سكريبت

تكتب switch بهذا الشكل:

  • تبدأ بكلمة switch بحروف صغيرة.
  • يتبع كلمة switch الأقواس parentheses ( ).
  • يتم تمرير بداخل الأقواس parentheses ( ) الأقواس expression وهو قيمة التي سوف يتم مقارنتها مع الكُتله case.
  • يتبع الأقواس parentheses ( ) أقواس مُجعدة curly braces.
  • يتم أضافة أي عدد من الشروط بداخل الأقواس
  • يبدأ الشرط بكلمة case بحروف صغيرة.
  • يتبع case قيمة هذة القيمة أما تكون متغير أو نص أو اي نوع من أنواع البيانات.
  • ينتهي الشرط بعبارة break بحروف صغيرة.


إذا تطابق expression مع القيمة التي تتبع case فأن محرك جافا سكريبت سوف يقوم بتنفيذ الأمر البرمجي الموجود بداخل هذه الكُتله البرمجية بدأ من case وينتهي عند عبارة break;

وفي حالة عدم تطابق expression مع القيم الموجودة بعد كل case سوف يقوم بتنفيذ الأمر البرمجي الزي يتبع عباة default.

JavaScript Switch Syntax

طريقة كتابة Switch في لغة جافا سكريبت

HTML 
switch(expression) {
  case x:
    /* code block - code executed when the result of expression matches x */
    break;
  case y:
    /* code block - code executed when the result of expression matches y */
    break;
  default:
    /* code block - code executed when the result of expression not equal or matches y */
}

body background

قم بتغيير قيمة expression بداخل switch إلي أي لون متطابق مع الحلات وفي هذة الحالة سيتم تنفيذ الأوامر الموجوده بداخل case وإذا قمت بكتابة لون غير موجود في الحلات سوف يتم تنفيذ أوامر default.

HTML 
switch ("blue") {
  case "red":
    document.write("Color Selected is : red");
    break;
  case "green":
     document.write("Color Selected is : green");
    break;
  case "blue":
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
جرّب بنفسك

expression as variable

يمكن تمرير expression كمتغير variable.

HTML 
let expression = "red";
switch (expression) {
  case "red":
    document.write("Color Selected is : red");
    break;
  case "green":
     document.write("Color Selected is : green");
    break;
  case "blue":
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
جرّب بنفسك

cases as variable

يمكن تمرير أسماء case كمتغيرات variables.

HTML 
switch (expression) {
  case red:
    document.write("Color Selected is : red");
    break;
  case green:
     document.write("Color Selected is : green");
    break;
  case blue:
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
جرّب بنفسك

JavaScript Switch multiple cases اكثر من case داخل عبارة Switch في لغة جافا سكريبت

  • يمكن تنفيذ مجموعة أوامر في حالة تطابق expression مع قيمتين عن طريق اضافة عدد 2 case لهذة الأوامر.
  • يمكن أضافة اكتر من قيمة معاً لنفس الكُتلة البرمجية وهي كتابة اكثر من case لنفس الأوامر كل case تتبع case سابقة.

Switch multiple cases

سيتم تنفيذ الأوامر البرمجية الموجودة بداخل اول case في حالتين red أو gray.

HTML 
switch (expression) {
  case red:
  case gray:
    document.write("Color Selected is : red and gray");
    break;
  case green:
     document.write("Color Selected is : green");
    break;
  case blue:
    document.write("Color Selected is : blue");
    break;
  default:
     document.write("This color is not found");
}
جرّب بنفسك

JavaScript switch vs if-else لماذا تتفوق switch عن if-else في جافا سكريبت

تعتمد النظرية السائدة حول استخدام if-else مقابل switch عدد الشروط كلما كان عدد الشروط أكبر يفضل أستخدام switch لأنها منظمة اكثر ومقروءة اكثر ولكن ليس مشكلة أن نستخدم if-else.


لماذا نستخدم ال swich وليس if , else ؟

  • Expression هو يميز switch في كتابة قيمة فقط للتحقق بينما if و else تعتمد علي شرط كامل وليس قيمة.
  • تتميز Switch بسرعة التنقل بين كل حالة case وحالة case بينما العكس في if و else ستقوم لغة البرمجة بفحص جميع الشروط اما في ال swich تذهب مباشرة علي ال case التي تساوي ال Expression.
  • الوضوح وسهولة القراءة Clarity and readability تتفوق swich منظمة في طريقة كتابتها تسهل عملية القراءة والتعديل علي الحالات بخلاف ال if وال else لها اقواس كثيرة.
  • في عملية الأصلاح والتعديل تتفوق قاعدة switch عن قاعدة if لأن switch  سوف تعدل Expression مره واحدة بينما في if سوف نقوم بتعديل جميع الحالات علي حسب عدد if.
  • في جملة if يمكن ان يكون expression من النوع (integer او character او pointer او float ) بينما في ال switch يمكن expression ان يكون اي نوع من هذى الأنواع.


unclarity and unreadability

غير واضحة وغير مقروءة لقاعدة if في لغة جافا سكريبت

HTML 
if (color == "red"){
    /* do something */
} else if (color == "blue"){
    /* do something */
} else if (color == "brown"){
    /* do something */
} else if (color == "black"){
    /* do something */
} else {
    /* do something */
}

Clarity and readability

الوضوح وسهولة القراءة لقاعدة switch في لغة جافا سكريبت

HTML 
switch (color){
    case "red":
        /* do something */
        break;

    case "blue":
        /* do something */
        break;

    case "brown":
        /* do something */
        break;

    case "black":
        /* do something */
        break;

    default:
        /* do something */
}

switch without break statement in JavaScript switch بدون عبارة break في لغة جافا سكريبت

إذا نسيت كتابة عبارة break فسوف يتم تنفيذ جميع الاكواد التي تلي case يعني ذلك عدم عمل switch بشكل طبيعي يحدث خطأ برمجي عند التشغيل.

Execute All blocks

سيتم تنفيذ جميع الأوامر البرمجية داخل جميع الحالات أو الكُتل البرمجية إذا نسيت عبارة break في لغة جافا سكريبت

HTML 
var course = 1;
switch (course) {
  case 1:
    document.write("HTML <br>");
  case 2:
    document.write("CSS <br>");
  case 3:
    document.write("JavaScript <br>");
  default :
    document.write("Selected Course Not found <br>");
 }
جرّب بنفسك

switch default statement in JavaScript عبارة default مع قاعدة switch في لغة جافا سكريبت

إذا لم تتطابق expression مع أي case ففي هذة الحالة سوف يتم تنفيذ الأوامر البرمجية الموجودة داخل كُتلة default statement.

default statement

في حالة عدم تطابق expression مع أي case في switch سوف يتم تنفيذ الأوامر البرمجية التي تلي default statment في لغة جافا سكريبت

HTML 
var course = 4;
switch (course) {
  case 1:
    document.write("HTML");
    break;
  case 2:
    document.write("CSS");
    break;
  case 3:
    document.write("JavaScript");
  default : 
    document.write("Selected Course Not found");
 }
جرّب بنفسك

switch strict comparison in JavaScript قاعدة switch تستخدم الوضع الصارم في المقارنة بين expression و case في لغة جافا سكريبت

تطبق لغة جافا سكريبت الوضع الصارم مع switch فيجب عند عملية التطابق أو المقارنة أن تساوي قيمة expression قيمة case المساواه في النوع وفي القيمة.

HTML 
var course = "1";
switch (course) {
  case 1:
    document.write("HTML");
    break;
  case 2:
    document.write("CSS");
    break;
  case 3:
    document.write("JavaScript");
  default : 
    document.write("Selected Course Not found");
 }
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…