Programmablauf

Um einen Programmablauf zu steuern, ist es sinnvoll, Code zu generieren, der nur ausgeführt wird, wenn bestimmte Bedingungen erfüllt sind.

Dafür verwenden wir das Schlüsselwort "if". "if" leitet eine bedingte Anweisung ein. Zur Verdeutlichung spielen wir wieder etwas mit Zahlen.

Bedingte Anweisung


let geb_jahr = 2001;
if (geb_jahr > 2000) {
 console.log('Das Geburtsjahr ist größer als 2000');
}

In unserer ersten "if-Anweisung" prüfen wir, ob das Geburtsjahr nach "2000" ist. Dazu schreiben wir nach dem Schlüsselwort "if" die zu prüfende Bedingung in runden Klammern. Direkt nach der Bedingung erstellen wir einen Anweisungsblock innerhalb von geschweiften Klammern. Dieser Anweisungsblock wird nur ausgeführt, wenn die Bedingung nach dem Schlüsselwort "if" erfüllt ist.

Jetzt, wo wir bedingte Anweisungen kennen, widmen wir uns den verzweigten Anweisungen. Der Aufbau ist wie im ersten Beispiel, nur am Ende des ersten Anweisungsblocks setzen wir das Schlüsselwort "else" ein.

Entweder - Oder


let geb_jahr = 1980;
if (geb_jahr > 2000) {
 console.log('Das Geburtsjahr ist größer als 2000');
} else {
 console.log('Das Geburtsjahr ist kleiner als 2000');
}

Mit dem Schlüsselwort "else" sagen wir, dass der zweite Anweisungsblock ausgeführt werden soll, wenn die Bedingung nach dem "if" nicht erfüllt nicht. Ein klassischer Fall von entweder – Oder. Ist die Bedingung erfüllt, wird der erste Anweisungsblock ausgeführt und wenn er nicht erfüllt wird, dann wird der zweite Anweisungsblock ausgeführt. In jedem Fall wird einer der beiden ausgeführt.

Jetzt reicht uns aber nicht die Entscheidung entweder – Oder denn wir wollen mehrere Anweisungen prüfen.

Mehrere Bedingungen prüfen


let geb_jahr = 2000;
if (geb_jahr > 2000) {
 console.log('Das Geburtsjahr ist größer als 2000');
} else if (geb_jahr == 2000) {
 console.log('Das Geburtsjahr ist exakt als 2000');
} else {
 console.log('Das Geburtsjahr ist kleiner als 2000');
}

Mit "else if" stellen wir eine zweite Bedingung, die geprüft werden soll. Das Programm prüft die erste Bedingung, wenn diese zutrifft, wird der zugehörige Anweisungsblock ausgeführt und die anderen Bedingungen werden nicht mehr geprüft. Sollte die erste Anweisung nicht zutreffen, dann wird die zweite Anweisung geprüft. Ist die Bedingung der zweiten Anweisung erfüllt, so wird der zweite Anweisungsblock ausgeführt. Sollte keine der beiden Bedingungen erfüllt sein, so wird der letzte Anweisungsblock ausgeführt. Dabei können beliebig viele "else if" Bedingungen eingefügt werden. Wichtig ist, die Reihenfolge der Bedingungen richtig einzuordnen. Wenn die erste Bedingung erfüllt ist, so wird der nachfolgende Anweisungsblock ausgeführt und die restlichen Bedingungen, werden nicht einmal mehr überprüft. Diese Prüfung von Bedingungen können wir auch verschachteln. Einfach eine "if"-Bedingung in den Anweisungsblock einer vorherigen "if"-Bedingung schreiben.

Wenn nur ganz einfache Anfragen gestellt werden, die nur 2 Zustände haben, wie es bei einer Altersprüfung der Fall sein kann, dann können wir auch Folgendes schreiben.

Ternärer Operator


let alter = prompt('Bitte geben Sie Ihr Alter an:');
let alterspruefung = alter >= 18 ? 'mindestens 18' : 'unter 18';
 console.log(alterspruefung);

In der ersten Variablen speichern wir den Wert, welchen wir nach einer Usereingabe erhalten. Denn die Funktion "prompt" öffnet ein Eingabefenster, um mit dem User zu kommunizieren. In der zweiten Zeile erstellen wir eine Variable mit dem Namen "alterspruefung". Rechts neben dem Zuweisungsoperator (=) stehen gleich 3 Operanden. Der erste Operand ist die Bedingung (">=18")

Darauf folgt ein Fragezeichen als "ternärer Operator". Der zweite Operand ist der Wert, der unserer Variablen "alterspruefung" zugewiesen wird, wenn die Bedingung erfüllt ist. Der dritte Operand wird demnach der Variablen "alterspruefung" zugewiesen, wenn die Bedingung nicht erfüllt wird. Der zweite und dritte Operand sind dabei mit einem Doppelpunkt voneinander getrennt.

Mehrfachverzweigungen

Eine andere Art der Verzweigung ist Mehrfachverzweigung auch bekannt als "switch"-Verzweigung. Im Grunde genommen funktioniert sie wie die "if else" Verzweigung nur für den Fall, dass eine Variable mehrere Werte annehmen kann, ist sie etwas übersichtlicher. In diesem Beispiel nehmen wir die Uhrzeit zur Erklärung der Mehrfachverzweigung.

switch Anweisungen


let uhrzeit = 8;
switch (uhrzeit) {
 case (6):
 case (7):
 case (8):
 case (9):
 case (10):
 case (11):
 case (12):
  console.log('Es ist Vormittags');
  break;
 case (13):
 case (14):
 case (15):
 case (16):
 case (17):
  console.log('Es ist Nachmittags');
  break;
 case (18):
 case (19):
 case (20):
 case (21):
  console.log('Es ist Abends');
  break;
 case (22):
 case (23):
 case (0):
 case (1):
 case (2):
 case (3):
 case (4):
 case (5):
  console.log('Es ist Nachts');
  break;
 default:
 console.log('Ungültige Uhrzeit');
}

Wir haben eine Variable mit dem Namen "uhrzeit", diese hat Vorübergehen den Wert "8" für 8 Uhr bekommen. Mit dem Schlüsselwort "switch" wird die Mehrfachverzweigung eingeleitet. Nach dem Schlüsselwort "switch" folgt in runden Klammern ein Ausdruck, in unserem Fall die Variable "uhrzeit". Nach dem Ausdruck steht zwischen geschweiften Klammern der Verzweigungsblock. Innerhalb dieses Blockes haben wir durch das Schlüsselwort "case" mehrere Programmzweige, an dem wir mit dem Programm fortfahren können. Haben wir einen Treffer so wie bei der "8", wird das Programm alle Anweisungen ausführen, die hinter dem Doppelpunkt stehen, bis es auf das Schlüsselwort "break" trifft. Wenn das Programm bei "break" ankommt, wird der restliche Block nicht mehr verarbeitet und das Programm springt dann bis zur schließenden geschweiften Klammer und nimmt dort wieder die Arbeit auf. Sollte das Programm keinen passenden Verzweigungspunkt innerhalb des Codeblocks finden, dann wird der Teil nach dem Schlüsselwort "default" ausgeführt. So wird in jedem Fall etwas ausgeführt. Ob eine "if else" Verzweigung oder eine "switch" Verzweigung genommen werden sollte, ist meist abhängig von der Tatsache, was das Programm zum Schluss ausführen soll.

Schleifen

Wenn sich bestimmter Programmcode wiederholen soll, dann verwenden wir die so genannten Schleifen.

JavaScript bietet davon 3 verschiedene. Die erste dieser Schleifen ist die "for"-Schleife. Sie wird verwendet, wenn der Programmierer genau weiß, wie oft ein bestimmter Programmcode ausgeführt werden soll. Zum Beispiel beim Runterzählen eines Countdowns.

Die for Schleife


for (
 let i = 10;
 i >= 0;
 i --
) {
 console.log(i);
}

10 9 8 7 6 5 4 3 2 1 0

