JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 249

Interaktion mit der Webseite

<script>

function init() {

var planet = document.getElementById("gruener_planet");

planet.innerHTML = "Roter Alarm: vom Phaser getroffen!";

}

window.onload = init;

</script>

Denken Sie nicht mal daran, meinen Code vor dem

vollständigen Laden der Seite auszuführen!

Ja, aber wie? Neben dem Verschieben des Codes vor das schließende

</body>-Tag gibt es noch eine weitere und möglicherweise sauberere

Möglichkeit: mit Code.

Hierfür wird zunächst eine Funktion mit dem Code erstellt, der erst

ausgeführt werden soll, wenn die Seite vollständig geladen ist. Danach nehmen

Sie das window-Objekt und weisen die neue Funktion der Eigenschaft

onload zu.

Was passiert hier? Das window-Objekt ruft jede Funktion auf, die Sie

seiner onload-Eigenschaft zugewiesen haben, aber erst nachdem die Seite

komplett geladen ist. Danken Sie den Entwicklern des window-Objekts für

ihre Weitsicht. Sehen Sie mal hier:

Erstellen Sie zunächst eine

Funktion namens init und

schreiben Sie Ihren Code hinein.

Der Code, der vorher im head der

Seite stand, befindet sich jetzt im

Körper der init-Funktion.

Hier weisen wir die Funktion init der window.onload-Eigenschaft zu.

Stellen Sie sicher, nach dem Funktionsnamen keine runden Klammern

zu setzen! Wir rufen die Funktion nicht auf, sondern weisen den

Funktionswert der Eigenschaft window.onload zu.

Noch ein Versuch …

Laden Sie die Seite jetzt mit der neuen init-Funktion und der

onload-Eigenschaft. Dieses Mal lädt der Browser die Seite zunächst

komplett, erzeugt das gesamte DOM und führt erst dann Ihre init-

Funktion aus.

Schon viel besser. Jetzt

zeigt der grüne Planet wie

gewünscht den roten Alarm.

Nennen Sie diese Funktion, wie Sie wollen.

Üblicherweise heißt sie init.

Das window-Objekt

ist Teil von JavaScript

und repräsentiert das

Browserfenster.