05 – Schleifen 🔁

🎯 1. Was sind Schleifen?

Schleifen führen einen Code-Block mehrfach aus – solange eine Bedingung erfüllt ist oder für eine bestimmte Anzahl von Durchläufen.

📊 2. Übersicht: Arten von Schleifen

🎯 3. Einleitung & W3Schools

In diesem Kapitel lernst du, wie du mit Schleifen repetitive Aufgaben automatisierst – vom Hochzählen bis zum Verarbeiten von Daten.

🔗 W3Schools – JavaScript Loops

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, wann man for und wann while verwendet – und warum man aufpassen muss, dass Schleifen nicht endlos laufen.

🔢 5. for-Schleife

Ideal für festgelegte Anzahl von Durchläufen (z. B. Zählen, Arrays durchlaufen).

function demoFor() {
  let ausgabe = "<ol>";
  for (let i = 1; i <= 5; i++) {
    ausgabe += `<li>Durchlauf ${i}</li>`;
  }
  ausgabe += "</ol>";
  document.getElementById("ausgabe-for").innerHTML = ausgabe;
}

🔄 6. while-Schleife

Führt Code aus, solange eine Bedingung true ist.

function demoWhile() {
  let i = 3;
  let ausgabe = "<ul>";
  while (i > 0) {
    ausgabe += `<li>Noch ${i} Sekunden...</li>`;
    i--; // Update – sonst Endlosschleife!
  }
  ausgabe += "<li>Start! 🚀</li></ul>";
  document.getElementById("ausgabe-while").innerHTML = ausgabe;
}

🎲 7. do...while-Schleife

Führt den Code-Block mindestens einmal aus – dann wird die Bedingung geprüft.

function demoDoWhile() {
  let versuch = 0;
  let zahl;
  let ausgabe = "";

  do {
    versuch++;
    zahl = Math.floor(Math.random() * 10) + 1; // Zufallszahl 1–10
    ausgabe += `Versuch ${versuch}: Zahl = ${zahl}<br>`;
  } while (zahl !== 7 && versuch < 5);

  ausgabe += (zahl === 7)
    ? "<p>🎉 Erfolg! Die Zahl 7 wurde gefunden!</p>"
    : "<p>❌ Kein Glück – 5 Versuche ohne 7.</p>";

  document.getElementById("ausgabe-do-while").innerHTML = ausgabe;
}

🔀 8. switch-Anweisung

Die switch-Anweisung ist eine Alternative zu langen if...else if...else-Ketten, wenn du feste Werte vergleichst (z. B. Menü-Auswahl, Wochentage).

⚠️ Wichtig: Vergiss nicht break! Ohne break „fällt“ der Code in den nächsten Fall – das nennt man Fallthrough.

function demoSwitch() {
  const tag = 3; // 1=Mo, 2=Di, ..., 7=So
  let wochentag;

  switch (tag) {
    case 1:
      wochentag = "Montag";
      break; // ⚠️ Ohne break: fällt in case 2!
    case 2:
      wochentag = "Dienstag";
      break;
    case 3:
      wochentag = "Mittwoch";
      break;
    case 4:
      wochentag = "Donnerstag";
      break;
    case 5:
      wochentag = "Freitag";
      break;
    case 6:
      wochentag = "Samstag";
      break;
    case 7:
      wochentag = "Sonntag";
      break;
    default:
      wochentag = "Ungültiger Tag";
  }

  document.getElementById("ausgabe-switch").innerHTML = 
    `<p>Tag-Nummer: <strong>${tag}</strong></p>
     <p>Wochentag: <strong>${wochentag}</strong></p>`;
}