Erreurs JavaScript
Lancez et essayez... attrapez... enfin
L' tryinstruction définit un bloc de code à exécuter (à essayer).
L' catchinstruction définit un bloc de code pour gérer toute erreur.
L' finallyinstruction définit un bloc de code à exécuter quel que soit le résultat.
L' throwinstruction définit une erreur personnalisée.
Des erreurs arriveront !
Lors de l'exécution du code JavaScript, différentes erreurs peuvent se produire.
Les erreurs peuvent être des erreurs de codage faites par le programmeur, des erreurs dues à une mauvaise saisie et d'autres choses imprévisibles.
Exemple
Dans cet exemple, nous avons mal orthographié "alert" en tant que "addlert" pour produire délibérément une erreur :
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript détecte adddlert comme une erreur et exécute le code de capture pour le gérer.
JavaScript essayer et attraper
L' tryinstruction vous permet de définir un bloc de code à tester pour les erreurs pendant son exécution.
L' catchinstruction vous permet de définir un bloc de code à exécuter, si une erreur se produit dans le bloc try.
Les instructions JavaScript tryet catch
vont par paires :
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript génère des erreurs
Lorsqu'une erreur se produit, JavaScript s'arrête normalement et génère un message d'erreur.
Le terme technique pour cela est : JavaScript lèvera une exception (lancera une erreur) .
JavaScript créera en fait un objet Error avec deux propriétés : name et message .
La déclaration de lancer
L' throwinstruction vous permet de créer une erreur personnalisée.
Techniquement, vous pouvez lancer une exception (lancer une erreur) .
L'exception peut être un JavaScript String, un Number, un Booleanou un Object:
throw "Too big"; // throw a text
throw 500; // throw a number
Si vous utilisez throwavec tryet
catch, vous pouvez contrôler le déroulement du programme et générer des messages d'erreur personnalisés.
Exemple de validation d'entrée
Cet exemple examine l'entrée. Si la valeur est erronée, une exception (err) est levée.
L'exception (err) est interceptée par l'instruction catch et un message d'erreur personnalisé s'affiche :
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between
5 and 10:</p>
<input id="demo" type="text">
<button type="button"
onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let x =
document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw
"too low";
if(x > 10) throw "too
high";
}
catch(err) {
message.innerHTML =
"Input is " + err;
}
}
</script>
</body>
</html>
Validation HTML
Le code ci-dessus n'est qu'un exemple.
Les navigateurs modernes utilisent souvent une combinaison de JavaScript et de validation HTML intégrée, en utilisant des règles de validation prédéfinies définies dans les attributs HTML :
<input id="demo" type="number" min="5" max="10" step="1">
Vous pouvez en savoir plus sur la validation des formulaires dans un chapitre ultérieur de ce didacticiel.
La déclaration enfin
L' finallyinstruction vous permet d'exécuter du code, après try and catch, quel que soit le résultat :
Syntaxe
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}Exemple
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let x =
document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x))
throw "is not a number";
x = Number(x);
if(x >
10) throw "is too high";
if(x <
5) throw "is too low";
}
catch(err)
{
message.innerHTML = "Error: " +
err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
L'objet d'erreur
JavaScript a un objet d'erreur intégré qui fournit des informations sur l'erreur lorsqu'une erreur se produit.
L'objet error fournit deux propriétés utiles : name et message.
Propriétés de l'objet d'erreur
| Propriété | La description |
|---|---|
| Nom | Définit ou renvoie un nom d'erreur |
| message | Définit ou renvoie un message d'erreur (une chaîne) |
Valeurs de nom d'erreur
Six valeurs différentes peuvent être renvoyées par la propriété error name :
| Nom de l'erreur | La description |
|---|---|
| EvalErreur | Une erreur s'est produite dans la fonction eval() |
| RangeError | Un nombre "hors plage" s'est produit |
| Erreur de référence | Une référence illégale s'est produite |
| Erreur de syntaxe | Une erreur de syntaxe s'est produite |
| Erreur-type | Une erreur de type s'est produite |
| URIError | Une erreur dans encodeURI() s'est produite |
Les six valeurs différentes sont décrites ci-dessous.
Erreur d'évaluation
Un EvalErrorindique une erreur dans la fonction eval().
Les versions plus récentes de JavaScript ne lancent pas EvalError. Utilisez plutôt SyntaxError.
Erreur de plage
A RangeErrorest lancé si vous utilisez un nombre qui est en dehors de la plage des valeurs légales.
Par exemple : Vous ne pouvez pas définir le nombre de chiffres significatifs d'un nombre sur 500.
Exemple
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erreur de référence
A ReferenceErrorest levé si vous utilisez (référence) une variable qui n'a pas été déclarée :
Exemple
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erreur de syntaxe
A SyntaxErrorest levé si vous essayez d'évaluer le code avec une erreur de syntaxe.
Exemple
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erreur-type
A TypeErrorest levé si vous utilisez une valeur qui est en dehors de la plage des types attendus :
Exemple
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Erreur d'URI (Uniform Resource Identifier)
A URIErrorest lancé si vous utilisez des caractères illégaux dans une fonction URI :
Exemple
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Propriétés d'objet d'erreur non standard
Mozilla et Microsoft définissent certaines propriétés d'objet d'erreur non standard :
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
N'utilisez pas ces propriétés dans des sites Web publics. Ils ne fonctionneront pas dans tous les navigateurs.
Référence d'erreur complète
Pour une référence complète de l'objet Error, accédez à notre Complete JavaScript Error Reference .