# Was sonst noch wichtig ist

Viele versäumen Wichtiges in ihrem Leben, weil es ihnen ungeheuer wichtig ist, nichts zu versäumen.
– Ernst Ferstl, österr. Dichter und Aphoristiker

# Ereignisbehandlung

Event-Handler sind eine der wichtigsten Schnittstellen zwischen HTML und JavaScript. Im bisherigen Verlauf des Buches haben Sie schon den ein oder anderen Event-Handler kennen gelernt, z. B. onClick oder onLoad. Generell gilt, dass diese Event-Handler als Attribute von HTML-Elementen notiert werden und immer mit on beginnen. Als Wert für diese Attribute wird in der Regel eine im zentralen JavaScript-Bereich definierte Funktion aufgerufen. Es ist zwar durchaus auch möglich, einzelne JavaScript-Anweisungen als Werte zu notieren, dies führt aber recht schnell zu einem unübersichtlichen Quelltext des HTML-Dokuments.

Was aber sind Event-Handler genau? Übersetzt heißen sie Ereignisbehandler, und genau das ist auch ihre Aufgabe: Sie sollen Ereignisse behandeln. Zu den Ereignissen zählen z. B. der Klick mit der Maus auf ein Element, der Ladevorgang des HTML-Dokuments oder das Absenden von Formulardaten. (Eine Liste der wichtigsten Event-Handler finden Sie in Tabelle 9.1). Dabei sind bei der Behandlung von Ereignissen ein gewisser Ablauf und bestimmte Gegebenheiten zu berücksichtigen. Ereignisse sind immer Reaktionen auf die Aktionen des Anwenders. Das Ereignis »HTML-Dokument laden« ist also die Reaktion auf eine Aktion des Benutzers, der auf einen Link geklickt oder die Adresse des Dokuments in der Adressleiste des Browsers eingegeben hat. Dieses Ereignis tritt immer ein, egal ob Sie einen Event-Handler definiert haben oder nicht. Erst der Event-Handler ermöglicht es Ihnen, diese Aktion des Benutzers zu beantworten, um ihn beispielsweise mit einem Meldungsfenster zu begrüßen. Das bedeutet also, dass ein Ereignis eintreten muss, bevor dafür eine entsprechende Behandlung erfolgen kann.

Das Einsatzgebiet der Event-Handler ist groß. So können Sie vor dem Übertragen von Formulardaten deren Gültigkeit überprüfen oder beim Laden des HTML-Dokuments eine Animation starten.

Ereignis	Event-Handler	Beschreibung
abort	onAbort	Das Laden der Grafiken wird abgebrochen.
blur	onBlur	Der Eingabefokus wurde entzogen.
change	onChange	Der Text eines Elements wurde geändert.
click	onClick	Mausklick
dblclick	onDblClick	Mausdoppelklick
error	onError	Ein Fehler ist aufgetreten.
focus	onFocus	Der Eingabefokus wird auf Element gesetzt.
keydown	onKeydown	Eine Taste wird gedrückt.
keypress	onKeypress	Tastendruck
keyup	onKeyup	Taste wird gelöst.
load	onLoad	Ein Dokument wird geladen.
mousedown	onMousedown	Eine Maustaste wird gedrückt.
mousemove	onMousemove	Die Maus wird bewegt.
mouseout	onMouseout	Die Maus verlässt ein Element.
mouseover	onMouseover	Die Maus steht über einem Element.
mouseup	onMouseup	Die Maustaste wird gelöst.
reset	onReset	Formulardaten werden zurückgesetzt.
resize	onResize	Die Fenstergröße wird geändert.
select	onSelect	Text wird ausgewählt.
submit	onSubmit	Ein Formular wird versendet.
unload	onUnload	Das Dokument wird geschlossen.

Tabelle 9.1: Übersicht aller Ereignisse, der entsprechenden Event-Handler und eine kurze Erklärung

# onAbort

Falls ein Anwender auf die Abbrechen-Schaltfläche des Browsers klickt, bevor alle Bilder geladen worden sind, wird das Ereignis abort ausgelöst.

<img src="ein_bild.png" onAbort="alert('Ladevorgang abgebrochen');">

Mit dem img-Element wird die Grafik ein_bild.jpg in das HTML-Dokument eingebunden. Klickt der Anwender nun auf die Abbrechen-Schaltfläche, bevor das Bild vollständig geladen worden ist, wird mit der alert-Anweisung eine Meldung ausgegeben.

Da dieser Event-Handler nicht zum HTML-Standard gehört, interpretieren ihn weder Netscape 6 noch Opera.

# onBlur

Das blur-Ereignis tritt ein, wenn ein Element den Fokus verliert, d. h., wenn es aktiviert ist und dann ein anderes Element aktiviert wird.

<html>
  <head>
    <title>onBlur</title>
  </head>
  <body>
    <input type="text" size="30" onBlur="alert('blur')" />
    <input type="text" size="30" onBlur="alert('blur')" />
  </body>
</html>

Listing 9.1: Sobald das andere der beiden Eingabefelder aktiviert wird, wird eine Meldung ausgegeben.

Klicken Sie zuerst in eines der Eingabefelder und anschließend in das andere. Beim Verlassen des einen Felds wird vor der Aktivierung des anderen eine Meldung durch die alert-Anweisung ausgegeben.

# onChange

Das change-Ereignis wird ausgelöst, nachdem der Text eines Elements geändert wurde und das Element verlassen wird.

<html>
  <head>
    <title>onChange</title>
  </head>
  <body>
    <input type="text" size="30" onChange="alert('change')" value="Text">
  </body>
</html>

Listing 9.2: Beispiel für das change-Ereignis

Ändern Sie den Text des input-Elements, und klicken Sie anschließend irgendwo ins Browserfenster. Wenn Sie den Text geändert haben, wird eine Meldung ausgegeben.

# onClick

Das click-Ereignis wird ausgelöst, sobald ein Anwender auf ein Element klickt.

<html>
  <head>
    <title>onClick</title>
  </head>
  <body>
    <h1 onClick="alert('click')">&Uuml;berschrift</h1>
  </body>
</html>

Listing 9.3: Das click-Ereignis

Sobald Sie auf die Überschrift klicken, wird eine Meldung ausgegeben.

# onDblClick

Siehe Abschnitt 9.1.4, mit dem Unterschied, dass das dblclick-Ereignis erst bei einem Doppelklick des Anwenders eintritt.

Beachten Sie jedoch, dass dieses Ereignis bei Netscape-Browsern unter Mac OS und Opera nicht existiert.

# onError

Ein error-Ereignis tritt ein, wenn ein Fehler auftritt, z. B. wenn ein Bild geladen werden soll, dieses aber nicht gefunden wird.

<img src="bild.gif" onError="alert('bild nicht gefunden')">

Mit dem error-Ereignis können Sie zwar feststellen, dass ein Fehler aufgetreten ist, diesen aber nicht beheben. Sie können lediglich eine Meldung ausgeben oder anderen JavaScript-Code ausführen.

# onFocus

Sobald ein Element den Eingabefokus erhält, wird das focus-Ereignis ausgelöst.

<input type="text" size="20" onFocus="alert('Wie lautet Ihr Name?')">

Sobald Sie in das Eingabefeld klicken, wird eine Meldung mit der alert-Anweisung ausgegeben.

# onKeydown

Das keydown-Ereignis tritt ein, wenn der Benutzer eine Taste drückt.

<input type="text" size="20" onKeydown="alert('Tastendruck')">

Sobald Sie das Eingabefeld angeklickt haben und eine Taste auf der Tastatur drücken, wird eine Meldung ausgegeben.

# onKeypress

Siehe Abschnitt 9.1.8, mit dem Unterschied, dass die Taste gedrückt und gelöst werden muss, damit das keypress-Ereignis eintritt.

# onKeyup

Siehe Abschnitt 9.1.8, mit dem Unterschied, dass die Taste gelöst werden muss, damit das keyup-Ereignis eintritt.

# onLoad

Das load-Ereignis tritt ein, wenn ein HTML-Dokument geladen wird.

