Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Schleifen


Die drei Schleifen in JavaScript
Die for Schleife

Die while Schleife

Die for in Schleife

Die drei Schleifen in JavaScript

Schleifen gibt es in JavaScript Stücker drei. Namlich die for Schleife, die for in Schleife und die while Schleife. Hierbei sind die for Schleife und die while Schleife in allen Programmiersprachen vertreten, die for in Schleife nur in JavaScript. Sie entspricht in gewisser Hinsicht der foreach Schleife in Perl, PHP oder C#.

Die for Schleife

Machen wir uns das kurz an einem Beispiel klar.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
banane=new Array("Kirsche","Aprikose","Himbeere","Nuss");

function abspul()
{
for(i=0;i<banane.length;i++)
{
alert(banane[i]);
}
}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Was dieses Programm tut, dürfte klar sein, es zeigt die einzelnen Elemente des Arrays banane. Näheres hierzu unter Arrays, Hashes, mehrdimensionale Arrays (Hashes). Wer sehen will, was das Programm macht, kann hier clicken. Die Syntax der for Schleife ist also einfach nachzuvollziehen.

for(Inititalisierung der Laufvariablen;Bedingung;Inkrementierung der Laufvariablen)
{
.....
was die Schleife macht;
.....
}

Würde man z.B. den obigen Array rückwärts durchlaufen wollen, (Nuss,Himbeere,Aprikose,Kirsche) könnte man sowas machen.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
banane=new Array("Kirsche","Aprikose","Himbeere","Nuss");

function abspul2()
{
for(i=banane.length-1;i>=0;i--)
{
alert(banane[i]);
}
}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Aus didaktischen Gründen tun wir jetzt mal so, als ob man das Problem nicht durch ein simples reverse hätte lösen können. Wer wissen will, was das Programm macht, kann hier clicken. In diesem Falle haben wir die Werte der forschleife umgestellt. Wir initialisieren i mit dem Wert, der die Länge des Arrays darstellt, was für unsere Zwecke um eins zuviel ist, deswegen ziehen wir 1 ab. Anschliessend lassen wir die for Schleife solange laufen, wie i >= 0 ist, wobei wir bei jedem Durchgang i um 1 verringern. Wenn es auch nicht besonders praxisrelevant ist, kann man aus didaktischen Gründen auch mal ein Beispiel backen, dass eine komplexere Bedingung enthält.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
banane=new Array("Kirsche","Aprikose","Himbeere","Nuss","Melone","Kürbis","Pampelmuse","Zitronen");

function abspul()
{
for(i=banane.length-1;0 !=i % 4;i--)
{
alert(banane[i]);
}
}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Und ? Was macht dieses Programm ? Es druckt nacheinander Zitronen, Pampelmuse,Kürbis und bricht dann ab. Man kann sich von der Richtigkeit des Gesagten überzeugen, indem man hier clickt. Mit i % 4 ermitteln wir den Modulus, das heisst die Zahl, die übrigbleibt, wenn man i durch 4 teilt. In der ersten Runde ist i = 7 wir erhalten 3 (7:4 gleich 1 Rest 3), in der zweiten Runde ist i=6, wir erhalten 2 (6:4 gleich 1 Rest 2 etc. etc). Wenn der Modulus 0 ist, was bei Melone der Fall ist (i=4 wir erhalten 0 (4:4 gleich 1 Rest 0)) ist die Bedingung der for Schleife true, sie wird abgeprochen.

Die while Schleife

die while Schleife wird solange ausgeführt, wie eine bestimmte Bedingung true ist. Man kann mit der while Schleife ebenfalls einen Array auslesen, dass sieht dann so aus.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
banane=new Array("Kirsche","Aprikose","Himbeere","Nuss","Melone","Kürbis","Pampelmuse","Zitronen");

