JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 413

Asynchron programmieren

F:

Kann ich dem setTimeout-Handler

nur ein Argument übergeben?

A: Nein, Sie können beliebig viele

Argumente übergeben: null, eins oder mehr.

F:

Warum übergibt setTimeout dem

Event-Handler kein Event-Objekt?

A: Das Event-Objekt wird hauptsächlich

mit Event-Handlern für das DOM benutzt.

setTimeout übergibt dagegen kein Event-

Objekt an seine Handler, weil es nicht an

einem bestimmten Element ausgelöst wird.

F:

showAnswer ist ein Handler, erzeugt

aber trotzdem den neuen Handler reblur

in seinem Code. Stimmt das?

A: Richtig. Das wird Ihnen in JavaScript

recht oft begegnen. Es ist vollkommen

normal, dass ein Handler für verschiedene

Events weitere Handler erzeugt. Genau

das versteht man unter asynchroner

Programmierung. Für unser Bilderrätsel

haben wir nicht einfach einen Algorithmus

erstellt, der von oben nach unten durchläuft.

Stattdessen stöpseln wir ein paar Event-

Handler zusammen, die ausgeführt werden,

wenn bestimmte Events im Spiel stattfinden.

Sehen Sie sich ein paar Beispiele für das

Anklicken von Bildern an. Hier sorgen

verschiedene Aufrufe für die Anzeige der

scharfen und weichgezeichneten Versionen.

F:

Es gibt also DOM-basierte Events

und Timer-Events … gibt es noch viele

andere Arten von Events?

A: Ein Großteil der Events in JavaScript

sind DOM-Events (z. B. beim Anklicken

eines Elements) oder Timer-Events (erstellt

per setTimeout oder setInterval). Es gibt

aber auch Events, die von den JavaScript-

APIs für Geolocation, LocalStorage, Web

Workers und so weiter erzeugt werden (mehr

dazu finden Sie in HTML5-Programmierung

von Kopf bis Fuß). Und schließlich gibt

es noch einen ganzen Sack voll Events,

die sich mit Ein- und Ausgaben befassen.

Diese treten beispielsweise auf, wenn Sie

per XmlHttpRequest Daten von einem

Webservice oder von Web Sockets anfordern

(weitere Informationen auch hierzu in

HTML5-Programmierung von Kopf bis Fuß).

Probefahrt für den Timer

Mit wenig zusätzlichem Code haben wir die Funktionsweise des Bilderrätsels

fundamental verändert. Wenn Sie ein Bild anklicken, überwacht der Browser

(anhand der Timer-Events), wann der reblur-Handler aufgerufen wird, um das

Bild wieder unscharf zu machen. Das fühlt sich schon ziemlich asynchron an – Sie

kontrollieren, wann die Bilder angeklickt werden, aber im Hintergrund wird der

Code anhand der click- und Timer-Events zu verschiedenen Zeiten aufgerufen. Es

gibt keinen Überalgorithmus, der überwacht, was zu welcher Zeit passiert, sondern

nur ein paar Codestücke, die Events vorbereiten, erstellen und darauf reagieren.

Wenn Sie ein Bild anklicken,

wird die scharfe Version

angezeigt, die nach zwei

Sekunden wieder unscharf

gestellt wird.

Dieser Code sollte aus Gründen der

Qualitätssicherung sorgfältig getestet

werden. Klicken Sie hierfür in schneller

Folge auf die Bilder. Funktioniert

das Programm wirklich jedes Mal?

Sehen Sie sich den Code noch einmal

an und überlegen Sie, wie der Browser

dafür sorgt, dass die Bilder wieder

weichgezeichnet werden.

Es gibt keine

Dummen Fragen

414 Kapitel 9

Das mouseover-Event verwenden

Hallo Jungs, unsere Desktop-

Benutzer würden gerne, ohne zu

klicken, mit der Maus über ein Bild

fahren, um die scharfe Version zu

sehen. Können wir das irgendwie

implementieren?

Judy: Damit das funktioniert, brauchen wir das mouseover-Event. Über die

Eigenschaft onmouseover können wir beliebigen Elementen einen passenden

Handler zuweisen:

myElement.onmouseover = myHandler;

Judy: Auf änliche Weise weist das mouseout-Event darauf hin, wenn der Mauszeiger

das Element wieder verlässt. Über die Eigenschaft onmouseout können Sie einen

Handler dafür definieren.

Verändern Sie Ihren Code so, dass ein Bild scharf wird, wenn sich der

Mauszeiger darüber befindet. Bewegen Sie den Mauszeiger vom Bild

weg, soll es wieder unscharf werden. Überprüfen Sie Ihre Antwort am

Ende des Kapitels.

Hier kommt der

JavaScript-Code hin.

Übung

Sie sind hier � 415

Asynchron programmieren

<!doctype html>

<html lang="de">

<head>

<meta charset="utf-8">

<title>Ändern Sie nicht meine Größe. Ich bin kitzlig!</title>

<script>

function resize() {

var element = document.getElementById("display");

element.innerHTML = element.innerHTML + " das kitzelt!";

}

</script>

</head>

<body>

<p id="display">

Verändern Sie auf keinen Fall die Fenstergröße! Ich habe Sie

gewarnt!

</p>

<script>

window.onresize = resize;

</script>

</body>

</html>

Nachdem das Bilderrätsel fertig war, hat Judy etwas Code geschrieben,

der im wöchentlichen Team-Meeting besprochen werden soll. Wer

als Erstes herausbekommt, was der Code tut, wird zum Mittagessen

eingeladen. Wer gewinnt? Jim, Joe, Frank oder Sie?

Notieren Sie hier, was der Code tut. Welche Events

werden benutzt? Wie wird der Handler eingerichtet?

Und wann findet das Event statt? Am besten

probieren Sie das gleich im Browser aus.

Übung