Orientierung
Was brauchst du als Basiswissen?
Du kennst Variablen und for-Schleifen.
Worum geht es?
Ein Spiel besitzt oft viele Namen, Punktzahlen, Gegenstände
oder Spielfiguren. Statt für jeden Wert eine eigene Variable
anzulegen, kann man zusammengehörige Werte in einem Array
speichern.
Was ist das Ziel?
Du kannst ein Array anlegen, einzelne Elemente lesen und
verändern sowie alle Elemente mit einer Schleife verarbeiten.
Erarbeitung
Verständnisaufgaben
Aufgabe 1
Schreibe selbst eine Liste (ein Array) mit dem Namen werte und den Einträgen 7, 14 und 21.
Aufgabe 2
Mit werte.length bekommst du die Anzahl der Einträge. Was liefert werte.length in unserem Fall?
Aufgabe 3
Mit werte.push kann man Elemente anhängen. Schreibe auf, wie die Liste nach folgenden Befehlen aussieht.
werte.push(28);
werte.push(35);
Aufgabe 4
Was liefert werte.length nun?
foreach zum Nachlesen
const namen = ["Ada", "Ben", "Cem"];
console.log(namen[0]);
for (let i = 0; i < namen.length; i++) {
console.log(namen[i]);
}
Dasselbe ist auch mit `forEach` möglich:
namen.forEach(function (name, index) {
console.log((index + 1) + ". " + name);
});
`forEach` führt die angegebene Funktion einmal für jedes
Element aus. Der erste Parameter ist der aktuelle Wert, der
zweite der Index. Für einfache vollständige Durchläufe ist
das oft besonders gut lesbar. Eine klassische for-Schleife
bleibt sinnvoll, wenn man rückwärts oder in Zweierschritten
zählen beziehungsweise die Schleife vorzeitig beenden möchte.
Kurze Aufgaben
Basis ist das Array von oben:
const namen = ["Ada", "Ben", "Cem"];
Aufgabe 5
Welcher Name wird durch `namen[1]` ausgewählt?
Aufgabe 6
Warum gehört `namen[3]` nicht mehr zum Beispiel-Array?
Aufgabe 7
Wie kann man "Dana" zum Array hinzufügen?
Aufgabe 8
Schreibe eine Schleife auf, die die Namen rückwärts ausgibt.
Aufgabe 9
Warum ist für die vorherige Aufgabe foreach nicht sinnvoll?
Größere Aufgabe: Highscore-Liste
Lade beide Dateien in denselben Ordner:
Highscore-Seite
JavaScript
Aufgabe 10
Öffne die Seite und untersuche das Array `punkte`.
Aufgabe 11
Ergänze zwei weitere Punktzahlen.
Aufgabe 12
Vervollständige die Schleife, sodass alle Punktzahlen als Listeneinträge auf der Seite erscheinen.
Aufgabe 13
Gib vor jeder Punktzahl den Platz aus. Der erste Eintrag soll als `Platz 1` erscheinen.
Aufgabe 14
Berechne in derselben Schleife die Summe aller Punkte. Gib darunter den Durchschnitt aus.
Aufgabe 15
Ermittle mit einer Variablen den höchsten Wert. Verwende dabei eine if-Verzweigung.
Aufgabe 16
Ergänze Eingabefeld und Button. Eine neue Punktzahl soll mit `push` gespeichert und die Liste neu angezeigt werden.
Aufgabe 17
Zusatz: Speichere auch Spielernamen in einem zweiten Array. Name und Punktzahl mit demselben Index gehören zusammen.
Aufgabe 18
Zusatz: Ersetze die Schleife für die Ausgabe durch `punkte.forEach`. Die Berechnung darf zunächst weiterhin mit einer klassischen for-Schleife erfolgen.
Aufgaben zum Nachdenken
Aufgabe 19
Warum lautet die Schleifenbedingung `i < punkte.length` und nicht `i <= punkte.length`?
Aufgabe 20
Welchen Vorteil hat `length` gegenüber einer fest eingetragenen Zahl?
Aufgabe 21
Was muss bei zwei zusammengehörigen Arrays beachtet werden?
Rück- und Ausblick
Was muss man wissen/können?
Ein Array speichert mehrere Werte in einer festen Reihenfolge.
Der erste Wert besitzt den Index 0. Mit einer for-Schleife und
`length` lassen sich alle Werte unabhängig von ihrer Anzahl
verarbeiten.
Was können anschließende Themen sein?
Programme müssen auf verschiedene Befehle oder Zustände
unterschiedlich reagieren. Dafür gibt es neben if auch switch.