JavaScript Basics: If, Else und Switch
March 17, 2015
Dieser Artikel ist teil der JavaScript Basics - Tutorials für Anfänger Serie. If und else sind Schlüsselworte in JavaScript und gefühlt jeder anderen Programmiersprache dieser Welt. Mit diesen prüft man generell ob etwas vorhanden ist oder einem bestimmten Wert entspricht, damit man je nach Ausgangsmöglichkeit dieser Prüfung, das Script dem entsprechend weiter ausführen kann.
If, Else If und Else
Wenn man zum Beispiel bestimmen möchte ob jemand minderjährig ist oder nicht, könnte man folgendes Beispiel verwenden:
<code>alter = prompt('Wie alt sind Sie?');
if(alter < 18) {
alert('Ha! Du bist minderjährig!');
}
else if(alter >= 18){
alert('Wow! Ganz schön alt...');
}
else {
alert('Wie bitte? Eingabe ungültig.');
}
</code>If / Else Beispiel als jsfiddle
Natürlich ist es im Normalfall nicht das Ziel sich über die Nutzer lustig zu machen, aber für dieses Beispiel ist es ok ;).
Zunächst fragen wir nach dem Alter des Nutzers und geben bei einer Zahl die niedriger als 18 ist Ha! Du bist minderjährig! zurück. Im nächsten Schritt nehmen wir uns der Möglichkeit an, dass das Alter gleich 18 oder darüber ist und zum Schluss, für den Fall das die Eingabe keine Zahl ist, informieren wir, dass die Eingabe ungültig ist.
Dies ist die meist genutze Form der Entscheidungstreffung innherhalb von Programmen if, else if und else.
JavaScript Vergleichsoperatoren
Um in JavaScript Werte miteinander zu vergleichen verwenden wir Vergleichsoperatoren wie ==, <, >, <=, >= oder !=.
Das doppelte Gleichheitszeichen steht für eine Übereinstimmung, das dreifache === setzt auch einen gleichen Variablentypen vorraus, also eine Zahl, einen String oder einen boolschen Wert, etc.
Den Unterschied zwischen JavaScript’s == und === kann man sich gut durch die folgenden Zeilen merken:
<code>var meineVariable = '13';
if(meineVariable == 13) {
alert('true');
}
if(meineVariable === 13) {
alert('false');
</code>Eine vollständige Dokumentation der Vergleichsoperatoren oder Comparison Operators gibt es beim Mozilla Development Network: JavaScript Reference / Operators / Comparison Operators
JavaScript Switch Vergleiche
Um viele Möglichkeiten zur gleichen Zeit zu prüfen oder mehrere Möglichkeiten mit gleichem Ausgang zuzulassen schwreibt man für Gewöhnlich ein switch statement.
Nehmen wir an wir möchten die Variabel meinHobby testen:
<code>switch(meinHobby){
case "Paragliding":
alert('Wuhuu! Windige Höhen!');
break;
case "Base Jumping":
case "Sky Diving":
alert('Oh oh... freier Fall!');
break;
default:
alert('Kein unterstütztes Hobby angegeben. Laaangweilig!');
}
</code>Wenn meinHobby Paragliding ist, wird der Text darunter ausgegeben und der Vergleich wird mit der Zeile die break; enthält beendet. Auf den nächsten Linien sehen wir was passiert wenn wir für zwei mögliche Werte die gleiche Reaktion hervorrufen wollen. Sowohl Base Jumping als auch Sky Diving beeinhalten relativ viel freien Fall. Egal welche von beiden Möglichkeiten ausgewählt wird, das Script wird immer Oh oh... freier Fall! antworten.
Das Auslassen von break; führt also dazu, dass der nächste case auch ausgeführt wird, bis der nächste break; erreicht wird.
Die letzen Zeilen treten in Kraft wenn die Variable keine der oben definierten case Vergleiche besteht und beschimpft den Nutzer in diesem Fall als langweilig, wenn er keine der Extremsportarten ausübt. Davon rate ich in der Praxis ab :)