العنصر	الوظيفة	التشبيه
HTML	الهيكل والمحتوى	العظام
CSS	الشكل والمظهر	الملابس
JS	التفاعل والمنطق	العقل والأعصاب

🧠 مخرجات الـ JavaScript (مقارنة عملية)

هناك 3 طرق شهيرة لإخراج البيانات، لكن لكل واحدة هدف ومكان استخدام مختلف تماماً.

1️⃣ console.log() - صديق المبرمج

تستخدم لطباعة القيم في الـ Console (اضغط F12) للفهم والتصحيح. المستخدم لا يراها!

console.log("Age:", 20); // مخرجات للمبرمج فقط

2️⃣ window.alert() - النافذة المزعجة

تظهر للمستخدم وتوقف الصفحة بالكامل. ❌ لا تُستخدم في المواقع الاحترافية.

alert("أهلاً بك"); // توقف كل شيء حتى تضغط OK

3️⃣ document.write() - الممنوع استخدامه

تكتب مباشرة في الصفحة، لكنها قد تمسح المحتوى بالكامل إذا استُخدمت بشكل خاطئ.

document.write("Hello"); // تمسح الصفحة في المواقع الحديثة

⚠️ تحذير: دالة document.write() و alert() ممنوعة في المشاريع الحقيقية. البديل هو الـ Console للمبرمج والـ Notifications للمستخدم.

🔥 المقارنة النهائية

الخاصية	console.log	alert	document.write
تظهر لمين؟	المبرمج	المستخدم	المستخدم
بتوقف الصفحة؟	❌	✅	❌
احترافية؟	✅ آمنة	❌ مزعجة	❌ ممنوعة

3. المتغيرات، البيانات، واكتشاف الأخطاء 🛠️

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

1️⃣ كيف تكتشف الخطأ؟ (Debugging) 🐞

الفرق بين المبرمج المحترف والمبتدئ هو سرعة اكتشاف الخطأ. صديقك الأول هو Console (F12).

🚫 Syntax Error

خطأ في الكتابة (نسيت قوس، كتبت كلمة غلط).

🔍 Reference Error

بتنادي على متغير مش موجود أصلاً.

🔢 Type Error

بتعامل رقم كأنه دالة (مثلاً).

💡 نصيحة ذهبية: استخدم console.log(variable) قبل وبعد السطر المشكوك فيه لمراقبة القيم.

2️⃣ أنواع البيانات (Data Types) 🧬

البيانات في JS لها أنواع، لازم تكون عارف إنت بتتعامل مع إيه.

النوع	مثال	الوصف
String	`"Ali"`	نص (بين علامات تنصيص)
Number	`20`, `9.5`	أرقام (بدون تنصيص)
Boolean	`true`	يا صح يا غلط

🧪 معمل اختبار الأنواع

اضغط لمعرفة نوع البيانات الحقيقي:

عملية الجمع

 let num = 4 + 5; //9

عملية الطرح

 let num = 5 – 4; //1

عملية الضرب

 let num = 4 * 5; //20

عملية القسمة

 let num = 5 / 4; //1.25

باقي القسمة

 let num = 5 % 2; //1

الأس

 let num = 4 ** 5; //1024

3️⃣ المتغيرات (Variables) 📦

المتغير هو "علبة" بنشيل فيها البيانات ولها اسم.

🥇 const (الأفضل)

قيمة ثابتة لا تتغير.

const country = "Egypt";

🥈 let (المرن)

قيمة ممكن تتغير عادي.

let age = 20;

🥉 var (القديم)

❌ به مشاكل، لا تستخدمه.

4️⃣ ربط النصوص (Concatenation) 🔗

كيف نركب جملة فيها متغيرات؟

❌ الطريقة القديمة

"My name is " + name + " age " + age

✅ الطريقة الحديثة (Template Literals)

`My name is ${name} age ${age}`

🧠 الفكرة الأساسية (قبل أي كود)

تخيّل واحد واقف على طريق، وعنده قرار:

🌧️ لو الجو مطر ← خُد شمسية

❄️ غير كده لو الجو برد ← إلبس جاكيت

☀️ غير كده ← إطلع عادي

ده بالظبط اللي بتعمله if / else if / else.

