Diese Seite dient mir zum üben der Web-Programmiersprachen

if -Abfrage

"Wenn diese Bedingung erfüllt ist, dann ..." In der Programmiersprache kommt dieser Satz sehr oft vor. Das Schlüsselwort ist if, die Bedingung steht daneben in Klammern. Die auszuführenden Befehle werden in einer geschweiften Klammer geschrieben.

if (Bedingung){
   Befehl 1;
   Befehl 2;
}

Vergleichsoperatoren

Häufig soll eine Variable mit einem anderen Wert überpüft werden, zum Beispiel ob sie identisch sind. Da das einfache Gleichheitszeichen schon belegt ist, kommt hier das == doppelte Gleichheitszeichen zum Einsatz. Wenn die Werte auf beiden Seiten gleich sind, ist die Bedingung erfüllt.

let eingabe = Number(prompt("Was ergibt 3 + 4?"));
if (eingabe == 7){
   document.write ("Richtige Lösung!");
}

Nicht nur Zahlen, auch Text lässt sich so vergleichen. Dabei wird auch auf Groß- und Kleinschreibung geachtet, auf Leer- und Satzzeichen. Dann kan man vergleichen ob ein Wert größer oder kleiner als der Vergleichswert ist. Hierfür gibt es die > Größer als und < Kleiner als.

let eingabe = Number(prompt("Was ergibt 3 + 4?"));
if (eingabe == 7){
   document.write ("Richtige Lösung!");
}
if (eingabe < 7){
   document.write ("Der Wert ist zu klein.");
}
if (eingabe > 7){
   document.write ("Der Wert ist zu groß.");
}
Zum Vergleichs Programm

Ganz ähnlich funktioniert das >= Größer/Gleich-Zeichen und das <= Kleiner/Gleich-Zeichen Hier ist die Bedingung auch dann erfüllt, wenn beide Werte gleich sind. In diesem Beispiel währe ein anderer Operator noch passender. Wenn die Eingabe nicht 7 beträgt ist sie ungleich, egal ob der Wert höher oder niedriger ist. Das passende Zeichen ist der != Ungleichheitsoperator

let eingabe = Number(prompt("Was ergibt 3 + 4?"));
if (eingabe == 7){
   document.write ("Richtige Lösung!");
}
if (eingabe != 7){
   document.write ("Falsches Ergebnis!");
}

Vergleichsoperatoren kann man auch verwenden um eine Variable mit einem booleschem Wert zu bekommen.

let bedingung = (eingabe == 7);

Hier hat die Variable bedingung einen booleschen Wert erhalten. Ist die Eingabe eine 7, so wird der Wert von bedingung true, ansonsten wird der Wert false.


Logische Operatoren

Wenn mehrere Bedingungen erfüllt werden müssen, kommen logische Operatoren zum Einsatz. Eines davon ist der && Und-Operator Dabei wird die if-Abfrage nur dann ausgeführt wenn beide Bedingung erfüllt sind.

let eingabe1 = Number(prompt("Was ergibt 3 + 4?"));
let eingabe2 = Number(prompt("Was ergibt 4 * 5?"));
if (eingabe1 == 7 && eingabe2 == 20){
   document.write ("Richtige Lösung!");
}

Ein weiterer ist || Oder-Operator. Der Inhalt wird dann ausgeführt wenn mindestens eine der Teilbedingungen zutrifft. Er wird allerdings auch dann ausgeführt wenn beide Bedingungen erfüllt sind.
Dann gibt es den ! Verneinungsoperator Er verneint entweder nur eine Teilbedingung oder gleich den ganzen Vergleich. Um deutlich zu machen was genau verneint werden soll, müssen die passenden Klammern gesetzt werden.

if (!(eingabe1 == 7) && eingabe2 == 20)

In diesem Beispiel würde nur die erste Bedingung verneint werden. Die if-Abfrage wird also nur dann ausgeführt, wenn die zweite Bedingung erfüllt ist, die erste aber nicht.

if (!(eingabe1 == 7 && eingabe2 == 20))

