الجزء السادس – الحلقات التكرارية (Loops) في JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 127 2 دقائق

✅ الحلقات التكرارية (Loops) في JavaScript

🌀 ليه بنستخدم الحلقات التكرارية؟

بنستخدم الـ Loops لما نحتاج نكرر نفس الكود مرات كتير بشكل أوتوماتيكي، زي:

طباعة أرقام من 1 لـ 100.
المرور على عناصر في قائمة.
تكرار أمر لحد ما يحصل شرط معين.

✳️ أولًا: `for` loop

✅ الشكل العام

for (البداية; الشرط; التحديث) {
  // الكود اللي هيتنفذ كل مرة طالما الشرط صح
}

✅ مثال

for (let i = 1; i <= 5; i++) {
  console.log("العدد:", i);
}

بيبدأ من i = 1
كل مرة بيتحقق الشرط i <= 5
بعد كل تكرار بيزود i بـ 1
لما يوصل i = 6 الشرط بيبقى false، فيقف
✳️ ثانيًا: while loop

✅ الشكل العام

while (شرط) {
  // الكود اللي هيتكرر طالما الشرط true
}

✅ مثال

let i = 1;

while (i <= 5) {
  console.log("العدد من while:", i);
  i++;
}

لازم تغير قيمة المتغير جوا الـ loop علشان ميعملش حلقة لا نهائية

✳️ ثالثًا: `do...while` loop

دي شبه while، لكن الفرق إنها بتنفذ مرة واحدة على الأقل حتى لو الشرط غلط.

✅ الشكل العام

do {
  // الكود
} while (شرط);

✅ مثال

let x = 6;

do {
  console.log("أنا داخل do...while");
  x++;
} while (x < 5); // الشرط غلط من الأول، لكن الكود اتنفذ مرة واحدة

✳️ رابعًا: break و continue

🔹 `break`: بتوقف الحلقة تمامًا

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // يوقف عند 5
  }
  console.log("Break loop:", i);
}

🔹 continue: بتتخطى المرة دي وتكمل

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // يتخطى الرقم 3
  }
  console.log("Continue loop:", i);
}

✅ 💯 مثال كامل بيجمع كل الأنواع:

<!DOCTYPE html>
<html>
<head>
  <title>Loops in JavaScript</title>
</head>
<body>
  <h2>افتح الكونسول (F12) علشان تشوف الحلقات</h2>

  <script>
    // for loop
    console.log("🔁 for loop:");
    for (let i = 1; i <= 5; i++) {
      console.log("for:", i);
    }

    // while loop
    console.log("🔁 while loop:");
    let j = 1;
    while (j <= 5) {
      console.log("while:", j);
      j++;
    }

    // do...while loop
    console.log("🔁 do...while loop:");
    let k = 6;
    do {
      console.log("do...while:", k);
      k++;
    } while (k <= 5);

    // break example
    console.log("⛔ break example:");
    for (let a = 1; a <= 10; a++) {
      if (a === 4) {
        break;
      }
      console.log("break:", a);
    }

    // continue example
    console.log("➡️ continue example:");
    for (let b = 1; b <= 5; b++) {
      if (b === 3) {
        continue;
      }
      console.log("continue:", b);
    }
  </script>
</body>
</html>

كل جزء في الكود بيشرح نفسه، ولما تشغله وتشوف الكونسول هتفهم كل نوع من الـ loops والفرق بينهم بشكل عملي.