1️⃣ if فقط

يعني إيه if؟ يعني: لو الشرط صح ← نفّذ الكود

الشكل العام:

if (condition) { // الكود اللي هيتنفّذ }

condition لازم تكون: true أو false

مثال بسيط جدًا:

let age = 20;
    if (age >= 18) {
        console.log("أنت بالغ");
    }

✔️ لو age = 20 ← الشرط صح ← الكود يتنفّذ

❌ لو age = 15 ← الشرط غلط ← الكود يتجاهل

❗ ملاحظة مهمة: if ملهاش else، يعني لو الشرط غلط مفيش حاجة تحصل.

2️⃣ if / else

يعني إيه؟ لو الشرط صح ← نفّذ كذا | غير كده ← نفّذ حاجة تانية

if (condition) { // لو صح } else { // لو غلط }

مثال واضح:

let temperature = 30;
    if (temperature > 25) {
        console.log("الجو حر");
    } else {
        console.log("الجو مش حر");
    }

الحقيقة المهمة: else ملهاش شرط، بتتنفّذ لما if تكون غلط.

3️⃣ if / else if / else

ليه نحتاجها؟ لما يكون عندك أكتر من احتمال.

مثال حياتي (التقديرات):

let score = 85;
    if (score >= 90) { console.log("ممتاز"); }
    else if (score >= 75) { console.log("جيد جدًا"); }
    else if (score >= 60) { console.log("جيد"); }
    else { console.log("راسب"); }

🔴 مهم جدًا: JavaScript بتشيّك من فوق لتحت، وأول شرط يطلع true يقف.

4️⃣ الشروط (Conditions) بالتفصيل

المقارنة: > , < ,>= , <= ,===(يساوي الأفضل) , !==

المنطقية: && (و) , || (أو) , ! (نفي)

مثال: if (age >= 18 && isStudent) { ... }

5️⃣ Truthy & Falsy (مهم جدًا)

القيم اللي بتعتبر False هي: false, 0, "", null, undefined, NaN

أي حاجة غير كده = True

6️⃣ أخطاء شائعة جدًا (احذر منها)

❌ استخدام = بدل == (خطأ قاتل)
❌ نسيان الأقواس: if age > 18 (غلط)
❌ شرط دايمًا true بسبب استخدام || بدل &&

7️⃣ أمثلة شائعة جدًا

تسجيل دخول - زر مفعّل - التحقق من إدخال الإيميل.

8️⃣ مثال كامل (تطبيقي)

const age = 17;
    if (age >= 18) { console.log("مسموح"); }
    else { console.log("ممنوع"); }

🧠 ملخص (احفظه)

if = لو | else if = احتمال تاني | else = غير كده

الترتيب مهم جدًا.. أول شرط صح يقف.

🎯 خمن الناتج!

اقرأ الكود ده كويس، وتوقع الرقم اللي هيطلع في الـ console:


let totalOrder = 100;
let isVip = true;
let discount = 0;
            
if (totalOrder > 150) {
    discount = 20;
  } 
else if (isVip === true) {
    discount = 10;
  } 
else {
    discount = 0;
 }
            
console.log(discount);

تفتكر قيمة الـ discount هتكون كام؟

🧠 قبل ما نبدأ: يعني إيه switch؟

تخيّل عندك زرار:

🔘 لو ضغط 1 ← يطلع رسالة

🔘 لو ضغط 2 ← يطلع رسالة تانية

🔘 لو ضغط 3 ← رسالة تالتة

جملة switch هي أداة تحكم بديلة أكثر ترتيباً لسلسلة طويلة من if...else if عندما تقارن متغيراً واحداً بقيم ثابتة.

1️⃣ الهيكل الأساسي (Syntax)

تقوم الـ switch بتقييم التعبير مرة واحدة، ثم تقارن الناتج مع قيم case.

switch (expression) {
      case value1:
        // كود الحالة الأولى
        break; // يوقف التنفيذ ويخرج
      case value2:
        // كود الحالة الثانية
        break;
      default:
        // لو مفيش أي حاجة طابقت (مثل else)
    }

2️⃣ مثال عملي (إشارة المرور)

لنفترض أننا نحدد الإجراء بناءً على اللون:

let trafficLight = "red";
switch (trafficLight) {
    case "green": console.log("انطلق"); break;
    case "yellow": console.log("استعد"); break;
    case "red": console.log("توقف"); break;
    default: console.log("إشارة معطلة");
 }

3️⃣ ميزة تجميع الحالات (Grouping)

يمكنك دمج أكثر من case لتنفيذ نفس الكود (مفيد لعدم التكرار).

مثال: هل اليوم عطلة أم عمل؟

case "Friday": 
case "Saturday":
console.log("إجازة 🎉"); break;

⚠️ أخطاء شائعة (احذر منها!)

🚫 نسيان break: سيستمر البرنامج في تنفيذ الحالات التالية حتى لو لم تتطابق!
🚫 تجاهل النوع (===): الـ switch تقارن القيمة والنوع معاً.
🚫 مشاكل النطاق (Scope): لا يمكنك تعريف متغير بنفس الاسم في حالتين مختلفتين إلا باستخدام الأقواس المعقوفة { }.

الصحيح عند تعريف متغيرات:

case 1: {
    let y = 10; 
    break;
    }

لا تعتمد على تحويل الأنواع التلقائي كما يحدث أحياناً في ==. الـ switch تستخدم ===.

                    
let num = "5"; // نص
switch (num) {
    case 5: // رقم
        console.log("هذا رقم 5");
        break;
    case "5": // نص
        console.log("هذا نص 5");
        break;
        }
// الناتج: هذا نص 5 (لأنه تطابق تام)
// لن يتم تنفيذ الحالة الأولى لأن الأنواع مختلفة.

💡 ملخص سريع للنقاط الفنية

✅ default: اختيارية، ويفضل وضعها للقيم غير المتوقعة.

✅ السرعة: قد تكون أسرع قليلاً من if..else في المقارنات الكثيرة.

🎮 تحدي الـ Switch الأسطوري!

لو المتغير rank قيمته هي النص "2"، تفتكر إيه اللي هيطلع؟

let rank = "2";     
switch(rank) {
    case 2: 
    console.log("فضي"); 
    break;
    case "2": 
    console.log("ذهبي"); 
    break;
    default: 
    console.log("مفيش مركز");
    }

اكتب الكلمة اللي هتطلع في الـ console (فضي، ذهبي، مفيش مركز):

🔄 حلقة التكرار (for Loop) في JavaScript

يعني إيه for؟

for معناها ببساطة:

كرر نفس الكود أكتر من مرة بدل ما تكتبه بإيدك

تخيل تقول:
اطبع رقم 1
اطبع رقم 2
اطبع رقم 3
بدل ما تكتب 3 سطور ← نستخدم for.

نظرة سريعة على أنواع for في JS

في JavaScript عندنا أكثر من نوع للحلقة for:

for التقليدية (الكلاسيكية).
for...of للمرور على قيم المصفوفات والـ iterables.
for...in للمرور على مفاتيح الكائنات (خصائص الـ objects).
for await...of للمرور على قيم غير متزامنة (async iterables)

سيتم شرح كل نوع بالتفصيل في المستقبل ولاكن الان سنشرح for التقليدية

🧱 الشكل العام لجملة for

for (initialization; condition; increment) {
        // الكود اللي هيتكرر
    }

دلوقتي نفهم كل جزء لوحده 👇

1️⃣ initialization (البداية)

let i = 0;

ده عداد بيبدأ من قيمة معينة بيتنفّذ مرة واحدة فقط

2️⃣ condition (الشرط)

i < 5;

طول ما الشرط true الـ Loop تكمل أول ما يبقى false → توقف

3️⃣ increment (الزيادة / النقصان)

i++;

بيزوّد العداد بعد كل دورة ممكن: يزيد، ينقص، يزيد بأكتر من 1

🧪 مثال بسيط جدًا

for (let i = 1; i <= 5; i++) {
        console.log(i);
    }

النتيجة: 1 2 3 4 5

إيه اللي حصل خطوة خطوة؟

1️⃣ i = 1 | ,2️⃣ 1 <= 5 → صح | 3️⃣ اطبع 1 | 4️⃣ i++ → بقت 2 | 5️⃣ كرر…

🔁 ترتيب التنفيذ (مهم جدًا)

البداية ← الشرط ← تنفيذ الكود ← الزيادة ← الرجوع للشرط

4️⃣ أمثلة شائعة جدًا

🔹 مثال 1: طباعة من 0 لـ 9

for (let i = 0; i < 10; i++) 
 { console.log(i); }  //0 1 2 3 4 5 6 7 8 9

🔹 مثال 2: العد التنازلي

for (let i = 10; i >= 1; i--) 
 { console.log(i); }  //10 9 8 7 6 5 4 3 2 1

🔹 مثال 3: الزيادة بأكتر من 1

for (let i = 0; i <= 10; i += 2) 
 { console.log(i); }    //0  2  4  6  8  10

🔹 مثال 4: التكرار على Array

let names = ["Ali", "Eslam", "Ahmed"];
for (let i = 0; i < names.length; i++) {
        console.log(names[i]);
    }     // Ali  Eslam  Ahmed

استخدام for للمرور على عناصر مصفوفة

const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
      console.log(colors[i]);
    }  // red  green blue

هذا نمط كلاسيكي وشائع جداً: نستخدم i كـ index للوصول لكل عنصر: colors[i].

استخدام for للمرور على أحرف نص (String)

const name = "Ali";
for (let i = 0; i < name.length; i++) {
      console.log(name[i]);
    }  //A  l  i

النص في JS أيضاً iterable، فنستطيع استخدامه مثل المصفوفة

استخدام for للمرور بالعكس

const arr = [10, 20, 30, 40, 50];
for (let i = arr.length - 1; i >= 0; i--) {
      console.log(arr[i]);
    }  // 50  40  30  20  10

نبدأ من آخر index: arr.length - 1. الشرط i >= 0 وننقص i في كل مرة: i--.

يمكن إخلاء أي جزء من الأجزاء الثلاثة (كلها اختيارية)

مثال: حلقة لا تملك initialization (العداد معرّف من قبل):

let i = 0; 
for (; i < 3; i++) 
 { console.log(i); }

مثال: حلقة لا تملك condition (حلقة لا نهائية تحتاج break):

let i = 0; 
for (;;)
 { console.log(i); i++; if (i >= 3) break; }

5️⃣ for مع شروط داخلها

for (let i = 1; i <= 10; i++)
 { if (i % 2 === 0) 
    { console.log(i + " عدد زوجي"); } 
 }

6️⃣ كلمات مهمة داخل الـ Loop

🔸 break (إيقاف الـ Loop)

for (let i = 1; i <= 10; i++)
 { if (i === 5) 
    { break; } 
    console.log(i); 
 }

⛔ الـ Loop تقف عند 5

🔸 continue (تخطي دورة)

for (let i = 1; i <= 5; i++)
 { if (i === 3)
     { continue; }
      console.log(i); 
 }

⏭️ يتخطى 3

7️⃣ for جوه for (Nested Loop)

for (let i = 1; i <= 3; i++)
 { for (let j = 1; j <= 2; j++)
    { console.log(i, j); } 
 }  // 1 1   1 2   2 1   2 2   3 1  3 2

تستخدم في: الجداول، الشبكات، الألعاب

8️⃣ إمتى أستخدم for؟

لما أعرف عدد التكرارات
مع الأرقام
مع الـ arrays

❌ أخطاء شائعة جدًا (انتبه لها)

1️⃣ نسيان الزيادة (Infinite Loop): ❌ الـ Loop هتفضل شغالة للأبد | ✔️ الحل: i++

2️⃣ شرط غلط: ❌ الشرط false من البداية → مش هيطبع حاجة

3️⃣ استخدام var بدل let: ❌ ممكن يعمل مشاكل | ✔️ استخدم let

4️⃣ نسيان length مع Array: ❌ غلط | ✔️ الصح: i < arr.length

🧠

for = تكرار
3 أجزاء: بداية – شرط – زيادة
تستخدم لما تعرف عدد التكرارات

break توقف | continue تخطي

⚠ انتبه للـ Infinite Loop

🏆 التحدي النهائي: ماذا سينتج؟

اقرأ الكود التالي بتركيز، وحاول معرفة القيمة النهائية للمتغير total:


let numbers = [1, 2, 3, 4, 5];
let total = 0;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        continue; // تخطي الأرقام الزوجية
    }
    total += numbers[i];
 }
