JavaScript/Verzweigung
Kontrollstrukturen sind Anweisungen, die wiederum Anweisungsblöcke enthalten. Dadurch ist es möglich, die Ausführung der in den Blöcken enthaltenen Anweisungen entsprechend bestimmter Regeln zu kontrollieren.
Man unterscheidet grundsätzlich zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung einer oder mehrerer Anweisungs-Blöcke von Bedingungen abhängig zu machen (Fallunterscheidung). Schleifen ermöglichen, einen Anweisungs-Block wiederholt ausführen zu lassen.
Inhaltsverzeichnis
Wenn-Dann-Bedingungen mit "if"
Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen. In einer Verzweigung (bedingte Anweisung) wird ein Anweisungsblock nur durchlaufen, wenn eine Bedingung erfüllt ist. Alternativ kann beim Nichterfüllen der Bedingung ein zweiter Anweisungsblock durchlaufen werden.
if (Ausdruck) {
//Anweisungsblock des True-Zweigs (wird ausgeführt, wenn Bedingung erfüllt ist)
Anweisung;
Anweisung;
} else {
//Anweisungsblock des False-Zweigs (wird ausgeführt, wenn Bedingung nicht erfüllt ist)
Anweisung;
Anweisung;
}
Mit if leiten Sie eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie Vergleichsoperatoren und in den meisten Fällen auch Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-Zweig definieren. Dies geschieht durch else (else = sonst). Der Else-Zweig ist nicht zwingend erforderlich.
if oder else folgen, diese immer in geschweifte Klammern eingeschlossen werden müssen (siehe auch den Abschnitt über Anweisungsblöcke).
document.addEventListener('DOMContentLoaded', Geheim);
function Geheim () {
let Passwort = 'Traumtaenzer';
let Eingabe = window.prompt('Bitte geben Sie das Passwort ein', '');
if (Eingabe != Passwort) {
alert('Falsches Passwort!');
} else {
location.href = 'geheim.htm';
}
}
Das Beispiel stellt eine einfache Passwortabfrage dar.
Das Script ist in einer Funktion namens Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollständig geladen ist. Dazu wird dynamisch mit addEventListener das DOMContentLoaded-Event überwacht.
Innerhalb der Funktion fordert ein Dialogfenster (window.prompt()) den Anwender auf, das Passwort einzugeben. Der Rückgabewert von window.prompt(), das eingegebene Passwort, wird in der Variablen Eingabe gespeichert.
Mit if (Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert Traumtaenzer. Ist dies der Fall, sind also beide Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit alert() eine entsprechende Meldung ausgegeben. Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit location.href eine andere Seite aufgerufen, nämlich die "geschützte" Seite.
if-Kette
An Stelle einer einfachen Entweder-Oder Entscheidung kann es auch vorkommen, dass Sie zwischen mehr als zwei Fällen unterscheiden müssen. Um das zu lösen, können Sie im else-Zweig der if-Anweisung eine weitere if-Anweisung programmieren, und in deren else-Zweig noch eine, und so weiter, ganz nach Bedarf. Manche Programmiersprachen besitzen für diesen Zweck eine eigene elseif Klausel - nicht so JavaScript. Es ist auch nicht erforderlich. Schreiben Sie das if einfach hinter das else, mit einer Leerstelle dazwischen, und ändern Sie die Einrücktiefe nicht. Dann sieht es wie ein elseif aus.
let Eingabe = window.prompt('Geben Sie eine Zahl zwischen 50 und 100 ein:', ''),
Eingabewert = parseInt(Eingabe),
Text;
if (Eingabewert < 50) {
Text = 'Die Zahl ' + Eingabe + ' ist sicher zu klein.';
}
else if (Eingabewert > 100) {
Text = 'Die Zahl ' + Eingabe + ' ist eindeutig zu groß.';
}
else
Text = 'Na bitte, Sie haben die Aufgabe verstanden!';
}
alert(Text);
Es gibt auch die Möglichkeit, eine if-Kette durch den switch-Befehl zu ersetzen. Dazu später mehr.
Häufiges Problem - Zuweisung statt Vergleich
Ein Problem der Programmiersprachen, die auf die Programmiersprache C zurückgehen, ist die Ähnlichkeit von Vergleich und Zuweisung. Die Formulierungen if (a == 2) und if (a = 2) hat man schnell verwechselt. JavaScript bemerkt diesen Fehler nicht, denn es ist gültige Syntax. Die Wertzuweisung an eine Variable wird als Ausdruck aufgefasst, der einen Wert hat - nämlich den Wert, den man zuweist. Verschärft wird das Problem durch die Tatsache, dass JavaScript kein strenges Typsystem besitzt, das Alarm schlagen würde, wenn man der if-Anweisung einen Zahlenwert präsentiert, wobei sie doch einen boolescher Wert erwartet. Statt dessen gibt es Regelwerk, mit dem jeder mögliche Wert auf die booleschen Werte true oder false abgebildet werden kann. Sie können das im Abschnitt „Was ist Wahrheit?“ im Artikel zum Boolean-Typ nachlesen.
Die Regel für Zahlen lautet: 0 entspricht false, alles andere entspricht true. Der Wert der Zuweisung a = 2 ist 2, und 2 ist truthy, weswegen im folgenden Beispiel immer gemeldet wird, dass a gleich 2 sei.
if (a = 2)
alert('a ist 2');
else
alert('a ist nicht 2');
Eine einfache Möglichkeit, sich gegen solche Fehler zu schützen, besteht darin, die Abfrage umzudrehen. Schreiben Sie 2 == a statt a == 2. Zuweisungen an eine Zahl sind ein Syntaxfehler und brechen das Programm ab. Wenn Sie bei dieser Schreibweise ein Gleichheitszeichen vergessen, fällt es sofort auf.
Das hilft Ihnen natürlich nicht, wenn Sie zwei Variableninhalte miteinander vergleichen müssen. Aber vielleicht tröstet Sie es, dass diese Sache wie Skateboardfahren ist: man muss etliche Male auf die Nase gefallen sein, bis man es heraus hat.
Einfache Entweder-Oder-Abfrage
Für einfache Entweder-Oder-Bedingungen gibt es mit dem bedingten (ternären) Operator eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden können.
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#check').addEventListener('click', Antwort);
function Antwort () {
let Ergebnis = (document.Formular.Eingabe.value == '42') ? 'RICHTIG!' : 'FALSCH!';
let text = 'Die Antwort ist ' + Ergebnis;
document.querySelector('output').innerText = text;
}
});
Das Beispiel enthält eine JavaScript Funktion namens Antwort().
Wenn das Dokument geladen wird, wird mit addEventListener ein EventHandler hinzugefügt, der aufgerufen wird, wenn der Anwender in dem Formular auf den Klick-Button mit der Aufschrift OK und der id="check" klickt, und zwar mit dem click-Event.
Die Funktion prüft, ob der Wert des Eingabefeldes im Formular (document.Formular.Eingabe.value) den Wert 42 hat. Abhängig davon wird der Variablen Ergebnis entweder der Wert RICHTIG! oder FALSCH! zugewiesen. Anschließend wird ein entsprechender Satz zusammengesetzt (siehe dazu auch Operator für Zeichenkettenverknüpfung) und im output-Element ausgegeben.
Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss in Klammern stehen, im Beispiel (document.Formular.Eingabe.value == "42"). Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfüllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert für den Fall, dass die Bedingung nicht erfüllt ist. Da es sich um Werte handelt, die für die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abfrage in der Regel eine Variable vorangestellt, im Beispiel die Variable Ergebnis. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abfrage zugewiesen.
Um Bedingungen zu formulieren, brauchen Sie Vergleichsoperatoren.
Fallunterscheidung mit "switch"
Der Begriff switch ist mehrdeutig.- JavaScript Fallunterscheidung mit "switch"
- PHP: Switch
- SVG - foreignObject und switch
Mit if und else können Sie genau zwei Fälle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fällen unterscheiden wollen, können Sie zwar eine if-Kette aufbauen, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit "switch".
let Eingabe = window.prompt('Geben Sie eine Zahl zwischen 1 und 4 ein:', ''),
Text = '';
switch (Eingabe) {
case "1":
Text = 'Sie sind sehr bescheiden!';
break;
case "2":
Text = 'Sie sind ein aufrichtiger Zweibeiner!';
break;
case "3":
Text = 'Sie haben ein Dreirad gewonnen!';
break;
case "4":
Text = 'Gehen Sie auf allen Vieren und werden Sie bescheidener!';
break;
default:
Text = 'Sie bleiben leider dumm!';
break;
}
let ausgabe = document.getElementById('ausgabe');
ausgabe.textContent = Text;
Mit switch leiten Sie eine Fallunterscheidung ein (switch = Schalter). Die Anweisung funktioniert so, dass man einen zu prüfenden Wert vorgibt, und dann eine Liste von möglichen Vergleichswerten mit den zugehörigen Aktionen folgt.
Den zu prüfenden Wert notiert man, in runde Klammern eingeschlossen, direkt hinter der switch-Anweisung. Dieser Wert kann aus einer Variablen kommen oder ein Ausdruck sein. Es kann auch eine Konstante sein, auch wenn Ihnen das vielleicht zunächst sinnlos erscheinen mag.
Im Beispiel wird die Variable mit dem Namen Eingabe verwendet. Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster (window.prompt()) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und 4 einzugeben. Der eingegebene Wert wird in Eingabe gespeichert.
Die eigentliche Liste von Vergleichen wird in geschweifte Klammern eingeschlossen. Jeder einzelne Vergleich beginnt mit dem Schlüsselwort case (case = Fall), gefolgt von dem Wert, der mit dem zu prüfenden Wert zu vergleichen ist. Für den Vergleichswert sind keine Klammern erforderlich, den Übergang vom Vergleichswert zu den Anweisungen, die bei Gleichheit auszuführen sind, markieren Sie durch einen Doppelpunkt. Die Klausel case "1": im obigen Beispiel bedeutet also so viel wie: 'wenn der zu prüfende Wert der Zeichenkette "1" entspricht'.
== und ===. Das doppelte Gleichheitszeichen versucht, den Typen der abgefragten Werte aneinander anzupassen, bevor es den Vergleich durchführt, deswegen ist beispielsweise "2" == 2 wahr. Das dreifache Gleichheitszeichen ist strenger; wenn die Typen der verglichenen Werte verschieden sind, ist das Vergleichsergebnis grundsätzlich "falsch". Die switch-Anweisung verwendet den ===‑Vergleich.Die Anweisungen für einen Fall werden durch die Anweisung break (break = abbrechen) abgeschlossen. Wenn Sie diese Anweisung nicht notieren, läuft die Programmausführung einfach in den nächsten case hinein. Im Normalfall werden Sie das nicht wollen - aber man kann das auch ausnutzen. Dazu gleich mehr.
Für den Fall, dass keiner der definierten Fälle zutrifft, können Sie am Ende der Fallunterscheidung den Fall default: notieren (ohne einen Wert). Die darunter stehenden Anweisungen werden ausgeführt, wenn keiner der anderen Fälle zutrifft.
Besonderheit: gleiche Anweisungen
Manchmal soll für verschiedene Werte der Fallunterscheidung derselbe Code ausgeführt werden. Dazu setzen Sie einfach die entsprechenden Fälle untereinander und nutzen den Umstand, dass ein fehlendes break in den nächsten case hineinläuft (oder „durchfällt“ - der englische Begriff hierfür ist fall-through).
let Eingabe = window.prompt('Geben Sie eine Zahl von 1 bis 6 ein:', ''),
Text = 'Ihre Eingabe ist ';
switch (Eingabe) {
case "1":
Text += 'weder eine Prim- noch eine zusammengesetzte Zahl.';
break;
case "2":
case "3":
case "5":
Text += 'eine Primzahl.';
break;
case "4":
case "6":
Text += 'eine zusammengesetzte Zahl.';
break;
default:
Text += 'ungültig.';
break;
}
Besonderheit: Wertebereiche
Eingangs wurde erwähnt, dass man hinter switch auch eine Konstante notieren kann. Ebenso lässt sich hinter case an Stelle einer Konstanten auch ein Ausdruck schreiben. Das dient dazu, die switch-Anweisung sozusagen auf den Kopf zu stellen. Statt einen berechneten Wert mit einer Liste von Konstanten zu vergleichen, können Sie auch eine Konstante mit einer Liste von berechneten Werten vergleichen.
Im einfachsten Fall schreiben Sie in die switch-Anweisund den Prüfwert true und verwenden in den case-Klauseln Ausdrücke, die einen Wahrheitswert liefern. JavaScript geht die case-Klauseln von oben nach unten durch und wertet die Ausdrücke soweit aus, bis es eine Übereinstimmung mit dem Prüfwert findet. Die weiteren case-Klauseln bleiben unbeachtet.
let Eingabe = window.prompt('Geben Sie eine Zahl zwischen 50 und 100 ein:', ''),
EingabeWert = parseInt(Eingabe),
Text;
switch (true) {
case EingabeWert < 50:
Text = 'Die Zahl ' + Eingabe + ' ist sicher zu klein.';
break;
case EingabeWert > 100:
Text = 'Die Zahl ' + Eingabe + ' ist eindeutig zu groß.';
break;
default:
Text = 'Na bitte, Sie haben die Aufgabe verstanden!';
break;
}
Sie können die Ausdrücke hinter case für bessere Lesbarkeit in Klammern setzen - syntaktisch notwendig ist das nicht. Und Sie sind nicht auf einen switch (true) beschränkt, da kann jeder Wert stehen. Interessant könnte ein switch (false) sein, wenn Sie eine Liste von Prüfungen durchlaufen möchten und einen Fehler erzeugen wollen, sobald eine dieser Prüfungen nicht erfüllt ist. Oder ein switch (5), wenn Sie mehrere Variablen mit Werten haben und eine finden wollen, deren Wert 5 ist. Es hängt ganz von Ihrer Problemstellung ab.
Weblinks
- ECMAScript 2015 (6th Edition, ECMA-262): If-Statement
- ECMAScript 2015 (6th Edition, ECMA-262): Switch-Statement
- MDN: If-Statement
- MDN: Switch-Statement
