تعليمات if/else في JavaScript

التعريف والاستخدام

تُنفذ تعليمات if/else الكود إذا كانت الحالة صحيحة. إذا كانت الحالة خطأ، يمكن تنفيذ كود آخر.

هذا جزء من تعليمات "الشرط" في JavaScript، وهي تستخدم لتنفيذ عمليات مختلفة بناءً على الحالات المختلفة.

في JavaScript، لدينا التعليمات الظروفية التالية:

  • استخدام if لتعريف الكود الذي سيتم تنفيذه إذا كانت الحالة صحيحة
  • استخدام else لتعريف الكود الذي سيتم تنفيذه إذا كانت الحالة خطأ
  • إذا كانت الحالة الأولى خطأ، استخدم else if لتعريف الحالة الجديدة التي سيتم فحصها
  • استخدام switch للتحقق من إحدى الكودات التي سيتم تنفيذها

مثال

إذا كانت ساعة الوقت الحالية أقل من 20:00، فإن "Good day" يتم إخراجه في العنصر الذي له id="demo":

var time = new Date().getHours(); 
if (time < 20) {
  document.getElementById("demo").innerHTML = "Good day";
}

جرب بنفسك

هناك المزيد من أمثلة TIY في أسفل الصفحة.

النص

إذا كانت الحالة صحيحة، فإن حجب التعليمات يتم تنفيذه: if

if (condition) {
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كان الشرط صحيح
}

تعيين else لتوليد كود يجب تنفيذه إذا كان الشرط خطأ:

if (condition) {
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كان الشرط صحيح
} else { 
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كان الشرط خطأ
}

إذا كانت الأولى خطأ، فإنelse if تحدد شرطًا جديدًا:

if (condition1) {
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كانت condition1 صحيحة
} else if (condition2) {
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كانت condition1 خطأ وcondition2 صحيحة
} else {
  // مجموعة من الأوامر التي سيتم تنفيذها إذا كانت condition1 خطأ وcondition2 خطأ
}

قيم المتغيرات

المتغيرات وصف
condition مطلوب. تعبير يحتوي على نتيجة حسابية صحيحة أو خطأ.

تفاصيل تقنية

إصدار JavaScript: ECMAScript 1

مزيد من الأمثلة

مثال

إذا كان الوقت أقل من 20:00، أنشئ رسالة "Good day"، وإلا أنشئ رسالة "Good evening":

var time = new Date().getHours(); 
if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

جرب بنفسك

مثال

إذا كان الوقت أقل من 10:00، أنشئ رسالة "Good morning"، وإذا لم يكن كذلك لكن الوقت أقل من 20:00، أنشئ رسالة "Good day"، وإلا أنشئ رسالة "Good evening":

var time = new Date().getHours(); 
if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

جرب بنفسك

مثال

إذا كان id الخاص بالعنصر الـ<div> الأول في المستند هو "myDIV"، فإنغيير حجم الخط:

var x = document.getElementsByTagName("DIV")[0];
if (x.id === "myDIV") { 
  x.style.fontSize = "30px";
}

جرب بنفسك

مثال

عند ضغط المستخدم على الصورة، قم بتغيير قيمة الخاصية (src) للعنصر <img>:

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
</script>

جرب بنفسك

مثال

عرض الرسائل بناءً على إدخال المستخدم:

var letter = document.getElementById("myInput").value;
var text;
// إذا كانت الحرف "c"
if (letter === "c") {
  text = "Spot on! Good job!";
// إذا كانت الحرف "b" أو "d"
} else if (letter === "b" || letter === "d") {
  text = "قريب، لكن ليس كافيًا";
// إذا كانت الأحرف الأخرى
} else {
  text = "Waaay off..";
}

جرب بنفسك

مثال

تحقق من بيانات الإدخال:

var x, text;
// الحصول على قيمة حقل الإدخال الذي له id="numb"
x = document.getElementById("numb").value;
// إذا لم يكن x رقمًا أو كان أقل من 1 أو أكبر من 10، فإنه يتم إخراج "الإدخال غير صالح"
// إذا كان x رقمًا بين 1 و 10، فإنه يتم إخراج "Input OK"
if (isNaN(x) || x < 1 || x > 10) {
  text = "Input not valid";
} else {
  text = "Input OK";
}

جرب بنفسك

الدعم من المتصفح

الجملة الخروم IE Firefox Safari Opera
if/else الدعم الدعم الدعم الدعم الدعم

الصفحات ذات الصلة

دروس JavaScript:جملة If...Else JavaScript

دروس JavaScript:جملة Switch JavaScript