vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 2

Tag 11

Der Aufruf von JavaScripten

Heute wollen wir uns genauer mit den Situationen auseinandersetzen, in denen JavaScripte ausgeführt werden. Wenn ein Script programmiert ist, muss dieses Script vom Browser ausgeführt werden, um zum Leben zu erwachen. Aber wann? Zufällig? Oder in einer bestimmte Situation, die Sie als Programmierer festlegen? Sicherlich das Letztere. Etwa beim Laden einer Webseite. Das Ausführen eines Scripts beim Laden erfolgt immer, wenn in einer Webseite direkt JavaScript-Anweisungen oder Funktionsaufrufe notiert werden.

Grundsätzlich ist das Laden einer Webseite jedoch nur eine von vielen Situationen, in denen die Ausführung einer Scriptfunktionalität sinnvoll ist. Sinnvolle andere Situationen können aber auch das sein:

Es gibt noch zahlreiche weitere Ereignisse, wo man sich vorstellen kann, dass bei deren Auftreten ein Script gezielt ausgeführt wird.

Das Zauberwort, was die gesamte Thematik näher fasst, steckt auch bereits in dem vorherigen Satz (ganz unscheinbar) drin - Ereignis. Das ist es, um was es heute im Wesentlichen geht: Ereignisse in Webseiten und wie man diese verwenden kann, um gezielt JavaScript-Funktionalitäten auszuführen.

Was ist ein Ereignis?

Während des »Lebens« einer Webseite, aber auch des Ablaufs eines Programms/Scripts, treten immer wieder spezifizierbare Situationen auf, die man konkret fassen kann. Beispielsweise:

Wenn ein komplexeres Programm/Script (besonders in einer grafischen Umgebung) abläuft, wird es nur selten so programmiert sein, dass sämtliche Schritte vordefiniert ohne Interaktion mit der Umgebung ablaufen können. Insbesondere der Anwender greift bei umfangreicheren Programmen in den Ablauf ein. Etwa wenn er ein Fenster vergrößert, eine Schaltfläche drückt oder eine Taste bestätigt. Jede dieser Situationen kann man in einer Webseite nutzen und gezielt eine Reaktion darauf erfolgen zu lassen. Diese weiter verwendbaren Situationen werden Ereignisse oder englisch Events genannt. Unter einem Ereignis kann man speziell auf eine HTML-Seite bezogen alles verstehen, was während der Lebenszeit einer Webseite in einem Browser auftreten kann. Vom Laden in den Browser bis zum Entfernen der Seite aus dem Browser - Letzteres etwa beim Laden einer neuen Seite, aber auch beim Beenden des Browsers. Jede spezifizierbare Situation sorgt für das Eintreten eines Events, eines Ereignisses, das im System beobachtet und worauf reagiert werden kann. Die Reaktion auf solche Events wird Ereignisbehandlung oder Eventhandling genannt.

Die Ereignisbehandlung weicht in Netscape-kompatiblen Browsern von der im Internet Explorer erheblich ab. Dies liegt unter anderem daran, dass es verschiedene Ereignismodelle von den Herstellern der Scriptsprachen und der Browser gibt und HTML teils vollkommen verschieden ausgelegt wird. Dazu kommt, dass die Ereignisbehandlung von beiden Protagonisten in einem globalen Konzept gesehen wird. Dies ist jeweils in ein abstraktes Objektmodell eingebunden, das festlegt, wie auf welche Ereignisse zu reagieren ist, was passiert, wenn ein Ereignis nicht gleich ausgeführt werden kann und so fort.

