JavaScript Lernen – Tutorial Teil 2: Schleifen

Zweiter Teil des Java Script Tutorials: Alles rund um SchleifenIm ersten Teil haben wir gelernt, wie wir mit Java Script einen beliebigen Text auf einer Webseite ausgeben können. Da das so gut geklappt hat, möchten wir nun die Zahlen von 1 bis 10 ausgeben. Im Prinzip kein Problem, einfach zehn Mal document.write(); mit der jeweiligen Zahl hintereinander schreiben. Doch was ist, wenn wir die Zahlen von 1 bis 100 oder gar bis 1000 ausgeben lassen möchten? Solch eine Ausgabe wäre von Hand viel zu aufwendig, weshalb man auf sogenannte Schleifen zurückgreift. Schleifen gibt es in nahezu jeder Programmiersprache und sind Kontrollstrukturen, mit denen man bestimmte Befehle immer und immer wieder nacheinander ausführt, bis die Abbruchbedingung eingetreten ist. Die Abbruchbedingung ist ein wesentlicher Bestandteil einer Schleife, falls diese Bedingung nicht sorgfältig durchdacht ist kann es passieren, dass man in eine Endlosschleife gerät und man den eigentlichen nachfolgenden Code gar nicht mehr ausführen kann.

Generell unterscheidet man die Schleifen in drei Typen:

  • for-Schleife
  • while-Schleife
  • do-while Schleife

Nachfolgend werden die einzelnen Schleifen-Typen näher vorgestellt.

Inhalt

For-Schleife

Die for-Schleife nutzt man eigentlich immer dann, wenn die Anzahl der Wiederholungen in der Schleife (auch Iterationen genannt) schon im voraus bekannt sind. In unserem Beispiel würde sich also eine for-Schleife anbieten, da wir ja schon jetzt wissen, dass wir die Zahlen von 1 bis 10 ausgeben lassen möchten.

Die for-Schleife besteht aus drei Bestandteilen die sich im Schleifen-Kopf befinden. Dies ist zum einen eine Startvariable, der man einen Startwert zuweist. In unserem Fall die 1, da wir alle Zahlen ab der Zahl 1 ausgeben lassen möchten. Anschließend folgt die Abbruchbedingung, die besagt, sobald die Bedingung verletzt ist, verlasse die Schleife und führe den nachfolgenden Code aus. Unsere Schleife soll alle Zahlen bis zur Zahl 10 ausgeben lassen, dementsprechend soll die Schleife die Zahl 10 noch ausgeben, die Zahl 11 aber nicht mehr. Eine Abbruchbedingung wäre beispielsweise: „Startvariable <=10“, führe also die Schleife so lange aus, so lange die Startvariable kleiner oder gleich 10 ist. Nun haben wir der Startvariablen im ersten Schritt aber die 1 zugewiesen, dementsprechend wäre die Abbruchbedingung immer erfüllt und wir wären in einer Endlosschleife gefangen. Deshalb kommen wir nun noch zum dritten Bestandteil unserer for-Schleife, die sogenannte Schrittweite. Diese besagt, welcher neuer Wert unsere Variable im nächsten Durchlauf besitzen soll. Da in unserem Fall die Startvariable in der Abbruchbedingung ist, muss unsere Startvariable auch erhöht werden und da wir alle Zahlen ausgeben lassen möchten, erhöhen wir die Startvariable jeweils um 1 bei jedem Durchlauf (Startvariable++). Nachfolgend noch einmal die drei Bestandteile der for-Schleife:

for (Startvariable=Wert; Startvariable<=Wert; Startvariable++) {
    // Code der ausgeführt werden soll
}

Und nun die For-Schleife auf unsere Aufgabe bezogen:

for(var start=1; start<=10; start++) {
   document.write(start);
}

Geben wir das in unsere Script-Datei und rufen unsere HTML-Seite auf, dann bekommen wir folgende Ausgabe: „12345678910“ – alle Zahlen von eins bis 10. Was genau ist passiert? Im Grunde geben wir in jedem Schleifendurchlauf unsere Startvariable „start“ aus. Am Anfang hat diese den Wert 1. Durch die Schrittweite „start++“ erhöht sich dieser Wert bei jedem neuen Schleifendurchlauf um eins. Start++ bedeutet dabei nichts anderes als start=start+1, also der neue Wert ist der aktuelle Wert + 1. Anschließend geben wir wieder die Variable aus, diesmal aber mit dem neuen Wert. Das ganze geht so lange, bis die Variable „start“ den Wert 10 überschreitet.

Nun wollen wir das ganze noch etwas optisch aufbereiten, in dem nach jeder Zahl ein Komma und ein Leerzeichen folgen soll. Dafür müssen wir die Ausgabe der Variablen „start“ einfach mit einem String verknüpfen, der unseres Trennzeichen besitzt. Wie das geht, haben wir schon im ersten Teil kennengelernt, nachfolgend der Code:

for(var start=1; start<=10; start++) {
   document.write(start + ", ");
}

Nun sieht die Ausgabe folgendermaßen aus: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,

Blöderweise wird auch hinter der letzten Zahl, der 10 ein Komma ausgegeben. Das sieht natürlich nicht schön aus, dem Computer kann man aber keinen Vorwurf machen, denn er macht nur das was befohlen. Man müsste dem Computer also sagen, dass er immer ein Komma machen soll, nur bei der letzten Zahl nicht. Dies geht mit einer sogenannten if-Bedingung ganz einfach, wie das genau geht, erfährt man im nächsten Teil des Tutorials. Als Alternative können wir aber auch einfach sagen, gebe bei allen Zahlen außer der letzten Zahl das Trennzeichen aus und anschließend nur noch die verbleibende Zahl. Dafür muss zum einen Mal die Abbruchbedingung geändert und nach dem Ausführen der Schleife noch eine weitere Zeile hinzugefügt werden. Probiere es einfach mal aus, bevor du dir die anschließende Lösung anschaust:

for(var start=1; start<=9; start++) {
   document.write(start + ", ");
}
document.write(start);

Ganz einfach, oder? Wir geben diesmal nur die ersten 9 Zahlen aus, diese aber jeweils mit einem Trennzeichen. Anschließend verlässt man die Schleife, da die Variable nun den Wert 10 hat und gibt eben jenen Wert noch einmal danach aus, da man ja alle 10 Zahlen haben möchte. Diese Herangehensweise ist auf dem ersten Blick natürlich etwas unschön, zeigt aber auch auf, dass es im Programmieren immer mehr als nur einen richtigen Weg gibt. Wie man das ganze eleganter lösen kann, erfahrt ihr dann im nächsten Kapitel.

While-Schleife

Die While-Schleife unterscheidet sich im Aufbau des Schleifenkopfs von der For-Schleife. Statt Startvariable, Abbruchbedingung und Schrittweite besitzt die While-Schleife lediglich eine Abbruchbedingung.
Damit sieht das Schema der While-Schleife folgendermaßen aus:

while(Abbruchbedingung){
   // Code der ausgeführt werden soll
}

Doch auch wenn die While-Schleife anders aufgebaut ist, als die For-Schleife, kann man ganz einfach aus der While-Schleife eine for-schleife machen. Die While-Schleife zu unseren oberen for-schleife, die die Zahlen von 1 bis 10 ausgeben soll, würde folgendermaßen aussehen:

var start=1;
while(start<=10) {
   document.write(start + ", ");
   start++;
}

Wie man sieht, muss man erst einmal die Startvariable mit einer 1 initialisieren, man macht die Variable also „bekannt“ und weist ihr gleich den Wert 1 zu. Die Abbruchbedingung ist wie gehabt, vergessen werden darf nur nicht das Hochzählen der Variablen, was nun im Schleifeninneren passiert.

Do-While Schleife

Die Do-While-Schleife funktioniert wie eine While-Schleife. Im Gegensatz zu While-Schleife steht die Abbruchbedingung aber nicht im Schleifenkopf, sondern im Schleifenfuß. Das bringt mit sich, dass der Code im Schleifenrumpf mindestens einmal auf jeden Fall durchgeführt wird, selbst wenn die Abbruchbedingung schon von Anfang an erfüllt ist. Das macht folgender Code deutlich:

var start=11;
do{
   document.write(start);
   start++;
}while(start<=10);

Obwohl die Startvariable schon von Anfang an den Wert 11 besitzt und damit größer gleich 10 ist, wird dieser dennoch einmal ausgegeben, ehe die Abbruchbedingung greift und das Programm aus der Schleife springt. Do-While-Schleifen werden nicht so häufig benutzt, sie machen lediglich nur dann Sinn, wenn man den Code in der Schleife auf jeden Fall einmal durchlaufen möchte.

Zusammenfassung

In diesem Teil haben wir gelernt, wie man mit dem Konstrukt der Schleifen mit wenigen Zeilen Java Script-Code sich wiederholende Teile eines Codes ganz einfach verarbeiten und ausgeben können. Schleifen sind insbesondere für Arrays, zu denen wir später noch kommen werde, sehr hilfreich. Im nächsten Teil des Java Script Tutorials wenden wir uns dann der if-Bedingung zu.

Bei Fragen oder Hinweise könnt ihr jederzeit gerne ein Kommentar da lassen.

>> Weiter zu Teil 3: Bedingungen

3 Gedanken zu „JavaScript Lernen – Tutorial Teil 2: Schleifen“

Schreibe einen Kommentar zu Oswald Antworten abbrechen