Orientierung
Was brauchst du als Basiswissen?
Du kennst Variablen, Bedingungen und die while-Schleife.
Außerdem kannst du mit JavaScript den Inhalt einer
HTML-Seite verändern.
Worum geht es?
In Programmen müssen Befehle häufig eine bestimmte Anzahl
von Malen wiederholt werden. Dafür eignet sich die
for-Schleife. Sie fasst Start, Bedingung und Veränderung
des Zählers in einer Zeile zusammen.
Was ist das Ziel?
Du kannst for-Schleifen lesen, verändern und selbst
schreiben. Mit einer Schleife erzeugst du viele ähnliche
HTML-Elemente, ohne denselben Code zu kopieren.
Erarbeitung
Erste Aufgaben
Beispiel:
for (let i = 0; i < 5; i++) {
console.log(i);
}
Schreibe zunächst für jede Aufgabe eine Vermutung auf.
Prüfe sie danach in der Konsole des Browsers.
Aufgabe 1
Welche Zahlen gibt das Beispiel aus?
Aufgabe 2
Ändere die Bedingung zu `i <= 5`. Was ändert sich?
Aufgabe 3
Ändere den Startwert zu `let i = 1`.
Aufgabe 4
Gib die Zahlen 10 bis 1 rückwärts aus.
Aufgabe 5
Gib alle geraden Zahlen von 2 bis 20 aus. Verändere dazu den Zähler in Zweierschritten.
Aufgabe 6
Schreibe eine passende while-Schleife zu einer deiner for-Schleifen. Markiere, wo die drei Bestandteile des Schleifenkopfes in der while-Schleife stehen.
Größere Aufgabe: Ein Spielbrett entsteht
Lade die beiden Dateien herunter und speichere sie im
selben Ordner:
Startseite
JavaScript
Öffne die Startseite im Browser und beide Dateien
auch im Texteditor.
Aufgabe 7
Lies den Code in der JS-Datei und finde die for-Schleife. Markiere Start, Bedingung und Veränderung des Zählers.
Aufgabe 8
Was passiert im Inneren der Schleife? Was dort steht, musst du nicht selbst schreiben können, aber verstehen.
Aufgabe 9
Das Spielbrett besitzt zunächst nur vier Felder. Erzeuge zwölf Felder.
Aufgabe 10
Lass in jedem Feld seine Nummer anzeigen. Die Nummerierung soll bei 1 und nicht bei 0 beginnen.
Aufgabe 11
Jedes zweite Feld soll die CSS-Klasse `dunkel` erhalten. Nutze dafür den Rest-Operator `%` und eine if-Verzweigung. (Hinweis: 5%2 ergibt 1, weil dies der Rest bei 5/2 ist. 4%2 ergibt also 0.)
Aufgabe: Untersuchen und erklären
Erkläre mit eigenen Worten:
Aufgabe 12
Warum wird das Spielbrett vor dem Erzeugen geleert?
Aufgabe 13
Warum ist Kopieren von zwölf fast gleichen Codezeilen ungünstiger als eine Schleife?
Aufgabe 14
Welchen Wert hat `i`, wenn das erste Feld erzeugt wird?
Aufgabe 15
Wie viele Durchläufe hat `i < anzahl`?
Rück- und Ausblick
Was muss man wissen/können?
Eine for-Schleife ist besonders praktisch, wenn schon vor
dem Start klar ist, wie oft etwas wiederholt werden soll.
Du kannst Startwert, Bedingung und Veränderung erkennen und
typische Zählfehler finden.
Was können anschließende Themen sein?
Häufig verarbeitet eine Schleife mehrere gespeicherte Werte.
Solche Sammlungen heißen Arrays.