Die Unterschiede zwischen dem Microsoft-Ereignismodell und dem von Netscape sind ziemlich groß. Netscape weicht in seinem Modell sehr stark von dem offiziellen W3C-Entwurf ab (das W3C-Konsortium ist u.a. verantwortlich für die Standardisierung von HTML - http://www.w3.org), während Microsoft die Ereignisbehandlung weitgehend so interpretiert, wie vom W3-Konsortium vorgesehen. An Tag 17 werden wir die Spezifika des Netscape-Modells noch mal in Zusammenhang mit einem globalen Ereigniskonzept durchsprechen.

Die klassische Form der Reaktion auf Ereignisse

In der althergebrachten Programmierung wurde durch jedes Programm, das auf bestimmte Ereignisse zu reagieren hatte, für jede Situation eine spezielle Funktion oder Prozedur bereitgestellt. Etwa wenn an einer bestimmten Stelle im Programmablauf auf einen Tastendruck durch den Anwender gewartet werden musste, wurde dort eine individuelle Wartestruktur erstellt. Beispielsweise so (Turbo-Pascal-Syntax):

REPEAT UNTIL KEYPRESSED

So ein Verfahren hat zahlreiche Schwachstellen. Was ist beispielsweise, wenn ein Anwender mit der Maus klickt, also etwas anderes tut, als dort vorgesehen? Jede denkbare Situation muss nachprogrammiert und entsprechend behandelt werden. Aber schlimmer noch ist die Tatsache, dass hierbei eine lineare Programmabarbeitung vorausgesetzt wird. Wie wollen Sie in diesem Konzept eine Webseite realisieren, die beispielsweise drei Buttons beinhaltet, auf die der Anwender in willkürlicher Reihenfolge klicken kann? Sie benötigen dazu eine Schleife, die endlos wiederholt wird und nichts anderes tut, als auf Benutzereingaben zu warten. Dazu muss noch parallel das möglich sein, was sonst so noch an Aktivitäten getan werden soll. Etwa das Berechnen von Werten auf Grund von Eingaben eines Anwenders in Eingabefelder oder so.

Der Ansatz ist von der Idee her auch ungefähr das, was beim Eventhandling realisiert wurde, nur ist es dort programmiertechnisch erheblich verbessert.

Die moderne Form mit einem Ereignis-Modell

In vielen der modernen, objektorientierten Programmiersprachen wird ein spezieller, standardisierter Mechanismus bereitgestellt, der auf Ereignisse im Rahmen eines Programmablaufs reagiert und gegebenenfalls eine Funktion oder eine Objektmethode auslöst. Wesentlicher Unterschied im Denkkonzept ist, dass dieses »Hören auf das Auftreten von Ereignissen« parallel zum normalen Programmablauf und vor allem im Hintergrund läuft. Es muss nicht jedes Mal neu programmiert werden. Man sagt im Fall einer Webseite dem Browser praktisch nur noch: »pass auf das Ereignis X auf« und erstellt den Rest der Webseite samt JavaScript-Elementen.

Es gibt nun verschiedene Ansätze, wie man auf Ereignisse aufpassen kann. Der gesamte Mechanismus kann beispielsweise im Rahmen einer Webseite über die Verwendung von Event-Handlern (Ereignisbehandlern) realisiert werden. Dort werden Ereignisse als spezielle Objekte gesehen, auf die über standardisierte Elemente zugegriffen werden kann und die im Hintergrund beim Auftreten einer bestimmten Situation erzeugt werden.

Seit HTML 4.0 gibt es universelle Event-Handler für Ereignisse in einer Webseite. Es handelt sich einfach um Attribute, die direkt in einen HTML- Tag geschrieben werden. Das W3-Konsortium hat Event-Handler offiziell in den HTML-Sprachstandard mit aufgenommen. Dabei wurde auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf (zumindest von der Theorie her - was die Browser-Hersteller daraus machen, ist ein anderes Thema). Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript, aber da sie eindeutig zu HTML zu zählen sind, spielt damit Groß- und Kleinschreibung bei der Notation in der Webseite keine Rolle. Die Grundsyntax der Verwendung von Event- Handlern sieht immer gleich aus:

<[HTML-Tag] [ATTRIBUTE] 
[onEventHandler]="Script-Anweisungen">

Aufruf beim Start/Verlassen der HTML-Datei

Der Aufruf einer JavaScript-Funktion beim Start der HTML-Datei ist der Fall, der in unseren bisherigen Beispielen am häufigsten mit dem Ausführen eines Scripts in Verbindung gebracht wurde. Es gibt nun zwei Varianten, wie das realisiert werden kann:

  1. Mit dem Event-Handler onLoad als einer Erweiterung des <BODY>-Tags und Einschluss aller gewünschten Anweisungen in eine JavaScript- Funktion, die mit dem Event-Handler aufgerufen wird.
  2. Indem die auszuführenden Script-Anweisungen einfach in einen <SCRIPT>-Container notiert werden.

Die Syntax beim Verwenden des Event-Handlers ist folgende:

<BODY onLoad="[Funktionsname]">

Damit erfolgt der Aufruf der als Wert des Attributes angegebenen JavaScript-Funktion beim Start der HTML-Datei. Die Variante mit dem Event-Handler hat einige Vorteile:

Allerdings hat auch die direkte Notation des Funktionsaufrufs in einen <SCRIPT>-Container durchaus Vorteile gegenüber dem Event-Handler- Einsatz. Vor allen Dingen, wenn man sämtlichen JavaScript-Code in Funktionen packt und nur den Aufruf einer Funktion - die man ansonsten im Event-Handler angeben würde - als direkt auszuführenden Code im <SCRIPT>-Container notiert (dann entfällt auch das oft für die Verwendung von Event-Handlern angeführte Argument, man könne an beliebigen Stellen die Funktion bei Bedarf erneut aufrufen - das geht dann natürlich auch):

Frames bedeuten die Aufteilung des Anzeigebereichs eines Browsers in einzelne Segmente, die unabhängig mit Inhalt gefüllt werden können. Die Frame-Technologie besteht aus zwei Ebenen. Mehrere Frames zergliedern den Anzeigebereich des Browsers. Sie bilden dennoch eigenständige Fenster mit allen HTML-Darstellungmöglichkeiten, die dann jeweils die zweite Ebene - HTML-Dateien mit dem anzuzeigenden Inhalt - enthalten. Die Aufteilung des Browser-Anzeigefensters erfolgt über eine spezielle HTML-Datei, eine Indexdatei, welche die erste Ebene eines Projektes mit Frames bildet und die in den Browser geladen werden muss. Diese Indexdatei enthält nur Informationen über Name, Größe und Position der einzelnen im Anzeigefenster enthaltenen Frames. Insbesondere ist der eigentliche Inhalt der Frames nicht in der Indexdatei notiert. Eine oft anzutreffende Aufteilung von Frame-Strukturen besteht aus einem kleineren Frame, welches eine Indexdatei oder eine Inhaltsangabe mit lokalen Verweisen enthält, und einem größeren Frame-Bereich, welcher die eigentlichen Informationen anzeigt. Wir kommen noch genauer auf Frames und die Verbindung zu JavaScript zurück.

Das erste Beispiel soll einfach die Verwendung von onLoad zeigen. Dabei koppeln wir die Demonstration mit dem Parallelereignis zum Laden einer Seite - das ist die Situation, wenn eine Seite wieder aus dem Speicher entfernt wird. Etwa wenn eine neue Seite geladen wird. Dafür gibt das Ereignis onUnload, das analog in den <BODY>-Tag integriert wird. Sie können beide Ereignisse in dem <BODY>-Tag angeben, um sowohl beim Start einer Seite als auch bei deren Verlassen eine bestimmte Aktion auszulösen.

Beispiel 1:

Geben Sie folgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function wk()
{
alert("Herzlich Willkommen");
}
function bey()
{
alert("Und tschüss");
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="wk()" onUnload="bey()">
</BODY>
</HTML>

Speichern Sie das Script unter onLoadUnLoad.htm und laden Sie es in den Internet Explorer. Sie werden mit einem Mitteilungsfenster begrüßt.

Abbildung 11.1:  So werden Sie beim Laden der Seite begrüßt

Schließen Sie den Browser wieder. Eine Meldung erscheint zum Abschied.

Abbildung 11.2:  Beim Verlassen der Seite

Der Netscape Navigator führt onUnload nicht aus, wenn der Browser geschlossen wird. Nur wenn Sie vorher eine Seite geladen hatten und wieder über die History zurückgehen oder eine neue Seite im Browser laden, wird dieser Event-Handler ausgeführt. Dieses Verhalten passt von der Art her zu dem etwas weiter oben angegebenen Problem, das der Navigator mit dem onLoad-Event-Handler hat (siehe das nächste Beispiel).

Wir wollen nun das Problem demonstrieren, welches der Navigator mit dem onLoad-Event-Handler hat. Dazu müssen wir ein wenig vorgreifen und Frames verwenden (die intensivere Erklärung von Frames kommt noch). Erstellen Sie einfach die drei Dateien so, wie in dem Beispiel vorgegeben.

Beispiel 2:

Erstellen Sie zuerst die Datei Bild.htm (sie soll auf der linken Seite im Browserfenster angezeigt werden):

<HTML>
<BODY>
<IMG src="buch.gif">
</BODY>
</HTML>

Erstellen Sie nun die Datei Tagesdat.htm, die dynamisch eine Webseite schreibt (so etwas hatten wir an Tag 6 schon mal sehr ähnlich):

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function schreibeSeite()
{
var datum = new Date();
var tag = datum.getDate();
if(tag<10)
{
tag="0" + tag;
}
var monat = datum.getMonth() + 1;
if(monat<10)
{
monat="0" + monat;
}
var jahr = 2000 + (datum.getYear()%100);
document.write("<HTML>");
document.write("<BODY bgcolor=blue text=yellow>");
document.write("Aktueller Stand: ");
document.write(tag);
document.write('.');
document.write(monat);
document.write('.');
document.write(jahr);
document.write("</P>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad="schreibeSeite()">
Sorry, diese Seite verwendet JavaScript!
</BODY>
</HTML>

Geben Sie als Drittes folgenden Quelltext ein:

<HTML>
<FRAMESET cols="1%,3%" framespacing="0"
border="0" frameborder="0">
<FRAME name="Links" src="Bild.htm">
<FRAME name="Rechts" src="Tagesdat.htm">
<NOFRAMES>
<BODY>
<p>Diese Seite verwendet Frames.
Frames werden von Ihrem Browser aber nicht unterstützt.
</p>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Speichern Sie diese Datei - ein Frameset - unter index.htm und laden Sie diese dann im Netscape Navigator. Sie sollten links ein animiertes GIF und rechts eine Datumsangabe in roter Schrift auf blauem Hintergrund sehen.

Abbildung 11.3:  So sollte die Seite aussehen

Verändern Sie nun die Größe des Browsers.

Abbildung 11.4:  Die Seite wird nicht mehr  richtig aufgebaut

Die Seite wird nicht mehr richtig aufgebaut, d.h. die JavaScript-Funktion wird nicht ausgeführt. Was angezeigt wird ist der Alternativtext im Body, der eigentlich nur dafür da ist, JavaScript-unfähige Browser darauf hinzuweisen, dass über JavaScript die Seite dynamisch erzeugt wird. Wenn das Script beim Laden der Seite ausgeführt wird, wird dieser Text weggewischt und darf nicht zu sehen sein. Offensichtlich wird die Veränderung der Browsergröße vom Navigator nicht dazu benutzt, das Script über den Event-Handler neu aufzurufen. Das ist deshalb inkonsequent, denn die Seite wird ja neu geladen - sonst würde der Alternativtext nicht erscheinen. Wie es richtig ist, zeigt der Internet Explorer, der keinerlei Probleme mit dieser Situation hat.

Noch schlimmer als der Navigator reagiert jedoch Opera. Dort wird die Seite überhaupt nicht aufgebaut und es erscheint immer nur der Alternativtext.

Abbildung 11.5:  Der Opera kommt gar nicht damit zurecht

Der Workaround unter Verzicht auf den Event-Handler sieht so aus (Name der Datei TagesdatWaR.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function schreibeSeite()
{
var datum = new Date();
var tag = datum.getDate();
if(tag<10)
{
tag="0" + tag;
}
var monat = datum.getMonth() + 1;
if(monat<10)
{
monat="0" + monat;
}
var jahr = 2000 + (datum.getYear()%100);
document.write("<HTML>");
document.write("<BODY bgcolor=blue text=yellow>");
document.write("Aktueller Stand: ");
document.write(tag);
document.write('.');
document.write(monat);
document.write('.');
document.write(jahr);
document.write("</P>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
schreibeSeite();
</SCRIPT>
<NOSCRIPT>
Sorry, diese Seite verwendet JavaScript!
</NOSCRIPT>
</BODY>
</HTML>

Beachten Sie den Aufruf der Funktion in dem Script-Container im Body und den neuen <NOSCRIPT>-Container, der den Alternativtext beinhaltet. Mit dieser Konstruktion funktioniert die Geschichte (sogar im Opera, obwohl der bei den Frames vom Layout her unter Umständen etwas Probleme macht). Die Datei index.htm muss dann natürlich auch diese neue Seite aufrufen. Sie sieht dann so aus:

<HTML>
<FRAMESET cols="1%,3%" framespacing="0" border="0" frameborder="0">
<FRAME name="Links" src="Bild.htm">
<FRAME name="Rechts" src="TagesdatWaR.htm">
<NOFRAMES>
<BODY>
<p>Diese Seite verwendet Frames.
Frames werden von Ihrem Browser aber nicht unterstützt.
</p>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Klick und Doppelklick auf eine Referenz

Die neben dem Laden bzw. Entfernen einer Webseite wohl wichtigste Situation, unter der ein Script ausgeführt werden muss, ist der Klick auf ein entsprechend sensibles Element in der Webseite. Eine Referenz. Unter einem Klick auf eine Referenz ist der Fall gemeint, wenn Sie auf ein Element wie eine Schaltfläche in einem Formular oder einen Hyperlink mit der Maus klicken. Sie erweitern den entsprechenden Tag um das Attribut onClick. Dabei gilt die allgemeine Syntax:

<[HTML-Tag] onClick="[Funktionsname]">

Dies bedeutet beispielsweise für den Fall eines Hyperlinks, dass die Syntax so aussieht:

<A href=[URL] onClick="[Funktionsname]">...</a>

Bei dem Event-Handler onClick zeigen sich die Unterschiede zwischen dem Netscape-Ereignismodell und dem von Microsoft unterstützten HTML-4.0-Ereignismodell ziemlich extrem. Während Netscape das Attribut nur in den HTML-Tags <A>, <AREA>, <INPUT> und <TEXTAREA> erlaubt, unterstützt der Explorer nahezu alle offiziellen HTML-4.0-Tags. Konkret sind das derzeit folgende:

<a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>

Die doch sehr eingeschränkte Unterstützung von Event-Handlern durch Netscape gilt leider nicht nur bei diesem Fall, sondern bei den meisten weiteren Event-Handlern. Manchmal nicht ganz so krass, aber fast immer kann man für eine Netscape-Unterstützung nur eine eng begrenzte Auswahl der offiziell für HTML 4.0 freigegebenen Elemente nutzen. Sie finden im Anhang in der Liste der HTML-Attribute eine Auflistung der HTML-Tags, bei denen der jeweils angegebene Event-Handler stehen darf. Für die meisten Event-Handler sind das fast alle Tags. Der Internet Explorer hält sich so gut wie immer daran. Der Netscape Navigator und kompatible Browser nutzen immer nur eine kleine Auswahl. Wir geben deshalb in der Folge - bis auf Ausnahmen - immer nur die Tags an, die auch Netscape unterstützt. Der Internet Explorer kann diese auf jeden Fall auch. Die Beispiele zeigen gelegentlich überdies spezielle Effekte, die nur der Internet Explorer kann.

Zur Ehrenrettung von Netscape sei gesagt, dass sie bereits vor HTML 4.0 ein Konzept entwickelt haben, das eine universelle Ereignisbehandlung gewährleistet. Dieses Konzept basiert jedoch nicht auf den Event-Handlern, sondern einem Ereignis-Objekt. Als HTML 4.0 eingeführt wurde, hat das W3C sich explizit gegen den Netscape-Entwurf entschieden. Netscape sah sich also gezwungen, einen Teil der Event-Handler zu integrieren, wollte aber nicht ganz auf sein Konzept verzichten. Es wird also vieles, was unter Netscape mit den Event-Handlern nicht funktioniert, mit dem Netscape-Ereignis-Objekt realisierbar sein. Wir gehen darauf noch an Tag 17 ein. Dennoch - die lückenhafte Unterstützung von Event-Handlern macht Netscape wenig Freunde.

Beispiel 3:

Geben Sie folgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function unsere_funktion()
{
alert("Herzlich Willkommen");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="onclick.html" onClick="unsere_funktion()">
<H1>
Irgendwas
</H1>
</A>
</BODY>
</HTML>

Speichern Sie das Script unter onClick.htm und laden Sie es in einen Browser. Klicken Sie auf den Hyperlink.

Abbildung 11.6:  Beim Klick auf den Hyperlink wird das Script aufgerufen

Beachten Sie die Zeilen

<A href="onclick.html" onClick="unsere_funktion()">
<H1>
Irgendwas
</H1>
</A>

Das ist der Hyperlink, bei dem das Script ausgelöst werden soll. Um nicht zusätzlich auf eine andere Seite weitergeleitet zu werden (was ja ein Hyperlink als Hauptaufgabe hat), wird als URL einfach die Datei angegeben, in der der Link notiert ist (ein kleiner Trick, der aber sehr nützlich ist).

Die Idee, einen leeren URL anzugeben (also so was wie <A href="" onClick ="unsere_funktion()">), wird nicht so funktionieren, wie es gewünscht ist, wenn nur ein Script aufgerufen werden soll. Statt dessen wird der Inhalt des aktuellen Verzeichnisses angezeigt.

Abbildung 11.7:  Bei einem leeren URL wird nach Abarbeiten des Scripts das aktuelle Verzeichnis angezeigt

Allerdings gibt es selbstverständlich eine bessere Variante zum Aufruf eines Scripts bei einem Hyperlink. Diese kennen wir auch schon. Sie verzichtet auf den expliziten Event-Handler und notiert einfach den Aufruf in Form einer Inline-Referenz als URL in den Link. Das sieht dann so aus:

<A href="JavaScript:unsere_funktion()">
<H1>
Irgendwas
</H1>
</A>

Dabei muss man aber beachten, dass diese Form in einigen Browsern Probleme machen kann.

Besonders viel Sinn macht der Event-Handler in Verbindung mit Formularen und dort dem Schaltflächen-Element. Wir haben das bereits angewandt und werden es bei der genaueren Behandlung von Formularen wieder tun.

Ein zweites Beispiel für den Event-Handler soll diesen aber bei HTML-Tags anwenden, die nur vom Internet Explorer verstanden werden. Beim Navigator passiert bei einem Klick nichts. Testen Sie es ruhig aus.

Beispiel 4:

Geben Sie folgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a()
{
alert("Ein animiertes GIF");
}
function b()
{
alert("Eine Überschrift");
}
function c()
{
alert("Eine Trennlinie");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG src="buch.gif" onClick="a()">
<H1 onClick="b()">Irgendwas</H1>
<HR onClick="c()">
</BODY>
</HTML>

Speichern Sie das Script unter onClickIExplorer.html und laden Sie es in verschiedene Browser. Klicken Sie auf das Bild, die Überschrift und die Trennlinie.

Abbildung 11.8:  Auch ein Klick auf die Überschrift funktioniert im Internet Explorer

Da im Netscape Navigator die wenigsten Event-Handler funktionieren, muss man gegebenenfalls mit einem kleinen Trick arbeiten. Da der Hyperlink als Basiselement für fast alle Event-Handler auch im Netscape Navigator zu verwenden ist, kann man alle gewünschten sensitiven Elemente in einen Dummy-Hyperlink-Container einschließen. In diesen Hyperlink - am besten mit URL auf die aktuelle Datei (s.o.) - kommt dann der Event-Handler. Das wird zwar kleinere optische Probleme bewirken (etwa das Unterstreichen von Textpassagen), aber die kann man umgehen. Wenn man beispielsweise eine Grafik ohne Hyperlink-Kennzeichnung haben möchte, setzt man das Attribut border=0. Bei Texten kann man mit der zusätzlichen Anwendung von Style Sheets die Unterstreichung unterbinden (darauf kommen wir noch).

Eng verwandt mit dem einfachen Klick auf ein sensitives Element ist die Reaktion auf Doppelklicks. Mit dem Event-Handler onDblClick können Sie auf den Doppelklick eines Anwenders auf ein Element reagieren. Netscape unterstützt das Attribut wie beim einfachen Klick nur in den HTML-Tags <A>, <AREA>, <INPUT> und <TEXTAREA>, während es offiziell wieder bei nahezu allen Tags von HTML 4.0 erlaubt und auch so vom Internet Explorer realisiert ist.

Das gleichzeitige Verwenden von onClick und onDlbClick ist selten sinnvoll. Meist wird der einfache Klick ausgelöst, egal wie schnell der Doppelklick erfolgt. Das ist insbesondere deshalb ein Problem, weil man als Webseitenersteller natürlich keinerlei Einfluss auf die beim Anwender eingestellte Doppelklickgeschwindigkeit hat.

In den gleichen Kontext fallen auch die beiden Event-Handler onMouseDown und onMouseUp. Sie werden zur Überwachung des Drückens einer Maustaste und deren Loslassen verwendet. Sie werden wie das Ereignis onClick verwendet, nur halt bei der jeweiligen Teilaktion ausgelöst.

Überstreichen mit dem Mauszeiger

Das Überstreichen eines Elements mit dem Mauszeiger ist auch ein oft zu findendes Ereignis, bei dem eine JavaScript-Funktion aufgerufen werden kann. Damit kann beispielsweise eine umfangreichere Information zu einem Link in einem extra Mitteilungsfenster angezeigt werden. Dazu muss der Tag des entsprechenden Elementes mit dem entsprechenden Event- Handler gekoppelt werden. Das kann onMouseOver sein, womit eine Reaktion auf den Eintritt des Mauszeigers in den Bereich eines Elementes überwacht werden kann. Der verwandte Event-Handler onMouseOut erlaubt die Reaktion in dem Moment, wenn der Mauszeiger den Bereich eines Elementes wieder verlässt.

Allgemein muss es sich bei dem Element um eine verweissensitive Referenz handeln, bei der beim Überstreichen mit dem Mauszeiger die JavaScript- Funktion direkt aufgerufen wird. Allerdings versteht der Netscape Navigator darunter nur einen Link bzw. den <AREA>-Bereich, wie er bei verweissensitiven Grafiken vorkommt. Der Internet Explorer ist bei der Interpretation von dem Ereignis viel leistungsfähiger und erlaubt das Attribut bei jedem HTML-Element. Testen wir die Event-Handler mit Grafiken (also nur Internet-Explorer-fähig), wo beim Überstreichen in der Statuszeile des Browsers eine Meldung angezeigt wird. Beim Verlassen wird über onMouseOut die Statuszeile jeweils wieder gelöscht (das ist notwendig, sonst bleibt die Meldung so lange stehen, bis die Statuszeile von irgendwoher wieder beschrieben wird).

Beispiel 5:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function erklaer1()
{
window.status="Der Dieb";
}
function erklaer2()
{
window.status="Das Objekt der Begierde";
}
function erklaer3()
{
window.status="Der Jäger des Diebs";
}
function loesche()
{
window.status="";
}
</SCRIPT>
<BODY>
<IMG src="cat.gif" height=120
onMouseOver="erklaer1()" onMouseOut="loesche()">
<IMG src="crystal.gif" height=180 onMouseOver="erklaer2()" onMouseOut="loesche()">
<IMG src="bat.gif" height=60
onMouseOver="erklaer3()" onMouseOut="loesche()">
</BODY>
</HTML>

Speichern Sie das Script unter onMouse.html und laden Sie es in verschiedenen Browsern. Bewegen Sie den Mauszeiger auf die Bilder und beobachten Sie die Statuszeile. Im Internet Explorer wird dort jeweils eine Meldung angezeigt; der Navigator straft die Verwendung der Event-Handler mit Ignoranz.

Abbildung 11.9:  Meldung 3

Abbildung 11.10:  Meldung 2

Abbildung 11.11:  Meldung 1

Mausbewegungen

Die Bewegung der Maus (unabhängig davon, ob die Maustaste gedrückt ist oder nicht) innerhalb des Anzeigebereichs vom Browser erzeugt ein eigenes Ereignis. Der zugehörige Event-Handler heißt onMouseMove. Netscape unterstützt dieses Attribut bei HTML-Tags überhaupt nicht, sondern nur im Zusammenhang mit seinem Ereignis-Objekt. Der Internet Explorer versteht das Attribut jedoch bei allen gängigen HTML-4.0-Tags.

Auf eine Übung wollen wir hier nicht verzichten, allerdings soll nicht verheimlicht werden, dass dieser Event-Handler nicht unproblematisch ist. Immerhin wird bei jeder Mausbewegung über einem Bereich eine Funktion ausgelöst. Es gibt nicht viele sinnvolle Anwendungen, permanent eine Funktion aufzurufen, wenn sich der Mauszeiger in einem gewissen Bereich bewegt. Eine Ausnahme ist das nachfolgende Beispiel, in dem wir allerdings ein wenig vorgreifen und die Technik der Ereignis-Objekte verwenden müssen, um die Position des Mauszeigers verwenden zu können. Das Ereignis-Modell, das wir hier verwenden, ist nur im Internet Explorer zu gebrauchen (so wie auch der Event-Handler). Das Konzept samt konkurrierendem - und vollkommen inkompatiblem - Netscape- Modell bekommen wir in der dritten Woche genauer (an Tag 17).

Das Beispiel gibt in der Statuszeile die aktuelle X- und Y-Position des Mauszeigers aus, wenn er in dem Bereich der Grafik bewegt wird. Verlässt der Mauszeiger die Grafik, wird die Statuszeile gelöscht:

Beispiel 6:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function pos()
{
window.status="X-Position " + event.clientX +
", Y-Position" + event.clientY;
}
function loesche()
{
window.status="";
}
</SCRIPT>
<BODY>
<IMG src="crystal.gif" height=180
onMouseMove="pos()" onMouseOut="loesche()">
</BODY>
</HTML>

Abbildung 11.12:  Positionsangabe 1

Speichern Sie das Script unter onMouseMove.htm und laden Sie es in den Internet Explorer. Wir greifen hier zur Bestimmung auf ein Objekt mit Namen event zurück, das diese Eigenschaften im Internet Explorer bereitstellt.

Abbildung 11.13:  Positionsangabe 2

Tastaturereignisse

Die Reaktion auf das Betätigen einer (beliebigen) Taste auf der Tastatur bildet einen weiteren Kandidaten für aufzufangende Ereignisse im Rahmen einer Webseite. Diese werden aber erst seit JavaScript 1.2 offiziell unterstützt. Wie bei der Maustaste unterscheidet JavaScript beim Betätigen einer Keyboard-Taste zwischen

Sowohl der vollständige Tastendruck als auch die jeweiligen Teilphasen des Drückens und des Loslassen einer Taste bilden jeweils ein eigenes Ereignis. onKeypress, onKeydown und onKeyup sind die jeweiligen Event-Handler. Alle drei Attribute sind im Netscape-Ereignismodell bislang nicht in HTML- Tags möglich, sondern nur im Zusammenhang mit ihrem Ereignis-Objekt. Das offizielle HTML 4.0 (und Microsoft weitgehend) erlauben wieder den Einsatz bei den meisten HTML-Tags, wobei es etwas schwierig ist, zu bestimmen, auf welchem Element ein Tastatur-Ereignis stattgefunden hat (es gibt ja keine X-/Y-Koordinaten wie beim Mauszeiger). Die Event- Handler haben nicht die Bedeutung der Maus-Events. Zumal auch die Bedienung einer Webseite im Wesentlichen über die Maus erfolgt.

Aktivierung und Verlassen eines Elements

Hauptsächlich in Zusammenhang mit Formularen treten die folgenden Ereignisse auf:

Andere Situationen sind verweissensitive Grafiken, wie sie über den <AREA>-Tag realisiert werden, oder Schaltflächen, die auch ohne Formulare funktionieren und extra für die Script-Ausführung vorhanden sind - der <BUTTON>-Tag.

Bei der Aktivierung bzw. Selektion eines Elements kann über den Event- Handler onFocus das Ereignis beobachtet werden. Sie können auch auf das Verlassen eines zuvor aktivierten Elementes reagieren. Dazu gibt es den Event-Handler onBlur. Sowohl Netscape als auch Microsoft erlauben beide Attribute bei einigen HTML-Tags.

Der Navigator wird auf die Verwendung mit den HTML-Tags <BODY>, <FRAME>, <INPUT>, <LAYER>, <SELECT> und <TEXTAREA> reagieren, das offizielle HTML 4.0 sieht das Attribut bei den HTML-Tags <A>, <AREA>, <BUTTON>, <INPUT>, <LABEL>, <SELECT> und <TEXTAREA> vor. Microsoft unterstützt sowohl die meisten der von dem Netscape-Browser verstandenen Tags, aber auch die anderen offiziellen Tags (bis auf <LABEL> ohne Probleme).

Für die Beispiele mit diesen beiden Event-Handlern werden wir wieder auf einfache Formulare zurückgreifen. Deren Details folgen an späteren Tagen, aber es ist auch sicher nicht schlecht, wenn Sie vorher bereits einige Anwendungen davon gesehen haben.

Beispiel 7:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function a()
{
window.status="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
}
function b()
{
window.status="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb";
}
function c()
{
window.status="klick";
}
function d()
{
window.status="klack";
}
function e()
{
window.status="Laber";
}
function f()
{
window.status="";
alert("Rababer");
}

function g()
{
window.status="hinundweg";
}
function h()
{
window.status="hochundrunter";
}

</SCRIPT>
<BODY>
<A href="onFocusBlur.htm" onFocus="a()" onBlur="b()">Click myself</A>
<BR>
<BUTTON onFocus="c()" onBlur="d()">Click und fort</BUTTON>
<FORM>
<INPUT onFocus="e()" onBlur="f()">
<BR>
<TEXTAREA onFocus="g()" onBlur="h()"> </TEXTAREA>
</FORM>
</BODY>
</HTML>

Speichern Sie das Script unter onFocusBlur.htm und laden Sie es in den Internet Explorer. Testen Sie die einzelnen Aktivierungs- und Deaktivierungsmeldungen. Die meisten Aktivitäten finden in der Statuszeile statt, aber auch ein Mitteilungsfenster wird verwendet. Beachten Sie, dass die Aktivierung eines Elements automatisch mit der Deaktivierung des vorher selektierten Elements einhergeht. Deshalb werden Sie in vielen Fällen zwei unmittelbar aufeinander folgende Aktionen auslösen. Wenn Sie jedoch nach der Selektion eines Elements auf eine leere Fläche im Anzeigebereich klicken, wird nur die onBlur-Aktion aufgerufen.

Abbildung 11.14:  Es gibt auch eine Meldung als Fenster

Abbildung 11.15:  Meldung onBlur

Abbildung 11.16:  Meldung onFocus

Laden Sie nun die Seite in den Netscape Navigator. Sie werden sehen, dass der Button nicht angezeigt wird und nicht alle Event-Handler funktionieren.

Abbildung 11.17:  Weder optisch noch technisch voll funktionstüchtig

Der Event-Handler onBlur ist recht gefährlich. Es kann durchaus vorkommen, dass Sie sich ein ziemliches Problem einhandeln, wenn Sie beim Verlassen eines Elements eine Situation schaffen, indem unmittelbar nach dem Verlassen die Aktivierung eines Elements wieder ausgelöst wird (dies kann beispielsweise bei Verwendung von alert() zum Erzeugen eines Mitteilungsfensters so eintreten, wenn alert() gleichzeitig bei onFocus und onBlur verwendet wird), kommt Ihnen permanent die Gegenreaktion des Elements und eine entsprechende Reaktion darauf in die Quere. Besonders gefährdet ist dabei der Navigator.

Das kann aber auch bei Eingabefeldern mit einer Überprüfung passieren. Wenn dabei beispielsweise eine Fehlermeldung mit einem Mitteilungsfenster auftaucht, können Sie u.U. nicht das entsprechende Eingabefeld korrigieren. Das kann sogar dazu führen, dass Sie nicht einmal den Browser beenden können. Beachten Sie bitte dazu das nachfolgende Beispiel. Aber auch sonst ist die Verwendung von onBlur am besten am Ende einer vollständigen Eingabe sämtlicher relevanter Daten (an zentraler Stelle) zu empfehlen und es sollte auf keinen Fall mit einem onFocus-Ereignis gekoppelt werden, das bei der onBlur-Aktion unausweichlich ausgelöst wird.

Beispiel 8:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function wk()
{
alert("Hy");
}
function bey()
{
alert("Ciao");
}

function e()
{
alert("Laber");
}
function f()
{
alert("Rababer");
}
</SCRIPT>
<BODY onFocus="wk()" onBlur="bey()">
<FORM>
<INPUT onFocus="e()" onBlur="f()">
</FORM>
</BODY>
</HTML>

Speichern Sie das Script unter onFocusBlur2.htm und laden Sie es in den Internet Explorer. Testen Sie die einzelnen Aktivierungs- und Deaktivierungsmeldungen. Beachten Sie, dass ein Klick auf den Bodybereich integriert ist. Die Meldungsfenster erscheinen bei Klicks recht oft. Aber der Internet Explorer kommt noch recht gut mit der Situation zurecht. Das Problem wird erst im Netscape Navigator ernst. Laden Sie die Datei in den Browser (speichern Sie aber vorher alle wichtigen Dateien). Sie werden es (wahrscheinlich) nicht schaffen, das Frage- und Antwort- Spiel zwischen onFocus und onBlur des <BODY>-Tags zu unterbrechen. Der Browser kann nicht einmal mehr geschlossen werden. Es hilft nur noch der Taskmanager oder ein Warmstart. Sie können sich vorstellen, dass so etwas bei einem Besucher einer Webseite Freude auslöst ;-).

Reaktion auf Änderung

Das ausschließlich bei Formularen vorkommende Ereignis »Änderung« (Event-Handler onChange) erlaubt die Reaktion für den Fall, dass ein Element in einem Formular einen geänderten Wert erhalten hat. Es wird sowohl bei Netscape als auch nach offiziellem HTML 4.0 in den HTML- Tags <INPUT>, <SELECT> und <TEXTAREA> unterstützt.

Das nachfolgende kleine Beispiel erzeugt ein Formular mit zwei Eingabefeldern. Die dort eingegebenen Werte werden miteinander multipliziert in der Statuszeile des Browsers ausgegeben. Dabei wird die JavaScript-Funktion immer dann aufgerufen, wenn in einem Feld ein Wert geändert wurde und in das andere Feld geklickt wird. Auch ein Bestätigen mit der Datenfreigabetaste sollte in den meisten Browsern die Funktion auslösen.

Beispiel 9:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function change()
{
window.status =
document.forms[0].elements[0].value *
document.forms[0].elements[1].value;
}
</SCRIPT>
<BODY>
<FORM>
<INPUT onChange="change()">
<INPUT onChange="change()">
</FORM>
</BODY>
</HTML>

Speichern Sie das Script unter onChange.htm und laden Sie es in einen Browser.

Abbildung 11.18:  Das Ergebnis wird in der Statuszeile angezeigt

Reaktion auf Zurücksetzen oder Absenden eines Formulars

Das Verständnis der beiden Event-Handler onReset und onSubmit ist ohne etwas erweiterte Kenntnisse von Formularen nicht einfach. Deshalb eine kurze Erklärung, die bereits über das hinausgeht, was wir bisher zu Formularen wissen:

In dem <FORM>-Container eines Formulars können Angaben gemacht werden, wohin ein Formular gesendet wird (falls die Anwendereingaben per Internet versandt werden sollen) und wie die Versendung erfolgen soll. Dabei erfolgt normalerweise die Versendung ohne irgendwelche Kontrolle, wenn eine Absenden-Schaltfläche betätigt wird, die über die Syntax

<INPUT type="submit« value=[Beschriftung des Buttons]> erzeugt wird.

Beispiel:

<INPUT type="submit« value="Ok">

Des Weiteren gibt es in den meisten Formularen eine Schaltfläche, welche das Formular bei Bedarf wieder leert, d.h. zurücksetzt. Das wird über die Syntax

<INPUT type="reset« value=[Beschriftung des Buttons]> realisiert.

Die Reaktion auf das Zurücksetzen eines Formulars über einen Event- Handler (onReset) erlaubt die Erweiterung der Funktionalität, welche über die durch HTML generierte Abbrechen-Schaltfläche standardmäßig erfolgt. Beim Anklicken dieses Buttons werden standardmäßig alle Eingaben im Formular gelöscht. Wenn jedoch im einleitenden Formular- Tag (!) der Event-Handler onReset notiert ist, wird statt dessen die dort notierte JavaScript-Anweisung ausgeführt. Sie fangen also die normale Reaktion des Formulars auf Drücken der Schaltfläche ab. Damit können Sie beispielsweise eine Meldung der Form »Sind Sie wirklich sicher?« generieren, die einem Zurücksetzen eines Formulars vorangestellt wird und gegebenenfalls noch eine Abbruchmöglichkeit erlaubt.

Beispiel:

<FORM Name="meinFormular« onReset="return wirklich()">

Vollkommen analog ist der Event-Handler onSubmit zu sehen. Er erweitert nur statt der Abbrechen-Schaltfläche den Submit-Button, mit dem ein Formular weggeschickt wird. Statt es einfach abzusenden, kann eine JavaScript-Funktion aufgerufen werden, die beispielsweise überprüft, ob alle Felder eines Formulars ausgefüllt sind.

Beispiel:

<FORM Name="meinFormular" onSubmit=
"return kontrolle()">

Das Attribut ist ausschließlich im <FORM>-Tag erlaubt und wird sowohl vom Navigator als auch dem Explorer verstanden.

Sie sollten beim Funktionsaufruf über onSubmit und onReset das Schlüsselwort return voranstellen. Wenn Sie im Rahmen der aufgerufenen Funktion die Werte true oder false zurückgeben, ist dies eine ideale Möglichkeit, die Abarbeitung der ausgelösten Aktion noch einmal abzubrechen (Rückgabe von false durch die aufgerufene Funktion). Das ist aber nicht zwingend.

Testen wir ein kleines Beispiel. Dabei nutzen wir eine weitere Methode des Objektes window - confirm(). Diese erzeugt ein Fenster mit zwei Schaltflächen. Je nach betätigter Schaltfläche wird der Rückgabewert true (bei Ok) oder false (bei Abbrechen) erzeugt. Dieser wird dann im Formular verwendet. Wenn das Absenden bestätigt wird, wird das Formular per Email versandt, was die in dem Beispiel verwendete Erweiterung des <FORM>-Tags bewirkt.

Beispiel 10:

Geben Sie folgenden Quelltext ein:

<HTML>
<SCRIPT language="JavaScript">
function kontrolle()
{
// Rückfrage, ob tatsächlich Formular
// vollständig ausgefüllt
return window.confirm(
"Ist das Formular vollständig ausgefüllt?");
}
function sicher()
{
// Rückfrage, ob tatsächlich Formular leeren
return window.confirm(
"Wollen Sie dieses Formular wirklich leeren?");
}
</SCRIPT>
<BODY>
<FORM
  action="mailto:hansdampf@hotmail.com"
  method=POST
  onSubmit="return kontrolle()"
  onReset="return sicher()">
<INPUT name="eins">
<INPUT name="zwei">
<BR>
<INPUT type="submit" value="Ok">
<INPUT type="reset" value="Abbrechen">
</FORM>
</BODY>
</HTML>

Speichern Sie das Script unter onSubmitReset.htm und laden Sie es in einen Browser. Füllen Sie die beiden Formularfelder und betätigen Sie die Ok- und die Abbrechen-Schaltfläche. Testen Sie dann in dem Dialogfenster jeweils beide Möglichkeiten.

Abbildung 11.19:  Bei Bestätigung würde das Formular per Email versandt

Abbildung 11.20:  Rückfrage, ob das Formular geleert werden soll

Abbildung 11.21:  Rückfrage, ob das Formular vollständig ist

Reaktion bei der Selektion von Text

Über den Event-Handler onSelect können Sie auf die Situation reagieren, wenn ein Anwender Text selektiert. Hier zeigt sich wieder einmal sehr deutlich der Unterschied zwischen dem Netscape-Ereignismodell, wo das Ereignis nur bei den Tags <INPUT> und <TEXTAREA>) unterstützt wird, und der offiziell möglichen Anzahl von HTML-Tags (<a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>).

Da die Anwendung dieses Event-Handlers nichts Neues beinhaltet, wollen wir auf ein Beispiel verzichten.

Unterbrechung eines Bildladevorgangs

Ein Ladevorgang eines Bildes oder einer Grafik in einen Browser dauert - gerade über das World Wide Wait1 - eine gewisse Zeitspanne. Es kann dabei hauptsächlich durch zwei Situationen zu einem Abbruch des Ladevorgangs kommen:

  1. Abbruch durch den Anwender
  2. Fehler beim Laden

Deshalb sind zwei Event-Handler als zusätzliche Attribute des <IMG>-Tags möglich.

Jeder Browser verfügt über einen Abbruch-Button. Mit dem Event- Handler onAbort soll die Situation behandelt werden, wenn ein Anwender diesen Abbruch-Button drückt und gerade eine Grafik geladen wird.

Beispiel:

<IMG src="foto.jpg" width=400 onAbort="tellMeWhy()">

Damit lassen sich etwa Meldungen ausgeben, ob vielleicht nicht doch die Grafik geladen werden sollte - sie ist ja soooooo interessant!

Wenn beim Laden eines Bildes oder einer Grafik ein Fehler auftritt, können Sie über den Event-Handler onError darauf reagieren. Damit ist im Wesentlichen die Ausgabe eigener Fehlermeldungen gemeint. Eine vollständige Fehlerbehandlung wie in anderen Programmiersprachen kann damit nicht realisiert werden.

Beispiel:

<IMG src="foto.jpg" width=400 onError="verdammt()">

Beide Event-Handler können sowohl beim Navigator als auch beim Explorer angewandt werden.

Der explizit Aufruf eines Event-Handlers

Ein Event-Handler kann auch über eine andere Art ausgelöst werden. Schauen Sie sich bitte das nachfolgende Beispiel an.

Beispiel 11:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function unsere_funktion()
{
alert("Herzlich Willkommen");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="meinFormular">
<INPUT TYPE="button" NAME="meinButton" value="OK">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
document.meinFormular.meinButton.onclick =
  unsere_funktion;
</SCRIPT>
</BODY>
</HTML>

Abbildung 11.22:  Klick auf den  Button

Die in dem Beispiel verwendete Syntax beinhaltet eine Funktion, die in dem zweiten Script-Container dem Formular meinFormular und dort dem Element meinButton zugeordnet wird. Dabei sind zwei Dinge zu beachten:

Zusammenfassung

Mittels der unterschiedlichen Event-Handler reagiert der JavaScript- Interpreter auf verschiedenartige Ereignisse, die der Event-Handler- Mechanismus über ihre festgelegten Namen identifiziert. Wesentlich ist, dass Ereignisse in dem neuen HTML 4.0 und JavaScript vorhanden und identisch sind. Das W3-Konsortium hat die Event-Handler offiziell in den HTML-Sprachstandard mit aufgenommen. Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Ein Event-Handler- Ereignis wird wie jedes gewöhnliche HTML-Attribut angewandt. Allgemein beginnt es mit der Silbe on, gefolgt von der Beschreibung des Ereignisses. Hinter dem Namen des Ereignisses wird ein Ist-gleich-Zeichen notiert, gefolgt von einer - meist in Anführungszeichen notierten - JavaScript- Anweisung oder -Funktion.

Bei welchem HTML-Tag Event-Handler verstanden bzw. welche Ereignisse überhaupt von Browsern verstanden werden, ist leider sehr Browser- abhängig.

Fragen und Antworten

Frage:
Wenn die Event-Handler so inkonsistent in verschiedenen Browsern gehandhabt werden - soll man sie überhaupt anwenden?

Antwort:
Sie haben wenig Alternativen. Es gibt eigentlich nur noch die Möglichkeit, auf das allgemeine Ereignis-Modell auszuweichen (dazu werden wir an Tag 17 kommen). Dort wird die Ereignisbehandlung nicht inkonsistent gehandhabt. Es ist von vornherein klar, dass das Microsoft-Modell und das Netscape- Modell inkompatibel sind. Sie benötigen also eine strikte Trennung in einer Webseite oder verschiedene Webseiten. Das bedeutet einigen Aufwand. Es kann sich jedoch dennoch rechnen, wenn man die Feinheiten von verschiedenen Ereignissen ausnutzen will. Bei Reduzierung auf die Ereignisse und HTML-Tags, wo beide Browser Event-Handler gleich behandeln, ist die Arbeit mit Event-Handlern einfacher und mit weniger Aufwand verbunden.

Frage:
Warum unterstützt gerade Netscape die Event-Handler nur so eingeschränkt?

Antwort:
Wie schon im Laufe dieses Kapitels erwähnt, priorisiert Netscape sein globales Ereignis-Modell und wurde mehr oder weniger gezwungen, das Event-Handler-Modell zu unterstützen. Man sollte auch im Auge behalten, dass Event-Handler bei vielen der offiziell erlaubten und vom Internet Explorer unterstützten HTML-Tags ziemlich überflüssig sind. Viele Kritiker werfen mit Scripten aufgepeppten Webseiten vor, nur überflüssige Spielereien damit zu erstellen. Die bei jedem Element über Event-Handler beobachtete Klickerei ist beispielsweise sehr zu hinterfragen. Was soll das eigentlich bringen? Wenn es notwendig ist, kann man es mit zahlreichen anderen Techniken realisieren.

Workshop

Testen Sie die Event-Handler. Erstellen Sie vor allem Beispiele mit den Event-Handlern, von denen keine expliziten Beispiele durchgespielt wurden.

Experimentieren Sie in Beispiel 2 mit dem Workaround für Netscape- kompatible Browser. Versuchen Sie eine andere Lösung zu finden, die zwar JavaScript-unfähigen Browsern eine Meldung anzeigt, aber dennoch gegenüber Größenveränderungen des Browsers immun ist.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

Unterstützt der Netscape Navigator diese Syntax?

  1. <BODY onLoad="a()">
  2. <HR onClick="a()">
  3. <A href="test.htm" onMouseOver="a()">
  4. <BUTTON onFocus="c()" onBlur="d()">
    Click
    </BUTTON>
  5. <INPUT onChange="change()">
  6. > "> <FORM Name="meinFormular"
    onReset="return wirklich()"
    >
  7. <BODY onUnLoad="a()">
  8. <H1 onSelect ="a()">Willkommen</H1>


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


1

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH