JavaScript-Übung

Merke: In JavaScript ist alles ein Objekt. Immer. Das ist manchmal verwirrend, aber es ist halt so.

Der Aufbau eines Dokuments im Browser

Der Browser baut das Dokument als Objektbaum (DOM) der Reihe nach auf. Dazu greift er auf den Quelltext des HTML-Dokuments zu. Findet er dort irgendwo ein <script>-Element, dann führt er sofort den dort gefundenen Code aus.

Wenn man in seinem Script auf Elemente zugreifen möchte, die zum Zeitpunkt der Ausführung des Scripts aber noch nicht vorhanden sind (z.B. weil das Script im <head> steht), dann muss man mit einem Abbruch des Scripts rechnen, es sei denn man hat das Script so geschrieben, dass es solche "Fehler" abfängt.

function test () {
    var el = document.getElementById("test");

    // wenn el gefunden wurde, wird diese "Bedingung" als "wahr" interpretiert!
    if (el) {
        el.style.color = "#ff8888"; // rote Textfarbe
    }
}

"Best Practice": Script in externer Datei

Es hat sich bewährt, dass man die Dynamik, die ein JavaScript in eine Website bringen kann, vom Dokument abkoppelt. Daher wird der JavaScript-Code in eine externe Datei ausgelagert und im <head> eingebunden. Der Seitenbastler geht also davon aus, dass das Script eventuell nicht zur Verfügung steht. Die Seite muss dann noch immer benutzbar sein - wenn auch vielleicht nicht so bequem.

Wie kann man nun aber diese Zeitabhängigkeit auflösen, damit man beim Schreiben des Codes immer sicher sein kann, dass das Dokument fertig geladen ist, bevor der eigene Code ausgeführt wird? Dazu benötigt man ein "event" (Ereignis), welches der Browser erkennt und sich danach entsprechend verhält, in diesem Falle das "onload"-Event des window-Objektes (siehe dazu Autostart eines JavaScriptes).

Das JavaScript muss nun so gebaut sein, dass es sich die Elemente einer Website "holt", die es braucht, um mit ihnen dann das zu tun, was es tun soll. Hier eignen sich insbesondere Klassennamen, die über das Universalattribut class="klassenname" vergeben werden. Eine ID kann im Dokument nur einmal vorkommen, ein Klassenname mehrmals. Elemente können sogar mehrere Klassennamen haben, da sie mehreren Klassen zugeordnet sind:

<p class="hinweis fehler">Sie haben ein falsches Passwort eingegeben!<p>

Um nun eine Referenz auf ein Element mit der passenden Klasse zu erhalten benötigt man eine Methode, die in immer mehr Browsern als native Methode implementiert wird. Will man "auf Nummer sicher gehen", muss man sich eine solche Methode (Funktion) selbst schreiben (siehe SELFHTML-Forumsarchiv getElementsByClassName).

Da eine solche Methode immer eine Liste (mit null bis n Einträgen) zurückliefert, muss man den Rückgabewert einer solchen Funktion entsprechend behandeln. Dazu verwendet man die Eigenschaften und Methoden eines Arrays in JavaScript.

Aufgaben