Bisher wurde Daten nur in Variablen gespeichert; Jede Variable konnte einen Wert aufnehmen. Es gibt aber Fälle, wo viele Werte gespeichert werden müssen und zu Begin des Programms noch nicht klar ist, wie viele Werte es werden.
Für diesen Zweck gibt es das Array.
Ein Array hat einen Namen wie eine Variable, z.B. Ergenisse. Dieses Array besitzt nun eine Anzahl von Elementen, die durchnummeriert werden. Das sieht so aus:
Element[0], Element[1], Element[2]...
Als erstes steht immer der Name des Array und dann in einer eckigen Klammer die Elementenummer. Das erste Element hat immer die Nummer 0!
Ein Array ist vergleichbar mit der Nummerierung der Häuser einer Straße: es gibt einen Straßennamen und viele Hausnummern. Wird ein neues Haus gebaut, lässt sich leicht ein weiterer Eintrag anhängen.
Aufgabe: Es soll ein Spiel programmiert werden: Der Computer gibt in einem Eingabefeld drei Zufallszahlen aus und zeigt sie eine kurze Zeit (etwa 4 Sekunden). Der Spieler sollte sich in dieser Zeit diese Zahlen merken. Nach den 4 Sekunden wird das Einagefeld gelöscht und der Spieler muss die gemerkten Zahlen in das Feld eingeben. Schafft er es, werden ihm vier Zufallszahlen für 4 Sekunden gezeigt, schafft er es nicht, ist das Spiel zu Ende. usw. Wie weit kommt ein durchschnittlich gebildeter Mensch? 10 Zahlen, 15 Zahlen?
Zur Programmierung wird das Problem in Teilaufgaben zerlegt
Zu 1.
Es wird ein Formular mit folgenden Elementen eingerichtet:
| Element | ID |
|---|---|
| einzeiliges Textfeld | zahlen |
| einzeiliges Textfeld (später hidden) | zahlen_versteckt |
| einzeiliges Textfeld, voreingestellter Wert: 3 | anzahl |
| einzeiliges Textfeld | ausgabe |
| Button |
Zu 2.
Es ist eine Funktion zufall() zu schreiben, die beim Laden der Datei aufgerufen wird. In dieser Funktion ist als erstes ein Array zu erzeugen, dass die Zufallszahlen aufnehmen soll. Das Array heißt zahl.
zahl= new Array();
Eine Variable maxzahl legt fest, dass die Zufallszahlen nur zwischen 1 und 20 bestimmt werden sollen.
maxzahl=20;
Eine Variable anzahl_zahlen wird mit dem in dem Textfeld anzahl voreingestellten Wert belegt und legt fest, wieviel Zufallszahlen angezeigt werden sollen.
Jetzt kommt die Schleife, die das Array füllt. Die Schleife läuft von 0 bis zur anzahl_zahlen. In der Schleife selber wird nur eine Zeile abgearbeitet:
zahl[i]=Math.round(Math.random()*maxzahl);
Nach dem Durchlaufen der Schleife befinden sich in dem Array anzahl_zahlen Elemente, die mit je einer Zufallszahl zwischen 1 und 20 gefüllt sind.
Zu 3.
Dieses Array kann jetzt einfach in das Feld zahlen geschrieben werden.
$('#zahlen').val(zahl);
Für den späteren Vergleich wird das Array noch einmal im Feld zahlen_versteckt abgelegt. In der Entwicklungsphase sollte dieses Feld sichtbar sein, später wird es dann versteckt.
Zu 4.
Das Feld zahlen soll nach einer vorgebenen Zeit von etwa 4 Sekunden gelöscht werden. Dazu wird eine weitere Funktion geschrieben, die leeren() heißt und nichts anderes macht, als in das Feld zahlen einen Leerstring zu schreiben.
Diese Funktion wird über die Methode window.setTimeout() aufgerufen. Diese Methode erwartet in der Klammer zwei Parameter: die aufzurufende Funktion und die Verzögerungszeit in Millisekunden. Der Eintrag
window.setTimeout("leeren()",4000);
am Ende der Funktion zufall() ruft also die Funktion leeren() nach 4 Sekunden auf.
zu 5. und 6.
In einer dritten Funktion test(), die über den Button aufgerufen wird, werden die beiden Felder zahlen und zahlen_versteckt ausgelesen. Sind beide Felder gleich, gibt es im Feld ausgabe eine Erfolgsmeldung und der Inhalt des Feldes anzahl wird um eins hoch gezählt. Danach wird die Funktion zufall() aufgerufen und das Spiel geht weiter.