<html>
  <head>
    <title>onLoad</title>
  </head>
  <body onLoad="alert('Hallo!')">
    <h1>onLoad</h1>
  </body>
</html>

Listing 9.4: Beispiel für das load-Ereignis

Sobald das Dokument geladen wird, erscheint ein Meldungsfenster mit dem Text »Hallo!«.

# onMousedown

Sobald eine Maustaste gedrückt wird, tritt das mousedown-Ereignis ein.

<html>
  <head>
    <title>onMousedown</title>
  </head>
  <body onMousedown="alert('mousedown')">
    <h1>onMousedown</h1>
  </body>
</html>

Listing 9.5: Beispiel für das mousedown-Ereignis

Die alert-Anweisung wird ausgeführt, sobald Sie an eine beliebige Stelle des Dokuments geklickt haben.

# onMousemove

Das Ereignis mousemove tritt ein, sobald der Anwender die Maus bewegt, unabhängig davon, ob eine Taste gedrückt wird oder nicht.

<html>
  <head>
    <title>onMousemove</title>
  </head>
  <body onMousemove="this.innerText=event.clientX+','+event.clientY;"></body>
</html>

Listing 9.6: Beispiel für das mousemove-Ereignis

Das Beispiel in Listing 9.6 funktioniert leider nur mit dem Internet Explorer ab der Version 4.0, weil es die Eigenschaften clientX und clientY nur in diesem gibt. Sobald Sie die Maus bewegen, wird im Browserfenster die x/y-Position der Maus ausgegeben.

# onMouseout und onMouseover

Das Ereignis mouseout wird ausgelöst, sobald der Benutzer den Mauszeiger von einem Element wegbewegt bzw. dessen Anzeigebereich mit der Maus verlässt. Das mouseover-Ereignis wird ausgelöst, sobald der Anwender die Maus in den Anzeigebereich eines Elements bewegt.

<html>
  <head>
    <title>onMouseout und onMouseover</title>
  </head>
  <body>
    <h1 style="color:#000000" onMouseover="this.style.color='#FF0000'" onMouseout="this.style.color='#000000'">
      onMouseout und onMouseover
    </h1>
  </body>
</html>

Listing 9.7: Beispiel für die Ereignisse mouseover und mouseout

Wenn Sie die Maus über den Anzeigebereich des h1-Elements bewegen, wird die Farbe der Überschrift auf Rot geändert. Sobald die Maus den Anzeigebereich verlässt, wird die Farbe auf Schwarz umgestellt.

# onMouseup

Siehe Abschnitt 9.1.12, mit dem Unterschied, dass die Maustaste gelöst werden muss, um das Ereignis mouseup auszulösen.

# onReset und onSubmit

Das reset-Ereignis wird ausgelöst, sobald der Anwender auf die Zurücksetzen-Schaltfläche eines Formulars klickt. Klickt der Anwender auf die Versenden-Schaltfläche, wird das Ereignis submit ausgelöst.

<html>
  <head>
    <title>onReset und onSubmit</title>
  </head>
  <body>
    <form onReset="alert('Daten zurücksetzen')" onSubmit="alert('Daten versenden')">
      <input type="text" value="Vorname"><br>
      <input type="text" value="Nachname"><br>
      <input type="text" value="Emailadresse"><br>
      <input type="submit"><input type="reset">
    </form>
  </body>
</html>

Listing 9.8: Beispiel für die Ereignisse reset und submit

Egal, ob Sie auf die Versenden-Schaltfläche oder die Reset-Schaltfläche klicken, es wird der folgende Vorgang in einem Meldungsfenster ausgegeben.

# onResize

Ändert der Anwender die Größe des Browserfensters, tritt das Ereignis resize in Kraft.

<html>
  <head>
    <title>onResize</title>
  </head>
  <body onResize="alert('Fenstergröße geändert')">
    <h1>onResize</h1>
  </body>
</html>

Listing 9.9: Beispiel für das resize-Ereignis

Wenn Sie die Größe des Browserfensters ändern, wird mit der alert-Anweisung eine Meldung ausgegeben.

# onSelect

Wenn der Anwender in einem input- oder textarea-Element einen Text markiert, wird das Ereignis select ausgelöst.

<html>
  <head>
    <title>onSelect</title>
  </head>
  <body>
    <textarea rows="15" cols="20" onSelect="this.innerText='Text markiert!'">Markieren Sie bitte diesen Text</textarea>
  </body>
</html>

Listing 9.10: Beispiel für das select-Ereignis

Sobald Sie versuchen, den Text des textarea-Elements zu markieren, wird ein anderer Text in das Element geschrieben. Beachten Sie, dass weder Netscape 4.x noch Opera 5 diesen Event-Handler interpretieren.

# onUnload

Schließt ein Anwender ein Dokument oder wechselt er durch einen Link zu einem anderen, wird das Ereignis unload ausgelöst.

<html>
  <head>
    <title>onUnload</title>
  </head>
  <body onUnload="alert('Kommen Sie bald wieder')">
    <h1>onUnload</h1>
  </body>
</html>

Listing 9.11: Beispiel für das unload-Ereignis

Sobald Sie das Dokument schließen möchten, taucht ein Meldungsfenster auf.

# Cookies

Das Wort Cookie (dt. Keks) verursacht bei den meisten Internetbenutzern in der Regel einen matten Gesichtsausdruck, was daher kommt, dass Cookies in Verruf gekommen sind. Angeblich sollen sich damit geheime Informationen vom Rechner des Benutzers abrufen und, noch schlimmer, gefährliche Viren ablegen lassen. Das ist jedoch ausgemachter Unsinn. Weder lassen sich Informationen über Kreditkarten noch Passwörter durch Cookies ermitteln, und von Viren kann ein Rechner zwar befallen werden, aber niemals aufgrund von Cookies. Dass eine Webseite mittels Cookies Informationen auf dem Rechner eines Benutzers ablegen kann, entspricht jedoch der Wahrheit. Ein von einer Webseite abgelegtes Cookie ist in der Regel nur von dieser abrufbar.

Der Einsatz von Cookies beschränkt sich darauf, auf dem Rechner des Benutzers wenige Informationen in Form einer Variablen und einer entsprechenden Zeichenkette zu speichern. Dabei stehen maximal 1024 Bytes (1 Kilobyte) für die Informationen zur Verfügung. So lassen sich z. B. die persönliche Anzahl der Seitenbesuche eines Benutzers speichern oder wann der Benutzer die Webseite das letzte Mal besucht hat.

Um ein Cookie auf dem Rechner des Benutzers ablegen zu können, müssen Sie der Eigenschaft cookie des document-Objekts einen Wert zuweisen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Cookie schreiben //-->
<html>
  <head>
    <title>Listings 9.12</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
      document.cookie = "JavaScriptCookie";
    //-->
    </script>
  </body>
</html>

Listing 9.12: Mit JavaScript ein Cookie auf dem Rechner des Benutzers speichern

In Listing 9.12 wird der Eigenschaft document.cookie der Wert "JavaScriptCookie" zugewiesen. Dadurch wird automatisch das Cookie auf dem Rechner des Benutzers gespeichert.

Über die gleiche Eigenschaft, mit der auch ein Cookie geschrieben wird, also document.cookie, kann auch ein Cookie, das von einem Dokument abgelegt wurde, ausgelesen werden. Bedingung ist jedoch, dass das erstellende Dokument auf dem gleichen Server liegt.

var zeichenkette = document.cookie;

Das in Listing 9.12 erstellte Cookie ließe sich nun folgendermaßen auslesen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Cookie lesen //-->
<html>
  <head>
    <title>Listing 9.13</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
      if(document.cookie) alert(document.cookie);
    //-->
    </script>
  </body>
</html>

Listing 9.13: Ein vom Server gespeichertes Cookie auslesen

Damit dieses Beispiel funktioniert, müssen Sie im Browser zuerst das Listing 9.12 und im gleichen Fenster anschließend das Listing 9.13 öffnen. Mit der Anweisung if(document.cookie) wird zuerst überprüft, ob ein Cookie geschrieben wurde. Ist dies der Fall, wird der Inhalt des Cookies in einem Meldungsfenster ausgegeben.

# Verfallsdatum

Sobald Sie den Browser schließen, der das Dokument aufgerufen hat, das das Cookie geschrieben hat, wird das Cookie auf dem Rechner des Benutzers gelöscht. Um dies zu umgehen, können Sie dem Cookie ein Verfallsdatum zuweisen. Das Datum müssen Sie im GMT-Format (GMT = Greenwich Meantime) angeben. Außerdem ändert sich dabei die Art der Speicherung der Daten. Das Verfallsdatum müssen Sie in der Form

document.cookie = "expires="+verfallsdatum;

speichern. Um nun weitere Informationen zu speichern, müssen Sie diese ebenfalls in der Form

bezeichner=wert

an document.cookie übergeben. Dies wird als Wertepaar bezeichnet. Mehrere Wertepaare werden durch Strichpunkte bzw. Semikolons getrennt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Cookies mit Verfallsdatum //-->
<html>
  <head>
    <title>Listings 9.14</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
      if(!document.cookie)
      {
        var datum = new Date();
        var verfallsdatum = datum.getTime () + (60 * 60 * 24 * 7);
        datum.setTime(verfallsdatum);
        document.cookie = "typ=JavaScriptCookie;expires="+datum.toGMTString();
      }
      if(document.cookie) alert(document.cookie);
    //-->
    </script>
  </body>
</html>

Listing 9.14: Beispiel für das Setzen eines Cookies mit Verfallsdatum

Zuerst wird überprüft, ob schon ein Cookie auf dem Rechner des Benutzers existiert, das von einem Dokument des Servers erstellt wurde. Ist dies nicht der Fall, wird ein neues Cookie angelegt. Diesem Cookie wird ein Verfallsdatum zugewiesen. Von der Sekunde an, in der das Cookie erstellt worden ist, bleibt es exakt 604.800 Sekunden (7 Tage) auf dem Rechner des Benutzers erhalten. Wenn das Cookie existiert, wird es in einem Meldungsfenster ausgegeben. Das Verfallsdatum wird dabei jedoch nicht ausgegeben.

# Persönliche Seitenbesuche zählen

Das folgende Listing ist ein Beispiel dafür, wie mit Cookies die persönliche Anzahl an Seitenbesuchen eines Benutzers gezählt werden kann.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Persönliche Seitenbesuche zählen //-->
<html>
  <head>
    <title>Listings 9.15</title>
    <script type="text/javascript">
    <!--
      function setNewCookie()
      {
        var datum = new Date();
        var vdatum = datum.getTime() + (60 * 60 * 24 * 365);
        datum.setTime(vdatum);
        document.cookie = "anzahl=1;expires="+datum.toGMTString();
      }

      function getCookie()
      {
        var uc = document.cookie;
        var anz;
        var wertA = uc.indexOf('=')+1;
        var wertE = uc.indexOf(';');
        if(wertE >= 0)
        {
          var anz = parseInt(uc.substring(wertA,wertE));
        }
        else
        {
          var anz = parseInt(uc.substring(wertA,uc.length));
        }
        return anz;
      }

      function updateCookie()
      {
        var anz = getCookie() + 1;
        var datum = new Date();
        var vdatum = datum.getTime() + (60 * 60 * 24 * 365);
        datum.setTime(vdatum);
        document.cookie = "anzahl="+anz+";expires="+datum.toGMTString();
      }

      function init()
      {
        if(!document.cookie) {
          setNewCookie();
        } else {
          updateCookie();
        }
        alert('Dies ist Ihr '+getCookie()+'. Besuch!');
      }
    //-->
    </script>
  </head>
  <body onLoad="init()">
  </body>
</html>

Listing 9.15: Mit JavaScript und Cookies die persönlichen Seitenbesuche eines Benutzers zählen

Wenn das HTML-Dokument geöffnet wird, wird zuerst die Funktion init() ausgeführt. In dieser Funktion wird überprüft, ob bereits ein Cookie existiert. Wenn nicht, wird die Funktion setNewCookie() ausgeführt, andernfalls updateCookie().

