250 Kapitel 6
Browser und Event-Handler
Sie sagen »Event-Handler«, ich sage »Callback«
Wir wollen noch etwas mehr über die Funktionsweise von onload nachdenken,
denn es verwendet eine Programmiermethode, die Ihnen in JavaScript an jeder
Straßenecke begegnen wird. Angenommen, ein wichtiges Ereignis (also ein Event)
steht bevor und Sie wollen auf jeden Fall davon erfahren. In diesem Beispiel heißt
das Event »Seite ist geladen«. Eine übliche Verfahrensweise ist in diesem Fall ein
Callback, auch bekannt als Event-Handler.
Ein Callback funktioniert so: Übergeben Sie einem Objekt, das von dem Ereignis
weiß, eine Funktion. Findet das Ereignis statt, »ruft das Objekt Sie zurück« oder
informiert Sie, indem es die angegebene Funktion aufruft. Dieses Muster werden Sie
in JavaScript für die verschiedensten Ereignisse wiederfinden.
Hallo Browser, ich warte,
bis du die Seite geladen
hast, bevor ich mit meiner
Arbeit beginne.
Du musst gar nicht warten.
Gib mir einfach eine Callback-
Funktion, die ich ausführe,
sobald ich fertig bin.
Kein Problem.
Hier ist sie. Sie
heißt init.
Das Callback oder der
Event-Handler – wie
Sie wollen.
Der Browser oder, genauer,
das window-Objekt.
Sie sind hier � 251
Interaktion mit der Webseite
Angekommen! Ich setze meine
onload-Eigenschaft auf die
init-Funktion, damit ich auch
nichts vergesse …
Etwas später …
Hallo Browser, danke, dass
du daran gedacht hast, init
aufzurufen. Es ist problemlos
durchgelaufen!
… wird die init-Funktion aufgerufen und abgearbeitet.
Und sobald init aufgerufen wird,
sehen wir die Änderungen in
unserer Seite!
Uff, das war ein hartes Stück
Arbeit, aber die Seite ist geladen.
Mal sehen … jetzt muss ich aufrufen,
was in meiner onload-Eigenschaft
referenziert ist. Ah ja, die init-
Funktion. Wird sofort aufgerufen!
252 Kapitel 6
Über Funktionen und Event-Handler nachdenken
Interessant. Ich kann also Funktionen
benutzen, um Code vorzubereiten, der
aufgerufen wird, wenn etwas Bestimmtes
passiert. Auf welche anderen Events kann
ich denn mit solchen Funktionen reagieren?
Richtig. Und es gibt viele Arten von
Events, auf die Sie bei Bedarf mit diesem
Verfahren reagieren können. Manche Events,
wie beispielsweise load (»Seite vollständig geladen«)
werden vom Browser erzeugt, während andere durch die
Interaktion des Benutzers mit der Seite oder auch durch
Ihren eigenen JavaScript-Code ausgelöst werden.
Ein Beispiel für das »Seite ist geladen«-Event haben
Sie gerade gesehen. Wir reagieren darauf, indem wir
der onload-Eigenschaft des window-Objekts etwas
zuweisen. Event-Handler gibt es aber auch für andere
Dinge, wie »rufe diese Funktion alle fünf Sekunden
auf« oder »wir haben Daten zur Weiterverarbeitung
von einem Webservice erhalten« oder »der Benutzer hat
einen Button angeklickt, und wir müssen ein paar Daten
aus dem Formular auslesen« und so weiter. Events wie
diese kommen häufig bei der Erstellung von Seiten zum
Einsatz, die sich eher wie Programme und weniger wie
statische Seiten verhalten (und wer will das schon?). Bis
jetzt haben wir nur einen kleinen Blick auf die Event-
Handler geworfen. Aufgrund der wichtigen Rolle, die
sie in der JavaScript-Programmierung spielen, werden
wir etwas später noch deutlich mehr Zeit mit ihnen
verbringen.
Sie sind hier � 253
Interaktion mit der Webseite
<!doctype html>
<html lang="de">
<head>
<title>Meine Playlist</title>
<meta charset="utf-8">
<script>
____________ addSongs() {
var song1 = document.______________("________");
var _____ = _______________________("________");
var _____ = ________.getElementById("________");
________.innerHTML = "Blue Suede Strings, von Elvis Pagely";
__________________ = "Great Objects on Fire, von Jerry JSON Lewis";
song3.____________ = "I Code the Line, von Johnny JavaScript";
}
window.___________ = ____________;
</script>
</head>
<body>
<h1>Meine wunderbare Playlist</h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>
Hier etwas HTML-Code für eine Playlist mit Songs. Das einzige
Problem: Die Liste ist leer. Ihre Aufgabe ist es, den unten
stehenden JavaScript-Code auf den Leerzeilen zu ergänzen
und die Songs der Liste hinzuzufügen. Überprüfen Sie Ihre
Antworten am Ende des Kapitels, bevor Sie weiterlesen.
Wenn alles funktioniert hat,
sollte Ihre Webseite jetzt
etwa so aussehen.
Ergänzen Sie die Leerzeilen
um den fehlenden Code zum
Füllen der Playlist.
Hier ist der
HTML-Code für
die Seite.
Hier ist unser Skript. Der Code
sollte die Songs in die unten
stehende Liste (<ul>) einfügen.
Hier ist die leere Liste für die
Songs. Der oben stehende Code
sollte die einzelnen <li>-Elemente
mit dem passenden Inhalt füllen.
Spitzen Sie Ihren Bleistift
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.
