Schleifen
Schleifen wiederholen Code: klassisch mit for, elegant mit for...of oder deklarativ mit Array-Methoden.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
for und while
Die klassische for-Schleife zählt mit Start, Bedingung und Schritt.
while läuft, solange die Bedingung wahr ist — Vorsicht vor Endlosschleifen.
for (let i = 1; i <= 5; i++) {
console.log(i);
}Über Arrays iterieren
for...of durchläuft die Werte eines Arrays direkt — ohne Index-Verwaltung.
forEach ruft eine Funktion pro Element auf. for...in ist für Objekt-Schlüssel gedacht, nicht für Arrays.
const module = ['html', 'css', 'js'];
for (const modul of module) {
console.log(modul.toUpperCase());
}break und continue
break beendet die Schleife sofort.
continue überspringt nur den aktuellen Durchlauf.
Vertiefung
Die richtige Schleife wählen
for eignet sich für Zählschleifen, for...of für Werte einer Liste, for...in für Schlüssel von Objekten. forEach ist praktisch, aber nicht abbrechbar.
break beendet die Schleife, continue überspringt den aktuellen Durchlauf. Bei verschachtelten Schleifen kannst du mit Labels arbeiten — sparsam einsetzen.
for (const zahl of [2, 4, 7, 8]) {
if (zahl % 2 === 1) break;
console.log(zahl);
}Merksatz: Wähle die Schleife nach Datenform und Abbruchbedarf. for...of ist für Arrays meist die klarste Wahl.
Übungsaufgabe
FizzBuzz
Gib für die Zahlen 1 bis 20 aus: Vielfache von 3 „Fizz“, von 5 „Buzz“, von beiden „FizzBuzz“, sonst die Zahl.
Das soll dein Programm können
- for-Schleife von 1 bis 20
- Modulo für Teilbarkeit
- Reihenfolge: beide zuerst prüfen
- Ausgabe mit console.log
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Prüfe zuerst zahl % 15 === 0, dann 3, dann 5. Sonst wird 15 nie zu FizzBuzz.
Lösung anzeigen
for (let zahl = 1; zahl <= 20; zahl++) {
if (zahl % 15 === 0) {
console.log("FizzBuzz");
} else if (zahl % 3 === 0) {
console.log("Fizz");
} else if (zahl % 5 === 0) {
console.log("Buzz");
} else {
console.log(zahl);
}
}Warum funktioniert das?
Die kombinierte Bedingung muss zuerst geprüft werden. 15 ist durch 3 und 5 teilbar; ohne die erste Prüfung würde nur Fizz erscheinen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.