console.log(total);

ما هي قيمة total النهائية؟

🔄 1️⃣ while Loop

أهلاً بك مجدداً! بعد أن أتقنت الـ for، حان الوقت لفهم "أبناء العمومة" في عائلة التكرار: while و do...while.

الفرق الجوهري بينهما وبين for هو أننا نستخدم for عندما نعرف عدد مرات التكرار (مثل: كرر 10 مرات).

أما while و do...while نستخدمهما عندما لا نعرف متى سنتوقف، ويعتمد الأمر على شرط معين (مثل: استمر في اللعب حتى يخسر اللاعب).

1. جملة while (الحلقة الحذرة)

هذه الجملة تفكر قبل أن تعمل. هي تتحقق من الشرط أولاً، فإذا كان صحيحاً (true)، تنفذ الكود. إذا كان خاطئاً من البداية، لن تعمل أبداً.

الهيكل (Syntax):

while (condition) {
      // الكود الذي سيتكرر
      // خطوة تحديث (مهمة جداً لتجنب اللانهاية)
    }

مثال بسيط جدًا

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
 }  // 1  2  3  4  5

مثال بسيط (العد التنازلي):

let count = 5;
while (count > 0) {
    console.log("العد: " + count);
    count--; // نقصنا 1 (بدون هذا السطر سيعلق البرنامج للأبد)
 }  // العد : 5 العد : 4 العد : 3 العد : 2 العد : 1

