JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 389

Asynchron programmieren

Das Spiel implementieren

Rufen Sie diesen Markup-Code im Browser auf, wird das weichgezeichne-

te Bild angezeigt. Um das Spiel zu implementieren, müssen wir reagieren,

wenn das Bild angeklickt wird, und die scharfe Version anzeigen können.

Glücklicherweise wird immer, wenn ein HTML-Element in der Seite ange-

klickt (in Mobilgeräten angetippt) wird, ein passendes Event erzeugt. Ihre

Aufgabe ist es, einen Handler für das Event zu erstellen, dessen Code die

scharfe Version des Bilds anzeigt. Und das geht so:

Auf das Bild-Objekt im DOM zugreifen und seiner

onclick-Eigenschaft einen Handler zuweisen.

Im Handler befindet sich der Code, um das src-

Attribut des Bilds von der weichgezeichneten

Version in die scharfe Version zu ändern.

Wir definieren eine init-Funktion und

weisen sie dem onload-Event zu, damit

der Code erst ausgeführt wird, wenn

die Seite komplett geladen ist.

window.onload = init;

function init() {

var image = document.getElementById("zero");

}

1

2

Im Code der init-Funktion holen wir

uns eine Referenz auf das Bild mit

der ID "zero".

Gehen wir die Schritte nacheinander durch und schreiben wir den Code.

Schritt 1: Auf das Bild im DOM zugreifen

Der Zugriff auf das Bild ist ein alter Hut für Sie: Wir brauchen nur

unsere alte Freundin, die getElementById-Methode, um uns eine

Referenz auf das Bild zu besorgen.

var image = document.getElementById("zero");

Hier holen wir uns eine Referenz

auf das Bild und weisen sie der

Variablen image zu.

Außerdem darf dieser Code erst ausgeführt werden, nachdem das

DOM für die Seite erstellt wurde. Hierfür verpacken wir unseren

Code in eine Funktion, die wir der onload-Eigenschaft des window-

Objekts zuweisen.

In JavaScript spielt die Reihenfolge,

in der Sie Ihre Funktionen definieren,

keine Rolle. Daher ist es kein Problem,

init nach der Zuweisung zur onload-

Eigenschaft zu definieren.

Wir können das Bild erst aus dem DOM holen,

wenn die Seite fertig geladen ist.