Appearance
Kapitel 6: Operatoren
Operatoren sind Werkzeuge zum Rechnen, Vergleichen und Verknüpfen von Werten. In diesem Kapitel lernen Sie alle wichtigen Operatoren kennen.
6.1 Arithmetische Operatoren: + - * / % ++ --
Diese Operatoren werden für mathematische Berechnungen verwendet.
Grundlegende Arithmetik
javascript
let a = 10;
let b = 3;
console.log(a + b); // 13 (Addition)
console.log(a - b); // 7 (Subtraktion)
console.log(a * b); // 30 (Multiplikation)
console.log(a / b); // 3.333... (Division)
console.log(a % b); // 1 (Modulo - Rest der Division)Modulo-Operator (%) - Sehr wichtig!
javascript
// Gerade oder ungerade Zahl prüfen
console.log(10 % 2); // 0 (gerade)
console.log(11 % 2); // 1 (ungerade)
// Alle 5 Schritte etwas tun
for (let i = 0; i < 20; i++) {
if (i % 5 === 0) {
console.log(i, "ist durch 5 teilbar");
}
}Inkrement (++) und Dekrement (--)
javascript
let x = 5;
// Post-Inkrement (gibt alten Wert zurück, dann erhöhen)
console.log(x++); // 5
console.log(x); // 6
// Pre-Inkrement (erhöhen, dann neuen Wert zurückgeben)
let y = 5;
console.log(++y); // 6
console.log(y); // 6
// Dekrement (verringern)
let z = 5;
console.log(--z); // 4
console.log(z--); // 4
console.log(z); // 3Praxis-Beispiel: Preisberechnung
javascript
let preis = 100;
let mwst = 0.19;
let rabatt = 10;
let preisNachRabatt = preis - rabatt;
let endpreis = preisNachRabatt * (1 + mwst);
console.log("Endpreis:", endpreis.toFixed(2), "€");6.2 Zuweisungsoperatoren: = += -= *= /=
Zuweisungsoperatoren kombinieren eine Operation mit einer Zuweisung.
Grundlegende Zuweisung
javascript
let x = 10; // Einfache ZuweisungVerkürzte Schreibweise
javascript
let punkte = 100;
// Lang (ausführlich):
punkte = punkte + 50;
// Kurz (verkürzt):
punkte += 50; // Gleiches wie: punkte = punkte + 50
// Alle Varianten:
let y = 10;
y += 5; // y = y + 5 → 15
y -= 3; // y = y - 3 → 12
y *= 2; // y = y * 2 → 24
y /= 4; // y = y / 4 → 6
y %= 4; // y = y % 4 → 2Praxis-Beispiel: Punktestand
javascript
let punkte = 0;
// Spieler bekommt Punkte
punkte += 100; // +100 Punkte
console.log(punkte); // 100
// Spieler verliert Punkte
punkte -= 30; // -30 Punkte
console.log(punkte); // 70
// Bonus-Multiplikator
punkte *= 2; // x2
console.log(punkte); // 1406.3 Vergleichsoperatoren: > < >= <= == === != !==
Vergleichsoperatoren geben einen Boolean-Wert (true oder false) zurück.
Einfache Vergleiche
javascript
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 3); // false== vs === (SEHR WICHTIG!)
javascript
// == (lose Gleichheit - konvertiert Typen)
console.log(5 == "5"); // true ⚠️ (String "5" wird zu Number 5 konvertiert)
console.log(1 == true); // true ⚠️ (true wird zu 1 konvertiert)
console.log(0 == false); // true ⚠️ (false wird zu 0 konvertiert)
// === (strenge Gleichheit - kein Typen-Check)
console.log(5 === "5"); // false ✅ (verschiedene Typen)
console.log(1 === true); // false ✅
console.log(0 === false); // false ✅Empfehlung: Immer === verwenden!
Ungleich-Operatoren
javascript
// != (lose Ungleichheit)
console.log(5 != "5"); // false ⚠️
// !== (strenge Ungleichheit) - EMPFOHLEN!
console.log(5 !== "5"); // true ✅Praxis-Beispiel: Altersprüfung
javascript
let alter = 18;
if (alter >= 18) {
console.log("Sie sind volljährig!");
} else {
console.log("Sie sind minderjährig.");
}
// Passwort-Länge prüfen
let passwort = "12345";
if (passwort.length >= 8) {
console.log("Passwort ist sicher.");
} else {
console.log("Passwort ist zu kurz!");
}6.4 Logische Operatoren: && || ! (Und/Oder/Nicht)
Logische Operatoren verknüpfen mehrere Bedingungen.
UND-Operator (&&)
Beide Bedingungen müssen true sein.
javascript
let alter = 25;
let hatFuehrerschein = true;
if (alter >= 18 && hatFuehrerschein) {
console.log("Sie dürfen Auto fahren.");
} else {
console.log("Sie dürfen nicht Auto fahren.");
}Wahrheitstabelle für &&:
| A | B | A && B |
|---|---|---|
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |
ODER-Operator (||)
Mindestens eine Bedingung muss true sein.
javascript
let istWochenende = true;
let istFeiertag = false;
if (istWochenende || istFeiertag) {
console.log("Keine Arbeit heute!");
}Wahrheitstabelle für ||:
| A | B | A || B |
|---|---|---|
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |
NICHT-Operator (!)
Kehrt den Wahrheitswert um.
javascript
let istEingeloggt = false;
if (!istEingeloggt) {
console.log("Bitte loggen Sie sich ein.");
}
// Beispiele:
console.log(!true); // false
console.log(!false); // true
console.log(!!"Hallo"); // true (Truthy zu Boolean)Praxis-Beispiel: Rabatt-Berechnung
javascript
let alter = 65;
let istStudent = false;
let istMitglied = true;
// Rabatt, wenn: alter > 60 ODER Student ODER Mitglied
if (alter > 60 || istStudent || istMitglied) {
console.log("Sie erhalten 20% Rabatt!");
} else {
console.log("Kein Rabatt verfügbar.");
}6.5 Operator-Precedence (Einfache Merkregel)
Wie in der Mathematik: Manche Operatoren werden vor anderen ausgewertet.
Die wichtigsten Regeln
javascript
// 1. Klammern zuerst
let ergebnis1 = (2 + 3) * 4; // 20 (nicht 14!)
// 2. Multiplikation/Division vor Addition/Subtraktion
let ergebnis2 = 2 + 3 * 4; // 14 (nicht 20!)
// 3. Vergleiche vor logischen Operatoren
let ergebnis3 = 5 > 3 && 2 < 4; // true && true = true
// 4. Zuweisung (=) ist immer am schwächsten
let x = 5 + 3 * 2; // x = 11 (nicht 16!)Tabelle der Operator-Precedence (vereinfacht)
| Precedence | Operatoren |
|---|---|
| 1 (höchste) | (), [], . |
| 2 | !, ++, -- |
| 3 | *, /, % |
| 4 | +, - |
| 5 | >, <, >=, <= |
| 6 | ==, ===, !=, !== |
| 7 | && |
| 8 | || |
| 9 (niedrigste) | =, +=, -=, etc. |
Tipps zur Vermeidung von Fehlern
javascript
// Unklar:
let ergebnis = 5 + 3 * 2 > 10 && true;
// Klar (mit Klammern):
let ergebnis = ((5 + (3 * 2)) > 10) && true;
// Noch besser: Auf mehrere Zeilen aufteilen
let summe = 5 + (3 * 2);
let istGross = summe > 10;
let ergebnis = istGross && true;📝 Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Arithmetische Operatoren:
+,-,*,/,%,++,-- - ✅ Zuweisungsoperatoren:
=,+=,-=,*=,/= - ✅ Vergleichsoperatoren:
>,<,>=,<=,===,!==(Immer===verwenden!) - ✅ Logische Operatoren:
&&(Und),||(Oder),!(Nicht) - ✅ Operator-Precedence: Klammern zuerst, dann Punktrechnung, dann Strichrechnung
➡️ Nächster Schritt
Im nächsten Kapitel lernen wir bedingte Anweisungen (if, else, switch) - die es Ihrem Code erlauben, Entscheidungen zu treffen!
Übung:
- Erstellen Sie eine HTML-Datei mit JavaScript
- Rechnen Sie Preise mit MwSt. und Rabatt
- Prüfen Sie, ob eine Zahl gerade oder ungerade ist (
%Operator) - Verwenden Sie logische Operatoren, um komplexe Bedingungen zu prüfen
- Geben Sie alle Ergebnisse in der Konsole aus
