Erreurs JavaScript Essayez Catch Throw

Table des matières

    Afficher la table des matières

lancer et essayer...attraper...enfin

L'instruction try définit un bloc de code à exécuter (à essayer).

L'instruction catch définit un bloc de code pour gérer toute erreur.

L'instruction finally définit un bloc de code à exécuter quel que soit le résultat.

L'instruction throw définit une erreur personnalisée.

Des erreurs se produiront !

Lors de l'exécution de code JavaScript, différentes erreurs peuvent se produire.

Les erreurs peuvent être des erreurs de codage commises par le programmeur, des erreurs dues à une erreur entrée et d’autres choses imprévisibles.

Exemple

Dans cet exemple, nous avons mal orthographié « alert » par « adddlert » 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>How to use <b>catch</b> to display an error.</p>

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript détecte adddlert comme une erreur et exécute le attraper le code pour gérer cela.

try ... catch

L'instruction try vous permet de définir un bloc de code à testé pour les erreurs pendant son exécution.

L'instruction catch vous permet de définir un bloc de code à être exécuté si une erreur se produit dans le bloc try.

Les instructions JavaScript try et catch venez par deux :

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 lancera un exception (lancer une erreur).

JavaScript créera en fait un objet Error avec deux propriétés : nom et message.

L'instruction throw

L'instruction throw vous permet de créer une erreur personnalisée.

Techniquement, vous pouvez lancer une exception (lancer une erreur).

L'exception peut être une String JavaScript, un Nombre, un Booléen ou un Objet :

throw "Too big";    // throw a text
throw 500;          // throw a number

Si vous utilisez throw avec try et catch, vous pouvez contrôler le programme flux et générer des messages d’erreur personnalisés.

Exemple de validation d'entrée

Cet exemple examine les entrées. Si la valeur est fausse, 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.trim() == "") 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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.trim() == "")  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 HTML intégré validation, à l'aide de 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 finally

L'instruction finally vous permet d'exécuter du code, après avoir essayé et attraper, 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.trim() == "") 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 = "";
    }
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<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.trim() == "")  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 = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

L'objet d'erreur

JavaScript possède un objet d'erreur intégré qui fournit des informations sur l'erreur lorsque une erreur se produit.

L'objet error fournit deux propriétés utiles : nom et message.

Propriétés de l'objet d'erreur

name

Définit ou renvoie un nom d'erreur

message

Définit ou renvoie un message d'erreur (une chaîne)

Valeurs du nom d'erreur

Six valeurs différentes peuvent être renvoyées par la propriété error name :

EvalError

Une erreur s'est produite dans la fonction eval()

RangeError

Un nombre "hors limites" s'est produit

ReferenceError

Une référence illégale s'est produite

SyntaxError

Une erreur de syntaxe s'est produite

TypeError

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 EvalError indique une erreur dans la fonction eval().

Les versions plus récentes de JavaScript ne renvoient pas EvalError. Utilisez plutôt SyntaxError.

Erreur de plage

Une RangeError est générée si vous utilisez un nombre situé à l'extérieur l'éventail des valeurs juridiques.

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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
let num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Erreur de référence

Une ReferenceError est levée si vous utilisez (référencez) une variable qui n'a pas été déclaré :

Exemple

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

<p id="demo"></p>

<script>
let x = 5;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Erreur de syntaxe

Une SyntaxError est levée si vous essayez d'évaluer du code avec un erreur de syntaxe.

Exemple

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

<p id="demo"></p>

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Erreur-type

Une TypeError est levée si vous utilisez une valeur en dehors de la gamme de 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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

<p id="demo"></p>

<script>
let num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Erreur URI (Uniform Resource Identifier)

Une URIError est levée 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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

<p id="demo"></p>

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

Propriétés des objets 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 sur des sites Web publics. Ils ne fonctionneront pas dans tous les navigateurs.

Référence complète des erreurs

Pour une référence complète de l'objet Error, accédez à notre page Complete Référence d'erreur JavaScript.