Prrogramm-Ablauf
Aus der Kombination von Abfragen, Verzweigungen und Zuweisungen entsteht die Programmlogik für komplexe Abläufe.
Scriptablauf steuern
Es gibt zwei grundlegende Methoden, den Programmfluss in Javascript zu steuern:
if (Bedingung) {
Anweisungen;
}
if (Bedingung) {
Anweisungen;
} else {
Anweisungen;
}
switch (Ausdruck) {
case label1:
Anweisungen;
break;
case label2:
Anweisungen;
break;
...
}
while (Bedingung) {
Anweisungen;
}
do {
Anweisungen;
} while (Bedingung);
for (Anweisung; Bedingung; Anweisung) {
Anweisungen;
}
Bedingungen
Bedingung werden mit Vergleichsoperatoren und logischen Operatoren wie gleich, größer, enthalten formuliert.
Die if-Bedingung ist meist ein Vergleich zweier Werte oder Variablen (werden Zeichenketten miteinander vergleichen, gilt die lexikalische Ordnung).
Die Frage nach der Existenz eines Objekts gehört zu den fundamentalen Bedingungen, die in fast allen Skripten gebraucht werden.
if (document.getElementById('myId')) {
…
}
Die if-Abfrage prüft, ob ein Element mit der id myId existiert.
Prüfen, ob eine Methode in einem Browser implementiert ist:
if (document.getElementById) {
…
}
Ob die Bedingung in der runden Klammer der if-Anweisung wahr oder falsch ist, wird anhand der Boole'schen Operationen (z.B. a > b?) festgestellt. Wenn bei der Boole'schen Operation true herauskommt, werden die Anweisungen innerhalb des Blocks in den geschweiften Klammern ausgeführt, wenn die Operation false liefert, werden die Anweisungen innerhalb des Blocks übersprungen. Auch eine Alternative kann gestellt werden – dann entsteht die if else-Abfrage.
Die Bedingung kann jeder Javascript-Ausdruck sein, der zu true oder false entwickelt werden kann. Die Anweisungen können beliebige Javascript-Anweisungen sein, insbesondere auch weitere if / if else Abfragen und somit tiefer verschachtelte Anweisungen.
Bedingte Ausführung: if else
if (Bedingung) {
Anweisungen1
} else {
Anweisungen2
}
Javascript if else führt Anweisungen aus, wenn eine Bedingung wahr ist. Der optionale else-Zweig wird ausgeführt, wenn die Bedingung nicht wahr ist. Die Bedingung muss dabei stets in runde Klammern gesetzt werden, damit kein Syntaxfehler entsteht.
if (zahl > 99) {
alert(zahl + ' ist zu groß!');
}
if (zahl > 99) {
alert(zahl + ' ist zu groß!');
} else {
alert(zahl + ' ist zu klein!');
}
Wenn mehr als eine Anweisung im if- oder else-Zweig ausgeführt werden sollen, müssen sie in geschweifte Klammern gesetzt werden, aber es gilt als gute Praxis, auch einzelne Anweisungen innerhalb des if- und else-Zweigs in geschweifte Klammern zu setzen.
Bei komplexen Bedingungen entstehen tief verschachtelte if than else-Anweisungen.
document.getElementById('raten').onclick = function() {
let zahl = document.getElementById('zahl').value;
let result = document.querySelector(".raten");
if (isNaN(zahl)) {
result.innerHTML = 'Eingabe ' + zahl + ' ist keine Zahl!';
} else {
if (zahl < 50) {
result.innerHTML = zahl + ' ist zu klein!';
} else if (zahl > 50) {
result.innerHTML = zahl + ' ist zu groß';
} else {
result.innerHTML = 'Bingo!';
}
}
}
Die erste Abfrage prüft, ob die Eingabe eine Zahl ist und gibt einen Hinweis aus, wenn dies nicht der Fall ist. else verzweigt in drei Fälle:
- Die Zahl ist kleiner als 50,
- die Zahl ist größer als 50,
- wenn die Zahl weder kleiner noch größer als 50 ist, muss es sich um die gesuchte Zahl handeln, so dass die Abfrage if (zahl == 50) entfallen kann.
Komplexe verschachtelte if-Anweisungen sind schwer nachvollziehbar und verschlechtern die Lesbarkeit des Skripts. Bei einer langen Liste von Alternativen hält Javascript switch / case die Steuerung einfacher. Auf jeden Fall aber gilt die Empfehlung: Halte den Code links!
Boolesche Bedingungen
Sogen. Logische Operatoren erzeugen komplexe Bedingungen: Wenn x < 400 oder x > 1000 oder wenn x == 400 und y > 20.
if (x < 400 || x > 1000) {
Anweisungen
}
if (x == 400 && y > 20) {
Anweisungen
}
Javascript oder / OR wird durch || notiert, und / AND durch &&
Fehler bei if else-Abfragen
Die Bedingung muss immer in runden Klammern notiert werden, ansonsten kommt es zu einem Syntax-Fehler:
Fehler: missing ( before condition in FireFox, Fehler: '(' erwartet in Internet Explorer und Parse Error in Safari. Internet Explorer und Safari können die Zeile mit dem Fehler nicht korrekt lokalisieren.
Die häufigste Fehlerursache liegt beim Gleichheitszeichen des Vergleichs (==), wenn anstelle des Vergleichs (==) eine Zuweisung (=) geschrieben wird. Dabei entsteht kein Syntaxfehler, sondern die Zuweisung wird tatsächlich durchgeführt, so dass die Bedingung immer true liefert.
