JavaScript - Gestion des erreurs et des exceptions
Il existe trois types d'erreurs de programmation: (a) les erreurs de syntaxe, (b) les erreurs d'exécution et (c) les erreurs logiques.
Erreurs de syntaxe
Erreurs de syntaxe, également appelées parsing errors, se produisent au moment de la compilation dans les langages de programmation traditionnels et au moment de l'interprétation en JavaScript.
Par exemple, la ligne suivante provoque une erreur de syntaxe car il manque une parenthèse fermante.
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>Lorsqu'une erreur de syntaxe se produit dans JavaScript, seul le code contenu dans le même thread que l'erreur de syntaxe est affecté et le reste du code dans d'autres threads est exécuté en supposant que rien ne dépend du code contenant l'erreur.
Erreurs d'exécution
Erreurs d'exécution, également appelées exceptions, se produisent pendant l'exécution (après compilation / interprétation).
Par exemple, la ligne suivante provoque une erreur d'exécution car ici la syntaxe est correcte, mais lors de l'exécution, elle essaie d'appeler une méthode qui n'existe pas.
<script type = "text/javascript">
<!--
window.printme();
//-->
</script>Les exceptions affectent également le thread dans lequel elles se produisent, permettant à d'autres threads JavaScript de poursuivre l'exécution normale.
Erreurs logiques
Les erreurs logiques peuvent être le type d'erreurs le plus difficile à localiser. Ces erreurs ne sont pas le résultat d'une erreur de syntaxe ou d'exécution. Au lieu de cela, ils se produisent lorsque vous faites une erreur dans la logique qui anime votre script et que vous n'obtenez pas le résultat attendu.
Vous ne pouvez pas détecter ces erreurs, car le type de logique que vous souhaitez mettre dans votre programme dépend des besoins de votre entreprise.
La déclaration try ... catch ...
Les dernières versions de JavaScript ont ajouté des capacités de gestion des exceptions. JavaScript implémente letry...catch...finally construire ainsi que le throw opérateur pour gérer les exceptions.
Vous pouvez catch généré par le programmeur et runtime exceptions, mais vous ne pouvez pas catch Erreurs de syntaxe JavaScript.
Voici la try...catch...finally syntaxe de bloc -
<script type = "text/javascript">
<!--
try {
// Code to run
[break;]
}
catch ( e ) {
// Code to run if an exception occurs
[break;]
}
[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>le try le bloc doit être suivi par soit exactement un catch bloc ou un finallybloc (ou l'un des deux). Lorsqu'une exception se produit dans letry bloc, l'exception est placée dans e et le catchbloc est exécuté. L'optionfinally block s'exécute sans condition après try / catch.
Exemples
Voici un exemple où nous essayons d'appeler une fonction non existante qui à son tour déclenche une exception. Voyons comment il se comporte sanstry...catch-
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
Essayons maintenant d'attraper cette exception en utilisant try...catchet afficher un message convivial. Vous pouvez également supprimer ce message si vous souhaitez masquer cette erreur à un utilisateur.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
Vous pouvez utiliser finallybloc qui s'exécutera toujours sans condition après le try / catch. Voici un exemple.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
La déclaration du lancer
Vous pouvez utiliser throwpour déclencher vos exceptions intégrées ou vos exceptions personnalisées. Plus tard, ces exceptions peuvent être capturées et vous pouvez prendre une action appropriée.
Exemple
L'exemple suivant montre comment utiliser un throw déclaration.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
var b = 0;
try {
if ( b == 0 ) {
throw( "Divide by zero error." );
} else {
var c = a / b;
}
}
catch ( e ) {
alert("Error: " + e );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
Vous pouvez lever une exception dans une fonction en utilisant une chaîne, un entier, un booléen ou un objet, puis vous pouvez capturer cette exception soit dans la même fonction que nous l'avons fait ci-dessus, soit dans une autre fonction en utilisant un try...catch bloquer.
La méthode onerror ()
le onerrorLe gestionnaire d'événements a été la première fonctionnalité à faciliter la gestion des erreurs dans JavaScript. leerror l'événement est déclenché sur l'objet window chaque fois qu'une exception se produit sur la page.
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
le onerror Le gestionnaire d'événements fournit trois informations pour identifier la nature exacte de l'erreur -
Error message - Le même message que le navigateur afficherait pour l'erreur donnée
URL - Le fichier dans lequel l'erreur s'est produite
Line number- Le numéro de ligne dans l'URL donnée qui a causé l'erreur
Voici l'exemple pour montrer comment extraire ces informations.
Exemple
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Production
Vous pouvez afficher les informations extraites de la manière qui vous semble la meilleure.
Vous pouvez utiliser un onerror méthode, comme indiqué ci-dessous, pour afficher un message d'erreur en cas de problème lors du chargement d'une image.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />Vous pouvez utiliser onerror avec de nombreuses balises HTML pour afficher les messages appropriés en cas d'erreurs.