JavaScript
الشروط في JavaScript — دليل شامل if/else و switch 2026
📅 2026-09-23⏱ 10 دقائق قراءة
في المقال السابق، تعلمت المتغيرات وأنواع البيانات، وكيف تخزن القيم في JavaScript. لكن البرامج الحقيقية لا تكتفي بتخزين البيانات — بل **تتخذ قرارات** بناءً على هذه البيانات. هنا يأتي دور **الشروط (Conditions)**.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الشروط في JavaScript — من `if` البسيطة إلى `switch` المتقدمة، مع العمليات المنطقية وتمارين وحلول.
## ما هي الشروط؟
الشروط هي طريقة لإخبار البرنامج: "**إذا تحقق هذا الشرط، نفّذ هذا الكود. وإلا، نفّذ كوداً آخر.**"
**مثال من الحياة اليومية:**
- **إذا** كان الجو ممطراً، **سآخذ مظلة**.
- **وإلا**، **سأخرج بدون مظلة**.
في JavaScript، نكتب هذا هكذا:
```javascript
let isRaining = true;
if (isRaining) {
console.log("سآخذ مظلة ☔");
} else {
console.log("سأخرج بدون مظلة ☀️");
}
```
**النتيجة:**
```bash
سآخذ مظلة ☔
```
## لماذا نحتاج الشروط؟
بدون الشروط، سينفذ البرنامج نفس الكود دائماً، بغض النظر عن المدخلات. الشروط تمنح البرنامج **الذكاء** ليتفاعل مع المواقف المختلفة:
- **التحقق من صحة البيانات:** هل كلمة المرور صحيحة؟
- **اتخاذ القرارات:** هل العمر يكفي للتسجيل؟
- **التفاعل مع المستخدم:** هل ضغط الزر "موافق" أم "إلغاء"؟
- **معالجة الأخطاء:** هل العملية نجحت أم فشلت؟
## الشروط البسيطة: if
الشكل الأساسي للشرط هو `if`:
```javascript
if (الشرط) {
// الكود الذي ينفذ إذا تحقق الشرط
}
```
**مثال:**
```javascript
let age = 20;
if (age >= 18) {
console.log("أنت بالغ ✅");
}
```
**النتيجة:**
```bash
أنت بالغ ✅
```
**شرح:**
- **`age >= 18`:** الشرط (هل العمر أكبر من أو يساوي 18؟).
- **`{ ... }`:** كتلة الكود التي تُنفَّذ إذا كان الشرط `true`.
- **إذا كان الشرط `false`:** لا يُنفَّذ شيء.
## if...else — خياران
عندما تريد تنفيذ كود بديل إذا لم يتحقق الشرط:
```javascript
let age = 15;
if (age >= 18) {
console.log("أنت بالغ ✅");
} else {
console.log("أنت قاصر ❌");
}
```
**النتيجة:**
```bash
أنت قاصر ❌
```
**كيف يعمل؟**
1. يُقيَّم الشرط `age >= 18`.
2. إذا كان `true`، يُنفَّذ كود `if`.
3. إذا كان `false`، يُنفَّذ كود `else`.
## if...else if...else — خيارات متعددة
عندما يكون لديك أكثر من خيارين:
```javascript
let score = 85;
if (score >= 90) {
console.log("ممتاز 🌟");
} else if (score >= 80) {
console.log("جيد جداً ⭐");
} else if (score >= 70) {
console.log("جيد 👍");
} else if (score >= 60) {
console.log("مقبول ✅");
} else {
console.log("راسب ❌");
}
```
**النتيجة:**
```bash
جيد جداً ⭐
```
**⚠️ مهم:** JavaScript تفحص الشروط **بالترتيب**، وتتوقف عند أول شرط يتحقق.
## العمليات المقارنة (Comparison Operators)
للشروط، نحتاج عمليات المقارنة:
<table>
<thead>
<tr>
<th>العملية</th>
<th>المعنى</th>
<th>مثال</th>
<th>النتيجة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>==</code></td>
<td>يساوي (بدون نوع)</td>
<td><code>5 == "5"</code></td>
<td>true</td>
</tr>
<tr>
<td><code>===</code></td>
<td>يساوي (مع النوع)</td>
<td><code>5 === "5"</code></td>
<td>false</td>
</tr>
<tr>
<td><code>!=</code></td>
<td>لا يساوي (بدون نوع)</td>
<td><code>5 != "5"</code></td>
<td>false</td>
</tr>
<tr>
<td><code>!==</code></td>
<td>لا يساوي (مع النوع)</td>
<td><code>5 !== "5"</code></td>
<td>true</td>
</tr>
<tr>
<td><code>></code></td>
<td>أكبر من</td>
<td><code>10 > 5</code></td>
<td>true</td>
</tr>
<tr>
<td><code><</code></td>
<td>أصغر من</td>
<td><code>10 < 5</code></td>
<td>false</td>
</tr>
<tr>
<td><code>>=</code></td>
<td>أكبر من أو يساوي</td>
<td><code>10 >= 10</code></td>
<td>true</td>
</tr>
<tr>
<td><code><=</code></td>
<td>أصغر من أو يساوي</td>
<td><code>5 <= 10</code></td>
<td>true</td>
</tr>
</tbody>
</table>
**⚠️ نصيحة ذهبية:** استخدم دائماً `===` و `!==` بدلاً من `==` و `!=`، لأنها تتحقق من النوع أيضاً وتتجنب الأخطاء.
```javascript
console.log(5 == "5"); // true (لأن JavaScript تحوّل النوع)
console.log(5 === "5"); // false (لأن النوع مختلف)
```
## العمليات المنطقية (Logical Operators)
لدمج عدة شروط:
<table>
<thead>
<tr>
<th>العملية</th>
<th>المعنى</th>
<th>مثال</th>
<th>النتيجة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&&</code></td>
<td>و (AND)</td>
<td><code>true && false</code></td>
<td>false</td>
</tr>
<tr>
<td><code>||</code></td>
<td>أو (OR)</td>
<td><code>true || false</code></td>
<td>true</td>
</tr>
<tr>
<td><code>!</code></td>
<td>ليس (NOT)</td>
<td><code>!true</code></td>
<td>false</td>
</tr>
</tbody>
</table>
### مثال على AND (`&&`):
```javascript
let age = 25;
let hasLicense = true;
if (age >= 18 && hasLicense) {
console.log("يمكنك القيادة ✅");
} else {
console.log("لا يمكنك القيادة ❌");
}
```
**النتيجة:**
```bash
يمكنك القيادة ✅
```
**الشرط يتحقق فقط إذا كان الطرفان true.**
### مثال على OR (`||`):
```javascript
let isWeekend = false;
let isHoliday = true;
if (isWeekend || isHoliday) {
console.log("اليوم عطلة! 🎉");
} else {
console.log("اليوم يوم عمل 💼");
}
```
**النتيجة:**
```bash
اليوم عطلة! 🎉
```
**الشرط يتحقق إذا كان أحد الطرفين true على الأقل.**
### مثال على NOT (`!`):
```javascript
let isLoggedIn = false;
if (!isLoggedIn) {
console.log("يجب تسجيل الدخول 🔐");
}
```
**النتيجة:**
```bash
يجب تسجيل الدخول 🔐
```
## الشروط المتداخلة (Nested if)
يمكنك وضع شرط داخل شرط آخر:
```javascript
let age = 25;
let hasTicket = true;
if (age >= 18) {
if (hasTicket) {
console.log("مرحباً بك في الحفل 🎉");
} else {
console.log("تحتاج إلى تذكرة 🎫");
}
} else {
console.log("الدخول للبالغين فقط ❌");
}
```
**النتيجة:**
```bash
مرحباً بك في الحفل 🎉
```
**⚠️ نصيحة:** تجنب التداخل العميق (أكثر من مستويين) لأنه يجعل الكود صعب القراءة. استخدم العمليات المنطقية بدلاً من ذلك.
## المعامل الثلاثي (Ternary Operator)
طريقة مختصرة لكتابة `if...else` في سطر واحد:
```javascript
الشرط ? القيمة_إذا_صحيح : القيمة_إذا_خطأ
```
**مثال:**
```javascript
let age = 20;
// بدلاً من:
let status;
if (age >= 18) {
status = "بالغ";
} else {
status = "قاصر";
}
// اكتب:
let status = age >= 18 ? "بالغ" : "قاصر";
console.log(status); // بالغ
```
**متى تستخدمه؟** للشروط البسيطة (سطر واحد). تجنبه إذا كان الشرط معقداً.
## switch — للخيارات المتعددة
عندما يكون لديك قيمة واحدة وتريد مقارنتها بعدة قيم، `switch` أنظف من `if...else if`:
```javascript
let day = "الاثنين";
switch (day) {
case "السبت":
case "الأحد":
console.log("عطلة نهاية الأسبوع 🎉");
break;
case "الاثنين":
case "الثلاثاء":
case "الأربعاء":
case "الخميس":
console.log("يوم عمل 💼");
break;
case "الجمعة":
console.log("يوم الجمعة 🌙");
break;
default:
console.log("يوم غير معروف");
}
```
**النتيجة:**
```bash
يوم عمل 💼
```
**شرح:**
- **`switch (day)`:** القيمة التي نقارنها.
- **`case "الاثنين":`:** حالة محددة.
- **`break;`:** إنهاء الـ switch (مهم جداً! بدونه سينفذ الكود التالي).
- **`default:`:** الحالة الافتراضية إذا لم يتحقق أي case.
### ⚠️ تحذير: `break` مهم جداً
إذا نسيت `break`، سينفذ JavaScript كل الحالات التالية:
```javascript
let num = 2;
switch (num) {
case 1:
console.log("واحد");
case 2:
console.log("اثنان");
case 3:
console.log("ثلاثة");
default:
console.log("افتراضي");
}
```
**النتيجة (بدون break):**
```bash
اثنان
ثلاثة
افتراضي
```
**مع break:**
```javascript
switch (num) {
case 1:
console.log("واحد");
break;
case 2:
console.log("اثنان");
break;
case 3:
console.log("ثلاثة");
break;
default:
console.log("افتراضي");
}
```
**النتيجة:**
```bash
اثنان
```
## مقارنة بين if و switch
<table>
<thead>
<tr>
<th>المعيار</th>
<th>if / else if</th>
<th>switch</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>الاستخدام</strong></td>
<td>شروط معقدة</td>
<td>مقارنة قيمة واحدة</td>
</tr>
<tr>
<td><strong>القراءة</strong></td>
<td>أصعب مع كثرة الخيارات</td>
<td>أنظف مع كثرة الخيارات</td>
</tr>
<tr>
<td><strong>المرونة</strong></td>
<td>أكثر مرونة</td>
<td>محدود بالقيم</td>
</tr>
<tr>
<td><strong>المدى (Range)</strong></td>
<td>✅ يدعم</td>
<td>❌ لا يدعم</td>
</tr>
</tbody>
</table>
## تمارين عملية
### تمرين 1: فحص العمر
اكتب برنامجاً يتحقق من العمر:
- إذا كان أقل من 13: "طفل"
- إذا كان بين 13 و 17: "مراهق"
- إذا كان بين 18 و 64: "بالغ"
- إذا كان 65 أو أكثر: "مسن"
**الحل:**
```javascript
let age = 25;
if (age < 13) {
console.log("طفل");
} else if (age < 18) {
console.log("مراهق");
} else if (age < 65) {
console.log("بالغ");
} else {
console.log("مسن");
}
```
### تمرين 2: التحقق من كلمة المرور
اكتب برنامجاً يتحقق إذا كانت كلمة المرور صحيحة (طولها 8 أحرف على الأقل).
**الحل:**
```javascript
let password = "secret123";
if (password.length >= 8) {
console.log("كلمة المرور صحيحة ✅");
} else {
console.log("كلمة المرور قصيرة جداً ❌");
}
```
### تمرين 3: الأعداد الزوجية والفردية
اكتب برنامجاً يتحقق إذا كان الرقم زوجياً أم فردياً.
**الحل:**
```javascript
let num = 7;
if (num % 2 === 0) {
console.log("الرقم زوجي");
} else {
console.log("الرقم فردي");
}
```
**النتيجة:**
```bash
الرقم فردي
```
### تمرين 4: اسم اليوم
اكتب برنامجاً يطبع اسم اليوم بناءً على رقمه (1 = الأحد، 2 = الاثنين...).
**الحل:**
```javascript
let dayNumber = 3;
switch (dayNumber) {
case 1:
console.log("الأحد");
break;
case 2:
console.log("الاثنين");
break;
case 3:
console.log("الثلاثاء");
break;
case 4:
console.log("الأربعاء");
break;
case 5:
console.log("الخميس");
break;
case 6:
console.log("الجمعة");
break;
case 7:
console.log("السبت");
break;
default:
console.log("رقم غير صحيح");
}
```
**النتيجة:**
```bash
الثلاثاء
```
### تمرين 5: نظام تسجيل الدخول
اكتب برنامجاً يتحقق من:
- اسم المستخدم صحيح
- كلمة المرور صحيحة
- الحساب غير محظور
**الحل:**
```javascript
let username = "ahmed";
let password = "12345";
let isBlocked = false;
if (username === "ahmed" && password === "12345" && !isBlocked) {
console.log("مرحباً بك! ✅");
} else if (isBlocked) {
console.log("حسابك محظور ❌");
} else {
console.log("اسم المستخدم أو كلمة المرور غير صحيحة ❌");
}
```
### تمرين 6: المعامل الثلاثي
استخدم المعامل الثلاثي لتحديد إذا كان الرقم موجباً أم سالباً.
**الحل:**
```javascript
let num = -5;
let result = num >= 0 ? "موجب" : "سالب";
console.log(result); // سالب
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: استخدام `=` بدلاً من `===`
**السبب:** كتابة `=` (إسناد) بدلاً من `===` (مقارنة).
```javascript
// خطأ:
if (x = 5) {
// هذا يعيّن x = 5 وليس يقارن!
}
// صحيح:
if (x === 5) {
// يقارن
}
```
### 🔴 المشكلة 2: نسيان `break` في switch
**السبب:** بدون `break`، ينفذ JavaScript كل الحالات التالية.
**الحل:** أضف `break;` بعد كل `case`.
### 🔴 المشكلة 3: شروط معقدة
**السبب:** كتابة شرط طويل يصعب قراءته.
**الحل:** قسّم الشرط إلى متغيرات:
```javascript
// بدلاً من:
if (age >= 18 && hasLicense && !isSuspended && hasInsurance) { }
// اكتب:
const canDrive = age >= 18 && hasLicense && !isSuspended && hasInsurance;
if (canDrive) { }
```
### 🔴 المشكلة 4: `if` بدون أقواس
**السبب:** كتابة `if` بدون `{}` — يعمل لكنه خطير.
```javascript
// خطير (ينفذ سطر واحد فقط):
if (x > 5)
console.log("كبير");
console.log("هذا ينفذ دائماً!"); // ❌
// آمن:
if (x > 5) {
console.log("كبير");
console.log("هذا ينفذ فقط مع الشرط");
}
```
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>if (شرط) { }</code></td>
<td>تنفيذ الكود إذا تحقق الشرط</td>
</tr>
<tr>
<td><code>else { }</code></td>
<td>تنفيذ الكود إذا لم يتحقق الشرط</td>
</tr>
<tr>
<td><code>else if (شرط) { }</code></td>
<td>فحص شرط إضافي</td>
</tr>
<tr>
<td><code>switch (قيمة) { }</code></td>
<td>مقارنة قيمة بعدة حالات</td>
</tr>
<tr>
<td><code>الشرط ? a : b</code></td>
<td>المعامل الثلاثي (اختصار if else)</td>
</tr>
<tr>
<td><code>&&</code></td>
<td>و (AND) — كل الشروط يجب أن تتحقق</td>
</tr>
<tr>
<td><code>||</code></td>
<td>أو (OR) — شرط واحد يكفي</td>
</tr>
<tr>
<td><code>!</code></td>
<td>ليس (NOT) — عكس القيمة</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>فهم if و else و else if</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام العمليات المقارنة (===, !==, >, <)</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام العمليات المنطقية (&&, ||, !)</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم switch و break</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام المعامل الثلاثي</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الستة</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت الشروط، أنت جاهز للمقال التالي:
1. **الحلقات (for/while)** — تكرار المهام.
2. **الدوال (Functions)** — تنظيم الكود.
3. **المصفوفات والكائنات** — هياكل البيانات.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ ما هي الشروط ولماذا نحتاجها.
- ✅ `if` و `else` و `else if`.
- ✅ العمليات المقارنة (`===`, `!==`, `>`, `<`).
- ✅ العمليات المنطقية (`&&`, `||`, `!`).
- ✅ `switch` و `break`.
- ✅ المعامل الثلاثي (Ternary Operator).
- ✅ الشروط المتداخلة.
**تذكر:** الشروط هي ما يجعل البرنامج ذكياً. كلما أتقنتها، كلما أصبحت قادراً على بناء تطبيقات أكثر تعقيداً.
**هل فهمت الشروط؟ شاركنا في التعليقات!**