Il existe trois types d'erreurs de programmation : (1) Erreurs de syntaxe et (2) Erreurs d'exécution (3) Erreurs de logique :
Erreur de syntaxe :
Des erreurs de syntaxe, également appelées erreurs d'analyse, se produisent lors de la compilation des langages de programmation traditionnels et apparaissent lorsque JavaScript est interprété.
Par exemple, la ligne suivante provoquera 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, seule l'erreur de syntaxe contenue dans le même thread est affectée et le code des autres threads est exécuté ; le code qui dépend du code contenant l'erreur ne sera pas exécuté.
Erreur d'exécution :
Des erreurs d'exécution (après compilation/interprétation) lors de l'exécution, également appelées exceptions, sont générées.
Par exemple, la ligne suivante provoquera une erreur d'exécution car la syntaxe ici est correcte, mais au moment de l'exécution, elle essaie d'appeler une méthode inexistante :
<script type="text/javascript"> <!-- window.printme(); //--> </script>
Les exceptions affectent également le thread sur lequel elles se produisent, permettant aux autres threads JavaScript de continuer à s'exécuter normalement.
Erreur logique :
Les erreurs logiques sont probablement le type d’erreurs le plus difficile à suivre. Ces erreurs ne sont pas le résultat d’une erreur de syntaxe ou d’exécution. À l’inverse, lorsqu’un bug survient dans la logique du script, vous n’obtenez pas les résultats escomptés.
Vous ne pourrez peut-être pas détecter ces erreurs car cela dépend du programme, du type de logique sur lequel il est basé sur les exigences de l'entreprise.
essayez... attrapez... enfin déclaration :
Capacités de gestion des exceptions ajoutées dans la dernière version de JavaScript. JavaScript implémente les structures try...catch...finally et les opérations throw pour gérer les exceptions.
Vous pouvez détecter les exceptions générées par le programmeur et d'exécution, mais pas les erreurs de syntaxe JavaScript.
Voici la syntaxe du bloc try...catch...finally :
<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 bloc try doit être suivi uniquement d'un bloc catch ou d'un bloc enfin (ou des deux). Lorsqu'une exception se produit dans le bloc try, l'exception est placée dans e et le bloc catch est exécuté. Le bloc final facultatif après l’instruction try/catch est exécuté sans condition.
Exemple :
Vous trouverez ci-dessous un exemple où nous essayons d'appeler une fonction inexistante qui lèvera une exception. Voyons comment il se comporte, sans essayer...attraper :
<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>
Maintenant, essayons d'attraper cette exception en utilisant try ... catch et d'afficher un message convivial. Vous pouvez également supprimer ce message si vous souhaitez masquer cette erreur à l'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>
Vous pouvez utiliser le bloc final pour exécuter inconditionnellement pour toujours après l'instruction 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>
déclaration de lancement :
Vous pouvez utiliser l'instruction throw pour améliorer vos exceptions intégrées ou vos exceptions personnalisées. Plus tard, ces exceptions peuvent être détectées et les mesures appropriées peuvent être prises.
Voici des exemples d'utilisation des instructions throw.
<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>
Vous pouvez utiliser une chaîne, un entier, un booléen ou un objet pour lever une exception dans une fonction, puis vous pouvez intercepter l'exception dans la même fonction que nous avons fait ci-dessus, ou utiliser un bloc try...catch dans d'autres fonctions.
syntaxe onerror()
Le gestionnaire d'événements onerror est la première fonctionnalité qui facilite la gestion des erreurs par JavaScript. L'événement d'erreur est déclenché sur l'objet window chaque fois qu'une exception se produit sur la page. Par exemple :
<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>
Le gestionnaire d'événements onerror fournit trois informations pour connaître la nature exacte de l'erreur :
Voici un exemple de la façon d'extraire ces informations
<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>
Peut être affiché de la manière que vous jugez préférable pour extraire les informations.
Vous pouvez utiliser la méthode onError pour afficher un message d'erreur sans aucun problème lors du chargement de l'image comme suit :
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />
Vous pouvez utiliser onerror pour afficher les informations correspondantes en cas d'erreurs dans de nombreuses balises HTML.