Arithmetik in JavaScript
Die Operator-Familienkarte kennst du schon. Hier zoomst du in die arithmetische Familie — Symbole, die vor allem mit Zahlen rechnen und einen neuen Wert liefern. Du übst + - * / %, steuerst die Reihenfolge mit Klammern, erhöhst Zähler mit ++ und --, potenzierst mit Potenzoperator und behebst die klassische Falle: wenn + Text verbindet statt zu addieren.
Was sind arithmetische Operatoren?
Arithmetische Operatoren sagen JavaScript: rechne. Die Werte heißen weiterhin Operanden. In 12 / 4 ist / der Operator, 12 und 4 sind die Operanden. Das Ergebnis kannst du speichern, loggen oder auf der Seite zeigen.
Die fünf Alltags-Operatoren
📊 Alltägliche arithmetische Operatoren
| Operator | Aufgabe | Beispielergebnis |
|---|---|---|
+ |
addieren | 7 + 3 → 10 |
- |
subtrahieren | 7 - 3 → 4 |
* |
multiplizieren | 7 * 3 → 21 |
/ |
dividieren | 7 / 2 → 3.5 |
% |
Rest nach Division | 7 % 3 → 1 |
Halte dieses Blatt bereit. / kann eine Dezimalzahl liefern. % ist kein Prozentzeichen — es ist der Rest.
console.log(20 + 4);
console.log(20 - 4);
console.log(20 * 4);
console.log(20 / 4);
console.log(20 % 4);
console.log(20 / 3);
Rest-Muster mit %
% fragt: „Was bleibt nach dem Teilen?“ Dieser Rest hilft bei gerade/ungerade und „jedes N-te Element“.
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 5);
console.log(17 % 5);
let n = 12;
console.log(n % 2 === 0);
8 % 2 ist 0 (gerade). 9 % 2 ist 1 (ungerade). Ein gängiger Gerade-Test: n % 2 === 0. Später nutzt du den Rest in Schleifen — hier reicht es, den Rest zu lesen.
Vorrang und Klammern
JavaScript wertet nicht jedes Symbol streng von links aus. Multiplikation und Division laufen meist vor Addition und Subtraktion. Klammern erzwingen deine Reihenfolge — lies zuerst das Innere von (…).
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 6 / 2);
console.log((10 - 6) / 2);
Ohne Klammern ist 2 + 3 * 4 gleich 14 (zuerst multiplizieren). Mit (2 + 3) * 4 erhältst du 20. Wenn die Reihenfolge für Preis oder Formel zählt, setze die Klammern bewusst.
++ -- und Potenzoperator
++ erhöht eine Zahlvariable um eins. -- verringert um eins. Potenzoperator ist Potenzierung. Eine klare Zeile n = n + 1 ist auch in Ordnung; ++ siehst du bald oft in Schleifen.
let lives = 3;
lives++;
console.log(lives);
lives--;
console.log(lives);
console.log(2 ** 3);
console.log(5 ** 2);
Nach lives++ steht 4 darin. 2 hoch 3 ist 8. 5 hoch 2 ist 25. Kurzformen wie += gehören zur nächsten Zuweisungs-Lektion — hier bleiben wir bei Rechenzeichen.
Wenn + verbindet statt addiert
Ist eine Seite von + ein String, verkettet JavaScript oft. Nutze Number(...), wenn du wirklich addieren wolltest.
console.log("5" + 2);
console.log(Number("5") + 2);
console.log(5 + Number("2"));
let a = "10";
let b = "3";
console.log(Number(a) + Number(b));
"5" + 2 wird "52". Number("5") + 2 wird 7. Dieselbe Idee wie bei der Typumwandlung — in Formularen und Seitentext ständig präsent.
Summe auf der Seite zeigen
Berechne eine kleine Rechnung, nutze den Rest als Hinweis und schreibe das Ergebnis in die Seite.
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic — page total</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12;
let qty = 3;
let shipping = 4;
let total = price * qty + shipping;
let leftover = total % 5;
let box = document.getElementById("out");
box.textContent = "total=" + total + " · rem5=" + leftover;
</script>
</body>
</html>
Hier läuft * vor +, also 12 * 3 + 4 → 40. 40 % 5 ist 0. Ändere price, qty oder shipping, lade neu und prüfe beide Zahlen.
Selbst ausprobieren
- Logge
14 + 5,14 - 5,14 * 5,14 / 5und14 % 5. - Prüfe mit
%und=== 0, ob22gerade ist. - Vergleiche
1 + 2 * 3mit(1 + 2) * 3. - Starte mit
let c = 0, führec++zweimal aus, logge dannc. - Logge 3 hoch 3 und
Number("8") + 1. - Ändere im HTML-Demo nur
qty, lade neu und lies Summe sowie Rest.
Häufige Fehler
%als „Prozent“ lesen — es ist der Rest- erwarten, dass
+immer addiert — ein String verbindet oft - Klammern vergessen, wenn Multiplikation/Division nicht gewinnen sollen
++(um eins ändern) mit=(beliebigen Wert speichern) verwechseln- mit Anzeige-Strings rechnen statt mit Rohzahlen
Kurzfassung
- Arithmetik:
+-*/% %ist Rest — nützlich für gerade/ungerade und „jedes N-te“- Klammern steuern den Vorrang; meist gewinnen
*/vor+- ++/--ändern um eins; Potenzoperator potenziert- Nutze
Number(), wenn+verkettet - Als Nächstes: Zuweisung — Speichern und Aktualisieren mit
=und Co.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt