الدرس 3: العمليات والشروط

➕ العمليات الحسابية الأساسية والمتقدمة

JavaScript تدعم جميع العمليات الحسابية الأساسية التي تعرفها من الرياضيات. لكن هناك بعض الفروق الدقيقة التي يجب فهمها لتجنب الأخطاء.

العمليات الأساسية

let a = 10;
let b = 3;

console.log(a + b);   // 13  — الجمع
console.log(a - b);   // 7   — الطرح
console.log(a * b);   // 30  — الضرب
console.log(a / b);   // 3.333... — القسمة (دائماً float)
console.log(a % b);   // 1   — باقي القسمة (Modulo)
console.log(a ** b);  // 1000 — الأس (Exponentiation)
            

عمليات الزيادة والنقصان (Increment/Decrement)

هذه العمليات مختصرة لزيادة أو إنقاص قيمة المتغير بمقدار 1. الفرق بين ++x و x++ مهم جداً:

let x = 5;

// postfix: يُرجع القيمة أولاً ثم يزيد
console.log(x++);  // 5 (يُطبع 5 ثم يصبح x = 6)
console.log(x);    // 6

let y = 5;
// prefix: يزيد أولاً ثم يُرجع القيمة
console.log(++y);  // 6 (يزيد أولاً ثم يُطبع 6)
            

العملية	الرمز	المثال	النتيجة
الجمع	`+`	`5 + 3`	`8`
الطرح	`-`	`5 - 3`	`2`
الضرب	`*`	`5 * 3`	`15`
القسمة	`/`	`10 / 3`	`3.333...`
باقي القسمة	`%`	`10 % 3`	`1`
الأس	`**`	`2 ** 3`	`8`

⚠️ فخ الجمع مع النصوص:

"5" + 3 = "53" (string) — لأن + مع string يُجرى concatenation. لكن "5" - 3 = 2 (number) — لأن الطرح لا يعمل إلا مع أرقام فيحوّل النص تلقائياً.

📝 عمليات الإسناد المركبة

بدلاً من كتابة x = x + 5، يمكنك استخدام الإسناد المركب x += 5. هذه الطريقة أقصر وأنظف:

let score = 10;

score += 5;   // score = score + 5  → 15
score -= 3;   // score = score - 3  → 12
score *= 2;   // score = score * 2  → 24
score /= 4;   // score = score / 4  → 6
score %= 4;   // score = score % 4  → 2
            

🔀 عمليات المقارنة: == vs ===

عمليات المقارنة تُرجع true أو false وتُستخدم في جمل الشرط. الفرق بين == و === هو من أهم المفاهيم في JavaScript.

الفرق الجوهري: Loose Equality vs Strict Equality

// ==  (Loose Equality) — يقارن القيمة فقط مع تحويل نوع ضمني
5 == "5";      // true — حوّل "5" إلى number
0 == false;   // true — حوّل false إلى 0
"" == false;  // true — حوّل "" إلى 0 و false إلى 0
null == undefined;  // true — استثناء غريب!

// === (Strict Equality) — يقارن القيمة والنوع بدون تحويل
5 === "5";     // false — نوع مختلف (number vs string)
0 === false;  // false — نوع مختلف (number vs boolean)
null === undefined; // false — نوع مختلف
            

العامل	الاسم	يقارن	يحوّل النوع	متى تستخدم
`==`	Loose Equality	القيمة فقط	✓ نعم	❌ تجنبها
`===`	Strict Equality	القيمة + النوع	✗ لا	✓ دائماً

✅ القاعدة الذهبية:

استخدم === و !== دائماً. == يسبب أخطاء صعبة التتبع بسبب التحويل الضمني الغريب. معظم فرق التطوير تحظر == تماماً باستخدام ESLint.

عمليات المقارنة الأخرى

> 3;       // true — أكبر من
< 3;       // false — أصغر من
>= 5;     // true — أكبر أو يساوي
<= 4;     // false — أصغر أو يساوي
!= "5";   // false — لا يساوي (loose)
!== "5";  // true — لا يساوي (strict) ← استخدم هذا
            

🔗 العمليات المنطقية: &&, ||, !

العمليات المنطقية تُستخدم لدمج عدة شروط معاً. هي أساسية في بناء أي تطبيق حقيقي.

&& (AND) — "و" المنطقية

تُرجع true فقط إذا كان كلاهما صحيحاً:

let hasID = true;
let isAdult = true;

// الدخول مسموح فقط إذا كان لديه بطاقة AND بالغ
if (hasID && isAdult) {
    console.log("✅ مسموح بالدخول");
} else {
    console.log("❌ ممنوع");
}
            

|| (OR) — "أو" المنطقية

تُرجع true إذا كان واحد على الأقل صحيحاً:

let hasEmail = false;
let hasPhone = true;

// التسجيل مسموح إذا كان لديه بريد OR هاتف
if (hasEmail || hasPhone) {
    console.log("✅ يمكن التسجيل");
}
            

! (NOT) — "ليس" المنطقية

تُعكس القيمة المنطقية:

let isBanned = false;

