شرح الجمل الشرطية في JavaScript للمبتدئين | If, Else, Else If مع أمثلة عملية

شرح الجمل الشرطية في JavaScript للمبتدئين
If, Else, Else If
مع أمثلة عملية
إذا كنت تبدأ تعلم لغة JavaScript، فمن أهم الأشياء التي يجب عليك فهمها هي الجمل الشرطية (Conditional Statements).
الجمل الشرطية تجعل البرنامج قادرًا على اتخاذ القرارات، حيث يمكنه تنفيذ أوامر مختلفة بناءً على تحقق شرط معين.
مثال من الحياة اليومية:
إذا كانت درجة الطالب 50 أو أكثر → الطالب ناجح.
إذا كانت أقل من 50 → الطالب راسب.
نفس الفكرة نستخدمها داخل البرمجة باستخدام الجمل الشرطية.
ما هي الجمل الشرطية؟
الجمل الشرطية هي أوامر تستخدم لجعل البرنامج يختار ماذا يفعل بناءً على نتيجة شرط معين.
في JavaScript لدينا عدة طرق لكتابة الشروط، وأهمها:
if
if...else
else if
أولًا: جملة if في JavaScript
تعتبر if أبسط أنواع الجمل الشرطية.
يتم تنفيذ الكود الموجود بداخلها فقط إذا كان الشرط صحيحًا.
الشكل العام:
if (condition) {
// code to execute
}
مثال:
let age = 18;
if (age >= 18) {
console.log("You can enter");
}
النتيجة:
You can enter
في هذا المثال قام البرنامج بفحص الشرط:
هل قيمة age أكبر من أو تساوي 18؟
بما أن الإجابة صحيحة، تم تنفيذ الكود داخل if.
ماذا يحدث إذا كان الشرط غير صحيح؟
شاهد المثال التالي:
let age = 15;
if (age >= 18) {
console.log("You can enter");
}
في هذه الحالة لن يظهر أي شيء، لأن الشرط غير متحقق.
إذا أردنا تنفيذ كود آخر عند فشل الشرط نستخدم else.
ثانيًا: جملة if...else
تستخدم if...else عندما نريد تنفيذ أمر إذا تحقق الشرط، وأمر مختلف إذا لم يتحقق.
الشكل العام:
if (condition) {
}
else {
}
مثال:
let age = 15;
if (age >= 18) {
console.log("You are adult");
}
else {
console.log("You are young");
}
النتيجة:
You are young
لأن الشرط:
age >= 18
غير صحيح.
مثال عملي: التحقق من نجاح الطالب
لنكتب برنامجًا يحدد هل الطالب نجح أم لا:
let score = 80;
if (score >= 50) {
console.log("You passed");
}
else {
console.log("You failed");
}
النتيجة:
You passed
لأن الدرجة أكبر من 50.
ثالثًا: جملة else if
أحيانًا نحتاج إلى فحص أكثر من احتمال.
هنا نستخدم else if.
مثال: تقييم درجات الطلاب:
90 أو أكثر → ممتاز
75 أو أكثر → جيد جدًا
50 أو أكثر → ناجح
أقل من 50 → راسب
الكود:
let grade = 85;
if (grade >= 90) {
console.log("Excellent");
}
else if (grade >= 75) {
console.log("Very Good");
}
else if (grade >= 50) {
console.log("Passed");
}
else {
console.log("Failed");
}
النتيجة:
Very Good
ترتيب تنفيذ الشروط
JavaScript تقوم بفحص الشروط من الأعلى إلى الأسفل.
مثال:
let score = 95;
if (score >= 50) {
console.log("Passed");
}
else if (score >= 90) {
console.log("Excellent");
}
النتيجة:
Passed
لماذا؟
لأن أول شرط تحقق، لذلك لم تنتقل JavaScript إلى الشرط الثاني.
لذلك يجب دائمًا كتابة الشروط من الأكثر تحديدًا إلى الأقل.
الصحيح:
let score = 95;
if (score >= 90) {
console.log("Excellent");
}
else if (score >= 50) {
console.log("Passed");
}
النتيجة:
Excellent
معاملات المقارنة في الجمل الشرطية
نستخدم معاملات المقارنة لإنشاء الشروط.
| العامل | المعنى |
|---|---|
> | أكبر من |
< | أصغر من |
>= | أكبر من أو يساوي |
<= | أصغر من أو يساوي |
== | يساوي |
=== | يساوي تمامًا |
مثال:
let password = "12345";
if (password === "12345") {
console.log("Correct password");
}
else {
console.log("Wrong password");
}
النتيجة:
Correct password
استخدام أكثر من شرط
يمكننا دمج أكثر من شرط باستخدام العوامل المنطقية.
العامل AND (&&)
يستخدم عندما نريد أن تكون جميع الشروط صحيحة.
مثال:
let age = 20;
let hasCard = true;
if (age >= 18 && hasCard === true) {
console.log("Allowed");
}
النتيجة:
Allowed
لأن الشرطين صحيحان.
العامل OR (||)
يستخدم عندما يكفي تحقق شرط واحد فقط.
مثال:
let day = "Friday";
if (day === "Friday" || day === "Saturday") {
console.log("Weekend");
}
النتيجة:
Weekend
لأن أحد الشرطين صحيح.
أخطاء شائعة عند كتابة الشروط
استخدام = بدل ===
خطأ:
if (x = 5)
صحيح:
if (x === 5)
لأن:
= تستخدم لإعطاء قيمة.
=== تستخدم للمقارنة.
نسيان الأقواس
خطأ:
if age > 10
صحيح:
if (age > 10)
الخلاصة
الجمل الشرطية من أهم أساسيات JavaScript، فهي تجعل البرامج قادرة على اتخاذ القرارات وتنفيذ أوامر مختلفة حسب البيانات.
في هذا الدرس تعلمنا:
✅ جملة if
✅ جملة if...else
✅ جملة else if
✅ معاملات المقارنة
✅ العامل &&
✅ العامل ||
بعد إتقان الجمل الشرطية ستكون جاهزًا للانتقال إلى درس جديد عن Loops (الحلقات التكرارية) ثم Functions (الدوال).
استمر في التطبيق وكتابة الأمثلة بنفسك، لأن البرمجة تُتعلم بالممارسة.
Hisham Academy 🚀 | تعلم البرمجة بطريقة عملية
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
تعليم
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_5/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال