====== JavaScript - Kontrollstrukturen ======

===== Steuerung des Programmablaufs =====

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.

===== Anweisungsblock =====
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.

{{:inf:js:js-34-1.jpg?800&direct|}}

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.

{{:inf:js:js-35-1.jpg?800&direct|}}

\\

===== Auswahl =====

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:

{{:inf:js:js-35-2.jpg?600&direct|}}
{{:inf:js:js-35-3.jpg?300&direct|}}

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**

<code javascript>
var Angabe, Einheit;
Angabe = "Gewicht";
if (Angabe == "Gewicht")
{
 Einheit = "kg";
}
</code>

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:

<code javascript>
if (Angabe == "Gewicht"; Einheit = "kg";
</code>

\\

==== Verschachtelte if-Anweisungen ====
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.

{{:inf:js:js-36-1a.jpg?520&direct|}}
{{:inf:js:js-36-1.jpg?380&direct|}}

\\ 

==== if-else-Anweisung ====
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.


{{:inf:js:js-36-2a.jpg?520&direct|}}
{{:inf:js:js-36-2.jpg?380&direct|}}

**Beispiel**

<code javascript>
if (Angabe  ==  "Gewicht"){
 Einheit = "kg";
}
else {
 Einheit = "cm";
}
</code>

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.

\\

==== Mehrstufige if-else-Anweisungen ====

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''.

{{:inf:js:js-36-2a.jpg?520&direct|}}
{{:inf:js:js-36-2.jpg?380&direct|}}

**Beispiel**

<code javascript>
if   (Angabe == "Gewicht"){
  Einheit = "kg";
}  
else if (Angabe == "Länge"){	
  Einheit = "cm";
}  
else	
{
 Einheit = "s";
}
</code>

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.


==== Mehrseitige Bedingung ====

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''.

{{:inf:js:js-38-1.jpg?520&direct|}}
{{:inf:js:js-38-2.jpg?380&direct|}}

**Beispiel**

<code javascript>
switch (Angabe)			
{
  case "Gewicht': Einheit = "kg"; break;
  case "Länge"	: Einheit = "cm"; break;
  case "Zeit"	: Einheit = "s";  break;
  default 	: Einheit = "";	  break;
}
</code>
  
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.




\\

===== Wiederholung =====
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.

{{:inf:js:js-39-1.jpg?700&direct|}}

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.

==== Zählergesteuerte Wiederholung ====

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:

{{:inf:js:js-39-2.jpg?580&direct|}}
{{:inf:js:js-39-3.jpg?320&direct|}}

Beispiel [[http://elearn.bgamstetten.ac.at/wiki/addons/JS/for.html|for.html]]

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

<file javascript 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>
</file>

\\

==== Kopfgesteuerte Wiederholung ====
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.

{{:inf:js:js-40-1.jpg?580&direct|}}
{{:inf:js:js-40-2.jpg?320&direct|}}

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 [[http://elearn.bgamstetten.ac.at/wiki/addons/JS/while.html|while.html]]

<file javascript 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>
</file>

\\


==== Fußgesteuerte Wiederholung ====
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.

{{:inf:js:js-41-1.jpg?580&direct|}}
{{:inf:js:js-41-2.jpg?320&direct|}}

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 [[http://elearn.bgamstetten.ac.at/wiki/addons/JS/dowhile.html|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.

<file javascript 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>
</file>

\\

==== Scheifensteuerung ====
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 [[http://elearn.bgamstetten.ac.at/wiki/addons/JS/continue-break.html|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.

<file javascript 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>

</file>

**Beispiel**

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

<code javascript>
var Versuch = 0;
do {	
  UserEingabe = Passwortabfrage();
  Versuch++;	
  if (Versuch == 3) break;
} while (UserEingabe != Passwort)	
</code>

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.

\\

==== Benannte break- und continue-Anweisungen ====

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.

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


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.