JavaScript : gestion des exceptions

Une exception en JavaScript c'est une erreur qui se produit en cours d'exécution. On dit que l'erreur déclenche une exception OU que l'erreur lève une exception.

soit il ne traite pas l'exception et dans ce cas son script plante !
soit il traite l'exception et dans ce cas son script affiche l'erreur mais surtout il se poursuit !

Pour gérer les erreurs il faut utiliser la structure try ... catch ....

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Le code

...
<button>Appel script !</button>
<script>
document.querySelector('button').onclick =function()
{
	var age = prompt("saisir votre âge sous forme d'un entier"); 
	var age = parseInt(age); 
	var annee_naiss = 2024 - age ; 
	alert("Vous êtes né en :" + annee_naiss); 
}	
...

Le rendu

Saisissez 40 : le programme affiche que vous êtes nés en 1984
Saisissez 4O (le chiffre 4 puis la lettre O) : le programme affiche que vous êtes né en 2020 ...
Saisissez "cinquante" le programme affiche NaN puis 'plante'.

Même thème avec gestion de l'erreur

Avec emploi cette fois de la structure try ... catch ...

Le code du document HTML

...
<button>Appel script</button>
<h3 id ="message"></h3>
...
</script>
document.querySelector('button').onclick =function()
{
	const message = document.getElementById("message");
	try 
	{
		var age = prompt("saisir votre âge sous forme d'un entier"); 
		if(isNaN(age)) throw "vous n'avez pas saisi un entier" ;
		var age = parseInt(age); 
		var annee_naiss = 2024 - age
		alert("Vous êtes né en :" + annee_naiss); 
	}
	catch(err) 
	{
		message.innerHTML = err;
	}
} // fin fonction	
...

Notez dans le code HTML un élément H3 identifié "message" et vide de tout contenu.

Notez l'emploi dans le script de l'instruction throw qui génère un message d'erreur personnalisé si la saisie dans "age" n'est pas une suite de chiffres.
Ce message est capturé par le bloc catch et affiché dans l'élément qui était vide.
La méthode throw(expression) permet donc de créer des messages d'erreurs personnalisés qui sont ensuite capturés dans le bloc catch.

Le rendu

