Schleifen und Bedingungen
Zu den Grundbausteinen einer Programmiersprache gehören Schleifen, mit denen ein Anweisungsblock mehrfach hintereinander ausgeführt werden kann sowie Bedingungen, mit deren Hilfe die Gültigkeit einer Anweisung festgelegt werden kann. Schleifen und Bedingungen dienen der Kontrolle von Funktionen und können mit verschienen Methoden eingerichtet werden. Für Schleifen gibt es 2 Methoden zur Auswahl: for (und for in) und while, für Bedingungen kann zwischen if und case gewählt werden.
1. Schleifen
1.1 for
Die for-Schleife ist ein nützliches Instrument, um Anweisungen mehrfach zu wiederholen. Zu einer for-Schleife gehören 3 Statements, mit denen die Anzahl der Wiederholungen festgelegt wird:
- Im ersten Statement i=0 wird die Variable i initialisiert, von dem Anfangswert 0 wird die Wiederholung der Schleife im dritten Statement hochgezählt. Dieses Statement wird nur einmal zu Beginn der Schleife ausgeführt.
- Im zweiten Statement i<100 wird die Wiederholungsrate der Schleife festgelegt, dies im Rahmen einer Bedingung.
- Im dritten Statement i++ wird der aktuelle Wert der Variable erhöht, diese Anweisung wird nach jedem Schleifen-Durchlauf ausgeführt. Dieses Statement ist optional und könnte auch innerhalb des Anweisungsblocks platziert werden.
Mit dieser Schleife werden dem body des HTML-Dokuments 100 div-Boxen mit der id box zugefügt.
for (i = 0; i < 100; i++) {
$('<div id="box"></div>').appendTo(document.body);
}
Damit die 100 Elemente sichtbar werden, sollte das Aussehen der Box wird mit einer Stylesheet-Anweisung formatiert werden. Diese Formatierung erzeugt 100 grüne Boxen:
<style>
#box {width:500px; height:100px; background-color:#85EC94; margin-bottom:10px;}
</style>
1.2 for in
Mit der Anweisung for in können Eigenschaften eines Objekts ausgelesen werden. Dabei wird je Schleife eine Eigenschaft erfasst und nacheinander - wie in einem Array - in einer Reihe zusammengesetzt.
var pflanze = {art:"Hundsrose", gattung:"Rose", familie:"Rosengewächse", ordnung:"Rosenartige", klasse:"Zweikeimblättrige"};
var text = "";
var x;
for (x in pflanze) {
text += pflanze[x]+", ";
console.log(text);
}
Die Ausgabe in der Console:
"Hundsrose, "
"Hundsrose, Rose, "
"Hundsrose, Rose, Rosengewächse, "
"Hundsrose, Rose, Rosengewächse, Rosenartige, "
"Hundsrose, Rose, Rosengewächse, Rosenartige, Zweikeimblättrige, "
1.3 while
Die while-Schleife ist etwas einfacher gestrickt, hier wird die Anzahl der Schleifen durch einen Parameter - der Bedingung - festgelegt. Die Initialisierung der Variablen i wird vor und das Hochzählen der Variablen am Ende der Schleife ausgeführt.
var i=0;
while (i < 100) {
$('<div id="box"></div>').appendTo(document.body);
i++;
}
1. 4. do while
Auch für die while-Schleife gibt es eine Variante. Bei der do/while-Schleife wird die Anweisung ausgeführt, bevor die Bedingung geprüft wurde:
var i=0;
do {
$('<div id="box"></div>').appendTo(document.body);
i++;
}
while (i < 100);
2. Bedingungen
2.1 if-else
Mit der einfachen Kontrollstruktur if-else kann eine Bedingung festgelegt werden, innerhalb derer ein Anweisungsblock ausgeführt wird. Dabei wird ein boolescher Wert zurückgegeben, ob die Bedingung erfüllt ist (true) oder eben nicht (false). Ist die Bedingung nicht erfüllt, kann mit else ein alternativer Anweisungsblock ausgeführt werden.
Im Beispiel werden die im Loop erzeugten Boxen variiert: die ersten zehn Boxen werden aufgehellt, indem mittels der Variable deckkraft die Deckkraft der Box successive erhöht wird.
Damit die erste Box nicht unsichtbar bleibt (i=0), wird der erste Wert um 1 erhöht und das Ergebnis durch 10 geteilt, da die Deckkraft einen Wert zwischen 0 und 1 ergeben muss.
Mit else werden alle nachfolgenden Boxen auf die Deckkraft 50% gesetzt.
var deckkraft;
if (i<10) {
deckkraft= (i+1)/10;
}
else {
deckkraft=0.5;
}
2.2. else if
Sollen innerhalb einer Bedingung mehrere Eingrenzungen kombiniert werden, muss die Syntax mittels mathematischer Operatoren wie && erweitert werden. Dies kann mit else if nochmals erweitert werden, so dass mehrere Bedingungen nacheinander abgefragt und mit verschiedenen Anweisungsblöcken kombiniert werden können.
Die Kombination muss nicht zwingend mit else abgeschlossen werden, i.d.R. gibt es aber immer eine Fallback-Variante, die in Kraft tritt, wenn alle Bedingungen nicht erfüllt sind. Im Beispiel wird zunächst darauf verzichtet.
if (i<=10) {
deckkraft= (i+1)/10; }
else if ((i>10)&&(i<=20)) {
deckkraft= (i-10)/10; }
else if ((i>20)&&(i<=30)) {
deckkraft= (i-20)/10; }
else if ((i>30)&&(i<=40)) {
deckkraft= (i-30)/10; }
else {deckkraft= (i-40)/10; }
$('<div id="box"></div>').appendTo(document.body).css({"opacity":deckkraft});
2.3. switch case
Um verschiedene Bedingungen festzulegen kann ausserdem mit der Methode switch gearbeitet werden. Hierbei werden Fälle (case) formuliert, die mit Anweisungen verbunden werden. Der Vorteil von switch ist, dass diese Methode nur einmal aufgerufen werden muss und dann Fall für Fall abgearbeitet wird.
var deckkraft;
switch (i) {
case i: deckkraft= (i+1)/100;
break;
}
$('<div id="box"></div>').appendTo(document.body).css({"opacity":deckkraft});
Wenn für die Boxen eine alternierende Deckkraft eingestellt werden soll, muss für jede Box ein individueller Fall festgelegt werden. Das kann in Zehnergruppen erfolgen:
var deckkraft;
switch (i) {
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: case 8: case 9: deckkraft= (i+1)/10;
break;
case 10: case 11: case 12: case 13: case 14: case 15: case 16: case 17: case 18: case 19: deckkraft= (i-9)/10;
break;
}
$('<div id="box"></div>').appendTo(document.body).css({"opacity":deckkraft});
3. Verschachtelungen von Schleifen
Im Vergleich zu den Bedingungen gibt es eine elegantere Lösung, wenn, wie in dem konkreten Besipiel die Deckkraft in Zehner-Blöcken erhöht werden soll. Das liegt darin begründet, dass eine Anforderung regelmäßig wiederholt werden soll. Und für Wiederholungen gelten i.d.R. keine Bedingungen, sondern Schleifen. Also wird einfach eine Schleife in einer Schleife verschachtelt, mit einer eigenen Variablen (k) durchgezählt und schon ist das Ziel erreicht:
for (var i=0;i<100;i++) {
var deckkraft;
var k=0;
while (k<10) {
k++;
deckkraft= k/10;
$('<div id="box"></div>').appendTo(document.body).css({"opacity":deckkraft});
}
}
Codebeispiele