SELFHTML: JavaScript / Sprachelemente / Schleifen (while/for/do-while)

SELFHTML/Navigationshilfen JavaScript/DOM Sprachelemente
	Schleifen (while/for/do-while)
	Schleifen mit "while" Schleifen mit "for" Schleifen mit "do-while" Kontrolle innerhalb von Schleifen - break und continue

Schleifen mit "while"

Mit Hilfe von while-Schleifen können Sie Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist. Solche Schleifen eignen sich dann, wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Eingabe = "";
var Zaehler = 1;
while (Eingabe != "how to make love" && Zaehler <= 3) {
  Eingabe = window.prompt(Zaehler + ". Versuch: Was bedeutet 'HTML'?", "");
  Zaehler++;
}

if (Eingabe != "how to make love") {
  document.write("<big>Lernen Sie erst mal HTML! ...<\/big>");
} else {
  document.write("<big>Fein, Sie haben verstanden worum es geht! ...<\/big>");
}
</script>
</body></html>

Erläuterung:

Das Beispiel bittet den Anwender in einer while-Schleife bis zu drei mal in einem Dialogfenster (window.prompt()), die Bedeutung der Abkürzung 'HTML' einzugeben. Die Schleife kann aus zwei Gründen beendet werden: entweder der Anwender gibt die richtige Bedeutung der Abkürzung ein, oder die Variable Zaehler, die die Anzahl der Versuche mitzählt, hat einen Wert größer als 3. Wenn die Schleife beendet ist, steht also nicht fest, aus welchen der beiden möglichen Ursachen sie beendet wurde. Um das zu entscheiden, wird im Beispiel deshalb anschließend mit Hilfe einer if-Abfrage nochmals überprüft, ob die Schleife deshalb beendet wurde, weil die Eingabe falsch war. Je nachdem, ob sie falsch oder richtig war, wird mit document.write ins Anzeigefenster des Browsers ein entsprechender Satz geschrieben.

Eine while-Schleife beginnt mit dem Wort while (while = solange). Dahinter folgt, in Klammern stehend, die Bedingung. Um eine Bedingung zu formulieren, brauchen Sie Vergleichsoperatoren. Der Inhalt der Schleife wird solange wiederholt, wie die Schleifenbedingung wahr ist.

In der Regel enthält eine while-Schleife mehrere Anweisungen, die innerhalb der Schleife stehen. Notieren Sie alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im Beispiel (siehe auch den Abschnitt über Anweisungsblöcke).

Beachten Sie:

Achten Sie bei while-Schleifen immer darauf, dass es mindestens eine Möglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugen Sie eine so genannte "Endlosschleife", aus der der Anwender nur durch gewaltsames Beenden des WWW-Browsers herauskommt. Das ist besonders bei Online-Sitzungen im WWW sehr ärgerlich!

Um Endlosschleifen zu vermeiden, brauchen Sie irgendetwas, das irgendwann zu einem Ausweg aus der Schleife führt. Meistens werden zu diesem Zweck so genannte "Zähler" definiert, im Beispiel die Variable Zaehler. Diese Variable hat im Beispiel einen Anfangswert von 1 und wird innerhalb der Schleife bei jedem Durchgang mit der Anweisung Zaehler++; um 1 erhöht. Wenn im Beispiel der Zählerstand größer als 3 ist, wird abgebrochen.

Weitere Möglichkeiten, um Schleifen abzubrechen, werden weiter unten beschrieben.

Schleifen mit "for"

Die Schleifenbedingung einer for-Schleife sieht von vorneherein einen Zähler und eine Abbruchbedingung vor.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Ausgabe = "";
for (var i = 10; i <= 36; i++)
  Ausgabe = Ausgabe + '<span style="font-size:' + i + 'px">Schrift mit ' +
    i + ' Pixel Gr&ouml;&szlig;e<\/span><br>';
document.write(Ausgabe);
</script>
</body></html>

Erläuterung:

