٥ يونيو ٢٠٢٠

العامل الشرطي: if, '?'

أحيانًا نريد تنفيذ أوامر مختلفة إعتمادًا على حالات مختلفة.

لعمل هذا يمكننا استخدام عبارة if والالعامل الشرطي ?, الذي يسمى أيضًا العامل “علامة الاستفهام”.

عبارة “if”

إن عبارة if(...) تقوم بتنفيذ ما بين القوسين وإذا كانت النتيجة true, تقوم بتنفيذ الكود المحدد.

على سبيل المثال:

let year = prompt('في أي عام تم نشر تخصيصات  ECMAScript-2015?', '');

if (year == 2015) alert( 'إجابة صحيحة!' );

في هذا المثال فإن الشرط عبارة عن عملية إختبار تساوي بسيطة (year == 2015), ولكن يمكن أن يكون أكثر تعقيدًا.

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

if (year == 2015) {
    alert("هذه صحيح!");
    alert("أنت ذكي!");
}

من الأفضل أن تضع الأوامر بين أقواس معقوفة {} في كل مرة تستخدم فيها عبارة if حتى إذا أردت تنفيذ أمر واحد. هذا يحسن قراءة الأوامر.

التحويل إلى القيم المنطقية

عبارة if (…) تقوم بتنفيذ التعبير المكتوب بين القوسين وتقوم بتحويل الناتج إلى قيمة منطقية.

دعنا نراجع على قواعد التحويل من هذا الدرس Type Conversions:

  • الرقم 0, النص الفارغ "", null, undefined, و NaN يصبحون false. ولهذا السبب يسمون “falsy” قيم.
  • القيم الأخرى تصبح true, ولهذا يسمون “truthy”.

لذلك فإن الأوامر المكتوبة تحت هذا الشرط لن تنفذ أبدًا:

if (0) { // 0 يكون falsy
  ...
}

وفي هذه الحالة ستنفذ دائمًا:

if (1) { // 1 يكون truthy
  ...
}

يمكننا أيضًا تمرير قيمة منطقية مسبقة التنفيذ إلى if, مثل:

let cond = (year == 2015); // عامل التساوي ينتج true أو false

if (cond) {
  ...
}

عبارة “else”

عبارة if قد تحتوي على جزء “else” إختياري. يتم تنفيذها عندما يكون الشرط false.

على سبيل المثال:

let year = prompt("في أي عام تم نشر تخصيصات  ECMAScript-2015?", "");

if (year == 2015) {
    alert("تخمينك صحيح!");
} else {
    alert("كيف يمكنك أن تخطئ ؟"); // any value except 2015
}

العديد من الحالات: “else if”

أحيانًا نريد إختبار العديد من الحالات المختلفة. يمكن استخدام else if لعمل هذا.

على سبيل المثال:

let year = prompt("في أي عام تم نشر تخصيصات  ECMAScript-2015?", "");

if (year < 2015) {
    alert("مبكر جدًا");
} else if (year > 2015) {
    alert("متأخر جدًا");
} else {
    alert("تمامًا");
}

في الكود السابق, تقوم الجافاسكربت أولًا بفحص year < 2015. إذا كان خطأ, تنتقل للشرط التالي year > 2015. إذا كان خطأ أيضًا تعرض آخر alert.

يمكن أن يوجد العديد من else if . آخر else إختيارية.

العامل الشرطي ‘?’

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

على سبيل المثال:

let accessAllowed;
let age = prompt('كم عمرك ؟', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

العامل الشرطي أو عامل علامة الاستفهام يمكننا من فعل هذا في سطر بسيط.

يتم تمثيله بعلامة استفهام ?. أحيانا يسمى “ternary” لأن له 3 معاملات. وهو العامل الوحيد في الجافاسكربت الذي له هذا العدد من المعاملات.

طريقة كتابته كالتالي:

let result = condition ? value1 : value2;

يتم تنفيذ condition وإذا كان صحيح يتم إرجاع value1 وغير ذلك يتم إرجاع value2.

على سبيل المثال:

let accessAllowed = age > 18 ? true : false;

يمكننا تجاهل الأقواس حول age > 18. هذا العامل لديه أولوية أقل ولهذا يتم تنفيذه بعد عملية المقارنة >.

هذا المثال مطابق للمثال السابق:

// عامل المقارنة "age > 18" ينفذ أولًا
// (لا حاجة لوضعة داخل أقواس)
let accessAllowed = age > 18 ? true : false;

لكن الأقواس تجعل الكود مقروء أكثر ولذلك ننصح باستخدامها

برجاء الملاحظة:

في المثال السابق يمكننا عدم استخدام العامل الشرطي لأن عملية المقارنة ترجع true/false:

// مثل
let accessAllowed = age > 18;

العديد من ‘?’

تتابع ? يمكنه إرجاع قيمة تعتمد على أكثر من شرط.

على سبيل المثال:

let age = prompt("العمر؟", 18);

let message =
    age < 3
        ? "مرحبًا يا صغيري!"
        : age < 18
        ? "أهلا!"
        : age < 100
        ? "تحياتي!"
        : "يا له من عمر غير عادي!";

alert(message);

ربما يكون من الصعب معرفة ما يحدث ولكن إذا نظرنا عن قرب سنجد أنه مجرد تتابع لمجموعة إختبارات:

  1. أول علامة استفهام تختبر إذا كان age < 3.
  2. لو صحيح ترجع 'مرحبًا يا صغيري!'. ولو لم يكن تكمل لما بعد النقطتين '":"'وتختبر age < 18.
  3. لو صحيح ترجع 'أهلا!'. ولو لم يكن تكمل لما بعد النقطتين '":"'وتختبر age < 100.
  4. لو صحيح ترجع 'تحياتي!'. ولو لم يكن تكمل لما بعد النقطتين الأخيرتين '":"'وترجع 'يا له من عمر غير عادي!'.

هنا ما يبدو عليه باستخدام if..else:

if (age < 3) {
    message = "مرحبًا يا صغيري!";
} else if (age < 18) {
    message = "أهلا!";
} else if (age < 100) {
    message = "تحياتي!";
} else {
    message = "يا له من عمر غير عادي!";
}

استخدام غير عادي ل ‘?’

أحيانا يتم استخدام علامة الاستفهام ? كبديل ل if:

let company = prompt('أي شركة أنشأت الجافاسكربت ؟', '');

(company == 'Netscape') ?
   alert('صحيح!') : alert('خطأ.');

اعتمادًا على الشرط company == 'Netscape', يتم تنفيذ الجزء الأول أو الثاني بعد ? ويظهر التنبيه.

هنا لم نقم بتخصيص قيم مختلفة لمتغير بل قمنا بتنفيذ أوامر مختلفة اعتمادًا على الشرط

لا ينصح باستخدام العامل بهذه الطريقة.

هذا التعبير مختصر عن عبارة if ولكنه أقل قراءة.

هذا نفس الكود باستخدام عبارة if للمقارنة:

let company = prompt('أي شركة أنشأت الجافاسكربت ؟', '');

if (company == 'Netscape') {
  alert('صحيح!');
} else {
  alert('خطأ.');
}

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

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

مهمه

هل سيتم عرض alert ؟

if ("0") {
  alert( 'مرحبًا' );
}

نعم.

أي نص غير فارغ "0" ليس نص فارغ) يصبح true عند تحويله لقيمة منطقية.

يمكننا تنفيذ الكود ورؤية النتيجة:

if ("0") {
  alert( 'مرحبًا' );
}

باستخدام if..else, اكتب كود يسأل: ‘ما هو الاسم الرسمي للجافاسكربت’

إذا كتب المستخدم “ECMAScript”, قم بعرض رسالة “صحيح!”, غير ذلك قم بعرض رسالة: “ألا تعرف؟ ECMAScript!”

عرض توضيحي في نافذة جديدة

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('ما هو الاسم الرسمي للجافاسكربت ؟', '');

    if (value == 'ECMAScript') {
      alert('صحيح!');
    } else {
      alert("ألا تعرف ؟ ECMAScript!");
    }
  </script>


</body>

</html>

استخدم if..else يحصل على رقم باستخدام prompt ثم يعرض alert:

  • 1, إذا كانت القيمة أكبر من صفر,
  • -1, إذا كانت القيمة أقل من صفر,
  • 0, إذا كانت القيمة تساوي صفر.

هنا نفترض أن الدخل دائما رقم.

عرض توضيحي في نافذة جديدة

let value = prompt('أكتب رقم', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}

قم بإعادة كتابة if باستخدام عامل الشرط '?':

let result;

if (a + b < 4) {
    result = "تحت";
} else {
    result = "فوق";
}
let result = (a + b < 4) ? 'تحت' : 'فوق';

قم بإعادة كتابة if..else باستخدام العديد من عامل الشرط '?'.

ينصح بتقسيم الكود إلى أكثر من سطر ليكون مقروء.

let message;

if (login == "Employee") {
    message = "مرحبًا";
} else if (login == "Director") {
    message = "تحياتي";
} else if (login == "") {
    message = "لا دخول";
} else {
    message = "";
}
let message = (login == 'Employee') ? 'مرحبًا' :
  (login == 'Director') ? 'تحياتي' :
  (login == '') ? 'لا دخول' :
  '';
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)