// إذا لم يكن محظوراً
if (!isBanned) {
    console.log("✅ المستخدم نشط");
}

// !! لتحويل أي قيمة إلى boolean
console.log(!!"hello");  // true
console.log(!!"");      // false
            

A	B	A && B	A \|\| B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

❓ جمل الشرط if / else if / else

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

البنية الأساسية

let age = 18;

if (age >= 18) {
    console.log("🧑 بالغ");
} else if (age >= 13) {
    console.log("👦 مراهق");
} else {
    console.log("👶 طفل");
}
            

جملة if متداخلة (Nested if)

أحياناً تحتاج لفحص شرط داخل شرط آخر:

let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn) {
    console.log("مرحباً بالمستخدم");
    
    if (isAdmin) {
        console.log("🛡️ لوحة التحكم متاحة");
    } else {
        console.log("👤 صفحة المستخدم العادي");
    }
} else {
    console.log("🔒 يرجى تسجيل الدخول");
}
            

🎯 الشرط المختصر Ternary Operator

عندما يكون الشرط بسيطاً (قيمتان فقط)، يمكنك استخدام Ternary Operator كبديل مختصر لـ if/else:

// بدلاً من:
let status;
if (age >= 18) {
    status = "بالغ";
} else {
    status = "قاصر";
}

// استخدم Ternary:
let status = age >= 18 ? "بالغ" : "قاصر";

// يمكن تداخلها (لكن لا تبالغ):
let category = age < 13 ? "طفل" : age < 20 ? "مراهق" : "بالغ";
            

⚠️ تحذير:

لا تستخدم Ternary متداخلة معقدة — تصبح صعبة القراءة. إذا احتجت أكثر من مستوى واحد، استخدم if/else العادي.

🔄 جملة switch كبديل لـ if المتعدد

عندما تُقارن نفس المتغير بقيم متعددة، switch أنظف وأوضح من سلسلة if/else if:

let day = "السبت";

switch (day) {
    case "السبت":
        console.log("📅 بداية الأسبوع");
        break;
    case "الجمعة":
        console.log("🎉 عطلة نهاية الأسبوع");
        break;
    case "الأحد":
    case "الاثنين":
    case "الثلاثاء":
    case "الأربعاء":
    case "الخميس":
        console.log("💼 يوم عمل");
        break;
    default:
        console.log("❓ يوم غير معروف");
}
            

❌ خطأ شائع خطير:

نسيان break يسبب fall-through — ينفذ كل الحالات التالية حتى يجد break! هذا من أشهر أخطاء المبتدئين.

🎭 القيم Truthy و Falsy

في JavaScript، أي قيمة يمكن تحويلها إلى boolean. القيم التالية تعتبر falsy (تُعامل كـ false):

// القيم Falsy:
false
0
""        // string فارغ
null
undefined
NaN

// كل شيء آخر Truthy:
"hello"     // string غير فارغ
42          // أي رقم غير صفر
[]          // مصفوفة فارغة
{}          // كائن فارغ
"0"         // string "0" هو truthy!
            

// استخدام عملي:
let username = "";

if (!username) {
    console.log("⚠️ يرجى إدخال اسم المستخدم");
}

// Short-circuit evaluation
let displayName = username || "زائر";  // إذا username falsy، استخدم "زائر"
            

💼 أمثلة واقعية من التطبيقات

هذه أمثلة من تطبيقات حقيقية تستخدم العمليات الحسابية والشروط:

1. حساب الخصم في متجر إلكتروني

function calculatePrice(price, quantity, isMember) {
    let total = price * quantity;
    
    // خصم 20% للأعضاء
    if (isMember) {
        total = total * 0.8;
    }
    
    // خصم إضافي 10% إذا اشترى أكثر من 5 قطع
    if (quantity >= 5) {
        total = total * 0.9;
    }
    
    return total.toFixed(2);
}

console.log(calculatePrice(100, 3, true));   // "240.00"
console.log(calculatePrice(100, 6, false));  // "540.00"
            

2. التحقق من صحة نموذج التسجيل

function validateForm(email, password, confirmPassword) {
    if (!email || !password) {
        return "❌ جميع الحقول مطلوبة";
    }
    
    if (!email.includes("@")) {
        return "❌ بريد إلكتروني غير صالح";
    }
    
    if (password.length < 8) {
        return "❌ كلمة المرور يجب أن تكون 8 أحرف على الأقل";
    }
    
    if (password !== confirmPassword) {
        return "❌ كلمتا المرور غير متطابقتين";
    }
    
    return "✅ التسجيل ناجح!";
}
            

🚀 الخطوة التالية: الحلقات (Loops)

في الدرس الرابع، ستتعلم كيف تكرر العمليات باستخدام:

🔄 for loop: تكرار بعدد محدد
🔄 while loop: تكرار حتى تحقق شرط
🔄 for...of: تكرار عناصر المصفوفة
🔄 break و continue: التحكم في التكرار

📚 مصادر إضافية:

🔢 العمليات الحسابية والشروط في JavaScript: الدليل الشامل

📋 محتويات الدرس