مثال شائع (انتظار حدوث شيء):

تخيل أنك تريد توليد رقم عشوائي وتستمر في المحاولة حتى تحصل على الرقم 6. أنت لا تعرف هل سيحدث ذلك في المحاولة الأولى أم المئة.

let dice = 0;
   // !== هل لا تساوي
 while (dice !== 6)   {
    dice = Math.floor(Math.random() * 6) + 1; // رمي النرد (1-6)
      console.log("حصلت على: " + dice);
    }
    console.log("أخيراً! ظهر الرقم 6.");

2. جملة do...while (الحلقة المتهورة)

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

الهيكل (Syntax):

do {
    // الكود ينفذ هنا مرة واحدة حتماً
    // خطوة التحديث
 } while (condition); // لاحظ الفاصلة المنقوطة هنا ضرورية

متى نستخدمها؟

أفضل مثال هو قوائم "جرب مرة أخرى". أنت تريد عرض القائمة للمستخدم مرة واحدة، ثم تسأله إن كان يريد الاستمرار.

مثال عملي:

let number = 0;
do {
    // لنفترض أننا نزيد الرقم هنا
    number += 5;  // number = number + 5
    console.log("الرقم الحالي: " + number);
 } while (number < 20);

3. الفرق الحاسم (بمثال واحد)

