JavaScript - Kontrollstrukturen

Eine Anweisung ist ein Teil des Programms, das ausgeführt wird, um eine bestimmte Aktion durchzuführen. Sie wird durch ein Semikolon abgeschlossen. Mehrere Anweisungen werden in sogenannten Anweisungsblöcken zusammengefasst. In JavaScript werden die Anweisungen normalerweise von oben nach unten sequenziell abgearbeitet. Oft ist es jedoch erforderlich, dass Programmteile mehrmals oder gar nicht abgearbeitet werden sollen.

Um von der sequenziellen Abarbeitung des Programms abzuweichen, können wir bedingte Ausführungen und Schleifen einsetzen. Die Ausführung einer Anweisung ist dann von einer bestimmten Bedingung abhängig. Die Anweisungen können auch mehrfach ausgeführt werden.

Eine Anweisung ist die kleinste ausführbare Einheit eines Programms. In JavaScript werden Anweisungen mit einem Semikolon (Strichpunkt) abgeschlossen. Dies ist jedoch optional.

Ein Skript kann es erforderlich machen, dass eine Folge von zwei und mehr Anweisungen ausgeführt werden muss. In diesem Fall werden die betreffenden Anweisungen in einen Anweisungsblock eingeschlossen.

Der Anweisungsblock wird durch geschweifte Klammern begonnen und beendet. Die Blöcke können auch verschachtelt sein, um z.B. eine bedingte Anweisung innerhalb einer Funktion zu beschreiben. Dies bedeutet, ein geklammerter Anweisungsblock kann wiederum einen geklammerten Anweisungsblock beinhalten.

Je nachdem, wie viele alternativ abzuarbeitende Anweisungsblöcke zu einer Bedingung bzw. Bedingungskombination existieren, wird von einfacher, alternativer, mehrstufiger oder mehrseitiger Bedingung gesprochen. Einen Überblick über die verschiedenen Auswahlmöglichkeiten gibt Ihnen die folgende Abbildung.

Im einfachsten Fall soll ein Anweisungsblock nur dann ausgeführt werden, wenn eine Bedingung erfüllt ist. Eine Bedingung wird durch einen Ausdruck definiert, der als Ergebnis true oder f alse (wahr oder falsch) liefert. Die einfache Bedingung ist dadurch gekennzeichnet, dass nach einer Bedingungsabfrage eine oder mehrere Anweisungen (Anweisungsblock) ausgeführt werden oder nicht. Wenn die Bedingung erfüllt ist, dann werden die Anweisungen ausgeführt. Ist die Bedingung nicht erfüllt, werden sie nicht ausgeführt. In JavaScript wird dieses Konstrukt mit der if-Anweisung gebildet:

Das Schlüsselwort if leitet die einfache Bedingung ein. Die Bedingung selbst steht in runden Klammern. Als Bedingung ist ein logischer Ausdruck anzugeben.

Es wird geprüft, ob der Ausdruck den Wert true oder false zurückliefert, d.h., ob die nachfolgenden Anweisungen innerhalb der geschweiften Klammern ausgeführt werden sollen.

Wenn der Ausdruck den Wert false hat, werden alle Anweisungen innerhalb des Anweisungsblocks ignoriert.

Nach dem Ende des Anweisungsblocks ist die if-Anweisung beendet, und alle weiteren Anweisungen werden unabhängig von der Bedingung abgearbeitet.

Beispiel

var Angabe, Einheit;
Angabe = "Gewicht";
if (Angabe == "Gewicht")
{
 Einheit = "kg";
}

Wenn die Variable Angabe die Zeichenkette Gewicht enthält, wird der Variablen Einheit für die Angabe des Gewichts die Maßeinheit kg zugewiesen.

Soll in Abhängigkeit der Bedingung nur eine Anweisung ausgeführt werden, werden die geschweiften Klammern nicht benötigt:

if (Angabe == "Gewicht"; Einheit = "kg";

Die Ausführung eines Anweisungsblocks oder einer Anweisung kann von mehreren Bedingungen in mehreren Stufen abhängig sein. Hierzu werden die Bedingungsabfragen ineinander geschachtelt. Ist die erste Bedingung erfüllt, wird kontrolliert, ob auch die nächste Bedingung zutrifft. Trifft eine Bedingung nicht zu (f alse), wird die gesamte verschachtelte Auswahl verlassen.

Die if-else-Anweisung beschreibt nicht nur, was passieren soll, wenn eine Bedingung erfüllt ist, sondern enthält auch die Anweisungen für den Fall, dass sie nicht erfüllt ist. Dazu wird nach dem Anweisungsblock der if-Anweisung ein weiterer Anweisungsblock hinzugefügt, der durch das Schlüsselwort eise eingeleitet wird.

Beispiel

if (Angabe  ==  "Gewicht"){
 Einheit = "kg";
}
else {
 Einheit = "cm";
}

Wenn die Variable Angabe die Zeichenkette Gewicht enthält, wird der Variablen Einheit für die Angabe des Gewichts die Maßeinheit kg zugewiesen. Ansonsten erhält die Variable Einheit die Maßeinheit cm für die Angabe einer Länge.

Bei einer mehrstufigen Bedingung wird einer von mehreren Anweisungsblöcken in Abhängigkeit von verschiedenen Bedingungen ausgeführt. Wenn die erste Bedingung erfüllt ist, wird der erste Anweisungsblock ausgeführt. Ansonsten wird von mehreren Anweisungsblöcken derjenige durchgeführt, für den die Bedingung zutrifft. Wir können die mehrstufige Bedingung verwenden, wenn es mehr als zwei Auswahlmöglichkeiten gibt.

Die Einleitung der jeweils nächsten Bedingung erfolgt durch else if.

Beispiel

if   (Angabe == "Gewicht"){
  Einheit = "kg";
}  
else if (Angabe == "Länge"){	
  Einheit = "cm";
}  
else	
{
 Einheit = "s";
}

Wenn die Variable Angabe die Zeichenkette Gewicht enthält, wird der Variablen Einheit für die Angabe des Gewichts die Maßeinheit kg zugewiesen. Beinhaltet die Variable Angabe den Wert Länge, erhält die Variable Einheit den Wert cm. Treffen die vorherigen Bedingungen nicht zu, erhält die Variable Einheit die Maßeinheit s für die Zeitangabe.

Bei einer Fallauswahl, die auch Selektion heißt, wird der Wert einer Variablen ausgewertet und in Abhängigkeit von diesem Wert eine Anweisung bzw. ein Anweisungsblock ausgeführt. Die Variable, deren Inhalt geprüft werden soll, wird auch als Selektor bezeichnet. Für diese Bedingung verwenden wir die Schlüsselwörter switch und case.

Beispiel

switch (Angabe)			
{
  case "Gewicht': Einheit = "kg"; break;
  case "Länge"	: Einheit = "cm"; break;
  case "Zeit"	: Einheit = "s";  break;
  default 	: Einheit = "";	  break;
}

In Abhängigkeit vom Wert der Variablen Angabe werden die einzelnen Wertzuweisungen für die Variable Einheit durchgeführt. Hat die Variable Angabe den Wert Gewicht, erhält die Variable Einheit den Wert kg usw. Trifft keine der drei case-Abfragen zu, wird der Variablen Einheit über den default-Zweig eine leere Zeichenkette zugewiesen.

Oftmals müssen die gleichen Anweisungen mehrmals in einer Schleife wiederholt werden. Meistens ist dabei auch nicht vorhersehbar, wie oft diese Schleife ausgeführt werden soll.

Eine Schleife besteht aus einer Schleifensteuerung und einem Schleifenkörper. Die Schleifensteuerung gibt an, wie oft oder unter welcher Bedingung die Anweisungen abgearbeitet werden. Im Schleifenkörper sind die zu wiederholenden Anweisungen enthalten. Es gibt verschiedene Arten von Wiederholungen.

Die Wiederholungen werden entweder gezählt, wenn die Anzahl bekannt ist, oder in Abhängigkeit einer Bedingung ausgeführt. Welche Schleifenart verwendet werden sollte, hängt davon ab, wie oft die Schleife durchlaufen werden soll.

Eine zählergesteuerte Wiederholung realisieren wir über eine for-Schleife. Die Schleife wird mit dem Schlüsselwort for eingeleitet. Diese Einleitung wird von drei eingeklammerten Ausdrücken gefolgt. Der erste Ausdruck dient der Initialisierung von Variablen. Über den zweiten Ausdruck legen wir die Abbruchbedingung der Schleife fest. Im dritten Ausdruck legen wir die Schrittweite des Zählers fest.

Eine for-Schleife hat den folgenden Aufbau:

Beispiel for.html

Es wird der Wert die Zählvariable und somit die Anzahl der Schleifendurchläufe ausgegeben.

for.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>for-Schleifen</title>
</head>
<body>
  <h3>Die for-Schleife</h3>
  <script type="text/javascript">
    for(i = 0; i < 10; i++)
    {
      document.write("i: ", i, "; Durchlauf: ", i+1, "<br>");
    }
  </script>
</body>
</html>

In der while-Anweisung wird die Ausführung von Anweisungen von der Gültigkeit eines beliebigen Ausdrucks abhängig gemacht. Der Ausdruck liefert einen booleschen Wert zurück. Ist der Wert true, werden die folgenden Anweisungen ausgeführt. Bei dem Rückgabewert f alse wird die Ausführung nach der while-Anweisung fortgesetzt. Der Ausdruck wird in jedem Durchlauf zu Beginn der while-Anweisung ausgewertet.

Das Schlüsselwort while leitet die kopfgesteuerte Wiederholung ein. Es folgt in runden Klammern ein Ausdruck, der einen booleschen Wert liefert. Ist dieser true, werden die Anweisungen im Schleifenkörper ausgeführt. Nach dem Ausdruck folgt eine Anweisung oder ein ganzer Anweisungsblock.

Nachdem das Programm die Anweisungen im Schleifenkörper ausgeführt hat, wird der Ausdruck am Anfang der Schleife erneut geprüft. Falls dieser den Wert false zurückliefert, wird der Schleifenkörper übergangen und die erste Anweisung nach der Schleife durchgeführt. Bei Rückgabe von true wird der Schleifenkörper erneut ausgeführt.

Eine while-Schleife wird nicht in jedem Fall durchlaufen. Liefert der Ausdruck gleich zu Beginn den Wert false, wird keine Anweisung der Schleife ausgeführt.

Beispiel while.html

while.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>while-Schleifen</title>
</head>
<body>
  <h3>Die while-Schleife</h3>
  <script type="text/javascript">
 
    var i = 0;
    var count = 0;
    while (i < 10)
    {
      document.write("i: ", i, "; Durchlauf: ", ++count, "<br>");
      i++;
    }
 
  </script>
</body>
</html>

Bei einer fußgesteuerten Schleife, auch do-while-Schleife genannt, wird der Anweisungsblock in jedem Fall mindestens einmal ausgeführt. Erst am Ende der Schleife wird getestet, ob der Durchlauf wiederholt wird oder nicht.

Der Bedingungsausdruck, der erfüllt werden soll, befindet sich am Ende der Schleife. Der Schleifenkörper wird ausgeführt, solange der Bedingungsausdruck am Ende der Schleife den Wert true liefert. Ist die Bedingung schon nach dem ersten Durchlauf nicht erfüllt, wird die Schleife dennoch mindestens einmal ausgeführt.

Beispiel dowhile.html

Im folgenden Beispiel wird die Ausgabeanweisung genau einmal ausgeführt, da der Ausdruck der do-while-Schleife bereits bei der ersten Auswertung den Wert false liefert.

dowhile.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>do-while-Schleife</title>
</head>
<body>
  <h3>Die do-while-Schleife</h3>
  <script type="text/javascript">
    var i = 5;
    var count = 0;
    do
    {
      document.write("i: ", i, "; Durchlauf: ", ++count, "<br>");
      i++;
    } while (i < 5)
  </script>
</body>
</html>

Die break- und continue-Anweisungen bieten die Möglichkeit, einen Schleifendurchlauf vorzeitig abzubrechen. Das Schlüsselwort break stoppt den aktuellen Schleifendurchlauf und beginnt mit der Anweisung, die der abgebrochenen Schleife unmittelbar folgt. Auch continue beendet einen aktuellen Schleifendurchlauf, beendet aber die Schleife nicht, sondern fährt mit dem nächsten Schleifendurchlauf fort.

Im Gegensatz zur break-Anweisung kann ein falsch platziertes continue zu Endlosschleifen führen. Deshalb sollten wir es mit Vorsicht benutzen.

Beispiel continue-break.html

Das Beispiel zeigt die Auswirkungen beider Schlüsselwörter. Zuerst wird mit continue vorzeitig ein neuer Schleifendurchlauf erzwungen. Im zweiten Teil des Beispiels wird mit break eine while-Schleife vorzeitig verlassen.

continue-break.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>continue und break</title>
</head>
<body>
  <h3>continue</h3>
  <script type="text/javascript">
    var count = 0;
    for (i = 0; i < 5; i++)
    {
      if (i == 2)
        continue;
      document.write("i: ", i, "; Ausgabe: ", ++count, "<br>");
    }
  </script>
 
  <h3>break</h3>
 
  <script type="text/javascript">
    var i = 0;
    var count = 0;
    while (i < 5)
    {
      if (i == 2) break;
      document.write("i: ", i, "; Ausgabe: ", ++count, "<br>");
      i++;
    }
  </script>
</body>
</html>

Beispiel

Um die Anzahl der möglichen Passworteingaben in einem Formularfeld zu begrenzen, können wir eine Schleife verwenden.

var Versuch = 0;
do {	
  UserEingabe = Passwortabfrage();
  Versuch++;	
  if (Versuch == 3) break;
} while (UserEingabe != Passwort)	

Die while-Schleife wird so lange durchlaufen, bis das Passwort richtig eingegeben wurde. Die Abfrage if (Versuch == 3) break; bricht die Schleife jedoch ab, wenn drei Versuche erfolglos waren.

Achte bei der Arbeit mit Schleifen immer darauf, dass das Abbruchkriterium auch eintreten kann. Ansonsten wird der Schleifenkörper unendlich oft ausgeführt oder so lange, bis ein Fehler bei der Zuweisung entsteht. Dies kann z. B. der Fall sein, wenn wir zu einer Zahl einen konstanten Wert addieren. Bei unendlicher Ausführung wird der Wertebereich dieser Zahl überschritten.

JavaScript bietet mit benannten break- und continue-Anweisungen eine Besonderheit gegenüber anderen Sprachen. Durch das Versehen der Anweisungen mit einer Sprungmarke kann aus Schleifen (auch aus verschachtelten) herausgesprungen werden.

var j = 0;	
label:	
while(j == 0){	
  for(j = 1; j < 10; j++)
     break label;	
     // oder	
     // continue label;
  }
}  
//hier geht's weiter	

Im obigen Beispiel wird während des ersten Durchlaufs der for-Anweisung zum Label label gesprungen. Da der Sprung über break erfolgte, wird die nächste Anweisung nach dem folgenden Block, also nach der while-Anweisung, ausgeführt.