function abspul4()
{
while(frucht=banane.shift())
{
alert(frucht);
}
}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Auch das Resultat dieses Skriptes können wir betrachten, indem wir hier clicken. Was passiert ? Die shift() Funktion entfernt das erste Element eines Arrays, siehe Arrays, Hashes, mehrdimensionale Arrays (Hashes). Der Rückgabewert der shift() Funktion ist das entfernte Element, das wir in der Variablen frucht abspeichern. Wenn wir uns an das Kapitel Bedingte Anweisungen erinnern, dann wissen wir, dass für JavaScript alle was nicht im boolschen Sinne false ist, was nicht 0 ist und was nicht undefined ist, true ist. Folglich ist die Bedingung der while Schleife true, solange shift noch einen Wert zurückgibt. Wenn das Array aber keine Elemente mehr hat, dann ist der Rückgabewert der shift Funktion undefined und damit false. Die while Schleife bricht ab.

Die for in Schleife

Während die for Schleife und die while Schleife eigentlich mit den gleichnamigen Schleifen in allen anderen Progrrammiersprachen identisch ist, ist die for in Schleife nicht in allen Programmiersprachen vorhanden. Sie entspricht, wie bereits erwähnt, weitgehend der foreach Schleife in Perl, PHP oder C#. Sie begegnet einem eigentlich nur, wenn ein Array oder ein Hash, siehe Arrays, Hashes, mehrdimensionale Arrays (Hashes) oder die Eigenschaften eines Objektes ausgelesen werden sollen. Da JavaScript für asscociative arrays oder hashs im Moment keine weiteren Funktionen (etwa die Funktion keys) zur Verfügung stellt, ist die for in Schleife die einzige Möglichkeit, einen Hash auszulesen. Machen wir uns anhand eines Beispieles klar, wie das funktionniert.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
obst=new Array();

obst["Deutschland"]="Apfel";
obst["Israel"]="Orangen";
obst["Neuseeland"]="Kiwi";
obst["Iran"]="Pestazien";

function abspul()
{
for (i in obst)
{
alert(i);
}

}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Schauen wir uns an, was dieser Skript macht, indem wir hier clicken. Wir sehen also, dass die Schlüssel des Hash aufgeblendet werden. i ist also keine Laufvariable im "klassischen" Sinn. i durchläuft die Schlüssel des associative arrays, hashs. Hat man die Schlüssel, ist es auch nicht mehr besonders schwierig, den dazugehörigen Wert zu finden.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
obst=new Array();

obst["Deutschland"]="Apfel";
obst["Israel"]="Orangen";
obst["Neuseeland"]="Kiwi";
obst["Iran"]="Pestazien";

function abspul()
{
for (i in obst)
{
alert("Der Schlüssel ist "+i+" der Wert "+obst[i]);
}

}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Wer wissen will was passiert, kann hier clicken. Bei einem Objekt ist die Problematik ähnlich. Hinsichtlich der Eigenschaften eines Objektes, (zur objektorientierten Programmierung siehe Eigene Objekte mit JavaScript, ist die Problematik ähnlich. Will man alle Eigenschaften eines Objektes auslesen, so geht das nur mit der for in Schleife. Auch das machen wir uns am besten anhand eines Beispieles klar.

<html><head><title>die for Schleife</title>
<script language="JavaScript">
person=new Object();

person.Name="Andrés Ehmann";
person.Ausbildung="Diplom Volkswirt, Magister Artium der romanischen Philologie";
person.Adresse="13189 Berlin, Hallandstrasse 6";
person.Hobby="schwimmen, radfahren, lesen";

function abspul()
{
for (i in person)
{
alert("Der Eigenschaft des Objektes ist "+i+" der Wert "+person[i]);
}

}
</script>
</head>
<body onload=abspul()>
test
</body>
</html>

Wir schauen wieder, was passiert, indem wir hier clicken. Alles klar ? Wir erhalten die Namen aller Eigenschaften und die Werte derselben. Die Art und Weise, wie hier ein Objekt instanziiert wird, ist nicht besonders pfiffig, reicht aber, um das Verfahren zu veranschaulichen, näheres zur objektorientierten Programmierung findet man unter Eigene Objekte mit JavaScript.

vorhergehendes Kapitel