Das DOM – das Mysterium der JavaScript-Welt - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 203

Die Webseite in dem Beispiel enthält in einer Tabelle ein Bild und daneben eine leere Zelle
mit einer ID, in der bei gewissen Aktionen des Anwenders Informationen angezeigt werden
sollen. Darunter beinden sich vier Schaltlächen. Wenn der Anwender darauf klickt, sollen
gewisse Aktionen ausgelöst werden.
Bild 8.1■ Die Webseite nach dem Laden - der Mauszeiger zeigt den Wert der alt-Eigenschat des
Bilds an.
HInWEIS: Wir verwenden sowohl in diesem als auch in diversen folgenden Bei-
spielen in dem Kapitel explizit JavaScript-Eventhandler, die etwas später in dem
Kapitel genauer erklärt werden. Aber mit den folgenden Erklärungen und Ihren
Erfahrungen mit HTML-Eventhandlern sollten Sie die Bedeutung verstehen. Und
mehrere folgende Beispiele sind auch für JavaScript-Eventhandler einfach sinn-
voller - zumal sie auch in der Praxis in jedem Fall HTML-Eventhandlern vorzuzie-
hen sind.
Beachten Sie, dass wir in dem Skript explizit mit with() arbeiten, denn wir haben hier
genau so einen Fall vorliegen, wo das sinnvoll ist. Wir müssten sonst ohne with bei jeder
Eigenschat und Methode document voranstellen. In den folgenden Erklärungen notieren
wir aber document zum besseren Verdeutlichen. Beim Bildobjekt, das wir mit document.
getElementsByTagName("img")[0] ansprechen, werden die Eventhandler onmouseover ,
onmouseout und onclick registriert. Damit wird beim Überstreichen des Bilds mit der
Maus und bei einem Klick im Bildbereich in der rechten Tabellenzelle eine Information
angezeigt und beim Verlassen des Bildbereichs mit dem Mauszeiger der Anzeigebereich
wieder gelöscht. In mehreren Zeilen sehen Sie, wie man innerHTML nutzt (mit document.
getElementById("info").innerHTML ) und wie auf den Wert des alt -Attributs des Bilds
zugegrifen wird ( document.getElementsByTagName("img")[0].alt ). Vollkommen analog
sehen Sie den Zugrif auf ein weiteres Attribut von img - den URL der Datei src ( document.
getElementsByTagName("img")[0].src ).
Die anderen Zeilen zeigen nun noch weitere schreibende Zugrife auf Attribute eines HTML-
Tags. Hier werden mit den ersten beiden Schaltlächen konkret die Breite des Bilds über die
Eigenschat width und mit der dritten und vierten Schaltläche die Werte von src und alt
verändert, was zu einem neuen Bild inklusive neuem Alternativtext führt. Die ausführen-
den Funktionen werden jeweils beim Klick auf eine der Schaltlächen aufgerufen.