taralino

Die for-Schleife

Nachdem wir die Canvas-Zeichenfläche kennengelernt haben, steigen wir nun etwas tiefer in die Programmierung in JavaScript ein. Wir beginnen mit dem Konzept der Schleifen, das wir später nochmals vertiefen werden:

Einführung in die for-Schleife

Die for-Schleife (Zählschleife) ist eine Struktur, um Anweisungen wiederholt durchzuführen. Die Struktur beginnt mit dem Schlüsselwort for gefolgt von drei Befehle in runden Klammern:

Definition samt Initialisierung einer Zählvariablen (z.B. var x = 0)
eine Schleifen- oder Abbruchbedingung (z.B. x < 20)
eine Anweisung, um die Zählvariable nach jedem Durchlauf zu verändern (z.B. x = x + 1)

Der Ablauf einer for-Schleife kann folgendermaßen beschrieben werden:

Zunächst wird die Zählvariable unter Verwendung des Schlüsselwortes var initialisiert. Als nächstes wird die Schleifenbedingung geprüft. Wenn die Bedingung erfüllt ist, dann werden die Anweisungen des Blockes ausgeführt. Anschließend wird die Zählvariable um 1 erhöht. Nun wird wieder die Schleifenbedingung überprüft und der Durchlauf wiederholt, bis nach einer gewissen Anzahl an Durchläufen die Schleifenbedingung schließlich nicht mehr erfüllt ist.

Beispiel

Beispiel zur Verwendung einer for-Schleife mit einer ganzzahligen Zählvariablen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,20], [0,12], {width:480, background:"lightgrey"});

for (var x = 0; x < 20; x = x+1) {
  Canvas.circle(x+0.5, 6.0, 0.4, {fill:"blue"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Beispiel zur Verwendung einer for-Schleife mit einer rationalen Zählvariablen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,6], [0,4], {width:480, background:"lightgrey"});

for (var x = 0.6; x < 5.6; x = x+0.4) {
  Canvas.circle(x, 2.0, 0.15, {fill:"blue"});
};

for (var x = 5.2; x > 2.0; x = x-0.3) {
  Canvas.circle(x, 2.0, 0.05, {fill:"red"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Verändere die zweite Schleife derart, sodass die kleinen roten Kreise jeweils genau in der Mitte der größeren blauen Kreise gezeichnet werden.