JavaScript - If...Else: Ein Anfängerleitfaden

Hallo da draußen, angehende Programmierer! Heute tauchen wir in eines der grundlegendsten Konzepte der Programmierung ein: die if...else-Anweisung. Denkt daran als Entscheidungsträger in eurem Code, wie eine Ampel, die den Verkehr an einer Kreuzung lenkt. Los geht's!

Flussdiagramm der if-else-Anweisung

Bevor wir uns dem Code zuwenden, lassen wir uns darstellen, wie if...else-Anweisungen funktionieren. Stellt euch vor, ihr steht an einer Gabelung:

[Bedingung]
/    \
/      \
/        \
[Wahr]      [Falsch]
|            |
[Aktion 1]   [Aktion 2]

Dieses einfache Diagramm zeigt das Wesen der if...else-Anweisung: wenn eine Bedingung wahr ist, tu eine Sache; sonst tu eine andere.

JavaScript if-Anweisung

Lassen wir mit der grundlegenden 'if'-Anweisung beginnen. Es ist, als würde man sagen: "Wenn es regnet, nimm einen Schirm mit."

let istRegen = true;

if (istRegen) {
console.log("Vergiss nicht deinen Schirm!");
}

In diesem Beispiel wird die Nachricht angezeigt, wenn istRegen wahr ist. Wenn es falsch ist, passiert nichts. Einfach, oder?

Lassen wir einen anderen Beispielversuch starten:

let temperatur = 25;

if (temperatur > 30) {
console.log("Es ist draußen heiß!");
}

Hier wird die Nachricht nur angezeigt, wenn die Temperatur über 30 liegt. In diesem Fall wird nichts ausgegeben, weil 25 nicht größer als 30 ist.

JavaScript if...else-Anweisung

Was ist, wenn wir etwas tun möchten, wenn die Bedingung falsch ist? Dann kommt 'else' ins Spiel. Es ist, als würde man sagen: "Wenn es regnet, nimm einen Schirm mit; sonst trag Sonnenbrille."

let istRegen = false;

if (istRegen) {
console.log("Vergiss nicht deinen Schirm!");
} else {
console.log("Genieße den sonnigen Tag!");
}

In diesem Fall wird die zweite Nachricht angezeigt, da istRegen falsch ist.

Hier ist ein weiteres Beispiel:

let alter = 15;

if (alter >= 18) {
console.log("Du darfst wählen!");
} else {
console.log("Entschuldigung, du bist zu jung zum Wählen.");
}

Da 15 kleiner als 18 ist, wird die Nachricht "Entschuldigung, du bist zu jung zum Wählen" angezeigt.

JavaScript if...else if...else-Anweisung

Manchmal ist das Leben nicht nur schwarz oder weiß. Wir brauchen mehr Optionen! Das ist, wo 'else if' nützlich wird. Es ist wie eine Multiple-Choice-Frage.

let note = 75;

if (note >= 90) {
console.log("A - Ausgezeichnet!");
} else if (note >= 80) {
console.log("B - Gute Arbeit!");
} else if (note >= 70) {
console.log("C - Nicht schlecht!");
} else if (note >= 60) {
console.log("D - Du musst mehr lernen.");
} else {
console.log("F - Oh nein! Du hast versagt.");
}

In diesem Beispiel beträgt die Note 75, daher wird die Ausgabe "C - Nicht schlecht!" sein. Der Code überprüft jede Bedingung in der Reihenfolge und stoppt, wenn er eine wahre Bedingung findet.

Lassen wir noch einen Versuch starten:

let zeit = 14;

if (zeit < 12) {
console.log("Guten Morgen!");
} else if (zeit < 18) {
console.log("Guten Nachmittag!");
} else {
console.log("Guten Abend!");
}

Da die Zeit 14 (14:00 Uhr) ist, wird die Ausgabe "Guten Nachmittag!" sein.

Geschachtelte if...else-Anweisungen

Manchmal müssen wir Bedingungen innerhalb von Bedingungen überprüfen. Hier kommen geschachtelte if...else-Anweisungen ins Spiel.

let istWochenende = true;
let istRegen = false;

if (istWochenende) {
if (istRegen) {
console.log("Es ist ein regnerisches Wochenende. Perfekt zum Lesen eines Buches!");
} else {
console.log("Es ist ein sonniges Wochenende. Lass uns einen Picknick machen!");
}
} else {
console.log("Es ist ein Wochentag. Zeit zur Arbeit!");
}

In diesem Beispiel überprüfen wir zuerst, ob es ein Wochenende ist. Wenn ja, überprüfen wir dann, ob es regnet, um zu entscheiden, welche Aktivität wir vorschlagen.

Vergleichstabelle der If...Else-Methoden

Hier ist eine praktische Tabelle, die die verschiedenen if...else-Methoden zusammenfasst, die wir behandelt haben:

Methode	Syntax	Verwendungszweck
if	if (bedingung) { ... }	Wenn du nur dann Code ausführen möchtest, wenn eine Bedingung wahr ist
if...else	if (bedingung) { ... } else { ... }	Wenn du eine andere Ausgabe haben möchtest, wenn die Bedingung falsch ist
if...else if...else	if (bedingung1) { ... } else if (bedingung2) { ... } else { ... }	Wenn du mehrere Bedingungen überprüfen musst
Geschachtelte if...else	if (bedingung1) { if (bedingung2) { ... } else { ... } } else { ... }	Wenn du Bedingungen innerhalb von Bedingungen überprüfen musst

Denkt daran, dass Programmieren alles über Übung ist. Hütet euch nicht, diese Konzepte auszuprobieren. Ändert die Werte in den Beispielen und seht, wie sich die Ausgabe ändert. Das ist der beste Weg, um zu lernen!

In meinen Jahren des Unterrichtens habe ich festgestellt, dass Schüler, die mit dem Code herumspielen und Fehler machen, am schnellsten lernen. Also, kaputt machen, reparieren und Spaß dabei haben!

Frohes Coden, zukünftige Programmierer!

Credits: Image by storyset