JavaScript-Programmierung von Kopf bis Fuß

390 Kapitel 9

Einen Event-Handler hinzufügen

Zuerst müssen wir das Bild noch

einmal aus dem DOM holen.

function showAnswer() {

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

image.src = "zero.jpg";

}

Probefahrt

Jetzt können wir unser Spiel ausprobieren. Sorgen Sie dafür, dass

sich der gesamte HTML-, CSS- und JavaScript-Code in einer

Datei namens »image.html« befindet. Die Bilder können Sie unter

http://examples.oreilly.de/german_examples/hfjavascriptprogger/

Beispielcode.zip herunterladen. Wenn Sie alles beisammen haben,

können Sie die Datei in Ihrem Browser aufrufen und das Spiel

testen.

Sobald wir das Bild haben, können

wir es durch Setzen seiner src-

Eigenschaft durch die scharfe

Version austauschen.

Schritt 2: Handler hinzufügen und Bild

aktualisieren

Um einen Handler für die Klicks auf das Bild einzurichten, weisen

wir der onclick-Eigenschaft des Bilds eine Funktion namens

showAnswer zu. Die Definition folgt im nächsten Schritt.

window.onload = init;

function init() {

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

image.onclick = showAnswer;

}

Jetzt müssen wir die showAnswer-Funktion schreiben, um das scharfe

Bild anzuzeigen, indem der Wert der src-Eigenschaft auf das scharfe

Bild geändert wird.

Wenn Sie irgendwo auf das Bild

klicken, wird der showAnswer-

Handler aufgerufen. Dadurch

wird der Wert des src-Attributs

des Bilds geändert, um die

Antwort anzuzeigen.

Der onclick-Eigenschaft des Bild-Objekts aus dem

DOM wird ein passender Handler zugewiesen.

Die weichgezeichnete Version liegt

in »zeroblur.jpg« und die scharfe

Variante in »zero.jpg«.

Sie sind hier � 391

Asynchron programmieren

F:

Ist das Setzen der src-Eigenschaft

für das Bild gleichbedeutend mit

der Änderung des src-Attributs per

setAttribute?

A: In diesem Fall ja. Wenn Sie per

getElementById ein Element aus dem DOM

auslesen, erhalten Sie ein Elementobjekt mit

verschiedenen Methoden und Eigenschaften.

Eine dieser Eigenschaften heißt id und ent-

spricht der ID des HTML-Elements (sofern

Sie im Markup eine ID vergeben haben).

Das Bildelement besitzt außerdem eine

src-Eigenschaft. Ihr Inhalt entspricht dem

Wert des src-Attributs des betreffenden

<img>-Elements.

Allerdings gibt es nicht für alle Attribute auch

entsprechende Objekteigenschaften. Sie

können nur per setAttribute und getAttribute

bearbeitet werden. Im Fall von src und id

können Sie entweder die Objekteigenschaf-

ten benutzen oder sie mit dem gleichen

Ergebnis per getAttribute und setAttribute

verändern.

F:

Das heißt, wir haben einen Handler,

der in einem Handler aufgerufen wird?

A:

Nicht wirklich. Der load-Handler ist

der Code, der beim vollständigen Laden

der Seite aufgerufen wird. Beim Aufruf

des load-Handlers weisen wir der onclick-

Eigenschaft des Bilds einen eigenen Handler

zu. Dieser wird aber erst aufgerufen, wenn

das Bild tatsächlich angeklickt wird. Erst

dann (möglicherweise viel später) wird der

showAnswer-Handler aufgerufen. Die beiden

Handler werden also zu unterschiedlichen

Zeiten aufgerufen.

Ja richtig. Die Reihenfolge der Ausführung ist

in Code mit vielen Event-Handlern nicht immer

leicht zu erkennen. Die init-Funktion wird schon beim

Laden der Seite aufgerufen, während showAnswer erst dran

ist, wenn das Bild angeklickt wird. Die beiden Event-Handler

werden also zu unterschiedlichen Zeiten aufgerufen.

Vergessen Sie auch nicht die Regeln zum Geltungsbereich. In

der init-Funktion speichern wir das von getElementById zu-

rückgegebene Objekt in einer lokalen Variablen namens image.

Nach Ausführung der Funktion verfällt der Geltungsbereich,

und die Variable wird gelöscht. Deshalb müssen wir das Bild

beim Aufruf von showAnswer erneut aus dem DOM holen.

Natürlich hätten wir hierfür eine globale Variable benutzen kön-

nen, das kann aber schnell zu Problemen und Fehlern führen,

was wir natürlich vermeiden wollen.

Moment! Warum wird

hier in showAnswer kein

getElementById gebraucht?

Die Ausführungsreihenfolge ist

mir nicht ganz klar.

Es gibt keine

Dummen Fragen

392 Kapitel 9

Übung zur Ausführungsreihenfolge

Unten sehen Sie den Code für unser Spiel. Tun Sie so, als seien Sie der

Browser, und überlegen Sie, was nach jedem Event zu tun ist. Wenn Sie

mit der Übung fertig sind, sehen Sie am Ende des Kapitels

nach, ob Sie alles richtig haben. Den ersten Schritt haben

wir schon für Sie gemacht.

SPIELEN Sie Browser

window.onload = init;

function init() {

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

image.onclick = showAnswer;

}

function showAnswer() {

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

image.src = "zero.jpg";

}

Definieren Sie zuerst die Funktionen init und showAnswer.

Wenn die Seite

geladen wird …

Wenn das load-

Event für die

Seite auftritt …

Wenn das onclick-

Event für das Bild

auftritt …

Hier kommen Ihre

Antworten hin.

Hier ist der ausgeführte Code …