if und else in JavaScript

Thema in Kurzform

if (preis <= 1000) {
    System.out.println("gekauft!");
}
else{
    System.out.println("zu teuer!");
}

• In der Programmierung gibt es mehrere Arten von Verzweigungsstrukturen, die wir mit den Schlüsselwörtern if und else einsetzen können.

Inhaltsverzeichnis

1. Einfache if-Anweisung
2. Die if/ else-Anweisung
3. Mehrfachverzweigung mit else if
4. Der ternärer Operator
5. Übungen

Einfache if-Anweisung

Eine if-Anweisung prüft eine Bedingung. Ist das Ergebnis dieser Prüfung true, wird ein bestimmter Codeblock ausgeführt:

Das Diagramm, das Sie hier sehen, ist ein sog. Nassi-Shneiderman-Diagramm. Solche Diagramme helfen uns, Programmabläufe zu visualisieren und einfacher nachvollziehen zu können. Gerade bei der Planung komplexerer Programmstrukturen und Algorithmen ist dies sehr hilfreich. Machen Sie davon Gebrauch!

Sehen wir uns nun ein konkretes Beispiel in JavaScript an:

var punkte = 75;

if(punkte > 50) {
    document.write("Ich werde ausgeführt");
}

Eine if-Anweisung wird im Programmcode mit dem Schlüsselwort if eingeleitet. Danach folgt in runden Klammern ( ) die Prüfung der Bedingung ("Prüfausdruck"). Ist das Ergebnis der Prüfung true, wird der Codeblock innerhalb der beiden geschweiften Klammern { } ausgeführt.

In unserem Beispiel ergibt die Prüfung true und somit wird im Browser der Text "Ich werde ausgeführt" anzeigt. Wäre der Wert der Variablen punkte nicht größer als 50, wäre der Prüfausdruck false und der Codeblock in den geschweiften Klammern würde nicht ausgeführt werden.

Die if/ else-Anweisung

Die if/ else-Anweisung ist die Erweiterung der einfachen if-Anweisung. Auch bei der if/ else-Anweisung wird eine Bedingung geprüft. Ist das Ergebnis true, wird der erste Codeblock ausgeführt. Ist das Ergebnis false, dann wird stattdessen (else) ein anderer Codeblock ausgeführt.

Mit einem Nassi-Shneiderman-Diagramm dargestellt, sieht das so aus:

Ein konkretes Beispiel mit JavaScript:

if(punkte > 50) {
    document.write("Glückwunsch!");
}

else{
    document.write("Das geht besser!");
}

Mehrfachverzweigung mit else if

Eine Verzweigung in zwei Richtungen ist schön und gut. Es gibt aber oftmals Situationen, wo das nicht genügt, weil wir mehr als zwei Alternativen mit if und else brauchen:

Für solche Fälle können wir in JavaScript mit der Mehrfachverzweigung arbeiten. Alles, was wir dazu benötigen, ist das Schlüsselwort-Paar else if. Dieses setzen wir nach dem ersten if-Block ein. Am Ende kommt ein abschließender else-Block:

if(punkte < 50) {
    document.write("Das geht besser!");
}

else if(punkte < 75){
    document.write("gut gemacht!");
}

else{
    document.write("Glückwunsch!");
}

Wie läuft das nun ab? Wenn die erste Prüfung des if-Blocks false ergibt, erfolgt die nächste Prüfung des else if-Blocks. Ist auch diese false, wird der else-Block ausgeführt.

Das allgemeine Nassi-Shneiderman-Diagramm sieht für solch einen Fall auch schon etwas interessanter aus:

Wir haben in unserem Beispiel insgesamt drei mögliche Programmabläufe. Theoretisch liesen sich unzählige weitere else if-Blocks einbauen. Wir sollten hier aber zurückhaltend sein und bei einer noch stärkeren Verzweigung auf die switch-case-Kontrollstruktur zurückgreifen, die wir im nächsten Kapitel kennenlernen.

Der ternärer Operator

Der ternäre Operator ist der einzige Operator in JavaScript mit drei Operanden (daher "ternär").

Die drei Operanden sind:

• Die Prüfbedingung
• den Anweisungsblock 1 (falls Bedinung true)
• den Anweisungsblock 2 (falls Bedinung false)

Die allgemeine Syntax lautet:

Der ternäre Operator sieht anfangs etwas gewöhnungsbedürftig aus, erleichtert uns die Arbeit mit einfachen Verzweigungsstrukturen aber deutlich.

Anstatt Folgendes schreiben zu müssen...

if(10 > 5){
    document.write("Aristoteles");
}
else{
    document.write("Pinocchio");
}

... können wir die if/ else-Kontrollstruktur mit einer einzigen Code-Zeile abkürzen:

document.write(10 > 5 ? "Aristoteles" : "Pinocchio");

Ist die Bedingung true, wird der Text "Aristoteles" angezeigt, ansonsten "Pinocchio". In unserem Beispiel bekommen wir es somit mit Pinocchio zu tun.

Übungen

var x = 10;

if(x == 9){
    x++;
}
else if(x == 10){
    x--;
}
else{
    x += 2;
}

var a = "Hello";
var b = true;
var c = 1;

if((b == true) && (c > 1)){
    a += " World";
    b = false;
}

else if((b == true) || (c > 1)){
    a += " JavaScript";
    b = false;
}

if(b == false){
    a = "be careful!";
}

document.write(a);

var a = 3;   // Operand 1
var b = 4;   // Operand 2
var c;       // Ergebnis
var o = "*"; // Operator

if(o == "+"){
    c = a + b;
}
else if(o == "-"){
    c = a - b;
}
else if(o == "*"){
    c = a * b;
}
else{
    c = a / b;
}

document.write(a + " " + o + " " + b + " = " + c);

3 * 4 = 12