Zum Inhalt
wannacode

Bedingungen

Kurz gesagt: Mit einer Bedingung wählt das Programm aus, was es tut: if führt einen Block nur aus, wenn der Vergleich wahr ist, else gibt den anderen Weg vor, und switch wählt zwischen vielen Werten.

Problem

Die Lieferung, die es nicht geben sollte

Ein Onlineshop verspricht kostenlose Lieferung für Bestellungen ab 50 €. Unter 50 € kostet die Lieferung 4,99 €. Die Bestellung liegt bei 62 €, und das Programm rechnet trotzdem die Lieferung dazu:

const total = 62;
const shipping = 4.99;
console.log(`Zu zahlen: ${total + shipping} €`);
Ausgabe
Zu zahlen: 66.99 €

Das Programm führt jede Zeile aus, eine nach der anderen. Hier muss es aber auswählen: in einem Fall die eine Zeile, im anderen Fall eine andere.

Die Idee

Ein Vergleich antwortet mit ja oder nein

Zuerst muss das Programm fragen: Ist die Summe 50 € oder mehr? Dafür gibt es Vergleichsoperatoren. Ihre Antwort ist keine Zahl, sondern true (wahr) oder false (falsch): ein Wert vom Typ boolean.

const total = 62;
console.log(total >= 50);
console.log(total === 50);
console.log(total !== 50);
Ausgabe
true
false
true
Du schreibst Es fragt
a > b, a < b größer, kleiner
a >= b, a <= b größer oder gleich, kleiner oder gleich
a === b sind sie gleich
a !== b sind sie verschieden

Pass auf: === vergleicht, und = speichert einen Wert. total === 50 fragt, ob die Summe 50 ist, und total = 50 setzt sie auf 50.

In JavaScript gibt es auch == mit zwei Zeichen. Es wandelt zuerst beide Werte in einen Typ um und vergleicht erst dann. Deshalb ist der Text "5" plötzlich gleich der Zahl 5:

console.log("5" == 5);
console.log("5" === 5);
Ausgabe
true
false

Schreib immer === und !==. So siehst du sie auch im Code anderer Leute.

Text wird in JavaScript mit demselben === verglichen:

const answer = "ja";
const yes = answer === "ja";
console.log(yes);
Ausgabe
true
Genauer, für Neugierige

Kommazahlen sind selten genau gleich. Der Computer speichert 0.1 und 0.2 nur ungefähr, deshalb ist ihre Summe nicht genau 0.3:

console.log(0.1 + 0.2 === 0.3);
console.log(0.1 + 0.2);
Ausgabe
false
0.30000000000000004

Bei Kommazahlen fragst du besser, ob sie nah genug beieinander liegen: Math.abs(a - b) < 0.000001. Vergleiche mit > und < haben dieses Problem nicht.

Die Idee

if und else: einer von zwei Wegen

Jetzt kann das Programm auswählen. if prüft die Bedingung in den Klammern. Ist sie wahr, führt es den Block danach aus. Ist sie es nicht, führt es den Block nach else aus:

const total = 62;
let shipping;
if (total >= 50) {
  shipping = 0;
} else {
  shipping = 4.99;
}
console.log(`Lieferung: ${shipping} €`);
Ausgabe
Lieferung: 0 €

Bei einer Bestellung von 18,50 € gibt dasselbe Programm Lieferung: 4.99 € aus. Es wird nur einer der Blöcke ausgeführt, nie beide.

else ist nicht Pflicht. Ohne else wird der Block übersprungen, wenn die Bedingung nicht wahr ist, und das Programm macht danach weiter.

Genauer, für Neugierige
  • Wenn der Block nur eine Zeile hat, kannst du die Klammern { } weglassen. Tu es nicht: Sobald du eine zweite Zeile hinzufügst, steht sie außerhalb des if, und die Einrückung täuscht dich, als wäre sie drinnen.
  • Die Bedingung kann jeder Wert sein, nicht nur true oder false. Die Zahl 0 und der leere Text "" zählen als falsch, alles andere als wahr:
const total = 0;
if (total) {
  console.log("Es gibt eine Summe");
} else {
  console.log("0 zählt als falsch");
}
Ausgabe
0 zählt als falsch
  • Deshalb ist if (total = 50) kein Fehler: Es speichert 50 in total, und 50 zählt als wahr. Die Bedingung ist bei jeder Summe wahr, und die Summe ist jetzt eine andere:
let total = 10;
if (total = 50) {
  console.log("Kostenlose Lieferung");
}
console.log(total);
Ausgabe
Kostenlose Lieferung
50

Probier es aus

Eine Bestellung über dem Lagerbestand

Im Lager sind 3 Stück, und der Kunde bestellt 5.

