JavaScript/Tutorials/Einstieg/Kontrollstrukturen
Text-Info
- 15min
- einfach
- keine
Ein Programm ist nicht nur eine geradlinige Kette von aufeinander folgenden Anweisungen, sondern soll z.B. auf Eingaben unterschiedlich reagieren oder auf gewisse Umstände hin entsprechend reagieren. Dafür kann man bedingte Anweisungen verwenden, die bei Erfüllen einer Bedingung einen Anweisungsblock ausführen, bei Nichterfüllen nichts oder etwas anderes tun.
Inhaltsverzeichnis
Bedingte Anweisungen (Verzweigungen)
Das Schlimmste, was einem angehenden Software-Ingenieur passieren kann, ist, dass der kleine Bruder versucht, einen Blick auf sein Programm zu werfen. Deshalb bauen wir als nächsten Schritt nun eine Altersabfrage ein. In unserem Quellcode wollen wir uns auch mehr einer HTML Seite nähern, und darum zeigen wir nun auch einen Teil des Grundgerüsts, das Sie im HTML Tutorial kennengelernt haben.
Wenn-dann-Bedingung mit if
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>4. Eingabe von Namen und Alter</title>
6 </head>
7 <body>
8 <script>
9 'use strict';
10 const erwachsen = 18;
11 let
12 name = '',
13 alter = '';
14
15 name = prompt('Bitte geben Sie Ihren Namen ein!');
16 alter = prompt('Bitte geben Sie Ihr Alter ein!');
17
18 if (alter < erwachsen) {
19 alert('Du kommst hier net rein!');
20 }
21 else {
22 alert(`Hallo ${name}!`);
23 }
24 </script>
25 </body>
26 </html>
Das vorherige Beispiel wurde so ausgebaut, dass eine weitere Variable alter deklariert und ebenfalls abgefragt wird. Dazu kommt eine Konstante erwachsen mit dem Wert 18. Eine Konstante ist eine Variable, deren Wert während des Programmablaufs nicht verändert werden kann.
In Zeile 16 wird mit einer if-Anweisung überprüft, ob der in runden Klammern stehende Ausdruck (alter < erwachsen) richtig ist. Der Operator < vergleicht die Werte auf seiner linken und rechten Seite und liefert den logischen Wert true, wenn der linke Wert kleiner ist. Die if-Anweisung prüft, ob sie true erhält (oder einen Wert, den sie als true interpretieren kann).
Ist das der Fall, wird der direkt dahinter in geschweiften Klammern stehende Anweisungsblock ausgeführt. In vielen Programmiersprachen wird dem Anweisungsblock für true noch das Schlüsselwort then vorangestellt (in JavaScript nicht!), deshalb spricht man bei diesem Block auch vom then-Zweig der Abfrage. Falls die Bedingung nicht zutrifft, kann mit Hilfe des Schlüsselworts else (sonst) ein Anweisungsblock vorgegeben werden, der statt dessen ausgeführt werden soll. Diesen nennt man dementsprechend den else-Zweig.
Unser Beispiel gibt im then-Zweig die Meldung aus, dass eine unbefugte Nutzung vorliegt. Gelangt das Programm in den else-Zweig, gilt der Anwender als berechtigt und wird mit seinem Namen begrüßt..
Verzweigung mit 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 mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit switch:
1 'use strict';
2 let
3 name = '',
4 alter = '',
5 eingabe = '',
6 text = '';
7
8 const erwachsen = 18;
9
10 name = prompt('Bitte geben Sie Ihren Namen ein!');
11 alter = prompt('Bitte geben Sie Ihr Alter ein!');
12
13 if (isNaN(alter)) {
14 eingabe = 'dumm';
15 }
16 else if (alter < erwachsen) {
17 eingabe = 'jung';
18 } else {
19 eingabe = 'ok';
20 }
21
22 switch (eingabe) {
23 case 'jung':
24 text ='Du bist leider zu jung!';
25 break;
26 case 'dumm':
27 text ='Sie sind leider zu dumm, eine Zahl einzugeben!';
28 break;
29 default:
30 text = `Hallo ${name}!`;
31 break;
32 }
33
34 alert(text);
In diesem Beispiel wird die eingegebene Variable alter überprüft und anhand dessen einer neuen Variable eingabe ein Wert zugewiesen.
In einer switch-Abfrage wird dieser Wert wieder abgefragt und ein entsprechender Text ausgegeben.
== und ===. Das zweifache Gleichheitszeichen versucht, die Typen der verglichenen Werte aneinander anzupassen, bevor der Vergleich stattfindet, und würde 2 == "2" mit „wahr“ beantworten. Das dreifache Gleichheitszeichen prüft dagegen strikt und ergibt für jeden Vergleich, bei dem die Typen der verglichenen Werte nicht übereinstimmen, ein „falsch“. Die switch-Anweisung verwendet den strikten Vergleich mit ===!Schleifen
Zu den wichtigsten Kontrollstrukturen gehören Schleifen (auch „Wiederholung“ oder englisch loop) mit denen Sie einen Anweisungs-Block – den sogenannten Schleifenrumpf oder Schleifenkörper – wiederholt durchlaufen, solange die Schleifenbedingung gültig bleibt bzw. als Abbruchbedingung nicht eintritt.
Auf dieser Tutorialseite stellen wir nur zwei einfache Schleifenkonstrukte vor. Es gibt noch weitere Schleifenkonstrukte in JavaScript.
while
Mit Hilfe von while-Schleifen wiederholen Sie Programmanweisungen beliebig oft, nämlich solange, wie die im Schleifenkopf formulierte Bedingung erfüllt ist. Solche Schleifen eignen sich dann, wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll.
'use strict';
let zahl, text;
zahl = prompt('Bitte geben Sie eine Zahl ein!');
while (zahl >= 1) {
text = zahl + '- 1 = ' + (zahl-1);
zahl = zahl -1;
alert(text);
}
In diesem Beispiel wird von der eingegebenen Zahl zahl in einer Schleife solange eins subtrahiert, bis die Summe 0 erreicht ist.
Der Rechenweg wird in der Variablen text gespeichert und dann mit alert ausgegeben.
for
Bei einer for-Schleife zählt der Computer von einer Anfangszahl bis zu einer Endzahl und wiederholt dabei jedes mal den Codeblock („Schleifenrumpf“) hinter dem for(...). Die aktuelle Zahl wird in eine Variable i („Iterator“) gesetzt, damit sie bei Bedarf in dem Codeblock Verwendung finden kann.
'use strict';
let
zahl,
text;
confirm('Sind Sie bereit?');
for (let i = 1; i <= 10; i++) {
zahl = i * i;
text = zahl +' = '+ i +' * '+ i ;
alert(text);
}
Sobald sie mit confirm() bestätigen, wird die Schleife ausgeführt.
Die Zählschleife wird insgesamt 10 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 1 initialisiert wird, kleiner oder gleich 10 ist (Ausdruck i <= 10), wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (Ausdruck i++).
Die Zählvariable i wird mit sich selbst multipliziert und der Variable zahl zugewiesen.
Anschließend wird alles ausgegeben.
Man kann der Variablen auch einen anderen Namen geben (z. B. zaehler); konventionsgemäß nennt man sie aber meistens i, so wie auch hier in unserem Beispiel.
Ebenso ist es möglich, die Variable hinunter- statt hinaufzählen zu lassen (i-- statt i++). In diesem Fall muss man aber den Anfangs- und den Endwert anpassen – denn wenn i mit dem Wert 1 anfängt und dann immer heruntergezählt wird, dann wird die Bedingung i <= 10 immer zutreffen und die Schleife wird unendlich oft durchlaufen. (Anmerkung: In Wirklichkeit wird sie nicht unendlich oft durchlaufen, sondern „nur“ einige Milliarden Male, bis es zu einem sogenannten Überlauf kommt; in der Praxis macht dies für uns hier aber keinen Unterschied.)
Für einen Countdown müsste die entsprechende Zeile also wie folgt aussehen:
// ... Rest genau wie oben ...
for (let i = 10; i >= 1; i--) {
// ... Rest genau wie oben ...