Wird die Klammer versetzt, so das sie nun den gesamten Ausdruck umschließt, ändert sich ihre Funktionsweise. Die Bedingung trifft nun dann immer zu, wenn die Teilbedingung nicht erfüllt ist, also mindestens eine Eingabe falsch ist.


Andere Möglichkeiten mit else

"Wenn, dann, sonst" Wenn bei der if-Abfrage die Bedingung erfüllt ist, arbeitet sie ihre Befehle ab. Wenn sie nicht erfüllt sind, soll die if-Abfrage etwas anderes machen. Das geht mit else indem die Befehle stehen die dann stattdessen ausgeführt werden sollen.

if (Bedingung){
   Befehl 1;
   Befehl 2;
}
else{
   Befehl 3;
   Befehl 4;
}

Wenn das Programm nicht nur aus zwei, sondern mehreren Optionen auswählen soll, hilft der else if Befehl. Die Abfrage geht nacheinander die Bedingungen durch, bis eine zutrifft. Diese wird dann ausgeführt und die Überprüfung ist beendet.

let eingabe1 = Number(prompt("Was ergibt 3 + 4?"));
let eingabe2 = Number(prompt("Was ergibt 4 * 5?"));
if (eingabe1 == 7 && eingabe2 == 20){
   document.write ("Richtige Lösung!");
}
else if (eingabe1 == 7 || eingabe2 == 20){
   document.write ("Eine Aufgabe ist richtig.");
}
else {
   document.write ("Alle Aufgaben sind falsch.");
}

Das switch-Statment

Wenn die gleiche Variable auf Gleichheit mit verschiedenen Werten überpüft wird, eignet sich das switch-Statment dafür. Zum Bespiel könnte der Hex-Wert einer Farbe gesucht werden, würde die if-Abfrage sehr lang aussehen. Mit dem switch-Statment sähe das so aus:

let farbe = prompt("Welche Farbe suchen sie?");
switch (farbe){
   case "Rot":
   alert ("Der Hex-Wert von Rot ist: #F00");
   break;
   case "Grün":
   alert ("Der Hex-Wert von Grün ist: #0F0");
   break;
   case "Blau":
   alert ("Der Hex-Wert von Blau ist: #00F");
   break;
   default:
   alert ("Diese Fabe ist nicht verfügbar");
}

Das Schlüsselwort ist switch, danach steht die Variable in Klammern. In einer Geschweiften Klammer stehen die verschiedenen Möglichkeiten. Diese beginnen mit dem Begriff case und dem Wert der dann auslösend für die weiteren Befehle ist. Die Zeile schließt mit einem Doppelpunkt. Nun können beliebig viele Befehle eingeführt werden. Um diesen Block zu beenden steht der Befehl break Der letzte Block wird mit default eingeleitet. Er wird ausgeführt wenn alle anderen Bedingungen nicht erfüllt wurden.
Sobald das switch-Statment eine erfüllte Bedingung gefunden hat, geht es alle Befehle durch, bis zum break So können verschiedene Bedingungen zum gleichen Befehl führen.

let farbe = prompt("Welche Farbe suchen sie?");
switch (farbe){
   case "Rot":
   case "rot":
   case "red":
   alert ("Der Hex-Wert von Rot ist: #F00");
   break;
   case "Grün":
   case "grün":
   case "green":
   ...
   default:
   alert ("Diese Fabe ist nicht verfügbar");
}

Das switch-Statment kann nicht jede if-Abfrage ersetzten. Es funktioniert nicht mit mehreren Variablen oder Vergleichs-Operatoren.


Übungsaufgabe

Das Programm erhält zwei Konstante für den Benutzernamen (Kai) und das Passwort (Iak42). Der Besucher wird aufgefordert diese Daten einzugeben. Es erscheint darauf hin die passende Meldung, jenachdem ob die Eingabe richtig oder falsch war.

Hier geht es zur Lösung

Der Anwender bekommt 5 Rechenaufgaben. Richtige Antworten erhöhen eine Variable um 1. Das Ergebnis soll mit einem switch-Statment überprüft werden. Je nach Punktestand bekommt der Anwender eine passende Nachricht. Die Werte 0 und 1 sowie 2 und 3 sollen zusammen gefasst werden und die gleiche Nachricht ausgeben.

Hier geht es zur Lösung