Das Beispiel definiert eine Variable namens Ausgabe, die im Verlauf einer for-Schleife immer mehr Inhalt erhält und am Ende mit document.write ihren ganzen Inhalt ins Browser-Fenster schreibt. Die for-Schleife wird insgesamt 27 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 10 initialisiert wird, kleiner oder gleich 36 ist, wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (i++). Mit jedem Schleifendurchgang wird die Variable Ausgabe mit ihrem jeweils bisherigen Wert um etwas HTML-Code mit der CSS-Angabe font-size (Schriftgröße) erweitert. Der Wert, der font-size dabei zugewiesen wird, ist jeweils der Wert von i. So entsteht der Effekt, dass CSS-Angaben von font-size:10px bis font-size:36px erzeugt werden. Das Ergebnis wird am Ende ausgegeben. Zum Verständnis der zusammengesetzten Teile bei Ausgabe siehe auch Operator für Zeichenkettenverknüpfung.

Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisungen notiert. In der ersten Anweisung wird ein Schleifenzähler definiert und initialisiert. Im Beispiel wird ein Zähler i definiert und mit dem Wert 10 initialisiert. Die zweite Anweisung enthält die Bedingung, ab der die Schleife beendet wird. Dazu brauchen Sie Vergleichsoperatoren. In der dritten Anweisung wird der Schleifenzähler so verändert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfüllt. Im Beispiel wird der Zähler mit i++ bei jedem Schleifendurchgang um 1 erhöht. An dieser Stelle könnte aber auch so etwas stehen wie i=i+10 (bei jedem Schleifendurchgang um 10 erhöhen).

Eine spezielle Abart der for-Schleife ist die for-in-Schleife.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
var Ausgabe = "";
for (var Eigenschaft in document)
  Ausgabe = Ausgabe + "document." + Eigenschaft + ": " + document[Eigenschaft] + "<br>";
document.write("<h1>Eigenschaften des Objekts <i>document<\/i><\/h1>");
document.write(Ausgabe);
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer for-in-Schleife einiges über die JavaScript-Fähigkeiten Ihres Browsers herausbekommen können. Im Beispiel werden die Eigenschaften des Objektes document ausgegeben. Mit jedem Schleifendurchgang wird die Variable Ausgabe um eine Objekteigenschaft erweitert. Den aktuellen Wert der Objekteigenschaft können Sie sich mit Objektname[Eigenschaft] ausgeben lassen. Die Schleife läuft so lange, wie es verfügbare Objekteigenschaften gibt - dies bedeutet das for in.

Beachten Sie:

Wenn Sie mehr als eine Anweisung von einer for-Schleifenbedingung abhängig machen wollen, müssen Sie die Anweisungen wie üblich in geschweifte Klammern einschließen.

Die for-in-Schleife können Sie in Opera bis einschließlich Version 6 nur auf selbstdefinierte Objekte und Variablen anwenden. Bei vordefinierten Objekten bleibt die Schleife wirkungslos. Der Internet Explorer kennt diese Schleifenart erst ab Version 4.01. Mozilla Firefox kennt zwar die for-in-Schleife, das Beispiel bricht jedoch beim Lesen der Eigenschaft document.domConfig mit einem Zugriffsfehler ab.

Schleifen mit "do-while"

Die do-while-Schleife ist eine Variante der normalen while-Schleife. Der Unterschied zwischen beiden ist, dass bei der normalen while-Schleife vor dem Ausführen des Codes die Schleifenbedingung überprüft wird, während bei der do-while-Schleife zuerst der Code ausgeführt und erst danach die Schleifenbedingung überprüft wird. Auf diese Weise können Sie erzwingen, dass Anweisungen innerhalb der Schleife auf jeden Fall mindestens einmal ausgeführt werden, auch wenn sich die Schleifenbedingung gleich am Anfang als unwahr herausstellt.

Beispiel:

Einmal so:
<script type="text/javascript">
var x = 10;
do {
  document.write("<br>x * x = " + (x * x));
  x = x + 1;
} while (x < 10);
</script>
Und einmal so:
<script type="text/javascript">
var x = 10;
while (x < 10) {
  document.write("<br>x * x = " + (x * x));
  x = x + 1;
}
</script>

Erläuterung:

