Clientspezifische Eigenschaften

Bisher sind im wesentlichen Eigenschaften der Sprache JavaScript betrachtet worden. Nun werden wir die Einsatzgebiete von JavaScript näher betrachten.

JavaScript im Browser

In diesem Abschnitt werden wir sehen, wie man JavaScript in HTML einbettet. Weiterhin werden die Objekte, die im Browser im Zusammenhang mit JavaScript verwendet werden können, betrachtet. Diese Objekte sind etwa wie folgt grob klassifizierbar:

• Objekte vordefinierter Klassen (vgl. Kap. 4)
• Browser Objekte, wie z.B. window, document, location
• HTM Objekte, wie link, form, buton
• Objekte selbst definierter Klassen

In diese Betrachtung fließt auch das Document Object Modell (DOM) ein.

JavaScript in HTML einbetten

Mit dem script Tag lässt sich JavaScript Kode in HTML einbetten - so wie wir es bisher immer in den Beispielen gemacht haben. Nun betrachten wir:

• die genauere Verwendung des script Tag,
• das Verwenden von JavaScript Bibliotheken,
• die Verwendung von  JavaScript Ausdrücken als HTML Attributwerte und
• das noscript Tag.

Das Tag SCRIPT

Das Tag  script ist eine Erweiterung von HTML, das beliebig viele JavaScript Anweisungen umschließt.

In HTML Dokumenten können beliebig viele solcher Tags stehen.

JavaScript Version

Die unterschiedlichen Browser unterstützen in Abhängigkeit ihrer Version eine spezifische JavaScript Version. Jede JavaScript Version hat besondere Eigenschaften, die in Vorgängerversionen nicht unterstützt sind.

Mit dem Attribut language des Tags script kann man die Version von JavaScript angeben.

Ein Browser ignoriert den Kode, der innerhalb eines script  Tags steht, wenn er die JavaScript Version, die mit dem Attribut language angegeben ist nicht unterstützt.

Das folgende Kodefragment  zeigt, wie man vorgeht, wenn man eine eigene JavaScript Funktion (hier doClick) realisieren muss, die in jeder Browserversion funktionieren muss:

Wenn man nun eine Funktion innerhalb eines mit language Attribut versehenes Tags definiert, kann es zu Problemen kommen, wie folgendes Beispiel zeigt:

Das Laufzeitproblem kommt daher, dass der JavaScript Kode überlesen wird, da z.Z. die Version 2.3 nicht existiert und somit die Funktion test() nicht definiert ist.

Einige Browser unterstützen überhaupt kein JavaScript. Um HTML Kode mit eingebettetem JavaScript allgemein verwenden zu können, also auch wenn der Browser JavaScript nicht kennt, kann man folgenden Konstruktion verwenden:

Der JavaScript Kode ist in HTML Kommentar Tags (<!--   -->) einzubetten, wobei die letzte Kommentarzeile mit // (JavaScript Kommentar) anfangen muss .

Browser überlesen normalerweise nicht bekannte Tags. Deshalb wird ein nicht JavaScriptfähiger Browser das script Tag überlesen, den Kommentar ebenfalls. JavaScriptfähige Browser interpretieren das script Tag richtig, sie überlesen die Zeile mit //.

JavaScript Bibliotheken

Ein weiteres Attribut des script Tag ist src. Damit kann man eine Quelle von JavaScript Kode angeben.

Damit sind alle Funktionen, die in der Datei "common.js" definiert sind verwendbar.

Neben der Angabe des Dateinamens, wie oben, sind allgemeine URLs (http, ftp, file) verwendbar, zB.

Solche externen Dateien dürfen nur JavaScript Kode enthalten (HTML Kode also nicht!). Wird eine solche Datei über eine http URL angesprochen, so muss der Server den richtigen MIME Typ setzen.   

Dies wird normalerweise durch den Eintrag

  type=application/x-javascript   exts=js

in der Konfigurationsdatei des Web Servers "mime.types" ausgedrückt. Damit wird der Web Server veranlasst, die js Datei im http Header zurück zu senden.

JavaScript Ausdrücke als HTML Attributwerte

Mit JavaScript Entitäten (entities) können die Werte von HTML Attributen angegeben werden. Dazu wird ein JavaScript Ausdruck in "&{" und 2};" eingeschlossen.

(Analog zu "&GT;" als Ersatzdarstellung für ">" in HTML)

Das NOSCRIPT Tag

Wenn ein Browser JavaScript  nicht unterstützt kann man den alternativen Text mit dem NOSCRIPT Tag angeben.

Übung 7.1-1

Legen Sie eine JavaScript Bibliothek "Uebungen.js" an, in der Sie die folgenden Funktionen definieren:

• isInteger(s) liefert true, wenn der String s ein Integer ist, ansonsten false.

• isPositiveInteger(s) liefert true, wenn der String s ein positiver Integer ist, ansonsten false.

• isNegativeInteger(s) liefert true, wenn der String s ein negativer Integer ist, ansonsten false.

• isIntegerInRange(s,a,b) liefert true, wenn der String s ein Integer im Bereich [a,b] ist, ansonsten false.

• isDate(s) liefert true, wenn der String s gültiges Datum ist, ansonsten false (gültig soll z.B. sein "1.1.01", "1.02.1999", "010201")

Entwerfen Sie eine HTML Seite zum Testen (Eingabe von Testwerten mit Ausgabe der Ergebnisse) der Funktionen der Bibliothek "Uebungen.js"

window Objekt

Das window Objekt ist die Stelle, in die eine HTML Seite geladen wird. Dieses Objekt ist stets als Basis für die JavaScript Programmierung (mit Ablaufumgebung Browser) vorhanden.

Die Methoden, die von allen gängigen Browsern unterstützt werden sind:

• open()
• close()
• alert()
• confirm() und
• prompt

Das folgende Beispiel verwendet open() und close() zum Öffnen und Schliessen eines Fensters, bei dem die URL als Parameter angegeben wird.

In der Funktion wird durch open() ein Fenster geöffnet. Normalerweise müsste man schreiben window.open(). Das window Objekt stellt hier eine Ausnahme dar. Besser ist es aber, trotzdem die Sysntax einzuhalen: "Objekt.Methode".

Das Schliessen eines Fensters geschieht analog, man verwendet die Methode close().

Im folgenden Beispiel wird ein Fenster durch open geöffnet, dabei werden beim Aufruf Eigenschaften definiert, die das neue Fenster haben soll.

Der erste Parameter von open definiert dieURL, der zweite den Namen des Fensters, der dritte die Eigenschaften. Der Name des Fensters ("anzeigeZenster") ist dann zu verwenden, wenn man von einem anderen Fenster auf dieses Fenster zugreifen will; dann ist ja die Variable "fenster" nicht bekannt, wohl aber der Name.

So kann z.B. durch folgendes HTML Fragment auf das neue Fenster zugegriffen werden:

Die folgende Tabelle listet die Eigenschaften des window Objektes auf (JavaScript 1.0, 1.1):

Weitere Eigenschaften sind der Referenz des Herstellers zu entnehmen (im IE kann man z.B. in der neueren Version, die Position auf dem Bildschirm angeben, auf der das Fenster beim Start platziert werden soll).

Die Methode alert() ist eine window Methode zur Erzeugung eines Hinweisfensters. Diese Methode ist bereits ausgiebig mit Beispielen illustriert.

Eine weitere window Methode ist confirm() zur Abfrage einer Bestätigung des Benutzers. Die Methode erzeugt ein Auswahlfenster mit zwei Schaltflächen: "OK" (dann liefert confirm() als Ergebnis true) und "Abbrechen" (dann liefert confirm() als Ergebnis false).

Die Methode prompt() fordert den Anwender auf, eine Eingabe in ein Textfeld des erzeugten Fensters zu machen. Der erste Parameter ist der Text, der dem Anwender sagt, was er eingeben soll, der zweite ist der Defaulttext, der im Textfeld erscheint. Zwei Schaltflächen "OK" (dann liefert promt() als Ergebnis true) und "Abbrechen" (dann liefert promt() als Ergebnis false) steuern das Benutzerverhalten.

Diese drei Methoden von window sind modal, das bedeutet, dass diese Fenster stets geschlossen werden müssen, bevor man das initiierende Fenster wieder aktivieren kann.

Frames als Bestandteile von Fenstern  werden wird gesondert behandeln, da dies eine Möglichkeit ist, besondere Interaktionen zu realisieren.

document Objekt

Das document Objekt ist das zentrale Element der HTML Seitenerstellung. In den Beispielen wurde geschrieben: document.write(..). Dabei wurde die Methode "write" des document Objektes angesprochen.

Auf das document Objekt kann man von allen Stellen einer HTML Seite zugreifen.

Die Erstellung von HTML Seiten war vor einigen Jahren nur statisch möglich, d.h. eine Seite, die abgerufen wurde, musste vorher "geschrieben" werden. Mit CGI Programmen war es erstmals möglich zur Laufzeit HTML Dokumente zu erzeugen, etwa um Daten aus einer Datenbank auf einer HTML Seite anzuzeigen.

Mit JavaScript kann man HTML Dokumente dynamisch erzeugen, ohne auf einen Server  zugreifen zu müssen.

Dies wird mit dem document Objekt realisiert.

Bevor ein Dokument mittels document.write() beschrieben werden kann, ist es zu öffnen (document.open(). Durch  fenster.document.write() wird nicht in das aktuelle Dokument geschrieben, sondern in das Objekt "fenster".  Durch den Methodenaufruf fenster.document.close() wird das Dokument geschlossen und der Browser erkennt, das die Ausgabe beendet ist.

Zu beachten:

Die Methoden open () und close() gibt es für window und document Objekte. document.close() sollte stets verwendet werden, auch wenn anschließend irgendwann ein window.close() das Fenster schliesst. Erst durch document.close() wird der Ausgabestrom auf das Dokument abgeschlossen.

location Objekt

Das location Objekt wird vom Browser verwendet, um Informationen über das darzustellende Dokument zu speichern. Die Informationen werden bei mit dem Dokument vom Web Server übertragen.

Das location Objekt hat folgende Eigenschaften:

Eine Internetadresse setzt sich aus den folgenden Bestandteilen zusammen, die das location Objekt einzeln als Eigenschaften zur Verfügung stellt:

protocol // hostname : port pathname search hash

http//fbi.fh-farmstadt.de:80/~schuette#a1

Der Suchstring wird oft in CGI-Skripten verwendet, um Daten zwischen Seite und Webserver auszutauschen.

Das location Objekt kann verwendet werden, um in einem JavaScript Programm eine neue Seite zu laden, in dem man der Eigenschaft href einen neuen Wert zuweist.

history Objekt

Die Historie der zuletzt besuchten Seiten im history Objekt abgelegt. Die Eigenschaft length gibt die Anzahl der Elemente an.

Die Methoden

• back()
• forward()
• go()

dienen zum Wandern durch die besuchten Seiten. go(-n) gibt an, dass man sich n Schritte rückwärts bewegt;

history.back() und history.forward() sind selbsterklärend.

Damit lassen sich selbst Schaltflächen zum Navigieren realisieren, z.B

Durch diese Methoden kann man die zuletzt besuchten Seiten ansprechen, die eigentliche Adresse ist aus Sicherheitsgründen nicht abfragbar. (Man könnte ja sonst Benutzereingaben bei der Methode GET zurückverfolgen)

navigator Objekt

Die Informationen, die über den Browser selbst bekannt sind, sind über das navigator Objekt abrufbar. Folgende Eigenschaften gehören zum navigator Objekt:

• platform (z.B. Unix, WinNt)
• userAgent (z.B. Mozilla/4.03C-NSCP, ...)
• appCodeName (z.B. Mozilla)
• appName (z.B. Netscape, Microsoft Internet Explorer)
• appVersion (z.B. 4.0)

Achtung:

Diese Information sollte nicht verwendet werden, um in Abhängigkeit davon Eigenschaften der jeweiligen Browser auszunutzen - Opera meldet sich hierbei als Netscape, obwohl er nicht alle Netscapefunktionen unterstützt.

Document Object Model

JavaScript bahandelt die Elemente einer HTML Seite als Objekte mit Eigenschaften und Methoden. Die einzelnen Objekte sind dabei in eine hierarchische Beziehung gesetzt, aus sie angesprochen werden. Dazu wurde das "Document Object Modell" (kurz DOM) entwickelt. DOM ordnet jedem Objekt einen Platz in der Hierarchie zu und legt damit fest, wie die einzelnen Objekte referenziert werden.

Das Objektmodell hat sich im Laufe der Zeit weiterentwickelt. Zunächst wird DOM Level 0 betrachtet. Dies ist das Objektmodell, dass von allen Browsern unterstützt wird. Dann wird das vom W3C vorgeschlagene DOM Level 2 diskutiert.

DOM Level 0

HTML Dokumente sind in diesem Modell recht einfach aufgebaut. Dokumente bestehen aus Bildern (images) Links und Formularen. Formulare wiederum bestehen aus den einzelnen Formularelementen.

Am Beispiel eines einfachen HTML Dokumentes sehen wird die DOM Level0 Hierarchie.

Dieses Dokument hat folgende Objekthierarchie:

Man erkennt, dass es einige Arrays gibt, über die man auf die HTML Objekte zugreifen kann. Für Bilder, Links und Formulare gibt es jeweils ein Array, bei dem die Auftreten der Objekte in der Reihenfolge innerhalb des HTML Dokumentes durchnummeriert werden.

So ist das Bild im Dokument als

document.images[0]

ansprechbar; der Link als

document.links[0] und die Formularelemente mit

document.forms[0].element[0] (bzw ..[1])

Eine Eigenschaft des Textfeldes könnte demzufolge in JavaScript durch

document.forms[0].element[0].value = "neuer Wert"

geändert werden.

Der Zugriff über den Index ist nicht immer sinnvoll. Man kann die Objekte auch über ihre Namen ansprechen, im Beispiel etwa:

document.f1.element[0].value = "neuer Wert" oder
document.f1.eingabe.value = "neuer Wert"

DOM Level 2

In DOM  Level 2 sieht die Objekthierarchie der Beispielseite wie folgt aus:

Im Beispiel sieht man, dass im DOM Level2 alle HTML Tags als Objekte abgebildet sind. Jeder Position des Objektbaums stellt einen Knoten (node) dar. Rechteckige "Knoten" sind Elemente (elements), die abgerundeten Knoten sind Textobjekte (textnodes), die den Inhalt eines HTML Tags repräsentieren. Jedem Element könne die Attribute des HTML Tags zugeordnet werden (wie width, value, ...).

Im Gegensatz zu DOM Level 1 kann man hier nicht nur Elemente ansprechen, sondern die Struktur des Objektbaums dynamisch verändern.

Ziel von DOM Level 2 ist neben der erweiterten Möglichkeit der Scriptprogrammierung, die Vereinheitlichung für browserunabhängige Darstellung.

Somit kann man auf deas selber HTML Dokument in zwei Art und Weisen zugreifen: DOM0 und DOM2 like. Das Document Objektmodel stellt eine Schnittstelle zum Zugriff auf die HTML Objekte dar.

Nach dem Überblick wird der Zugriff auf den DOM2 Objektbaum aus JavaScript Sicht in einem eigenen Teil verdeutlicht.

Eventhandling

JavaScript Anwendungen, die in Browsern ablaufen, sind ereignisgesteuert. Ereignisse sind Aktionen, die normalerweise wegen Benutzereingriffen stattfinden.

Beispiele sind:

• Drücken einer Schaltfläche,
• Ändern eines Testfeldes oder
• Bewegen des Mauszeigers über einen Link.

Damit ein Skript auf solche Ereignisse reagieren kann, sind so genannte "Eventhandler" zu definieren, wie "onChange" oder "onClick".

In diesem Teil besprechen wir:

• Definition von Eventhandler (JavaScript 1.0, 1.1)
• Rückgabewerte in Eventhandlern
• Ereignisse mittes Methodenaufruf auslösen,
• Ereignisse in Netscape Communicator >= 4.x
• Ereignisse im Microsoft IE >= 4.x
• Ereignisse im W3C Standard.

Das Reagieren auf Benutzereingaben, wird wie folgt dargestellt, behandelt:

Die Benutzereingabe erzeugt ein Ereignis. Ist ein Eventhandler dafür definiert, so wird er aktiv, ansonsten wird mit der Standardaktion des Browsers reagiert (z.B. wenn ein Link angeklickt wird).

Die folgende Tabelle zeigt die unterstützten Eventhandler (Ausschnitt von Netscape, nicht jedes Event wird in allen Browsern unterstützt):

Definition eines Eventhandler

Ein Eventhandler ist eine JavaScript Funktion (oder eine Sequenz von JavaScript Anweisungen), die ausgeführt wird, wenn das zugehörige Ereignis bezüglich eines HTML Tags eintritt.

Man erzeugt einen Eventhandler für ein HTML Tag indem man dem Attribut mit dem Namen des Eventhandlers als Wert die Eventhandler Funktion zuordnet.

Allgemein:

    <TAG eventHandler="JavaScript Code">

wobei TAG ein HTML Tag ist, eventHandler einer der o.a. Eventhandler ist.

Zunächst ein eher für die Praxis untaugliches Beispiel:

Achtung:

In JavaScript <= 1.1 müssen die Namen der Eventhandler in Kleinbuchstaben geschrieben werden, also z.B. "onmouseover".

Betrachten wir folgendes Beispiel:

Dann ist in der Funktion compute this.form das aktuelle Formular, in dem sich die Schaltfläche befindet (this alleine würde das Objekt "button" referenzieren).

Wenn nun ein Eventhandler erzeugt wird, so bekommt das Objekt (im Beispiel oben die Schaltfläche) eine Eigenschaft, die den Namen des Eventhandlers hat (im Beispiel "onClick"); diese Eigenschaft hat als Wert den angegebenen JavaScript Kode.

Ein etwas größeres Beispiel ist nachfolgend aufgeführt:

In diesem Beispiel ist ein Eventhandler "onClick" erzeugt, der die im Header definierte JavaScript Funktion "compute" aufruft.

In größeren Anwendungen kann es sinnvoll sein, Eventhandler für das selbe Objekt zu redefinieren. Dies wird dadurch zum Ausdruck gebracht, dass man der Eigenschaft (Eventhandler) explizite einen neuen Wert gibt.

Achtung:

Dies ist mit JavaScript1.0 nicht möglich.

Nun wird für die wichtigsten Eventhandler ein Beispiel demonstriert.

onFokus und onBlur im Zusammenhang mit Formularobjekten

Die Ereignisse onFocus und onBlur treten in Verbindung mit Formularobjekten auf. Wenn mehrere Formularobjekte auf einer Seite dargestellt werden, so eindeutig sein, auf welches Objekt sich eine Benutzereingabe bezieht.

Alle Ereignisse beziehen sich immer auf das Objekt, das den Fokus hat. Dies erkennt man bei Textfeldern, am blinkenden Cursor. Die anderen Objekte erhalten den Fokus, wenn man mit der Maus in ihren Einflussbereich kommt.

Das Ereignis onFocus tritt ein, wenn ein Objekt den Fokus erhält; onBlur tritt ein, wenn der Fokus von dem Objekt entfernt wird.

Das folgende Beispiel verwendet diese Eventhandler, um erklärenden Text in die Statuszeile zu schreiben.

Wenn man versucht, ein anstelle die Statuszeile ein Popup Fenster zur Ausgabe zu verwenden, so hat man eine Unendlichschleife (nicht in allen Browsern) programmiert!

Die Methode alert verursacht, dass das Formular für eine gewisse Zeit nicht mehr fokussiert wird. Das Popup sperrt all Aktivitäten in dem Browser Fenster, bis das Popup geschlossen wird. Das Schließen bewirkt, dass der Fokus zurückkehrt zur ursprünglichen Stelle - Schleife!!!

onChange, onSelect

Mit diesen beiden Eventhandlern kann man feststellen, ob sich an einer Benutzereingabe etwas geändert (onChange) oder ob ein Objekt selektiert wurde (onSelect) hat.

onSubmit, onReset

Die Ereignisse Submit und Reset spielen eine Rolle bei der Übertragung von Formulardaten vom Client zum Web Server. Submit tritt ein, wenn der Submit-Knopf gedrückt wird. D.h. man kann mit diesem Eventhandler prüfen, ob Daten im Formular korrekt sind, bevor die Daten Übertragen werden.

Reset tritt ein bei Auslösen des Reset Knopfes und dient normalerweise zum Zurücksetzen der vom Benutzer ausgefüllten Formulardaten.

Wir behandeln das in einem der nächsten Abschnitte.

onLoad, onUnload

Wenn eine Seite vom Web Server geladen wird, wird das Ereignis Load erzeugt. Wird die Seite verlassen, so tritt das Ereignis Unload ein. Beide Ereignisse beziehen sich auf das Window Objekt. Verwendet werdne sie im Tag <BODY>.

Das folgende Beispiel zeigt, wie man einfach Begrüßungen mittels Eventhandlern programmieren kann.

Man sollte Alerts natürlich zum Begrüßen nicht verwenden. Normalerweise wird onLoad verwendet, um Animationen beim Laden einer Seite zu starten.

onFocus und onBlur im Zusammenhang mit Fenstern

Die Ereignisse Focus und Blur treten auch im Zusammenhang mit Fenstern auf. Umfasst die Anwendung mehrere Fenster, so spielen diese Ereignisse eine Rolle, wenn man Fenster wechselt: das aktive Fenster, das Verlassen wird löst das Ereignis Blur aus, das neue aktive Fenster das Ereignis Focus.

Das folgende Beispiel verwendet den Eventhandler onBlur, um eine Fenster automatisch zu schließen, wenn es inaktiv wird.

Im nächsten Beispiel wird die Hintergrundfarbe geändert, wenn ein Fenster nicht mehr aktiv ist.

onError in Bezug auf das window Objekt

Der Eventhandler onError kann verwendet werden, um Fehler, die auftreten, zu unterdrücken. Unglücklicherweise wird dies nicht von allen Browsern unterstützt.

onError  kann nicht im Rahmen eines HTML Tag plaziert werden, man muss ihn durch JavaScript Kode erzeugen.

onMouseOver, onMouseOut

MouseOver und MousOut sind Ereignisse, die z.B. verwendet werden können, um anstelle des Standardtextes in der Statusleiste (URL) einen eigenen Text anzugeben.

Im JavaScript Kode des Eventhandlers steht

    return true;

Dies ist erforderlich, da ansonsten die Standard Statuszeile nicht unterdrückt wird.

Wir werden auf die Rückgabe von Eventhandlern später noch eingehen.

onAbort, onError, onLoad in Bezug auf Bilder

Das Laden von Bildern ist eine häufig mit Problemen behaftete Angelegenheit, weil oftmals die Bandbreite des Internet nicht ausreicht, um größere Bilder fehlerfrei zu laden.

Mit den Eventhändlern onAbort, onError und onLoad kann man das Laden von Bildern kontrollieren.

Wurde ein Bild erfolgreich geladen und dargestellt, so wird vom Browser das Ereignis Load erzeugt.

Achtung:

Load tritt erst ein, wenn das Bild tatsächlich dargestellt ist, d.h. wird das Bild nur geladen (Image Objekt), wird Load nicht ausgelöst.

Das Ereignis Abort tritt ein, wenn der Ladevorgang abgebrochen wurde; das Ereignis Error wird in Felerfällen, z.B. wenn die Bilddatei nicht gefunden wird, ausgelöst.

Achtung

Bei animierten Gif's wird das Ereignis Load bei jedem Durchlauf erzeugt!

Rückgabewerte in Eventhandlern

Der Eventhandler onSubmit dient zur Übermittlung von Formulardaten zum Web Server. Bevor die Daten gesendet werden, sollte stets geprüft werden, ob die Daten korrekt sind.  Das Ereignis Submit wird durch drücken der Submit Schaltfläche ausgelöst.

Benötigt wird also eine Möglichkeit, um zu Verhindern, dass Daten gesendet werden. Dazu liefern die Eventhandler einen Wahrheitswert zurück. Damit lassen sich die Standardaktionen des Browsers als Reaktion auf das eingetretene Ereignis ändern.

Durch

    onSubmit="return false;"

wird das Formular nie versendet.

Die normale Vorgehensweise zum Prüfen von Formularinhalten ist, eine Funktion (z.B. test()) zu schreiben, die das Ergebnis des Prüfens als Rückgabewert liefert. Damit ist der Eventhandler dann wie folgt aufzurufen:

    onSubmit="return test();"

Achtung:

In Formularen muss bei submit stets return ... stehen, es reicht nicht aus, die Funktion (test) alleine aufzurufen, auch wenn sie einen Wahrheitswert liefert.

Das folgende Beispiel zeigt, wie man verhindern kann, dass die Eingaben eines Benutzers gelöscht wird, wenn der Reset Knopf gedrückt wird.

Mit Rückgabewerten kann man die Standartaktion des Browsers unterbinden.

Mit

    onMouseOver="return true;"

kann man verhindern, dass bei einem Link die URL im Status angezeigt wird.

Achtung:

In der Anfangsphase der Entwicklung von JavaScript konnte man sich nicht auf ein einheitliches Vorgehen einigen - bei einigen Eventhändlern muss man return true, bei anderen return false schreiben, um die Standardaktion zu unterbinden. Dies ist aus Kompatibilitätsgründen bis heute so geblieben. Die folgende Tabelle definiert das Verhalten:

Eventhandler	Abbruch durch
onClick	return false
onError	return true
onMouseOver	return true
onReset	return false
onSubmit	return false

Übung 7.2.1

Verdeutlichen Sie sich die einzelnen gezeigten Programm. Ändern Sie das Verhalten bei Eintreten eines Ereignisses ab, indem Sie jeweils eigene Funktionen definieren, die als Reaktion verwendet werden.

Ereignisse durch Aufruf von Methoden auslösen

Normalerweise werden Ereignisse als Folge von Benutzeraktionen ausgelöst. Man kann aber auch Ereignisse auch erzeugen, in dem man die Methode des Eventhandlers aufruft.

Methode click()

Eine Checkbox

kennt die Methode click(), mit der man einen Mausklick auf das Objekt simulieren kann. Ein Aufruf dieser Methode aus einem Programm kann also den Wert des Kontrollfeldes ändern.

Methoden focus(), select() und blur()

Diese Methoden sind geeignet, um Benutzeroberflächen auf Basis von Formularen zu erzeugen, bei denen auf Fehleingaben in Feldern hingewiesen wird und das fehlerhafte Feld fokussiert wird.

Die Verwendung von focus() und select() zeigt folgendes Beispiel.

Die Methode blur() entfernt den Fokus von einem Objekt.

Im Zusammenhang mit Fenstern ist die Methode focus()verwendbar, um z.B. ein Fenster in den Vordergrund zu bringen, wenn ein wichtiges Ereignis statt findet. In JavaScrpt 1.0 und 1.1 existiert hierzu keine eigene Methode. In vielen Umgebungen kommt das aktive Fenster automatisch in den Vordergrund (funktioniert nicht in Unix). Das kann man sich zu Nutze machen, um ein Hinweisfenster zu realisieren.

Die Methoden submit() und reset()

Diese  Methoden eines Formularobjektes dienen zum Senden und Zurücksetzen eines Formulars. Mit submit kann man ein Formular versenden, ohne dass der Benutzer einen Button drückt. reset kann in Programmen verwendet werden, um Formulare zurück zu setzen.

Die bisher betrachteten Ereignisse und Eventhandler sind in den Versionen JavaScript 1.0 und 1.1 verfügbar. Nun wird auf spezielle Erweiterungen innerhalb des Netscape Communicator >= 4.x und des Microsoft Internet Explorer >=4.x eingegangen.

Ereignisse in Netscape Communicator >= 4.x

Neben zusätzlichen Events wurden im Communicator ab Version 4.x ein Event Objekt eingeführt, das sich leider vom Event Objekt des Explorers unterscheidet.

Neue Eventhandler sind z.B.

1. onDragDrop,
2. onResize und
3. onMove

Das Eventmodell des Communicators

Neben der Tatsache, dass ein Ereignis eingetreten ist, interessiert oft auch mehr Information zum Ereignis, wie die Stelle innerhalb eines Bildes, auf die geklickt wurde. Dazu existiert das Objekt event.

Achtung:

Die Objektmodelle von Netscape, Microsoft und vom W3C Standard unterscheiden sich. Wir werden die Unterschiede später betrachten.

Die nachfolgende Tabelle beschreibt die wichtigsten Eigenschaften des Event Objektes.

Das folgende Beispiel gibt die Mauskoordinaten eines Mausklicks an.

Im o.a. Beispiel bezeichnet event  in test(event) das Ereignis, das durch den Eventhandler definiert ist.

Event Capturing im Communicator

Eine der wichtigsten Neuerungen in JavaScript1.2 ist das so genannte Event-Capturing. Damit lassen sich Ereignisse "einfangen", bevor das Zielobjekt erreicht wird.

Wenn z.B. Mausbewegungen auf einer HTML Seite registrieren will, so müsste man in allen Eventhandlern der HTML Objekte, über die die Maus bewegt wird, die Koordinaten abfragen. Dies wäre sehr umständlich. Einfacher ist es, wenn das Window Objekt alle mouseOver Ereignisse abfängt.

Dazu wird dem Window Objekt mitgeteilt, welche Ereignisse es wie abfangen soll.

Die Groß- bzw. Kleinschreiung ist im o.a. Beispiel wichtig:

event.MOUSEMOVE ist eine vordefinierte Konstante, die den Typ des Ereignisses angibt.

So wie man mit captureEvents Ereignisse "fangen" kann, kann man dies mit releaseEvents wieder rückgängig machen.

Das nachfolgende Beispiel demonstriert, wie man das Einfangen ein- und ausschalten kann.

In den Aufrufen von captueEvents() und releaseEvents() kann man mehrere Ereignistypen mit "ODER" ("|") getrennt angeben.

Ereignisse im Microsoft Internet Explorer >= 4.x

Auch in der MS Welt wurde in Ereignismodell eingeführt; es passt aber nicht zu Netscape, ebenso wenig wie die Eventhandler.

Zusätzliche Eventhandler in IE

Die meisten HTML Objekte können (zu den bereits bekannten) die folgenden Eventhandler verarbeiten:

• onDblClick
• onMouseMove
• onMouseOver
• onMouseOut

Die genaue Spezifikation findet man im Referenzteil auf der Microsoft Site.

Das folgende Beispiel zeigt den Typ eines Formularelementes in der Statuszeile.

Das event Objekt im IE

Im IE wurde das Event Objekt wie folgt definiert:

Im folgenden werden die Mauskoordinaten bzgl. des Bildes in der Statusleiste angezeigt.

Hier sieht man den Unterschied zwischen dem Communicator und IE:

Im IE ist das event Objekt im window Objekt enthalten (window.event....); im Communicator wird das event Objekt an den Eventhandler übergeben (onClick=test(event)..).

Event Bubbling im IE

Event Bubbling bezeichnet die Weitergabe von der Behandlung von Ereignissen an übergeordnete Objekte - die Ereignisse steigen in der Objekthierarchie auf wie Luftblasenblasen im Wasser.

Wenn z.B. für einen Link kein Eventhandler für das Ereignis onMouseOver definiert wurde, wird das Ereignis an das Objekt document (dies sei das direkt übergeordnete Objekt) weitergeleitet und von ihm behandelt.

Das nachfolgende Beispiel verändert die Textfarbe von Links, wenn der Mauszeiger über dem Link bewegt wird, obwohl im entsprechenden Tag (<a...>) kein Eventhandler für onMouseOver definiert ist. Verwendet werden die Eventhandler des Dokumentes durch die init Funktion, die durch onLoad="init()" geladen wird.

Wie im o.a. Beispiel, ist es sinnvoll, allgemeine Eventhandler zu verwenden, anstelle Eventhandler für jedes Objekt zu definieren. Soll aber das Weiterreichen unterdrückt werden, so kann die Methode cancelBubble des event Objektes verwendet werden. Wird cancelBubble auf true  gesetzt, so wird das Weiterreichen verhindert.

Vergleich Netscape Capturing vs. Microsoft Bubbling

Event Bubbling arbeitet button up in der Objekthierarchie: zuerst erfährt das Zielobjekt, dass ein Ereignis aufgetreten ist, dann ggf. das übergeordnete Objekt.

Capturing arbeitet op down: zuerst erfährt das oberste Objekt (window), dass ein Ereignis aufgetreten ist, dann das Zielobjekt.

Ereignisse im W3C Standard

Ein standardisiertes Objekt und Ereignismodell würde die JavaScript Programmierung vereinfachen - man müsste nicht unterschiedlichen Kode für die unterschiedlichen Browser schreiben. Der im Folgenden gezeigte W3C Standard wird z.Z. von Microsoft noch nicht unterstützt, ansatzweise aber von Netscape (V6).

Die im folgenden betrachteten Beispiele zeigen den Standard. Sie sind nicht in aktuellen Browsern lauffähig.

Event Listener

Der W3C Standard führt eine neue Systematik zur Definition von Eventhandlern ein. Durch die Methode addEventListener() kann man sogenannte Event Listener erzeugen, die auf Ereignisse beliebige Objekte in der Objekthierarchie reagieren können.

Im u.a. Beispiel wird ein Button Objekt mit einem Event Listener versehen.

Die Methode addEventListener() hat drei Argumente:

1. das Ereignis, auf das reagiert werden soll (auf was wird reagiert)
2. die Funktion, die ausgeführt werden soll (wie wird reagiert)
3. die Steuerung des Ereignisflusses  (true="Capturing", false="Bubbling")

Einmal erzeugte Event Listener können mit removeEventListener() wieder entfernt werden.

 Das Ereignis Objekt

Auch W3C definiert ein eigenes Ereignis Objekt (Event). Es automatisch an die im Listener angegebene Funktion übergeben, wenn ein Ereignis eintritt (ähnlich wie im Communicator).

Folgende Tabellen beschreiben das Event Objekt.

Der W3C Standard sieht vor, dass auch per Programm selbst Events erzeugt werden können. Dies ist jedoch noch nicht implementiert.

Formulare

Formulare haben wir bereits in einigen Beispielen verwendet. Hier werden weitere Möglichkeiten, Formulare im Rahmen der JavaScript Programmierung zu verwenden, besprochen.

HTML Kode eines Formulars

Der Kode für ein Formular ist durch das HTML Tag <form> geklammert. Darin eingeschlossen sind die einzelnen Formularelemente, die durch das Tag <input> mit zugehörenden Attributen spezifiziert werden.

Zugriff auf Formularelemente

Der Zugriff auf Formulareist möglicht durch

• Adressierung über das forms-Array
• Adressierung über einen dem Formular zugeordneten Namen
• relative Adressierung innerhalb des Formulars

Auf die Elemente eines Formulars kann über

• Adressierung über das element-Array
• Adressierung über einen dem Element zugeordneten Namen

zugegriffen werden. Dabei ist die Reihenfolge der Elemente im HTML Kode für die Nummerierung in den Arrays verantwortlich.

Das Element zur Texteingabe in unseres Formular aus dem letzten Beispiel kann über

document.forms[0].elements[1]
document.beispielForm.elements[1]
document.forms[0].text1
document.beispielForm.text1

adressiert werden.

Zu empfehlen ist, die Adressierung über zugeordnete Namen zu verwenden, da ansonsten durch Änderungen am HTML Dokument (Einfügen oder Löschen von HTML Elementen) der JavaScript Kode angepasst werden muss.

Die relative Adressierung erlaubt es, die Objekte zu adrssieren, die relativ zu einem Objekt angegeben werden:

Formularelemente

Die Elemente mit Typ "button" und  "text" sind bereits ausgiebig verdeutlicht worden.

Textarea

Zur Darstellung  Mehrzeiliger Textfelder existiert das textarea-Objekt. Die Attribute cols und rows definieren die Grösse, der Text kann initialisiert werden die Platzierung innerhalb der Tagklammerung (also nicht durch Verwemdung des Atrributes "value". Die Art des Textumbruches wird durch das Attribut "wrap" mit Werten "off", "virtual" (kein Zeilenumbruchzeichen) und "physical" (Zeilenumbruchzeichen wird erzeugt).

Hidden

Durch das hidden-Objekt können Objekte nicht sichtbar auf Seiten platziert werden. Diese Objekte werden beim Versenden des Formulars mit an den Web Server übertragen. Deshalb verwendet man sie, um das Ergebnis einer Berechnung einer JavaScript Funktion an den Server zu senden.

Password

Eine weiters Textobjekt ist das password-Objekt. Der einzige Unterschied zum text-Objekt ist, dass die eingegebenen Zeichen nicht in Klarschrift angezeigt werden, es wird pro Eingabezeichen ein Stern "*" angezeigt.

Vorsicht:

Es findet keine Verschlüsslung der Eingabedaten statt, die Zeichen werden in Klarschrift an den Webserver übertragen.

Checkbox

Mit Checkboxen sind Optionen aktivierbar und deaktivierbar. Die Eigenschaft "checked" (true, false) gibt an, ob die Option ausgewählt wurde.

Radio

Ein Radiobutton ist einfach eine Gruppe von Buttons, bei denen nur einer auswählbar ist.

Die Gruppierung wird erreicht, indem man für unterschiedlichen input-Tags den selben Namen verwendet:

Da alle radio-Objekte der selben Gruppe den selben Namen haben, kann der Zugriff nur durch Arrayadressierung verwirklichen lassen:

    document.beispielForm.r1[0].checked==true
    document.beispielForm.r1[1].checked==false
    document.beispielForm.r1[2].checked==false

Da es keine Methode für den Objekttyp gibt mit dem die Auswahl, die "gesetzt" ist ermittelbar ist, muss man explizit dazu eine Schleife verwenden.

Radio-Buttons werden sehr oft min HTML Seiten verwendet. Deshalb ist es sinnvoll, eine Funktion zu realisieren, mit der man beliebige Radio-Buttons prüfen kann.

Die Funktion "checkRadio" liefert als Ergebnis, den Radio-Button, bei dem die Eigenschaft "checked" gesetzt ist.

In Programmen (zur dynamischen Erzeugung von HTML Seiten)  kann man die Option setzen, in dem man die Eigenschaft "checked" auf "true" setzt.

Select

Auswahllisten sind über das select-Objekt realisierbar. Die Tags sind <select> und <option>. Durch Attribute "multiple" des select-Objektes kann man zum Ausdruck bringen, dass Mehrfachauswahlen erlaubt sind. Das Attribut "size" bestimmt die auf dem Bildschirm angezeigten Elemente; die restlichen müssen über einen Scrollbar sichtbar gemacht werden, bevor sie ausgewählt werden können.

Bei Auswahlboxen mit Einfachauswahl kann man durch die Eigenschadt "selectedIndex" abfragen, welches Element ausgewählt wurde.

Bei Mehrfachauswahlen zeigt selectedIndex auf das erste ausgewählte Element. Die restlichen müssen durch eine Schleife über das Auswahl-Array und die Eigenschaft "selected" gefunden werden.

Die neuen Versionen der bekannten Browser erlauben auch dynamisch Einträge von Optionen zu ändern und neue Elemente einzufügen. Dazu kann man mit "new Option()" einen neuen Eintrag erzeugen, ein Eintrag löschen wird umgesetzt, indem man das entsprechende Element auf "null" setzt.

Das folgende Beispiel ändert den Text des ersten Elements, erzeugt ein neues Element am Ende und entfernt das dritte Element.

Submit, Reset

Das submit-Objekt und das reset-Objekt sind Auslöser für die Übertragung von Informationen zum Web-Server. "submit" versendet die Formulardaten gemäss der angegebenen Methode(GET, POST) an das im Attribut "target" angegebene Ziel.

"Reset" setzt die Benutzereingaben zurück, so dass neue Eingaben eingebbar sind.

Das folgende Formular sendet eine eMail an mich.

FileUpload

Mit dem fileUpload-Objekt können Daten, die im Dateisystem des Client abgelegt sind, versendet werden. Von JavaScript aus ist der Fileupload fast nicht beeinflussbar; stets ist die Benutzerinteraktion erforderlich. Diese Designentscheidung war erforderlich, um zu verhindern, dass ohne Zustimmung des Benutzers Daten seines Rechners versendet werden können.

Das folgende Beispiel verwendet das fileUpload-Objekt, um Dateien, die eine bestimmte Endung haben, an den Webserver zu übermitteln.

Zur Erinnerung (HTML Kurs)

In der Form muss man "enctype="multipart/form-data"" angeben, ansonsten wird nur der Name der Datei gesendet.

Windows und Frames

Ein Fenster ist in mehrere Rahmen (frames) einteilbar. Ein Frame ist ein rechteckiger Bereich, der ein eigenes HTML Dokument beinhalten kann. Somit kann man mehrere HTML Dokumente in einem Fenster darstellen.

Als Einsatzgebiet kommen im Web oft Frames zum Einsatz, um Menüs zu realisieren. Das Skript selbst ist ein Beispiel dafür.

Die Menüleiste des Skriptes wird nicht neu geladen, wenn ein Kapitel ausgewählt wird. Im "Hauptfenster" wird nur das ausgewählte Dokument angezeigt. Ein weiterer Rahmen ist im obern untergebracht; die ist die Uhr realisiert und einige Navigations-Schaltflächen.

Erzeugung von Frames

Frames werden als Menge von Rahmen durch das Tag "<frameset>" erzeugt. Damit wird sowohl die Anzahl als auch die Ausrichtung der Rahmen definiert. Jeder enthaltene Rahmen wird durch das Tag "<frame>" angegeben.

Durch

werden zwei übereinanderliegende Rahmen zu einem Frameset zusammengefasst, wobei die Größen relativ zur Seite angegeben sind. Alternativ kann man die Größe in Pixel angeben (rows="100,150"), oder nebeneinander liegend (cols="50%,50%").

Framesets könne geschachtelt werden. Damit sind beliebige Rahmenstrukturen abbildbar.

Beispiel (start.htm):

Das Tag "<noframes>" wird verwendet, um Informationen weitergeben zu können, wenn ein Browser keine Frames unterstützt.

Die JavaScript Objekte, die in einem Dokument, das in Frames als Quelle verwendet wird, kann in anderen Frames adressiert werden. Dabei sind ist die Hierarchie der Frames zu berücksichtigen.

In letzen Beispiel etwa ist die Framehierarchie:

Die Pfeile zeigen die Abhängigkeiten der Frames an. start.htm lädt die Seiten der Frames.

In den HTML Dateien (frame1.htm, frame2.htm und frame3.htm) sind JavaScript Variablen definiert. Sie sind wie folgt angegeben:

Der Zugriff auf einzelne Objekte folgt der Framehierarchie: direkt kann nur vom Vater auf die Kinder zugegriffen werden; direkter Zugriff von einem Kind auf Objekte der Geschwister ist nicht möglich. Dies muss über den Vater durchgeführt werden.

Entfernen von Frames

Frames kann man löschen, in dem man vom Vater einfach das Ziel (target) neu definiert, etwa durch einen Link:

<a href="#" target="_parent">

start.htm.

Arbeiten mit mehreren Fenstern

Frames sind innerhalb eines Dokumentes hierarchisch angeordnet. Fenster werden über einen dem Fenster zugeordneten Namen angesprochen. Dabei spielt es keine Rolle, wie das Fenster erzeugt wurde.

In JavaScript gibt es keine direkte Möglichkeit, auf ein beliebiges Fenster zuzugreifen. Es ist nur möglich, von einem Fenster auf das von ihm erzeugte Fenster zuzugreifen und umgekehrt.

Ein Fenster wird erzeugt durch:

 Nach der Erzeugung kann man dann in dieses Fenster schreiben durch:

Der Name ist "FensterName", "neuesFenster" ist ein Objekt vom Typ Fenster.

Will man z.B. eine neue Seite in das erzeugte Fenster laden, kann man mit dem HTML Tag "<a>" und dem Attribut "target" arbeiten:

Vom erzeugten Fenster aus kann man auf den "Erzeuger" zugreifen indem man die Eigenschaft "opener" des window-Objektes verwendet: Somit kann man z.B. ein neues Dokument in das Erzeuger-Fenster laden durch:

Mit diesen Möglichkeiten lassen sich Navigations-Pannel im eigenen Fenster realisieren. Problematisch ist dabei, dass das Navigationsfenster in den Hintergrund verschwinden kann, obwohl es aktiv ist (in Unix z.B.).

Dabei sieht die Datei "pannel.htm" wie folgt aus:

Ausführen