لنرى ماذا يحدث إذا كان الشرط خاطئاً من البداية (false).

في while:

let x = 100;
while (x < 10) {
    console.log("أنا داخل while");
 }

النتيجة: لن يطبع شيئاً أبداً.

في do...while:

let y = 100;
do {
    console.log("أنا داخل do-while");
 } while (y < 10);

النتيجة: سيطبع هذه الجملة مرة واحدة!

4. أخطاء شائعة جداً (تجنبها!)

أ) نسيان تحديث المتغير (Infinite Loop): هذا أشهر خطأ. إذا لم تغير المتغير، سيظل الشرط true للأبد.

ب) وضع الفاصلة المنقوطة ; في المكان الخطأ: وضعها بعد while مباشرة ينهي الـ Loop فوراً ويجمد البرنامج.

ج) نسيان الفاصلة المنقوطة في نهاية do...while: هي مطلوبة في نهاية سطر while(condition);.

د) استخدام do...while عندما يجب التحقق أولاً: قد يسبب خطأ لو البيانات فارغة، استخدم while العادية.

🧠 ملخص للاختيار:

✅ هل تعرف عدد المرات؟ -> استخدم for.
✅ هل عدد المرات مجهول ويجب فحص الشرط أولاً؟ -> استخدم while.
✅ هل يجب تنفيذ الكود مرة واحدة على الأقل مهما كان الشرط؟ -> استخدم do...while.

🧠 اختبار الـ while


    let count = 0;
    let x = 1;
    while (x < 10) {
        x += 3;
        count++;
    }

ما هي القيمة النهائية للمتغير count؟

🎯 اختبار الـ do...while


let score = 10;
let attempts = 0;
do {
    score -= 5;
        attempts++;
  } while (score > 10);

ما هي القيمة النهائية للمتغير attempts؟

1. مقدمة: ما هي لغة JavaScript؟

2. ماذا تفعل JavaScript؟ (مثال التشبيه)

3. كيف تعمل؟

4. أين وكيف تُكتب؟

أولاً: داخل عنصر HTML (Internal)

ثانياً: في ملف خارجي (External) - الطريقة الأفضل

ثالثاً: في الـ Console

5. ملخص سريع

2. المخرجات (Output) والتعليقات (Comments)

1. طرق إخراج البيانات (Output)

أولاً: console.log()

ثانياً: innerHTML

2. التعليقات (Comments)

🧠 مخرجات الـ JavaScript (مقارنة عملية)

1️⃣ console.log() - صديق المبرمج

2️⃣ window.alert() - النافذة المزعجة

3️⃣ document.write() - الممنوع استخدامه

🔥 المقارنة النهائية

3. المتغيرات، البيانات، واكتشاف الأخطاء 🛠️

1️⃣ كيف تكتشف الخطأ؟ (Debugging) 🐞

🚫 Syntax Error

🔍 Reference Error

🔢 Type Error

2️⃣ أنواع البيانات (Data Types) 🧬

🧪 معمل اختبار الأنواع

عملية الجمع

عملية الطرح

عملية الضرب

عملية القسمة

باقي القسمة

الأس

3️⃣ المتغيرات (Variables) 📦

🥇 const (الأفضل)

🥈 let (المرن)

🥉 var (القديم)

4️⃣ ربط النصوص (Concatenation) 🔗

❌ الطريقة القديمة

✅ الطريقة الحديثة (Template Literals)

🧠 الفكرة الأساسية (قبل أي كود)

1️⃣ if فقط

2️⃣ if / else

3️⃣ if / else if / else

4️⃣ الشروط (Conditions) بالتفصيل

5️⃣ Truthy & Falsy (مهم جدًا)

6️⃣ أخطاء شائعة جدًا (احذر منها)

7️⃣ أمثلة شائعة جدًا

8️⃣ مثال كامل (تطبيقي)

🧠 ملخص (احفظه)

🎯 خمن الناتج!

🧠 قبل ما نبدأ: يعني إيه switch؟

1️⃣ الهيكل الأساسي (Syntax)

2️⃣ مثال عملي (إشارة المرور)

3️⃣ ميزة تجميع الحالات (Grouping)

⚠️ أخطاء شائعة (احذر منها!)

💡 ملخص سريع للنقاط الفنية

🎮 تحدي الـ Switch الأسطوري!

🔄 حلقة التكرار (for Loop) في JavaScript

يعني إيه for؟

نظرة سريعة على أنواع for في JS

🧱 الشكل العام لجملة for

1️⃣ initialization (البداية)

2️⃣ condition (الشرط)

3️⃣ increment (الزيادة / النقصان)

🧪 مثال بسيط جدًا

🔁 ترتيب التنفيذ (مهم جدًا)

4️⃣ أمثلة شائعة جدًا

استخدام for للمرور على عناصر مصفوفة

استخدام for للمرور على أحرف نص (String)

استخدام for للمرور بالعكس

يمكن إخلاء أي جزء من الأجزاء الثلاثة (كلها اختيارية)

5️⃣ for مع شروط داخلها

6️⃣ كلمات مهمة داخل الـ Loop

7️⃣ for جوه for (Nested Loop)

8️⃣ إمتى أستخدم for؟

❌ أخطاء شائعة جدًا (انتبه لها)

🧠

🏆 التحدي النهائي: ماذا سينتج؟

🔄 1️⃣ while Loop

1. جملة while (الحلقة الحذرة)

الهيكل (Syntax):