Apprenez à programmer avec JavaScript

Nous avons vu ensemble comment vérifier la valeur d’un champ. Mais comment réagir lorsque ce champ ne correspond pas à ce qu’on attendait ? Cela peut être le cas lorsque l’utilisateur a oublié de renseigner le nom, ou lorsqu’il a mal écrit son e-mail…

C’est ce que nous découvrirons ensemble dans ce dernier chapitre, à travers deux méthodes :

• gérer les erreurs courantes grâce à if / else ;

• centraliser la gestion des erreurs grâce aux exceptions try, catch et throw. 

Utilisez des if / else pour gérer les erreurs courantes

La manière la plus intuitive de gérer les erreurs est d’utiliser les techniques que nous maîtrisons déjà : les if / else.

Pour illustrer cela, je vous propose d’écrire un code qui provoque une erreur, puis de voir ensemble comment gérer cette erreur.

let maVariable = document.getElementById("idInexistant")
maVariable.createElement("div")

Pour gérer ce type d’erreur, nous pouvons tester la valeur de maVariable, et nous assurer qu’elle n’est pas nulle :

let maVariable = document.getElementById("idInexistant")

if (maVariable === null) {
    console.log("L'élément n'existe pas");
} else {
    maVariable.createElement("div")
    // suite du traitement...
}

Dans ce code, l’instruction maVariable === null permet de tester si maVariable contient bien un élément récupéré avec getElementById.

Ce code fonctionne très bien. Mais il est composé de trois parties :

• les déclarations ;

• une portion pour gérer l’erreur ;

• le résultat.

En réalité, il est plutôt conseillé de placer la gestion de l’erreur ailleurs, de manière à avoir une structure en deux temps : déclaration puis résultat. Concrètement, on essaie d’exécuter ce code, et en cas de problème, on appelle un bloc de code ailleurs pour gérer l’erreur.

Cela permet de distinguer d’un côté, notre exécution “quand tout marche bien”, et de l’autre la gestion de nos erreurs. Et vous savez quoi ? C’est exactement ce que nous pourrons faire grâce aux instructions try / catch. 😃

Centralisez la gestion des erreurs

Utilisez les instructions try / catch

Réécrivons l’exemple de la section précédente avec try / catch :

try {
    let maVariable = document.getElementById("idInexistant")
    maVariable.createElement("div")
    // suite du traitement
} catch {
    console.log("Il y a eu une erreur dans le bloc try");
}

Dans cette nouvelle version, le code principal se passe dans la section try. En cas d’erreur, le code s’arrêtera immédiatement, et le catch prendra le relais.

D’ailleurs, souvenez-vous de l’erreur dans le navigateur :

Il était écrit “Uncaught” (non-attrapée, en français). L’erreur n'avait pas été “attrapée” par un catch, donc elle apparaissait telle quelle dans le navigateur.

Utilisez l’instruction throw

Try sert à exécuter du code et catch à attraper les erreurs. Cela marche bien avec des erreurs JavaScript qui sont conçues pour lancer des exceptions. Cependant, il arrive que nous voulions créer nos propres fonctions, qui lancent une exception en cas d’échec.

Dans notre projet, nous avons par exemple vérifié que le champ nom n’était pas vide. Utilisons maintenant try / catch et throw pour gérer ces erreurs :

function verifierChamp(champ) {
    // Si le champ est vide, on lance une exception
    if (champ.value === "") {
        throw new Error(`Le champ ${champ.id} est vide`)
    }
}

Dans ce code :

• j’ai une fonction qui prend un champ en paramètre ;

• si le champ est vide, alors je lance une exception que je crée grâce à new Error ;

• je passe à cette erreur un paramètre : le message d’erreur. 

Ainsi, lorsque je vais attraper cette exception, je pourrai me servir de ce message pour afficher le texte que je veux 😉.

Voyons maintenant comment utiliser cette méthode pour tester un champ nom, un champ prenom et un champ surnom :

let form = document.querySelector("form")

form.addEventListener("submit", (event) => {
    try {
        event.preventDefault()

        let baliseNom = document.getElementById("nom")
        verifierChamp(baliseNom)

        let balisePrenom = document.getElementById("prenom")
        verifierChamp(balisePrenom)

        let baliseSurnom = document.getElementById("surnom")
        verifierChamp(baliseSurnom)

        // traitement du formulaire
        // ...
    } catch (error) {
        console.log("Une erreur est survenue : " + error.message)
    }
})

Dans ce code :

• j’écoute l’événement submit de mon formulaire ;

• je vérifie les champs un par un ;

• En cas de problème, si un des champs est vide, le code va directement exécuter la partie catch.

Récapitulons en vidéo

Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :

À vous de jouer

Nous pouvons désormais vérifier les champs dans notre projet. Cependant, l’utilisateur ne reçoit pour l’instant aucune notification lorsqu'un problème survient. L’objectif de cet exercice est d’utiliser try catch pour prévenir l’utilisateur si un champ est mal renseigné. 

Étape 1 : scindez la fonction lancerJeu

La fonction lancerJeu devient un petit peu trop grande, d’autant plus si nous voulons en plus ajouter de la gestion d’erreur. Votre première étape consiste donc à alléger la fonction, en déportant le traitement du formulaire : 

• Créez une fonction gererFormulaire. Cette fonction va prendre en paramètre le score à envoyer, et s’occuper de gérer le formulaire.

• Utilisez cette fonction dans lancerJeu. 

Étape 2 : affichez les erreurs

• Modifiez les fonctions validerNom et validerEmail : elles ne vont plus retourner true ou false, mais se contenter de lancer une exception en cas d’erreur, avec un message expliquant le problème.

Par exemple “Le nom est trop court” ou “L’e-mail n’est pas valide”.

• Modifiez la méthode gererFormulaire pour ajouter un try catch qui affiche “erreur” dans la console. 

• Créez une nouvelle fonction afficherMessageErreur qui prendra en paramètre le message d’erreur à afficher. Pour afficher ce message, ajoutez en JavaScript un span à la fin de la div .popup. 

• Dans le bloc catch, appelez la fonction afficherMessageErreur pour afficher l’erreur.

• Dans le bloc try, appelez cette fonction pour qu’elle efface le message d’erreur. 

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

• En tant que développeur, veillez à traiter toutes les erreurs qui pourraient survenir dans le code : 

  • grâce à if / else pour les erreurs courantes ;

  • en centralisation la gestion des erreurs grâce aux exceptions try, catch et throw pour les situations plus complexes.

• Le bloc try catch fonctionne en deux parties :

  • un bloc try qui essaie d’exécuter une portion de code ;

  • un bloc catch qui est lancé si jamais un élément du bloc try a lancé une exception.

• Vous pouvez utiliser throw new Error(message) pour lancer vous-même vos exceptions.

Ce cours s’achève ici ! Bravo à vous de l’avoir suivi jusqu’au bout ! Apprendre à programmer n’est pas facile, mais avec un peu d'entraînement, je suis certain que vous pourrez faire des étincelles !

La bonne nouvelle, c’est que vous maîtrisez désormais les bases. Le plus dur est fait : vous savez déjà programmer.

Mais ce n’est pas pour autant la fin du chemin. C’est à vous maintenant d’essayer, d’expérimenter, de coder, et d’aller explorer les autres possibilités offertes par JavaScript. Je vous conseille également de suivre le cours Créez des pages web dynamiques avec JavaScript, pour monter en compétences dans ce langage de programmation.

Merci du temps que vous avez consacré à suivre ce cours, et bonne chance pour la suite de vos projets !