321
Kapitel 16
JavaScript-Fehlerbehandlung
In diesem Kapitel:
Fehlerbehandlung – zwei Verfahren 322
try/catch verwenden 322
Das onerror-Ereignis verwenden 330
Übungen 334
322
Kapitel 16: JavaScript-Fehlerbehandlung
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
Fehler mithilfe von JavaScript-Methoden zu behandeln: try/catch und onerror
Fehler mit try/catch-Anweisungen zu behandeln
try/catch/finally-Anweisungen zu verwenden
das onerror-Ereignis für Fenster- und Bildobjekte zu verarbeiten
Fehlerbehandlung – zwei Verfahren
Dieses Kapitel beleuchtet zwei wichtige, integrierte Methoden, um Fehlerbedingungen in JavaScript zu
behandeln: try/catch und onerror. Viele andere Sprachen, einschließlich Microsoft Visual Basic .NET und
Microsoft Visual C# bieten ebenfalls die try/catch-Anweisung, um Fehlerbedingungen abzufangen und zu
behandeln. Das Ereignis onerror erlaubt es, eine Aktion auszuführen, wenn ein Fehler aufgetreten ist.
try/catch verwenden
Der try-Teil der try/catch-Anweisung kapselt einen JavaScript-Codeblock. Wird das Skript ausgeführt,
werden alle Ausnahmen, die im try-Block ausgelöst werden, durch die catch-Anweisung abgefangen. Dann
können Sie den Fehler mit dem JavaScript-Code im catch-Block behandeln. Die Struktur des Codes sieht
folgendermaßen aus:
try {
// Normalen Code ausführen
}
catch(errorObject) {
// Hier Fehlerbehandlung durchführen
}
Wenn der Code in der try-Klausel ausgeführt wird, bewirken auftretende Fehler, dass die Verarbeitung
sofort an die catch-Klausel übergeben wird. Listing 16.1 (in der Begleitdatei listing16-1.txt zu finden) zeigt
ein einfaches Beispiel.
try {
var numField = document.forms[0]["num"];
if (isNaN(numField.value)) {
throw "Es ist keine Zahl";
}
}
catch(errorObject) {
alert(errorObject);
}
Listing 16.1 Ein einfaches try/catch-Beispiel
Ist der Wert von numField.value keine Zahl, löst die throw-Anweisung eine vom Programmierer generierte
Ausnahme mit dem Text »Es ist keine Zahl« aus. Daraufhin wird die catch-Klausel ausgeführt und zeigt in
diesem Fall ein alert()-Dialogfeld an. Beachten Sie den Unterschied zwischen einer vom Programmierer
try/catch verwenden
323
generierten Ausnahme und einer vom JavaScript-Laufzeitmodul generierten Ausnahme, die beispielsweise
bei einem Syntaxfehler auftritt. Ein try/catch-Block fängt keine Syntaxfehler ab, bietet also keinen Schutz
gegen sie.
In einer catch-Klausel ist es üblich, mehrere Aufgaben zu realisieren, wie zum Beispiel eine andere Funktion
aufzurufen, um einen Fehler zu protokollieren, oder eine Bedingung mittels eines allgemeinen – generi-
schen – Konzepts zu behandeln. Die catch-Klausel ist vor allem hilfreich in problembehafteten Codeberei-
chen, wo der Code naturgemäß zu Fehlern führt (etwa in Code, der Benutzereingaben verarbeitet).
In der folgenden Übung erstellen Sie ein Webformular ähnlich dem Formular, das Sie in Kapitel 15 erstellt
haben. Dieses Mal stellen Sie aber nicht nur visuelles Feedback im Textfeld des Formulars bereit, sondern
auch etwas Feedback in Textform.
try/catch
mit einem Webformular verwenden
1. Bearbeiten Sie die Datei number.htm im Ordner der Begleitdateien von Kapitel 16 mit Visual Studio,
Eclipse oder einem anderen Editor.
2. Ersetzen Sie in der Webseite die TODO-Anweisung durch den folgenden fettgedruckten Code (den Sie
auch in der Begleitdatei number.txt finden):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>Try/Catch</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript" src="number.js"></script>
</head>
<body>
<form name="formexample" id="formexample" action="#">
<div id="citydiv">Eine Zahl zwischen 1 und 100 eingeben: <input id="num"
name="num"> <span id="feedback"> </span></div>
<div><input id="submit" type="submit"></div>
</form>
<script type="text/javascript">
var formEl = document.getElementsByTagName("form")[0];
EHandler.add(formEl,"submit", function(eventObj) { checkValid(eventObj); } );
</script>
</body>
</html>
3. Erstellen Sie eine JavaScript-Quelldatei namens number.js. (Diese Datei ist auch in den Begleitdateien
enthalten.)
4. Konvertieren Sie den Fehlerbehandlungscode aus Kapitel 15 in die try/catch-Version entsprechend dem
Inhalt dieses Formulars. Eigentlich ist für den Code von Kapitel 15 keine try/catch-Anweisung erforder-
lich, doch lässt sich mit der Umarbeitung in die try/catch-Version gut veranschaulichen, wie man diese
Anweisung einsetzt. Geben Sie in die Datei number.js den folgenden Code ein. (Zwar ließe sich dieser
Code ohne Weiteres zu einer einzelnen if-Anweisung komprimieren, doch habe ich hier mehrere if-An-
weisungen vorgesehen, weil Sie den Code später in dieser Übung erweitern sollen.)
324
Kapitel 16: JavaScript-Fehlerbehandlung
function checkValid(eventObj) {
try {
var numField = document.forms[0]["num"];
if (isNaN(numField.value)) {
throw numField;
}
else if (numField.value > 100) {
throw numField;
}
else if (numField.value < 1) {
throw numField;
}
return true;
}
catch(errorObject) {
errorObject.style.background = "#FF0000";
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}
}
5. Öffnen Sie die Seite in einem Webbrowser. Abbildung 16.1 zeigt das Ergebnis.
Abbildung 16.1 Ausgangsversion für die Webseite des Beispiels zur try/catch-Fehlerbehandlung
6. Testen Sie die Funktionalität der neuen try/catch-Klauseln. Geben Sie eine Zahl größer als 100 in das
Feld ein (beispielsweise 350) und klicken Sie auf Anfrage senden. Abbildung 16.2 zeigt das Ergebnis.
Abbildung 16.2 Seite bei Eingabe einer Zahl größer als 100
With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.
Start Free Trial
No credit card required