Saisissez 4O (le chiffre 4 puis la lettre O : le programme n'affiche pas de résultat abérrant mais affiche : "Vous n'avez pas saisi un entier".
Saisissez "cinquante" le script affiche aussi un message d'erreur
Mais dans les deux cas, le script ne 'plante' plus ; on peut retenter une saisie qui sera cette fois correcte.

Exemple avec utilisation d'une expression régulière

La comparaison de la chaine saisie à une expReg peut éviter de nombreux tests.

Le code du document HTML

...
<button>Appel du script</button>
<h3 id ="message"></h3>
<script>
document.querySelector('button').onclick =function()
{
	let message = document.getElementById("message");
	let exp1 = new RegExp("^[A-z]{8,12}$"); 
	try 
	{
		var pseudo = prompt("Saisir votre pseudo - entre 8 et 12 lettres - casse indifférente "); 
		if (!exp1.test(pseudo)) throw "pseudo incorrect !"; 
		message.innerHTML = "Votre pseudo : " + pseudo; 
	}
	catch(err) 
	{
		message.innerHTML = err ; 
	}
} // fin fonction anonyme
...

La saisie est comparée à une expression régulière.

la longueur de la saisie
la présence uniquement de lettres majuscules et minuscules dans cette saisie

Le rendu

Saisies via des éléments de formulaire

La saisie de données via la fonction prompt() de JavaScript n'est pas ergonomique.
Dans les deux exemples qui suivent les saisies sont effectuées via des éléments de formulaire : input, textarea, select

Premier exemple

L'utilisateur doit saisir dans un input une valeur numérique comprise entre 5 et 10.
Une erreur de saisie éventuelle doit lui être signalée.

Le code HTML

...
<p><input id="nombre" type="text" placeholder ="saisir un numérique entre 5 et 10">
<p><button type ="button">Validez </button>
<p><label>Résultat : </label><output id ="affichage"></output>
<h3 id ="message"></h3>
...

J'utilise des éléments input, button & output en dehors du conteneur FORM. Oui c'est possible avec HTML5.
Notez que les éléments input & output disposent de l'attribut ID.

Le script

document.querySelector('button').onclick =function()
{
  const message = document.getElementById("message");
  var nombre = document.getElementById("nombre").value;
  message.innerHTML = "" ;
  try 
  {
    if(nombre == "") throw "Le champ est vide";
    if(isNaN(nombre)) throw "La saisie n'est pas numérique";
	if(nombre > 10) throw "Nombre saisi trop grand";
    if(nombre < 5) throw "Nombre saisi trop petit";
	document.getElementById('affichage').value = nombre*5; 
   }
  catch(err) {message.innerHTML = err; }
} // fin fonction anonyme

Le message d'erreur personnalisé est injecté dans l'élément H3 identifié "message".
Si absence d'erreur de saisie, affichage du produit de la saisie par 5 dans le champ "affichage".

Le rendu

Surtout faites des erreurs de saisie : laisser le champ vide, saisir une suite de lettres, etc.

Deuxième exemple

input

d'un pseudo
d'un nom
une adress mail

Le code CSS & HTML

<style>
	input:valid {color : lime;}
	input:invalid {color : red;}
...
<form name ="f1">
<p><input name="pseudo" type="text" required
	placeholder ="saisir un pseudo : entre 8 et 12 caract. alphabétiques"
	pattern ="^[A-z]{8,12}$" >
<p><input name ="nom" type ="text" placeholder ="saisir un nom, lettres : MAJ & min" required 
	 pattern ="^[A-z]{2,30}$" >
<p><input type="text" name="email" placeholder ="saisir adresse mail : un arobase suivi d'un point " required 
	pattern ="^[A-z0-9]{2,}@[A-z0-9]{2,}[\.]{1}[A-z]{2,}$" >
<p><button type ="button">Validez </button>
<p><output name ="affichage"></output>
</form>
<h3 id ="message"></h3>
...

Il ne s'agit pas d'un formulaire de soumission : le bouton d'envoi n'est pas de type "submit" ; les attributs method & action de l'élément form sont absents !
Dans chaque input un attribut pattern a pour valeur une expression régulière.
Ces attributs permettent une saisie assistée. Ainsi si chaque saisie coïncide strictement avec son regExp elle apparait en vert (sinon la saisie reste en rouge).
Les erreurs de saisie ne sont pas bloquantes (n'empêchent pas l'envoi) car le bouton n'est pas de type "submit". Aussi faut-il de nouveau contrôler les saisies dans le script JS.

Le script

var message = document.getElementById('message'); 
document.querySelector('button').onclick = function()
{
  let regpseudo = new RegExp("^[A-z]{8,12}$");
  let regnom = new RegExp("^[A-z]{2,30}$");
  let regemail = new RegExp("^[A-z0-9]{2,}@[A-z0-9]{2,}[\.]{1}[A-z]{2,}$"); 
  
  try 
  {
	if(!regpseudo.test(f1.pseudo.value)) throw "le pseudo invalide" ; 
	if(!regnom.test(f1.nom.value)) throw "le nom invalide" ;
	if(!regemail.test(f1.email.value)) throw "l'adresse mail invalide" ;
	f1.affichage.value = f1.nom.value + " surnommé " + f1.pseudo.value 
		+ " email :  " + f1.email.value;
	message.innerHTML =""; 
  }
  catch(err) {message.innerHTML = err; } 
} // fin fonction

Notez comment les champs sont identifiés dans le script : nomFormulaire.nomChamp
On retrouve dans le script les mêmes regExp que dans le formulaire.

Je n'en dis pas plus sur les expressions régulières.
Je vous renvoie au chapitre qui traite en détail ce sujet : Les regExp

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

JavaScript : gestion des exceptions

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Le code

Le rendu

Même thème avec gestion de l'erreur

Le code du document HTML

Le rendu

Exemple avec utilisation d'une expression régulière

Le code du document HTML

Le rendu

Saisies via des éléments de formulaire

Premier exemple

Le code HTML

Le script

Le rendu

Deuxième exemple

Le code CSS & HTML

Le script

Le rendu