Was gibt das Programm aus?

const stock = 3;
let ordered = 5;
if (ordered > stock) {
  console.log("Nicht genug auf Lager");
  ordered = stock;
}
console.log(`Wir versenden ${ordered} Stück`);
Antwort

Die Idee

else if: mehr als zwei Wege

Eine Lehrerin macht aus den Punkten eines Tests eine Note. Es gibt vier Möglichkeiten. Du setzt ein if hinter das else:

const points = 76;
if (points >= 90) {
  console.log("Ausgezeichnet");
} else if (points >= 75) {
  console.log("Sehr gut");
} else if (points >= 50) {
  console.log("Gut");
} else {
  console.log("Ungenügend");
}
Ausgabe
Sehr gut

Die Prüfungen laufen von oben nach unten. Ausgeführt wird der erste Zweig mit einer wahren Bedingung, die anderen werden übersprungen. 76 ist nicht >= 90, aber >= 75, also ist es „Sehr gut“. Bis zu >= 50 kommt das Programm nie, obwohl auch das wahr ist.

Deshalb ist die Reihenfolge wichtig: Die strengste Bedingung kommt zuerst. Stünde points >= 50 ganz oben, bekäme jeder mit 50 Punkten oder mehr „Gut“.

const points = 76;
if (points >= 90) {
  console.log("Ausgezeichnet");
} else if (points >= 75) {
  console.log("Sehr gut");
} else if (points >= 50) {
  console.log("Gut");
} else {
  console.log("Ungenügend");
}
Schritt für Schritt, in Worten
  1. points ist 76.
  2. 76 >= 90? Nein. Der Zweig „Ausgezeichnet“ wird übersprungen.
  3. 76 >= 75? Ja. Wir gehen in den Zweig „Sehr gut“.
  4. Ausgegeben wird „Sehr gut“.
  5. Auch 76 >= 50 ist wahr, wird aber nicht geprüft. Die Kette endet beim ersten wahren Zweig.

Probier es aus

Finde den Fehler

Jeder mit 90 Punkten oder mehr bekommt „Ausgezeichnet“. Ein Schüler mit genau 90 Punkten bekommt „Sehr gut“. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Die Idee

Und, oder, nicht

Das Kino gibt Kindern und Studierenden ein ermäßigtes Ticket. Es gibt zwei Bedingungen, und eine reicht. Du verbindest sie mit logischen Operatoren:

const age = 16;
const student = false;
if (age < 18 || student) {
  console.log("Ermäßigtes Ticket: 6 €");
} else {
  console.log("Ticket: 10 €");
}
Ausgabe
Ermäßigtes Ticket: 6 €
  • a && b ist wahr, wenn beide wahr sind („und“).
  • a || b ist wahr, wenn mindestens eine wahr ist („oder“).
  • !a ist wahr, wenn a nicht wahr ist („nicht“): !student.

Kostenlose Lieferung ab 50 € und nur in der Stadt ist total >= 50 && inCity. Eine Zahl liegt zwischen 1 und 12, wenn month >= 1 && month <= 12. Die Schreibweise 1 <= month <= 12 aus der Mathematik funktioniert hier nicht, und zwar ohne Fehlermeldung: Zuerst wird 1 <= month zu true oder false, und das wird dann als 1 oder 0 mit 12 verglichen. Das Ergebnis ist immer true, sogar für 13:

const month = 13;
console.log(1 <= month <= 12);
console.log(month >= 1 && month <= 12);
Ausgabe
true
false
Genauer, für Neugierige
  • Wenn der linke Operand die Antwort schon entscheidet, wird der rechte nicht geprüft: bei false && … und bei true || …. Das heißt Kurzschlussauswertung und schützt manchmal vor einem Fehler: count !== 0 && total / count > 10 teilt nie durch 0.
  • && kommt vor ||, so wie * vor +. Wenn du sie mischst, setz Klammern, damit es klar lesbar ist: (a && b) || c.
  • Eine Bedingung kann auch in einem anderen if stehen. Das ist ein verschachteltes if. Dieser Code ist dasselbe wie if (total >= 50 && inCity):
if (total >= 50) {
  if (inCity) {
    shipping = 0;
  }
}

Probier es aus

Durch 5 und durch 7

Was gehört in die Lücke, damit die Bedingung nur für Zahlen wahr ist, die sowohl durch 5 als auch durch 7 teilbar sind?

const number = 35;
if (number % 5 === 0  number % 7 === 0) {
  console.log("Durch 5 und durch 7 teilbar");
}

Die Idee

Der ternäre Operator ? :

Manchmal ist das ganze if nur dazu da, einen von zwei Werten auszuwählen. Dafür gibt es eine Kurzform, den ternären Operator (er hat drei Teile):

