Javascript if then else

Javascript if-then-else

Javascript if then else, for, switch, while und do while steuern das Programm – wie in allen Programmiersprachen. if then else-Abfragen unterbrechen die linare Ausführung der Befehle und überspringen Anweisungen – abhängig von den Ergebnissen der Abfrage.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Prrogramm-Ablauf

Aus der Kombination von Abfragen, Verzweigungen und Zuweisungen entsteht die Programmlogik für komplexe Abläufe.

Programm-Ablauf-Plan
Programmablaufplan der klassischen Programmierung – für Javascript eher selten verwendet, denn Javascript wird eher von Ereignissen wie load, mouseover, touch, submit gesteuert.

Scriptablauf steuern

Es gibt zwei grundlegende Methoden, den Programmfluss in Javascript zu steuern:

  • Verzweigungen (if else | switch)
  • Schleifen und Iterationen (while | for)
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 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:

  1. Die Zahl ist kleiner als 50,
  2. die Zahl ist größer als 50,
  3. 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.