Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

JavaScript/Tutorials/Einstieg/Kontrollstrukturen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
45min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine

Ein Programm ist ja nicht nur eine unveränderliche Kette von aufeinanderfolgenden Anweisungen, sondern soll auf Eingaben unterschiedlich 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.

Verzweigung[Bearbeiten]

Das Schlimmste, was einem angehenden Software-Ingenieur passieren kann, ist, dass der kleine Bruder versucht einen Blick auf unser Programm zu werfen. Deshalb bauen wir als nächsten Schritt nun eine Altersabfrage ein.

Wenn-dann-Bedingung mit if[Bearbeiten]

Beispiel: 4. Eingabe von Namen und Alter ansehen …
 1 'use strict';
 2 var name  = '';
 3 var alter = '';
 4 const erwachsen = 18;
 5 
 6 name = prompt('Bitte geben Sie Ihren Namen ein!', name);
 7 alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
 8 
 9 if (alter < erwachsen) {
10     alert('Du kommst hier net rein!');
11 }
12 else {
13     var ausgabe = 'Hallo, ' + name;
14     alert(ausgabe);
15 }
Das Beispiel ähnelt dem letzten Beispiel. Allerdings wird eine weitere Variable alter deklariert und ebenfalls abgefragt. 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 9 wird mit mit einer Wenn-Dann-Bedingung überprüft, ob der in runden Klammern stehende Ausdruck (alter < erwachsen) richtig ist.

Falls ja, wird der in geschweiften Klammern stehende Anweisungsblock ausgeführt. Falls die Bedingung nicht zutrifft, wird der zweite Anweisungsblock ausgeführt und der Name ausgegeben.

Beachten Sie: Es ist nicht zwingend nötig, den ersten Anweisungsblock in geschweifte Klammern zu setzen, da er nur aus einer Zeile besteht. Aus Gründen der Übersichtlichkeit (und falls Sie später den Code erweitern) ist dies jedoch zu empfehlen.

Computerprogramme tun genau das, was man ihnen sagt. Es wird überprüft, ob die Variable kleiner als der Wert von erwachsen ist. Was passiert aber, wenn Sie anstatt einer Zahl ein Wort (eine Zeichenkette = string) eingeben?

Verflixt, die Eingabe einer Zeichenkette überlistet unsere Wenn-Dann-Bedingung, da es in JavaScript keine festgelegten Datentypen für Variablen gibt. Auch wenn wir für eine Variable eine Zahl vorgeben, wird durch die Eingabe eines Buchstabens eine Zeichenkette daraus.

 var breite = 5 + 10;

 var breite = breite + 'px';

Auch bei diesem Beispiel wird die Variable breite durch die Verkettung mit dem String 'px' zu einem String, obwohl sie vorher vom Typ number war und ihr der Wert einer Addition zugewiesen wurde.

Eine Möglichkeit wäre es, den Ausdruck umzukehren (alter >= erwachsen) und die beiden Anweisungsblöcke zu vertauschen. Sie können aber auch überprüfen, ob die Variable alter eine gültige Zahl ist und dann ebenfalls den Ablehnungstext ausgeben.

Beispiel: 5. Altersabfrage mit Gültigkeitsüberprüfung ansehen …
 1   var name  = '',
 2       alter = '',
 3       ablehnungsText = 'Du kommst hier net rein!';
 4       const erwachsen = 18;
 5 
 6   name = prompt('Bitte geben Sie Ihren Namen ein!', name);
 7   alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
 8 
 9   if (isNaN(alter)) {
10     alert(ablehnungsText);
11   }
12 
13   else if (alter >= erwachsen) {
14     var ausgabe = 'Hallo, ' + name;
15     alert(ausgabe);
16   }
17       
18   else {
19     alert(ablehnungsText);
20   }
Wir fügen in Zeile 9 eine weitere bedingte Anweisung ein, die mittels der Funktion isNaN überprüft, ob die Variable alter keine gültige Zahl ist. Falls die Bedingung zutrifft, alter also keine gültige Zahl ist, wird der Ablehnungstext ausgegeben.

Ansonsten wird nach else if eine weitere bedingte Anweisung notiert, in der überprüft wird, ob alter kleiner oder größer/gleich als der Wert der Konstante erwachsen ist. Trifft die Bedingung zu, wird der Begrüßungstext ausgegeben; trifft sie nicht zu, folgt der Ablehnungstext.

Dieser Ablehnungstext ist jetzt, damit er nicht zweimal notiert werden muss, am Anfang des Skripts als Variable deklariert worden.


Verzweigung mit switch[Bearbeiten]

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:

Beispiel: 6. Altersabfrage mit Gültigkeitsüberprüfung ansehen …
 1 'use strict';
 2 var name  = '';
 3 var alter = '';
 4 var eingabe = '';
 5 var text = '';
 6 const erwachsen = 18;
 7 
 8 name = prompt('Bitte geben Sie Ihren Namen ein!', name);
 9 alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
10 
11 if (isNaN(alter)) {
12     eingabe = 'dumm';
13 } 
14 else if (alter < erwachsen) {
15     eingabe = 'jung';
16 } else {
17     eingabe = 'ok';
18 }
19 
20 switch (eingabe) {
21     case 'jung':
22         text ='Du bist leider zu jung!';
23         break;
24     case 'dumm':
25         text ='Sie sind leider zu dumm, eine Zahl einzugeben!';
26         break;
27     default:
28         text ='Hallo, ' + name;
29         break;
30 }
31   
32 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.

Schleifen[Bearbeiten]

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.

while[Bearbeiten]

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.


Beispiel: 7. Wiederholung einer Anweisung mit While ansehen …
'use strict';
var zahl,
    text;

zahl = prompt('Bitte geben Sie eine Zahl ein!', zahl);

while (zahl >= 1) {
    text = zahl + '- 1 = ' + (zahl-1) + '<br>';
    zahl = zahl -1;
    document.write(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 document.write ausgegeben.

Damit nicht alles nebeneinander ausgegeben wird, wird der Variablen text ein Zeilenumbruch br angefügt.


Beachten Sie:
Weder die Ausgabe mit alert() noch document.write() entsprechen der best practice!
Die hier verwendeten Scripte verzichten auf jegliches HTML. Normalerweise werden einzelne Elemente im DOM herausgesucht und ihr Inhalt überschrieben (siehe auch: DOM-Tutorial: Ausgabefunktion). Wir wollten es hier aber bewusst einfach halten.

for[Bearbeiten]

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.

Beispiel: 8. Zählschleife mit for ansehen …
'use strict';
var zahl,
    text;

confirm('Sind Sie bereit?');

for (var i = 1; i <= 10; i++) {
    zahl =  i * i;	  
    text = zahl +' = '+ i +' * '+ i +'<br>';
    document.write(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:

Beispiel: 8. Countdown-Zählschleife mit for
// ... Rest genau wie oben ...

for (var i = 10; i >= 1; i--) {

// ... Rest genau wie oben ...


[[Kategorie:Tutorial]