const points = 76;
const message = points >= 50 ? "Du hast bestanden!" : "Leider nicht bestanden.";
console.log(message);
Ausgabe
Du hast bestanden!

Du liest ihn so: Bedingung ? Wert, wenn sie wahr ist, : Wert, wenn nicht. Dasselbe mit if und else braucht mehrere Zeilen, hier ist es eine.

Nimm ihn, um einen Wert auszuwählen. Wenn das Programm in den beiden Fällen verschiedene Dinge tun soll, schreib if.

Genauer, für Neugierige
  • Die beiden Werte können verschiedene Typen haben: im einen Fall Text, im anderen eine Zahl. Das Programm läuft, aber danach weißt du nicht, was in der Variable steckt. Wähle zwischen Werten desselben Typs.
const points = 40;
const result = points >= 50 ? "Bestanden" : 0;
console.log(result);
Ausgabe
0
  • Ternäre Operatoren lassen sich ineinander verschachteln, aber solcher Code ist schwer zu lesen. Für drei oder mehr Möglichkeiten schreib else if.

Die Idee

switch: Auswahl nach Wert

Der Shop hat werktags von 9:00 bis 18:00 geöffnet, am Samstag bis 14:00, und am Sonntag ist er geschlossen. Wenn der Tag eine Zahl ist (1 ist Montag, 7 ist Sonntag), vergleichst du sie mit mehreren genauen Werten. Dafür gibt es switch:

const day = 6;
switch (day) {
  case 6:
    console.log("10:00–14:00");
    break;
  case 7:
    console.log("Geschlossen");
    break;
  default:
    console.log("9:00–18:00");
}
Ausgabe
10:00–14:00
  • switch nimmt den Wert in den Klammern und springt zum case mit demselben Wert.
  • break beendet das switch. Ohne break läuft die Ausführung im nächsten case weiter.
  • default ist für alle anderen Werte da, wie das letzte else.
  • Mehrere Werte mit derselben Aktion schreibst du untereinander: case 6: und direkt danach case 7:.

switch funktioniert mit Zahlen und Text. Es vergleicht wie ===, deshalb passt der Text "6" nicht zu case 6. Für Prüfungen wie „ab 50 aufwärts“ schreib if.

Genauer, für Neugierige
  • Wenn du break vergisst, „fällt“ die Ausführung ohne Prüfung in den nächsten case „durch“. Bei Tag 6 werden zwei Zeilen ausgegeben:
const day = 6;
switch (day) {
  case 6:
    console.log("10:00–14:00");
  case 7:
    console.log("Geschlossen");
    break;
  default:
    console.log("9:00–18:00");
}
Ausgabe
10:00–14:00
Geschlossen
  • Wegen === passt Text aus der Eingabe nicht zu einer Zahl in einem case. Wandle ihn zuerst mit Number(...) um:
const day = "6";
switch (day) {
  case 6:
    console.log("10:00–14:00");
    break;
  default:
    console.log("Diesen Tag gibt es nicht");
}
Ausgabe
Diesen Tag gibt es nicht
  • In Java und C# kann switch auch einen Wert liefern. In JavaScript geht das nicht: Speichere den Wert in jedem case in einer Variable, oder wähle ihn mit dem ternären Operator aus.

Übung

Programme, die auswählen

Löse die Aufgaben in deinem Editor. Jede Zahl der Eingabe steht in einer eigenen Zeile. Probier jede Lösung auch mit einer Eingabe aus, die durch die anderen Zweige läuft.

1. Eine Kinokarte. Lies das Alter ein. Bis 6 Jahre ist der Eintritt frei, bis 17 kostet das Ticket 6 €, bis 64 kostet es 10 €, ab 65 kostet es 5 €. Ein negatives Alter ist ein Fehler.

Eingabe
15
Ausgabe
Das Ticket kostet 6 €

2. Ein Mini-Taschenrechner. Lies eine Zahl, eine Operation (+, -, * oder /) und eine zweite Zahl ein. Wähle die Rechnung mit switch nach dem Text der Operation aus. Durch 0 darf nicht geteilt werden.

Eingabe
12
/
5
Ausgabe
Ergebnis: 2.4

3. Eine quadratische Gleichung. Lies a, b und c aus ax² + bx + c = 0 ein. Die Diskriminante ist D = b² − 4ac. Ist D positiv, gibt es zwei Lösungen: (−b ± √D) / 2a. Ist D gleich 0, gibt es eine Lösung: −b / 2a. Ist D negativ, gibt es keine reellen Lösungen. Ist a = 0, ist die Gleichung nicht quadratisch.

Eingabe
1
-3
2
Ausgabe
x1 = 2.00, x2 = 1.00

4. Ein gültiges Datum. Lies einen Tag, einen Monat und ein Jahr ein und sag, ob es das Datum gibt. Die Anzahl der Tage im Monat findest du mit switch heraus. Der Februar hat in einem Schaltjahr 29 Tage: Das Jahr ist durch 4 teilbar, aber nicht durch 100, oder es ist durch 400 teilbar.

Eingabe
29
2
2023
Ausgabe
Ungültiges Datum

Für 29, 2, 2024 lautet die Ausgabe Gültiges Datum.

Weitere Aufgaben

  • Gerade oder ungerade. Für 7: Ungerade.
  • Positiv, negativ oder null. Für −5: Negativ.
  • Größer als 10. Für 15: Größer als 10.
  • Sind sie gleich. Lies zwei Zahlen ein. Für 5 und 5: Gleich.
  • Die größere von zwei. Lies zwei Zahlen ein und gib die größere aus. Mach es einmal mit if und einmal mit ? :.
  • Betrag. Ohne Math.abs: Wenn die Zahl negativ ist, kehr ihr Vorzeichen um.
  • Ja oder nein. Lies einen Text ein. Gib true für „ja“ aus, false für „nein“ und Antwort nicht verstanden für alles andere.
  • Durch 5 und durch 7. Sag, ob die Zahl sowohl durch 5 als auch durch 7 teilbar ist. Für 35: ja, für 10: nein.
  • Drei Zahlen aufsteigend. Lies drei Zahlen ein und gib sie von der kleinsten bis zur größten aus. Für 7, 2, 5: 2 5 7.
  • Die kleinste und die größte von fünf. Lies fünf Zahlen in fünf Variablen ein. Merk dir die erste als kleinste und als größte und vergleiche dann jede weitere damit.
  • Wochentag. Lies eine Zahl von 1 bis 7 ein und gib den Tag aus: 1 ist Montag. Für eine andere Zahl: Diesen Tag gibt es nicht. Probier es mit switch.
  • Altersgruppe. Bis 12 Jahre ist man ein Kind, bis 19 ein Teenager, sonst erwachsen.
  • Jahreszeit nach Monat. Dezember, Januar und Februar sind Winter, März bis Mai ist Frühling und so weiter. Für 4: Frühling. Mit switch schreibst du mehrere case untereinander.
  • Ist es ein Dreieck. Drei Seiten bilden ein Dreieck, wenn die Summe von je zwei größer ist als die dritte. Für 3, 4, 5: ja, für 1, 2, 3: nein.
  • Eine Note in Worten. Lies eine Note von 2 bis 6 ein und gib Ungenügend, Ausreichend, Gut, Sehr gut oder Ausgezeichnet aus.
  • Errate das Tier. Das Programm stellt Fragen, die man mit „ja“ oder „nein“ beantwortet, und errät, an welches Tier du denkst. Beginne mit einer Begrüßung und einer kurzen Erklärung des Spiels. Du kannst alle Fragen stellen und dann mit else if entscheiden, oder du fragst mit verschachtelten if nur, was du brauchst. Die Fragen:
Frage Bei „ja“ Bei „nein“
Fliegt es? ein Vogel oder ein Insekt weiter
Hat es Federn? ein Vogel wenn es fliegt, ein Insekt
Schwimmt es? wenn es nicht fliegt: ein Fisch oder ein kleines Wassersäugetier weiter
Miaut es? eine Katze keine Katze
Hat es Fell? ein Hund, eine Katze oder ein anderes Säugetier eine Eidechse oder ein anderes Reptil
Ist es grün? wenn es weder fliegt noch schwimmt: ein Frosch oder eine Eidechse weiter
Brüllt es? eine Kuh oder ein Löwe weiter
Hat es einen Rüssel? ein Elefant weiter

Ein Beispiel (die Eingabe ist die Antwort auf jede Frage, der Reihe nach):

Eingabe
nein
nein
nein
ja
ja
nein
nein
nein
Ausgabe
Denk dir ein Tier aus. Ich stelle dir 8 Fragen. Antworte mit ja oder nein.
Fliegt es?
Hat es Federn?
Schwimmt es?
Miaut es?
Hat es Fell?
Ist es grün?
Brüllt es?
Hat es einen Rüssel?
Ich glaube, es ist eine Katze.

Test

Teste dich

1. Was ergibt 62.0 >= 50?
2. Was ist der Unterschied zwischen = und ===?
3. Die Kette if / else if prüft zuerst points >= 50, dann points >= 75. Was passiert bei 95 Punkten?
4. Einen Rabatt gibt es, wenn age < 18 || age >= 65. Bekommt jemand mit 70 Jahren einen Rabatt?
5. Was passiert in einem switch, wenn am Ende eines case kein break steht?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·