386 Kapitel 9
Einen Event-Handler testen
Sind Event-Handler auch ohne Funktionen möglich?
Probefahrt für Ihr Event
Erstellen Sie eine neue Datei mit dem Namen »event.html« und bauen Sie den Code zum
Testen Ihres Handlers für das load-Event ein. Laden Sie die Seite im Browser und stellen
Sie sicher, dass diese Warnmeldung angezeigt wird.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ich lebe!</title>
<script>
window.onload = pageLoadedHandler;
function pageLoadedHandler() {
alert("Ich lebe!");
}
</script>
</head>
<body>
</body>
</html>
Zuerst lädt der Browser die Seite
und beginnt dann, den HTML-Code zu
parsen sowie das DOM anzulegen.
Erreicht der Browser Ihr Skript, beginnt
er mit der Ausführung des Codes.
Im Moment definiert das Skript einfach
eine Funktion und weist sie der window.
onload-Eigenschaft zu. Diese Funktion
wird aufgerufen, sobald die Seite
komplett geladen ist.
Danach parst der Browser den
HTML-Code.
Ist der HTML-Code fertig geparst und das DOM bereit,
ruft der Browser den load-Handler für die Seite auf …
… wodurch hier die
Warnmeldung »Ich lebe!«
ausgegeben wird.
Kopf-
nuss
Sie sind hier � 387
Asynchron programmieren
Wie bereits gesagt, haben Sie beim Schreiben des Codes bisher einen eher
linearen Ansatz verfolgt: Sie haben sich einen Algorithmus wie die Berechnung
der besten Seifenblasenmischung oder zur Erzeugung des »99 Flaschen«-
Songs ausgedacht und den Code dann Schritt für Schritt von oben nach unten
geschrieben.
Beim »Schiffe versenken«-Spiel sind wir anders vorgegangen. Der Code passte
nicht so ganz in das lineare Schema. Klar haben Sie auch hier Code geschrieben,
um das Spiel einzurichten, um das Model zu initialisieren und alle diese Dinge.
Aber der Hauptteil des Spiels funktionierte auf andere Weise. Immer wenn auf ein
Schiff gefeuert werden sollte, wurde ein Rateversuch in das Formular eingegeben
und der »Feuer!«-Button angeklickt. Dieser Button hat dann eine ganze Folge von
Aktionen nach sich gezogen, die schließlich den nächsten Spielzug ausgeführt
haben. In diesem Fall hat der Code auf die Benutzereingabe reagiert.
Diese Art, im Code auf Events zu reagieren, erfordert eine vollkommen andere
Art, über das Schreiben von Code nachzudenken. Hierbei müssen Sie überlegen,
welche Events auftreten können und wie Ihr Code sich dazu verhalten soll. Die
IT-Typen nennen das auch asynchronen Code. Wir schreiben Code, der erst aufgerufen
wird, falls und wenn ein Event stattfindet. Diese Art zu programmieren verändert
Ihre Sichtweise. Anstatt einen Algorithmus Schritt für Schritt in Code umzusetzen,
bauen Sie jetzt eine Applikation, die aus vielen Handlern besteht, die ihrerseits auf
eine Vielzahl von Events reagieren können.
Wenn du eine echte
JavaScript-Entwicklerin
werden willst, wirst du lernen
müssen, mit Events umgehen
zu können.
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
