Jetzt anmelden...

Login
Passwort
Registrieren

JavaScript Tutorial #4

if und else in JavaScript

Eine zentrale Notwendigkeit der Programmierung ist, dass ein Programm in Abhängigkeit von bestimmten Bedingungen einen unterschiedlichen Ablauf nehmen kann. Man spricht hier von Verzweigungen, die wir mit den Schlüsselwörtern if und else einleiten. Lernen Sie heute schnell und einfach, wie das genau abläuft.

Kommentare [0] 15 Views

Stefan 05.12.2019

Infos zum Artikel

Kategorie JavaScript
Autor Stefan
Datum 05.12.2019

Thema in Kurzform

  • In der Programmierung gibt es mehrere Arten von Verzweigungsstrukturen, die wir mit den Schlüsselwörtern if und else einsetzen können.
  • Kurzbeispiel:
    if (preis <= 1000) {
        System.out.println("gekauft!");
    }
    else{
        System.out.println("zu teuer!");
    }
    

Einfache if-Anweisung

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

JavaScript Nassi-Shneiderman-Diagramm if

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.

  • JavaScript ebook

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:

JavaScript Nassi-Shneiderman-Diagramm if else

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:

JavaScript Nassi-Shneiderman-Diagramm if else

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:

Java ternärer Operator

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

einfach

a) Welchen Wert hat die Variable x am Ende des Codes?

b) Wie sieht das Nassi-Shneiderman-Diagramm mit den konkreten Werten aus?

var x = 10;

if(x == 9){
    x++;
}
else if(x == 10){
    x--;
}
else{
    x += 2;
}
Lösung ein-/ausblenden

mittel

Was wird mit diesem Code in der JavaScript-Konsole angezeigt?

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);

A. Hello World
B. Hello JavaScript
C. Hello
D. be careful!
E. es wird nichts in der Konsole angezeigt.

Lösung ein-/ausblenden

schwer

Simulieren Sie die Funktion eines Taschenrechners mit zwei Operanden für die vier Grundrechenarten.

Speichern Sie die Wahl der Rechenart sowie die Werte der beiden zu verrechnenden Operanden in drei verschiedenen Variablen.

Lassen Sie testweise 3 * 4 rechnen.

Es genügt, das Ergebnis mit document.write() oder console.log() auszugeben.

Lösung ein-/ausblenden

Falconbyte unterstützen

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Verzweigungen

Ohne Verzweigungen wäre kaum ein sinnvolles Programm möglich.

Funktionen aufrufen

In PHP gibt es ein ganzes Arsenal an bereits vordefinierten Funktionen, die Sie benutzen können.

Scope von Variablen

Wo ist eine Variable eigentlich sichtbar?

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2020 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen youtube programmieren lernen