Im Beispiel werden zwei kleine JavaScript-Bereiche definiert. In beiden Bereichen wird eine Variable x definiert und mit dem Wert 10 vorbelegt. Im ersten Bereich wird solange das Quadrat von x (das bei jedem Schleifendurchlauf um 1 erhöht wird) geschrieben, wie x kleiner als 10 ist. Da x ja schon am Beginn den Wert 10 hat, ist die Abbruchbedingung eigentlich schon von vorneherein erfüllt. Trotzdem wird einmal das Quadrat von x ausgegeben, da die Überprüfung der Schleifenbedingung erst nach dem Ausführen der Anweisungen innerhalb der Schleife erfolgt.
Im zweiten Script-Bereich herrschen die gleichen Bedingungen, jedoch wird dort eine normale while-Schleife notiert. Da x von vorneherein nicht kleiner als 10 ist, werden die Anweisungen der while-Schleife kein einziges Mal ausgeführt. Die Überprüfung der Schleifenbedingung, die am Anfang stattfindet, verhindert dies.

Kontrolle innerhalb von Schleifen - break und continue

Schleifen sind "kritische Faktoren" innerhalb eines Scripts. Bei komplizierteren Aufgaben ist es manchmal nicht einfach, eine Schleife so zu programmieren, dass die Schleife in jedem Fall irgendwann mal abgebrochen wird. Deshalb gibt es zusätzliche Befehle, um innerhalb einer Schleife das Geschehen zu kontrollieren.

Beispiel 1:

<script type="text/javascript">
var i = 0;
while (i < 6) {
  if (i == 3)
    break;
  i++;
  alert("i = " + i);
}
</script>

Erläuterung:

Mit break können Sie eine Schleife sofort beenden. Dazu müssen Sie innerhalb des Schleifenkörpers eine if-Abfrage und abhängig davon das Wort break als Anweisung notieren. Im Beispiel bricht die Schleife bereits ab, wenn i den Wert 3 hat, obwohl laut Schleifenbedingung das Hochzählen bis 6 erlaubt ist.

Beispiel 2:

<script type="text/javascript">
var i = 0;
while (i < 6) {
Ende:
  if (i == 3) {
    alert("Das war's, denn i ist gleich " + i);
    break Ende;
  }
  i++;
}
</script>

Erläuterung:

Dies ist eine besondere Variante von break. Sie können vor einer Abfrage, von der Sie eine break-Anweisung abhängig machen, ein "Label" notieren. Das ist ein selbstvergebener Name mit einem Doppelpunkt dahinter, im Beispiel Ende:. Hinter dem Wort break können Sie dann den Namen des Labels angeben. So stellen Sie im Beispiel sicher, dass sich die break-Anweisung auf jeden Fall auf jene if-Abfrage bezieht, in der abgefragt wird, ob i gleich 3 ist. In einfachen Fällen wie im obigen Beispiel ist das eigentlich überflüssig. Aber behalten Sie die Möglichkeit im Auge, falls Sie einmal verschachtelte if-Abfragen innerhalb von Schleifen programmieren und dort auch break-Anweisungen benutzen. Beachten Sie jedoch, dass diese Variante der break-Anweisung JavaScript 1.2 ist und bei älteren Browsern zu einer Fehlermeldung führt.

Beispiel 3:

<script type="text/javascript">
var i = 0, j = 0;
while (i < 6) {
  i++;
  if (i == 3)
    continue;
  j++;
}

alert("i ist gleich " + i + " und j ist gleich " + j);
</script>

Erläuterung:

Mit continue erzwingen Sie sofort den nächsten Schleifendurchlauf. Nachfolgende Anweisungen innerhalb der Schleife werden bei diesem Schleifendurchlauf nicht mehr ausgeführt. Im Beispiel werden zwei Zähler i und j bei jedem Schleifendurchlauf um 1 erhöht. Wenn i gleich 6 ist, wird die Schleife abgebrochen. Zwischendurch hat i auch mal den Wert 3. Dieser Fall wird mit einer if-Abfrage behandelt. Wenn i gleich 3 ist, wird sofort der nächste Schleifendurchgang gestartet. Die Anweisung j++; wird dadurch in diesem Schleifendurchlauf nicht mehr ausgeführt. Am Ende hat dadurch i den Wert 6 und j nur den Wert 5.


	Reservierte Wörter
	Bedingte Anweisungen (if-else/switch)

SELFHTML/Navigationshilfen JavaScript/DOM Sprachelemente