Eingeleitet wird die Schleife mit dem Schlüsselwort "for". In den folgenden runden Klammern stehen 3 Informationen für die Schleife.

Die Initialisierung. Dieser Code wird vor dem Ausführen der Schleife einmal ausgeführt.
Die Bedingung. Hier wird überprüft ob die Schleife weiter ausgeführt werden soll.
Der Inkrementierungsausdruck / Dekrementierungsausdruck. Dieser Code wird nach jedem Schleifendurchlauf ausgeführt.

Zwischen den geschweiften Klammern steht der eigentliche Schleifenkörper. In unserem Programm geben wir als Erstes der Variablen "i" den Wert "10". Dabei steht das "i" für Initialisierung oder Index. Als Nächstes wird geprüft ob "i" größer oder gleich "0" ist. Wenn die Bedingung zutrifft, wird der Schleifenkörper das erste Mal ausgeführt. Wir bekommen den Wert "10" von der Konsole ausgegeben. Nach dem ersten Schleifendurchlauf wird die Variable "i" durch den Dekrementierungsoperator um ein verringert. Also hat "i" jetzt den Wert von "9". Nun wird wieder die Bedingung geprüft usw. bis die Bedingung nicht mehr zutrifft an dieser Stelle wird die Schleife einfach beendet.

Auch Schleifen können in JavaScript verschachtelt werden.

Verschachtelte for Schleifen


for (let a = 1; a <= 3; a++) {
 for (let b = 1; b <= 3; b++) {
  console.log('a hat den Wert ' + a + ' und b hat den Wert ' + b);
 }
}

a hat den Wert 1 und b hat den Wert 1 a hat den Wert 1 und b hat den Wert 2 a hat den Wert 1 und b hat den Wert 3 a hat den Wert 2 und b hat den Wert 1 a hat den Wert 2 und b hat den Wert 2 a hat den Wert 2 und b hat den Wert 3 a hat den Wert 3 und b hat den Wert 1 a hat den Wert 3 und b hat den Wert 2 a hat den Wert 3 und b hat den Wert 3

Jetzt wird die erste Schleife einmal ausgeführt und direkt darauf auch gleich die verschachtelte zweite Schleife. Die zweite Schleife wird so lange wiederholt, bis die Variable "b" den Wert von "3" erreicht hat, dann wird die erste Schleife ein zweites Mal durchlaufen und so weiter. Insgesamt gibt es 9 Durchläufe, bis die verschachtelte Schleife beendet wird.

Als Nächstes betrachten wir die kopfgesteuerte Schleife, die auch "while-Schleife" genannt wird. Eingeleitet wird diese Schleife mit dem Schlüsselwort "while".

While Schleife (Kopfgesteuert)


let c = 1;                    
while (c < 11) {
 console.log(c);
 c ++;
}

1 2 3 4 5 6 7 8 9 10

Bei ihr wird zuerst geprüft, ob die Bedingung in den runden Klammern erfüllt ist. Solange der boolesche Wert: "true" zurückgegeben wird, ist die Bedingung erfüllt und die Anweisungen im Schleifenkörper werden ausgeführt. Das bedeutet auch, dass es mindestens eine Möglichkeit geben sollte, die Schleife zu beenden, da es sonst zu einer Endlosschleife kommen kann.

Genau entgegengesetzt von der kopfgesteuerten Schleife funktioniert die fußgesteuerte Schleife, auch als "do-while-Schleife" bekannt. Sie wird mit dem Schlüsselwort "do" eingeleitet und wird Minimum einmal ausgeführt, weil die Bedingung erst nach Schleifendurchlauf geprüft wird.

While Schleife (Fußgesteuert)


let d = 1;                    
 do {
  console.log(d);
   d++;   
 } while (d < 11)

1 2 3 4 5 6 7 8 9 10

Nachdem der Schleifenkörper ausgeführt wurde, wird geprüft, ob die Bedingung "true" ist. Erst wenn die Bedingung "false" ist, wird die Schleife beendet.

Weiter mit Funktionen