10 Jahre
Gespräch vereinbaren
Werbung
FeatValue
Das Kundenportal für Agenturen und Freelancer
Integriert sich in das bestehende Projektmagement-System
Kostenlos registrieren

Schleifen in JavaScript

Schleifen dienen dazu, bestimmte Anweisungen zu wiederholen ohne, dass diese dazu so oft notiert werden muessen. Dazu gibt es mehrere Arten von Schleifen sowie einige Zusätze, die nur innerhalb dieser Schleifen verwendet werden können.

JavaScript 1.1 JScript 2.0 for-Schleife

Eine for-Schleife besteht normalerweise aus einem Kopf sowie einem Körper. Der Kopf der for-Schleife wird durch das Wort for eingeleitet. Diesem folgen in runden Klammern die drei Teile des Kopfes: ein Anfangswert, eine Bedingung und ein Zähler. Alle drei sind voneinander durch ein Semikolon (;) getrennt. Der Anfangswert wird durch eine Variable definiert, der ein (Anfangs-)Wert zugewiesen wird. Normalerweise wird mit der Variablen i (i = Integer = Ganzzahl) gearbeitet. Ein Möglicher Ausdruck dafür wäre z.B. i=23; damit ist der Anfangswert der for-Schleife mit 23 definiert. Die Bedingung ist eine normale Bedingung, wie sie aus Abfragen bekannt sind. Diese Bedingung sollte möglichst die Variable aus dem Anfangswert verwenden, kann aber auch anders definiert werden. Eine mögliche Bedingung wäre beispielsweise i<50. Als drittes folgt der Zähler. Der Zähler besteht aus einer Anweisung, die jeweils nach Beendigung des Schleifen-Körpers ausgeführt werden soll. Normalerweise greift man auch hier wiederum die zuvor verwendeten Variablen auf und lässt diese z.B. erhöhen. Ein Beispiel-Ausdruck dafür wäre i++.
An den Schleifen-Kopf schließt sich der Schleifen-Körper an. Er besteht aus einer Anweisung oder einem Anweisungsblock.
Die Funktionsweise einer for-Schleife ist wie folgt: Als erstes wird die Variable des Anfangswerts erstellt und ihr der angegebene Wert übergeben. Dann wird überprüft, ob die Bedingung erfüllt ist. Kann dies mit true (also wahr) beantwortet werden, wird der Schleifen-Körper komplett ausgeführt. Anschließend wird die Anweisung des Zählers ausgeführt. Nun wird solange, bis die Bedingug nichtmehr erfüllt ist, der Schleifen-Körper und anschließend die Zähler-Anweisung ausgeführt und zum Schluss die Bedingug geprüft. Als Satz ausgeschrieben könnte man die Funktionsweise so erklären: Setzte [Anfangswert] und führe [Schleifen-Körper] und anschließend [Zähler] solange aus, wie [Bedingung] erfüllt ist.
Beispiel:

/*for-Schleife mit einheitlichen Variablen*/
a = 0;
for(i=1 ; i<10 ; i++) { a += i; }

/*for-Schleife ohne einheitliche Variablen*/
b = true; c = 1;
for(a=false ; b!=false ; c+=2)
{
 if(c < 10 && a == true){b = false}
 if(a == false && c < 10){a = true}
}

Erklärung: Die erste for-Schleife wird mit i=1 solange ausgeführt, bis i größer oder gleich 10 ist. Jedesmal wird i zu a dazu addiert und nach dem Schleifen-Körper i um 1 erhöht. Diese Art der Notation entspricht einer klassischen Zähl-Schleife.
Die zweite, etwas abstrakte, for-Schleife wird mit a=false solange ausgeführt, bis b ungleich false (also true) ist. Als Zähler wird c um 2 erhöht.

JavaScript 1.1 JScript 5.1 for-in-Schleife

Eine for-in-Schleife ähnelt vom Aufbau her einer for-Schleife, weißt allerdings doch deutliche Unterschiede auf. Sie besteht ebenfalls aus Kopf und Körper, wobei aber der Kopf anders aufgebaut ist als der einer for-Schleife.
Er beginnt auch wieder mit dem Wort for. Danach folgt, in runden Klammern stehend, eine Variable, das Wort in sowie ein Objekt. Die Variable ist eine beliebige Variable und das Objekt kann ebenso fast beliebig gewählt werden.
Die Funktionsweise einer for-in-Schleife ist wie folgt: Die Eigenschaften des Objekts werden als Anzahl der Durchläufe verwendet. Pro Durchlauf wird der gewählten Variablen nacheinander eine Eigenschaft (angefangen bei der ersten) des Objektes zugewiesen. Bei ungeordneten Objekten (wie z.B. window, document etc.) wird die Reihenfolge durch den Browser bzw. das ausführende Programm bestimmt; bei geordneten wird von der ersten bis zur letzten Eigenschaft nach der Reihenfolge der Eigenschaften gegangen. Die Eigenschaften eines Arrays a wären beispielsweise a[0], a[1], a[2] usw.; wobei beispielsweise die Eigenschaften von window event, clipboardData, onresize, defaultStatus usw. sein könnten. Beispiel:

a = new Array('a','b','c','d');
c = '';
for(b in a)
{ c += a[b]; }
alert(c); 

Erklärung: Als erstes wird ein neues Array mit den Werten a, b, c und d erstellt. Die dazugehörigen Eigenschaften sind 0, 1, 2 und 3. Innerhalb der Schleife werden diese Eigenschaften nun der Reihenfolge nach durchgegangen und die Werte der Eigenschaften der Variablen c hinzugefügt. Zum Schluss wird c ausgegeben.

do-while-Schleife

