Javascript kann nun auf die Objekte der Webseite über entsprechene Objektbezeichner zugreifen und deren Attribute auslesen oder verändern.

Transkript

1 JavaScript-OO JavaScript bietet auf einfache Weise die Möglichkeit, verschiedenen Objekte einer HTML-Seite aktiv zu verbinden, sodass der Inhalt der Webseite aktiv auf Usereingaben reagiert. Jedes Objekt einer Webseite wird durch ein Tag definiert, z.b <IMG... >. Diesem Objekt können durch verschiedene Attribute bestimmte Eigenschaften zugeschrieben werden, wie z.b. SRC=.. BODER=.. WIDTH=... Über die Attribute NAME=... und ID=... kann jedem Element ein Bezeichner zugeordnet werden, über den das Objekt angesprochen werden kann. Mit den EVENT-Attributen wie z.b. onclick=.. können den Objekten auch Methoden in Form von Funktionen zugeordnet werden, die die Attribute anderer Objekte verändern können, die über den Bezeichner referenziert werden.

2 Javascript kann nun auf die Objekte der Webseite über entsprechene Objektbezeichner zugreifen und deren Attribute auslesen oder verändern. Nehmen wir z.b. an, dass innerhalb des Webdokuments eine Grafik durch das Tag <IMG SRC= testbild.jpg NAME= TB WIDTH= 200 HEIGHT= 50 BORDER= 3 > eingebunden wurde. JavaScript kann nun über den Objektbezeichner document.tb (document.objektname) auf dieses Bild zugreifen und Attribute beeinflussen, wie z.b. document.tb.width=300 die Breite des Bildes verändern, document.tb.border=0 den Rahmen abschalten, document.tb.src= neubild.jpg ein anderes Bild darstellen. Beim Objektnamen (hier TB) ist Groß- und Kleinschreibung zu beachten, Attribute (hier width, border und src) sind unbedingt in Kleinschreibung anzugeben, auch wenn sie im HTML-Tag in Großschreibweise eingetragen wurden. Zu erwähnen sind noch die ebenfalls verwendbaren Objektbezeichner document.getelementsbyname( TB )[0] oder speziell für Bilder document.images[ TB ],die eine indirekte Adressierung zulassen.

3 JavaScript-Testseite

4 Das Beispieldokument enthält fünf Objekte, die mit einem NAME- Attribut versehen sind und so über JavaScript angesprochen werden können. Es handelt sich um ein Bild mit dem Namen BILD1, sowie ein Formular mit dem Namen TEST, das drei Input-Objekte mit den Namen BTN1, BTN2 und TXT1 enthält. Diese fünf Objekte können über die Objektbezeichner document.bild1 für das Bild, document.test für das gesamte Formular TEST, document.test.btn1 für den Button BTN1 im Formular TEST, document.test.btn2 für den Button BTN2 im Formular TEST und document.test.txt1 für das Textfeld TXT1 im Formular TEST angesprochen werden.

5 JavaScript-Testseite Objekte

6 Die beiden INPUT-Buttons BTN1 und BTN2 im Formular TEST besitzen außerdem ein EVENTATTRIBUT onclick, mit dem eine JavaScript-Funktion ausgelöst wird, wenn der User die Buttons auf der Webseite mit der linken Maustaste anklickt. Bei Button BTN1 ist für das EVENTATTRIBUT onclick der JavaScript-Code onclick= document.test.txt1.value='du da'; eingetragen. Die Anweisung document.test.txt1.value='du da'; weist dem Objekt TXT1 im Formular TEST einen neuen Wert für das ATTRIBUT VALUE zu. Wenn der User also den Button anklickt, steht in dem Texteingabefeld der Schriftzug Du da. Bei Button BTN2 ist der JavaScript-Code onclick= bildanders(); Die Anweisung bildanders(); ist ein Funktionsaufruf. Diese JavaScript-Funktion wurde im HEAD der Webseite definiert. Das ist vorteilhaft, wenn das Anklicken des Buttons sehr umfangreiche Aktionen auslösen soll, die sich nicht mit einem einfachen JavaScript-Befehl beschreiben lassen. In der Funktion bildanders() wird dem Bild BILD1 mit der Anweisung document.bild1.border=5; ein Rahmen mit einer Dicke von 5 Pixeln zugewiesen.

7 JavaScript-Testseite Referenzen

8 Durch JavaScript wurden damit die Objekte innerhalb der Webseite miteinander verbunden und können aktiv auf Usereingaben reagieren. Wie gut, effizient und sinnvoll diese Reaktionen sind, ist hauptsächlich vom Geschick des Programmierers abhängig.