04 – Bedingungen 🔀

Wie dein Programm auf unterschiedliche Situationen reagiert

🎯 1. Was sind Bedingungen?

Bedingungen erlauben deinem Programm, Entscheidungen zu treffen. Basierend auf dem Ergebnis (true oder false) wird unterschiedlicher Code ausgeführt.

📊 2. Übersicht: Arten von Bedingungen

Syntax	Verwendung	Beispiel
`if`	Eine Bedingung prüfen	`if (alter >= 18) { ... }`
`if ... else`	Entweder – oder	`if (punkte >= 50) { ... } else { ... }`
`if ... else if ... else`	Mehrere Fälle prüfen	`if (note == 1) { ... } else if (note == 2) { ... } else { ... }`
`switch`	Viele feste Werte vergleichen	`switch(tag) { case "Mo": ... }`

„Die Reihenfolge ist strikt: if → (optional mehrere else if) → (optional ein else). Sobald eine Bedingung true ist, werden alle folgenden Fälle übersprungen.“

🎯 3. Einleitung & W3Schools

In diesem Kapitel lernst du, wie du mit if, else und logischen Operatoren komplexe Entscheidungen programmierst – sicher und lesbar.

🔗 W3Schools – JavaScript If...Else

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, wann man if...else if...else und wann switch verwendet – und warum man immer geschweifte Klammern setzen sollte.

✅ 5. Einfaches `if`

Führt Code aus, nur wenn die Bedingung true ist.

function demoIf() {
  const punkte = 85;
  let nachricht = "Prüfung beendet.";

  if (punkte >= 50) {
    nachricht += " Du hast bestanden! 🎉";
  }

  document.getElementById("ausgabe-if").innerHTML = 
    `<p>Punkte: <strong>${punkte}</strong></p>
     <p>${nachricht}</p>`;
}

🔀 6. `if ... else`

Entweder – oder: Einer von zwei Blöcken wird ausgeführt.

function demoIfElse() {
  const alter = 16;

  let zugang;
  if (alter >= 18) {
    zugang = "Zugang erlaubt. 🍺";
  } else {
    zugang = "Zugang verweigert. 🧃";
  }

  document.getElementById("ausgabe-if-else").innerHTML = 
    `<p>Alter: <strong>${alter}</strong></p>
     <p>${zugang}</p>`;
}

🔢 7. `if ... else if ... else`

Prüft Bedingungen von oben nach unten – der erste passende Fall wird ausgeführt.

function demoIfElseIf() {
  const punkte = 72;
  let bewertung;

  if (punkte >= 90) {
    bewertung = "Sehr gut (1)";
  } else if (punkte >= 80) {
    bewertung = "Gut (2)";
  } else if (punkte >= 70) {
    bewertung = "Befriedigend (3)";
  } else if (punkte >= 60) {
    bewertung = "Genügend (4)";
  } else {
    bewertung = "Nicht genügend (5) ❌";
  }

  document.getElementById("ausgabe-if-elseif").innerHTML = 
    `<p>Punkte: <strong>${punkte}</strong></p>
     <p>Bewertung: <strong>${bewertung}</strong></p>`;
}

🔗 8. Kombinierte Bedingungen

Mit && (UND) und || (ODER) kannst du mehrere Prüfungen verknüpfen.

function demoLogikInIf() {
  const alter = 17;
  const hatEintrittskarte = true;

  let resultat;
  if (alter >= 18 && hatEintrittskarte) {
    resultat = "Eintritt erlaubt.";
  } else if (alter < 18 && hatEintrittskarte) {
    resultat = "Eintritt nur mit Erziehungsberechtigtem.";
  } else {
    resultat = "Kein Eintritt – fehlende Karte oder Alter.";
  }

  document.getElementById("ausgabe-logik-if").innerHTML = 
    `<p>Alter: ${alter}, Karte: ${hatEintrittskarte ? 'ja' : 'nein'}</p>
     <p>${resultat}</p>`;
}

⚠️ 9. Wichtige Regeln für Bedingungen

Immer geschweifte Klammern {} verwenden – auch bei einer Zeile!
Nie = in Bedingungen verwenden → das ist Zuweisung, nicht Vergleich!
Vermeide tiefe Verschachtelung – sie macht Code schwer lesbar.

// ❌ Schlecht: keine Klammern
if (x > 5)
  console.log("Groß");
  y = 10; // ← Diese Zeile gehört NICHT zur if-Anweisung!

// ✅ Gut: immer Klammern
if (x > 5) {
  console.log("Groß");
  y = 10;
}