Die do-while-Schleife besteht aus zwei Teilen: einer Anweisung oder einem Anweisungsblock und einer Bedingung. Die Anweisung oder der Anweisungsblock werden durch das Wort do eingeleitet und befinden sich vor der Bedingung. Die Bedingung wird durch das Wort while eingeleitet und steht innerhalb von zwei runden Klammern hinter der Anweisung/dem Anweisungsblock.
Die Funktionsweise ist wie folgt: Als erstes wird immer die Anweisung bzw. der Anweisungsblock ausgeführt. Danach wird die Bedingung getestet. Kann sie mit true (also wahr) ausgewertet werden, so beginnt der Ablauf von Vorn (Anweisun/en ausführen, Bedingung testen), bis die Bedingung mit false (also als falsch) ausgewertet wird. Die Funktionsweise in einfachen Sätzen ausgedrückt könnte so lauten: Mache [Anweisung/en] und wenn [Bedingung] dann zurück zum Start, ansonsten Schleife beenden. Beispiel:

do{
 a++;
 b = b + (a*10);
}
while(a < 10)

Erklärung: Die Anweisungen werden solange ausgeführt bis a größer oder gleich 10 ist.

JavaScript 1.1 JScript 2.0 while-Schleife

Die while-Schleife ist ähnlich der do-while-Schleife. Sie beginnt mit dem Wort while, welchem die Bedingung innerhalb von runden Klammern folgt. Danach folgt nur noch die Anweisung oder der Anweisungsblock. Die Funktionsweise ist dabei genau umgekehrt der do-while-Schleife: Es wird als erstes die Bedingung gestestet. Kann diese mit true ausgewertet werden, wird die Anweisung bzw. der Anweisungsblock ausgeführt. Danach wiederholt sich der Vorgang, bis die Bedingung nichtmehr mit true ausgewertet werden kann. Einfach ausgedrückt könnte man diese Schleif so beschreiben: Solange [Bedingung] mache [Anweisung/en], ansonsten beende Schleife. Beispiel:

a = 1; b = 1;
while(a == 1)
{ if(b < 10){a = 2}else{b++}; } 

JavaScript 1.1 JScript 2.0 Die Verwendung von Labels, break und continue

Innerhalb von Schleifen können mehrere Zusätzliche Statements (Anweisungen) verwendet werden, die sonst nicht verwendet werden dürfen. Dazu gehören Labels, break und continue.

JavaScript 1.1 JScript 2.0 Labels

Labels, oder auch Marken genannt, sind selbstdefinierte Stellen innerhalb einer Schleife, sie dienen dazu, im Zusammenhang mit break und continue, den Ablauf einer Schleife zu steuern. Ein Label wird dabei durch einen selbstgewählten, noch nicht vergebenen, Namen sowie einen anschließenden Doppelpunkt (:) definiert. Labels, die von einer break-Anweisung aus angesteuert werden sollen, können hinter dem Doppelpunkt jede Art von Anweisungen erhalten (Funktion, Schleife, Abfrage, Zuweisung ...). Labels, die von einer continue-Anweisung aus angesteuert werden sollen, können hinter dem Doppelpunkt nur Schleifen als Anweisungen erhalten. Beispiel:

while(a==b)
{
 meineMarke:
 /* ... Anweisungen ... */

JavaScript 1.1 JScript 2.0 break

Die break-Anweisung beendet die aktuelle Schleife ohne sie bis zum Ende auszuführen. Zusätzlich kann hinter der break-Anweisung der Name eines Labels notiert werden. Dieses Label bezeichnet dann, die Schleife, die beendet werden soll. Dabei können nur Label verwendet werden, die zur aktuellen Schleife gehören. Beispiel:

a = 0;
Marke1: while(a < 10)
{
 b = 0;
 while(b < 10)
 {
  if(b>5){break Marke1;}
  b++;
 }
 a++;
}
alert(a); 

Erklärung: Es gibt hierbei zwei Schleifen. Für die break-Anweisung sind beide als aktuell einzustufen, dabei beide während der Laufzeit der break-Anweisung tätig sind. Durch das angegebene Label wird bewirkt, dass die mit diesem Label gekennzeichnete (,im Beispiel erste/äußere,) Schleife beendet wird. Beide Schleifen enden somit beim Eintreffen der break-Anweisung.

JavaScript 1.1 JScript 2.0 continue

Die continue-Anweisung funktioniert ähnlich der break-Anweisung. Der Unterschied ist, dass sie lediglich den aktuellen Durchlauf der Schleife beendet und nicht die gesamte Schleife. Alle Anweisungen die hinter/nach dieser Anweisung folgen werden dann nicht ausgeführt. Zusätzlich kann auch hier hinter der Anweisung der Name eines Labels notiert werden.
Führt dieses Label zu einer while- oder do-while-Schleife, so überprüft diese ihre Bedingung und führt die Schleife erneut aus (wenn die Bedingung true ist).
Führt das Label zu einer for-Schleife, wird deren Zähler erhöht und die Schleife weiter ausgeführt (wenn die Bedingung true ist).
Führt das Label zu einer for-in-Schleife, so springt diese zur nächsten Eigenschaft und führen die Schleife erneut aus. Beispiel:

c = '';
Marke1:
for(a=0 ; a<=9 ; a++)
{
 for(b=0 ; b<=9 ; b++)
 {
  if(a == 3){continue Marke1;}
  c += a+''+b+'  |  ';
 }
 c += '<br>'
}
document.writeln('<pre>'+c+'</pre>');

Erklärung: Das Beispiel erstellt eine Art Tabelle der zahlen von 00 bis 99. Durch die Verwendung der continue-Anweisung sowie eines Labels wird der dritte Durchlauf der Schleife beendet bevor die Variable c neu geschrieben werden kann. Dadurch ergibt sich das Fehlen der Zahlen 30 bis 39.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Variablen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern