03 – Operatoren ⚖️

Wie Werte verarbeitet, verglichen und kombiniert werden

🎯 1. Was sind Operatoren?

Operatoren verarbeiten Werte (Operanden) und erzeugen ein neues Ergebnis. Sie sind die Grundbausteine jeder Berechnung, Entscheidung und Logik in JavaScript.

Beispiele: - 5 + 3 → + ist der Operator, 5 und 3 sind Operanden - alter >= 18 → >= ist der Operator, alter und 18 sind Operanden

📊 2. Übersicht: Arten von Operatoren

Typ	Beispiele	Beschreibung
Arithmetisch	`+`, `-`, `*`, `/`, `%`	Mathematische Berechnungen
Zuweisung	`=`, `+=`, `-=`, `*=`	Werte zuweisen oder verändern
Vergleich	`==`, `===`, `<`, `>=`	Werte vergleichen – Ergebnis ist `true` oder `false`
Logisch	`&&`, `\|\|`, `!`	Bedingungen kombinieren
Ternär	`Bedingung ? wahr : falsch`	Kurzform für einfache `if/else`-Entscheidungen

🎯 3. Einleitung & W3Schools

In diesem Kapitel lernst du alle wichtigen Operatoren kennen – mit Fokus auf Sicherheit (=== statt ==) und Lesbarkeit.

🔗 W3Schools – JavaScript Operators

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um den Unterschied zwischen == und === zu erklären – und warum der ternäre Operator manchmal besser ist als eine if/else-Abfrage.

🧮 5. Arithmetische Operatoren

Berechnungen mit Zahlen – aber Vorsicht: + verbindet auch Texte!

function demoArithmetik() {
  const zahl1 = 10;
  const zahl2 = 3;
  const text1 = "Hallo";
  const text2 = "Welt";

  document.getElementById("ausgabe-arithmetik").innerHTML = 
    `<ul>
      <li>${zahl1} + ${zahl2} = <strong>${zahl1 + zahl2}</strong> (Addition)</li>
      <li>${zahl1} - ${zahl2} = <strong>${zahl1 - zahl2}</strong> (Subtraktion)</li>
      <li>${zahl1} * ${zahl2} = <strong>${zahl1 * zahl2}</strong> (Multiplikation)</li>
      <li>${zahl1} / ${zahl2} = <strong>${zahl1 / zahl2}</strong> (Division)</li>
      <li>${zahl1} % ${zahl2} = <strong>${zahl1 % zahl2}</strong> (Rest bei Division)</li>
      <li>"${text1}" + "${text2}" = <strong>"${text1 + text2}"</strong> (Textverkettung!)</li>
      <li class="warnung">⚠️ "5" + 3 = "${"5" + 3}" (nicht 8!) – Vorsicht bei gemischten Typen!</li>
    </ul>`;
}

🔄 6. Zuweisungsoperatoren

Kurzschreibweisen, um Werte zu verändern – spart Schreibarbeit!

function demoZuweisung() {
  let x = 5;
  x += 3;  // gleich wie: x = x + 3;
  let y = 10;
  y *= 2;  // gleich wie: y = y * 2;

  document.getElementById("ausgabe-zuweisung").innerHTML = 
    `<ul>
      <li>Start: x = 5 → nach <code>x += 3</code>: <strong>${x}</strong></li>
      <li>Start: y = 10 → nach <code>y *= 2</code>: <strong>${y}</strong></li>
    </ul>`;
}

⚠️ 7. Vergleichsoperatoren – Achtung: `==` vs `===`

== vergleicht nur den Wert (mit automatischer Typumwandlung!), === vergleicht Wert und Typ (sicher!).

Beispiel: 5 == "5" ist true, aber 5 === "5" ist false.

function demoVergleich() {
  const ergebnis1 = (5 == "5");   // true – lockere Gleichheit
  const ergebnis2 = (5 === "5");  // false – strenge Gleichheit

  document.getElementById("ausgabe-vergleich").innerHTML = 
    `<ul>
      <li><code>5 == "5"</code> → <strong>${ergebnis1}</strong> (⚠️ Typumwandlung!)</li>
      <li><code>5 === "5"</code> → <strong>${ergebnis2}</strong> (✅ sicherer Vergleich)</li>
      <li class="regel">💡 Immer <code>===</code> und <code>!==</code> verwenden!</li>
    </ul>`;
}

🔗 8. Logische Operatoren

Kombinieren von Bedingungen:

&& (UND): Beide Bedingungen müssen true sein
|| (ODER): Mindestens eine Bedingung muss true sein
! (NICHT): Kehrt den Wahrheitswert um

function demoLogik() {
  const a = true;
  const b = false;

  document.getElementById("ausgabe-logik").innerHTML = 
    `<ul>
      <li><code>${a} && ${b}</code> (UND) → <strong>${a && b}</strong></li>
      <li><code>${a} || ${b}</code> (ODER) → <strong>${a || b}</strong></li>
      <li><code>!${a}</code> (NICHT) → <strong>${!a}</strong></li>
    </ul>`;
}

❓ 9. Ternärer Operator – Kurzform für if/else

Der ternäre Operator ist eine kompakte Alternative zu einfachen if/else-Blöcken.

// Syntax
Bedingung ? Ausdruck_wenn_wahr : Ausdruck_wenn_falsch

// Beispiel
const zugang = (alter >= 18) ? "erlaubt" : "nicht erlaubt";

✅ Vorteil: Sehr kompakt für einfache Entscheidungen.
❌ Nachteil: Bei komplexen Bedingungen wird der Code unleserlich – dann lieber if...else verwenden!

function demoTernaer() {
  const alter = 17;
  const zugang = (alter >= 18) ? "erlaubt" : "nicht erlaubt";

  document.getElementById("ausgabe-ternär").innerHTML = 
    `<p>Alter: <strong>${alter}</strong></p>
     <p>Zugang: <strong>${zugang}</strong> (mit ternärem Operator)</p>`;
}