EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

الجمل الشرطية في جافاسكريبت

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

جملة if

الشرط الأكثر أساسية: إذا كان الشرط صحيحًا، نفذ الكود داخل الأقواس المقوسة.

HTML 
<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>جملة if</title></head>
<body>
<div id="output"></div>
<script>
let age = 20;
if (age >= 18) {
  document.getElementById('output').textContent = 'أنت بالغ';
}
</script>
</body>
</html>

يمكنك حذف الأقواس المقوسة عندما يكون هناك جملة واحدة فقط بالداخل، لكنه غير م khuyến khích بشدة — الأقواس تجعل الكود أوضح وتمنع الأخطاء عند إضافة جمل أخرى لاحقًا.

جملة if...else

اختيار ثنائي: إذا كان الشرط صحيحًا، نفذ كتلة if; وإلا، نفذ كتلة else.

HTML 
<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>if...else</title></head>
<body>
<div id="output"></div>
<script>
let score = 45;
if (score >= 60) {
  document.getElementById('output').textContent = 'ناجح!';
} else {
  document.getElementById('output').textContent = 'لم ينجح، واصل المحاولة';
}
</script>
</body>
</html>

if...else if...else

شروط متعددة تُقيَّم من أعلى إلى أسفل — أول واحد يتطابق يُنفذ، والباقي يتخطى:

HTML 
<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>if...else if</title></head>
<body>
<div id="output"></div>
<script>
let score = 85;
if (score >= 90) {
  document.getElementById('output').textContent = 'ممتاز';
} else if (score >= 80) {
  document.getElementById('output').textContent = 'جيد';
} else if (score >= 60) {
  document.getElementById('output').textContent = 'ناجح';
} else {
  document.getElementById('output').textContent = 'راسب';
}
</script>
</body>
</html>

مثال: حاسبة الدرجات

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>حاسبة الدرجات</h2>
  <input type="number" id="score" placeholder="أدخل الدرجة (0-100)">
  <button onclick="checkGrade()">تحقق من الدرجة</button>
  <p id="result"></p>
  <script>
    function checkGrade() {
      let score = Number(document.getElementById('score').value);
      let grade = '';
      let color = '';

      if (score >= 90) {
        grade = 'ممتاز 🌟';
        color = 'green';
      } else if (score >= 80) {
        grade = 'جيد 👍';
        color = 'blue';
      } else if (score >= 70) {
        grade = 'متوسط 😐';
        color = 'orange';
      } else if (score >= 60) {
        grade = 'ناجح 😅';
        color = '#cc8800';
      } else {
        grade = 'راسب 😢';
        color = 'red';
      }

      document.getElementById('result').innerHTML =
        `<span style="color:${color};font-size:24px">${score} - ${grade}</span>`;
    }
  </script>
</body>
</html>
▶ جرّب الكود

العامل الثلاثي

العامل الثلاثي هو اختصار لـ if...else، مثالي للاختيارات الثنائية البسيطة:

HTML 
<script>
// البناء: condition ? value1 : value2
let age = 20;
let status = age >= 18 ? 'بالغ' : 'قاصر';

// يعادل:
let status2;
if (age >= 18) {
  status2 = 'بالغ';
} else {
  status2 = 'قاصر';
}
</script>
💡 العامل الثلاثي رائع لتعيينات القيم البسيطة. عندما يصبح المنطق معقدًا، التزم بـ if...else — القراءة أهم من الإيجاز.

جملة switch

عند التحقق من متغير واحد مقابل عدة قيم ثابتة، switch أنظف من if...else if:

HTML 
<script>
let day = 3;
switch (day) {
  case 1: console.log('الاثنين'); break;
  case 2: console.log('الثلاثاء'); break;
  case 3: console.log('الأربعاء'); break;
  // ...
  default: console.log('رقم غير صالح');
}
</script>

نقطتان رئيسيتان:

  1. لا تحذف break أبدًا — بدونه، "يسقط التنفيذ" إلى الحالة التالية
  2. default هو المصيدة الشاملة — يُنفذ عندما لا يتطابق أي case

مثال: فخ السقوط في Switch

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>عرض جملة Switch</h2>
  <p id="output"></p>
  <script>
    let html = '<strong>مع break:</strong><br>';
    let fruit = 'تفاحة';
    switch (fruit) {
      case 'تفاحة': html += 'تفاحة<br>'; break;
      case 'موزة': html += 'موزة<br>'; break;
      default: html += 'فاكهة غير معروفة<br>';
    }

    html += '<br><strong>بدون break (سقوط):</strong><br>';
    let num = 2;
    switch (num) {
      case 1: html += 'واحد<br>';
      case 2: html += 'اثنان<br>';
      case 3: html += 'ثلاثة<br>';
      default: html += 'افتراضي<br>';
    }
    // المخرجات: اثنان، ثلاثة، افتراضي — يبدأ عند التطابق ويعمل حتى النهاية

    html += '<br><strong>استخدام السقوط عن قصد:</strong><br>';
    let month = 2;
    let season = '';
    switch (month) {
      case 3: case 4: case 5: season = 'ربيع'; break;
      case 6: case 7: case 8: season = 'صيف'; break;
      case 9: case 10: case 11: season = 'خريف'; break;
      case 12: case 1: case 2: season = 'شتاء'; break;
    }
    html += `الشهر ${month} هو ${season}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ جرّب الكود
⚠️ نسيان break هو أكثر أخطاء switch شيوعًا. لكن أحيانًا "السقوط" مفيد — عندما يجب أن تشغيل عدة قيم نفس المنطق، حذف break عن قصد يتيح دمجها.

القيم falsy

في التحققات الشرطية، تُعامل القيم التالية كـ false (تُسمى قيم falsy):

قيمة falsy الوصف
false منطقي false
0 صفر
"" أو '' نص فارغ
null فارغ
undefined غير معرّف
NaN ليس رقمًا

جميع القيم الأخرى truthy، بما في ذلك "0" (نص صفر)، [] (مصفوفة فارغة)، {} (كائن فارغ) — قد تبدو "فارغة"، لكنها تُقيَّم كـ true في الشروط.

مثال: تحققات القيم falsy

HTML 
<!DOCTYPE html>
<html>
<body>
  <h2>عرض القيم falsy</h2>
  <p id="output"></p>
  <script>
    let html = '<strong>قيم falsy (تُقيَّم كـ false):</strong><br>';
    let falsy = [false, 0, "", null, undefined, NaN];
    for (let val of falsy) {
      let display = val === "" ? '""' : (val === undefined ? 'undefined' : val);
      html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
    }

    html += '<br><strong>قيم truthy خادعة:</strong><br>';
    let tricky = ["0", [], {}, "false", -1];
    for (let val of tricky) {
      let display = Array.isArray(val) ? '[]' : (typeof val === 'object' ? '{}' : JSON.stringify(val));
      html += `${display} → ${val ? 'truthy' : 'falsy'}<br>`;
    }

    html += '<br><strong>مثال عملي:</strong><br>';
    let name = '';
    html += `الاسم: "${name}" → ${name || 'غير م provided'}<br>`;
    let count = 0;
    html += `العدد: ${count} → ${count || 'لا شيء'} (0 يُعامل كـ falsy!)<br>`;
    html += `الطريقة الصحيحة: ${count !== undefined && count !== null ? count : 'لا شيء'}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ جرّب الكود
⚠️ عند استخدام || للقيم الافتراضية، انتبه: 0 و"" صالحان لكن يُعاملان كـ falsy. استخدم ?? (عامل الإدماج الفارغ) بدلاً من ذلك — يُطبق الافتراضي فقط على null وundefined.

📖 ملخص

  1. if...else if...else يُقيّم من أعلى إلى أسفل، يُنفذ أول تطابق ويتخطى الباقي
  2. العامل الثلاثي هو اختصار لـ if...else — جيد للتعيينات البسيطة، وليس للمنطق المعقد
  3. switch أنظف لمطابقة القيم الثابتة، لكن لا تنسَ break
  4. ست قيم falsy: false، 0، ""، null، undefined، NaN
  5. "0"، []، {} truthy — لا تنخدع بمظهرها "الفارغ"
  6. كن حذرًا مع || للقيم الافتراضية عندما يكون 0 و"" صالحين — استخدم ?? أو مقارنات صريحة

❓ أسئلة شائعة

س ما الفرق بين == و=== في الشروط؟
ج == يُجري إكراه الأنواع قبل المقارنة ("1" == 1 هو true)، بينما === لا يفعل ("1" === 1 هو false). استخدم دائمًا === لتجنب التحولات الضمنية غير المتوقعة.
س هل يمكن لـ switch مقارنة النصوص؟
ج نعم. switch يعمل مع النصوص والأرقام والقيم المنطقية — يستخدم التساوي الصارم (===) للمقارنة.
س ما الفرق بين ?? و||؟
ج || يُفعَّل على جميع القيم falsy (0، ""، null، undefined، NaN، false)، بينما ?? يُفعَّل فقط على null وundefined. استخدم ?? عندما تحتاج للحفاظ على 0 والنصوص الفارغة.

📝 تمارين

  1. اكتب برنامجًا يأخذ سنة كمدخل ويحدد ما إذا كانت سنة كبيسة (قابلة للقسمة على 4 وليس على 100، أو قابلة للقسمة على 400)
  2. ابنِ حاسبة بسيطة: خذ رقمين وعامل (+، -، *، /) كمدخل، استخدم switch لحساب النتيجة، وتعامل مع القسمة على صفر
  3. ابنِ حاسبة BMI: خذ الطول (م) والوزن (كجم) كمدخل، احسب BMI، واعرض الفئة (نقص الوزن/طبيعي/وزن زائد/سمنة)
100%