for-Schleife

Beispiel einer for-Schleife in Javascript
   Init   Bedingung  Inkrement
     |        |         |
for(i=0;i<array.length;i++) {
  Kommandoblock
}

In einer Schleife wird ein Kommandoblock so oft ausgeführt, bis die Bedingung falsch ist.

Eine Schleife betritt man mit dem im Init notierten Wert fuer die Zaehlvariable, die nicht immer i heissen muss.

Beispiele

Als besonders sinnvoll erweist sich eine Schleife, wenn man etwas mit einer Gruppe Objekte (zB in einem Array anfangen möchte.

Arrays

Mittels des Elements i wird durch alle Mitglieder des Arrays gewatet, das aktuelle Element kann mit array[i] geangelt werden.

Beispiel Array-Durchlaufen mittels Schleife
all = document.querySelectorAll('.nupsie');
for(var i=0;i<all.length;i++) {
  all[i].innerHTML = 'stamped.';
  all[i].className = 'nupsie stamped';
}

Erklärung

document.querySelectorAll durchsucht document nach Elementen der klasse nupsie. Bei allen Fundstücken wird der Inhalt auf stamped und die Klasse von nupsie auf nupsie stamped gesetzt.

Man beachte das sympatisch-dynamische Setzen der Variable i als Lokale (mittels var) in der Definition der for-Schleife höchstselbst.

Objekte Beispiel I

Objekte

Auch Objekte lassen sich schleifen, doch hier ist die Notation der for-Schleife an Object.keys gebunden.

Javascript Object Notation, JSON
liste = {
  "apfel" : { … },
  "birne" : { … },
  "ananas" : { … },
  "banane" : { … },
  "himbeere" : { … }
};
Beispiel für Javascript-Code, der das Objekt durchläuft
for(var i=0;i<Object(liste).keys.length;i++) {
  key = Object(liste).keys[i];
  subObj = liste[key];
  var elem = document.createElement("p");
  elem.textContent = subObj.id + " - " + key + ":  " + subObj.weight + " kg";
  document.body.appendChild(elem);
}
Ausgabe des ersten Beispiels
1121132 - apfel: .6 kg
1121133 - birne: .7 kg
1121134 - ananas: 1.2 kg
1121135 - banane: .3 kg
1121136 - himbeere: .01 kg

(Abbildung ähnlich)

Erklärung

Gegeben sei ein relative einfaches Objekt liste. Dann nehmen wir den body in die Variable b auf. Für jeden Schlüssel key in dem Objekt liste ziehen wir das Subobjekt heran, die Id id und das Gewicht weight herauszufinden. Anschliessend basteln wir ein p-Tag, worein wir die Angaben mit dem Namen key zusammen hineingeben. Anschliessend kleben wir besagtes p-Tag an den body. Das machen wir so lange bis wir alle Schlüssel durch haben.

Objekte Beispiel II

Zweites Beispiel für eine Schleife, die eine Nodelist durchschreitet
for(var i=0;i<Object(liste).keys.length;i++) {
  key = Object(liste).keys[i];
  subObj = liste[key];
  var elem = document.createElement("p");
  elem.textContent = subObj.id + " - " + key + ":  " + subObj.weight + " kg";
  document.body.appendChild(elem);
}
Ausgabe zweites Beispiel
1121132 - apfel: .6 kg
1121133 - birne: .7 kg
1121134 - ananas: 1.2 kg
1121135 - banane: .3 kg
1121136 - himbeere: .01 kg

(Abbildung ähnlich)

Erklärung

Gegeben sei weiterhin das relative einfache Objekt liste aus Beispiel I.

Dann nehmen wir den body in die Variable b auf. Für jeden Schlüssel key in dem Objekt liste ziehen wir das Subobjekt heran, die Id id und das Gewicht weight herauszufinden.

Anschliessend basteln wir ein p-Tag, worein wir die Angaben mit dem Namen key zusammen hineingeben.

Daraufhin kleben wir das p-Tag an den body.

Das machen wir alles so lange bis wir alle Schlüssel in der Liste behandelt haben.

javascript-Einführung – Übersicht