Die Funktion setNewCookie() erzeugt ein Cookie mit einer Haltbarkeitsdauer von 365 Tagen und schreibt das Wertepaar anzahl=1 in das Cookie, da es der erste Besuch des Benutzers ist.

Die Funktion updateCookie() hingegen ruft die Funktion getCookie() auf. Diese ermittelt zuerst die Positionen des Gleichheitszeichens und des Semikolons. Anschließend wird eine Teilzeichenkette ausgelesen, die eine Position nach dem Gleichheitszeichen beginnt und entweder bis zum Ende der Zeichenkette oder bis zum Semikolon geht. Diese Teilzeichenkette wird in einen Integer umgewandelt und an die Funktion updateCookie() zurückgegeben. Die Funktion updateCookie() erhöht den erhaltenen Wert um 1 und speichert ihn wieder im Cookie. Außerdem wird das Verfallsdatum wieder auf ein Jahr gesetzt.

Nachdem entweder ein neues Cookie erzeugt oder das vorhandene aktualisiert wurde, wird mit der Funktion getCookie() der aktuelle Zählerstand in einem Meldungsfenster ausgelesen.

Dieses Script hat jedoch ein paar kleine Schönheitsfehler. Löscht der Benutzer das abgelegte Cookie, beginnt die Zählung wieder bei 1. Ruft er die Seite von einem anderen Computer ab, würde die Zählung ebenfalls wieder bei 1 beginnen oder bei einem anderen Wert fortgesetzt, da das Cookie immer auf dem gerade benutzten Rechner des Anwenders abgelegt wird.

# Fehlerbehandlung

Seit der JavaScript-Version 1.5 können Sie mit einem try...catch-Block Fehler im Quellcode des JavaScripts abfangen. Zwar können Sie mit dem Event-Handler onError auf einen Fehler reagieren und eine entsprechende Meldung ausgeben, mit try...catch können Sie jedoch verhindern, dass ein Fehler überhaupt auftritt.

Die Syntax für einen solchen Block sieht wie folgt aus:

try  
{  
  // Anweisungsblock, der auf Fehler überwacht werden soll  
}  
catch(error)  
{  
  // Anweisungsblock, der ausgeführt wird, wenn ein Fehler   
  // aufgetreten ist  
}

Tritt im try-Anweisungsblock ein Fehler auf, wird dieser sofort beendet, und es wird der catch-Anweisungsblock ausgeführt. Die Variable error in runden Klammern hinter catch ist der Bezeichner für ein Objekt, in dem weitere Informationen zum Fehler abgelegt werden. Im catch-Anweisungsblock können Sie nun Angaben zum aufgetretenen Fehler machen.

Das folgende Beispiel erzeugt absichtlich einen Fehler, um Ihnen die Funktionsweise von try...catch-Blöcken zu verdeutlichen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- try...catch //-->
<html>
  <head>
    <title>Listings 9.16</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
      try
      {
        document.write('<b>try...catch</b>-Block beginnt<br>');
        eval('6 + * 3');
        document.write('Es sind keine Fehler aufgetreten.');
      }
      catch(e)
      {
        document.write('Es ist folgender Fehler eingetreten:<br>');
        document.write(e.name+'<br>');
        document.write(e.message+'<br>');
      }
    //-->
    </script>
  </body>
</html>

Listing 9.16: Ein Beispielscript, das absichtlich einen Fehler verursacht

Zuerst wird mit dem Schlüsselwort try, gefolgt von einer öffnenden geschweiften Klammer, der Anweisungsblock eingeleitet, der auf einen Fehler hin überwacht werden soll. Die Funktion eval() errechnet aus einer übergebenen Formel bzw. Rechenoperation das Ergebnis. Der Aufruf

alert(eval('7+8+9'));

würde in einem Meldungsfenster die Zahl 24 ausgeben. Da jedoch 6 + * 3 keine gültige Rechenoperation ist, wird ein Fehler ausgelöst. Anstatt die nachfolgende Zeile document.write('Es sind keine...') auszuführen, wird in den catch-Anweisungsblock gewechselt. Dieser gibt die in den Eigenschaften name und message des Objekts e gespeicherten Fehlerinformationen aus.

Ein try...catch-Block lässt sich aber noch um einen finally-Anweisungsblock erweitern. Dieser Anweisungsblock wird immer ausgeführt, egal ob ein Fehler aufgetreten ist oder nicht.

try  
{  
  // Anweisungsblock, der auf Fehler überwacht werden soll  
}  
catch(error)  
{  
  // Anweisungsblock, der ausgeführt wird, wenn ein Fehler   
  // aufgetreten ist  
}  
finally  
{  
  // Anweisungsblock, der auch bei Fehlern ausgeführt wird  
}

Im folgenden Listing wird das Listing 9.16 um einen finally-Anweisungsblock erweitert, und zusätzlich wird dem Benutzer ermöglicht, selbst eine Rechenoperation einzugeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- try...catch...finally //-->
<html>
  <head>
    <title>Listings 9.17</title>
  </head>
  <body>
    <script type="text/javascript">
    <!--
      try
      {
        var r_operation = prompt('Bitte geben Sie eine Rechenoperation ein:','');
        var ergebnis = eval(r_operation);
        document.write(r_operation+'='+ergebnis+'<br>');
      }
      catch(e)
      {
        document.write('Die von Ihnen eingegebene Rechenoperation ist falsch.<br>');
      }
      finally
      {
        document.write('<a href="javascript:location.reload()">Neue Rechenoperation</a>');
      }
    //-->
    </script>
  </body>
</html>

Listing 9.17: JavaScript, das den Benutzer auffordert, eine Formel einzugeben, und diese dann berechnet

Im try-Block wird der Benutzer aufgefordert, eine Rechenoperation bzw. Formel einzugeben. Mittels eval() wird diese Formel berechnet. Tritt dabei ein Fehler auf, wird der catch-Block ausgeführt, ansonsten wird das Ergebnis im Browser ausgegeben. Auf jeden Fall wird nach jedem Berechnungsversuch der finally-Block ausgeführt, der einen Link setzt, damit eine weitere Formel eingegeben werden kann.

Solche Fehlerbehandlungen eignen sich immer dann, wenn der Benutzer Eingaben machen kann, die weiterverarbeitet werden. Damit wird vermieden, dass der Browser einfach eine Fehlermeldung in der Art »Es wurde ein Fehler in Zeile 15 bei Zeichen 3 gefunden« ausgibt. Schließlich werden nur wenige Benutzer mit einer solchen Fehlermeldung etwas anfangen können.

# Zusammenfassung

In HTML stehen verschiedene Attribute zur Verfügung, die in Elementen verwendet werden können, um auf bestimmte Ereignisse zu reagieren. So können mit den Event-Handlern onMouseover und onMouseout Aktionen durchgeführt werden, wenn der Benutzer die Maus auf einem Objekt bewegt oder sie wieder entfernt.
Mit dem Objekt cookie können Sie mittels JavaScript auf dem Rechner des Benutzers ein Cookie ablegen, verändern oder auslesen.
Durch die Fehlerbehandlung mittels try...catch können Sie verhindern, dass Ihr Script unkontrolliert abbricht und möglicherweise größere Probleme im Browser des Benutzers auslöst.

# Fragen und Übungen

Erstellen Sie ein HTML-Dokument, in dem ein Textabsatz mit weißer Hintergrundfarbe dargestellt wird. Wenn der Benutzer die Maus auf dem Textabsatz bewegt, soll die Hintergrundfarbe des Textabsatzes auf Gelb gesetzt werden. Sobald der Benutzer die Maus wieder vom Textabsatz wegbewegt, soll die ursprüngliche Hintergrundfarbe verwendet werden.
Erstellen Sie ein HTML-Dokument mit einem einzeiligen Eingabefeld. Das Feld soll einen vordefinierten Wert enthalten, der mit dem Attribut value angegeben wird. Wenn der Benutzer in das Feld klickt, soll der vorbelegte Wert gelöscht werden und eine leere Eingabezeile zu sehen sein. Verlässt der Benutzer das Eingabefeld, ohne etwas eingegeben zu haben, soll der ursprüngliche Wert wieder angezeigt werden.

← DHTML Perl – dynamisch und interaktiv I →