Dans cette leçon vidéo en français, le formateur explique la gestion des erreurs et des exceptions en JavaScript. Il commence par distinguer les erreurs de programmation (syntaxe, fautes de frappe, références manquantes) des erreurs d'exécution liées à l'environnement ou aux ressources indisponibles, puis présente les six types d’erreurs natifs répertoriés sur MDN (EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError). Il décrit le mécanisme try‑catch‑finally : le bloc try exécute le code, toute exception déclenchée crée automatiquement un objet Error qui est capturé par catch, où l’on peut accéder aux propriétés name et message. Le bloc finally s’exécute quoi qu’il arrive. Le formateur montre comment créer et lancer des erreurs personnalisées avec throw, en illustrant plusieurs cas (nombre nul, impair, pair) et en affichant les messages via .message. Il introduit les littéraux de gabarits (template strings) d’ES6 pour simplifier la concaténation de chaînes. Enfin, il applique la gestion d’erreur à un accès DOM manquant : le code tente d’utiliser un élément inexistant, capture l’erreur, crée dynamiquement le div manquant et l’ajoute au document. Tout au long de la vidéo, le ton reste pédagogique et technique, avec un enthousiasme modéré pour encourager la bonne pratique de la gestion d’exceptions.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon sur le langage JavaScript. Aujourd'hui, nous allons voir les erreurs et la gestion des exceptions. Tous les programmeurs ont vécu l'expérience des erreurs dans leurs programmes. Les erreurs peuvent se produire pour plusieurs raisons. Dans la plupart des cas, ils sont dus à une mauvaise syntaxe, à des fautes de frappe ou à des déclarations non autorisées. Ce type d'erreurs est vite corrigé durant le cycle de développement de l'application en question. Car elles sont faciles à repérer une fois l'application exécutée. Cependant, il existe des erreurs qui ne sont pas dues au programmeur lui-même mais peut-être à l'environnement d'exécution comme sur certains navigateurs qui supportent mal telle ou telle fonction, ou encore à cause de l'appel d'une ressource qui, pour une raison, n'est plus disponible, comme l'accès à un fichier qui a été accidentellement supprimé. Le problème avec ce type d'erreurs c'est qu'elles sont difficiles à prévoir durant la phase de développement et de test, et elles peuvent faire surface plus loin dans le cycle de vie d'une application. En d'autres termes, durant le cycle de production où les erreurs sont vues du mauvais œil. Heureusement, dans les langages de programmation orientés objet, en l'occurrence en JavaScript, il y a moyen de gérer les erreurs en effectuant un traitement alternatif, c'est grâce à la gestion des exceptions. En JavaScript, une erreur est en fait une exception lancée par le moteur d'exécution. Si elle est gérée correctement, alors l'application peut poursuivre son fonctionnement. Sinon, cette même exception devient une erreur qui compromet le bon fonctionnement de celle-ci. Voyons comment ça se passe. Imaginez que dans notre code nous avons appelé une fonction qui s'appelle func. Bien entendu cette fonction n'existe pas encore. Exécutons le script. On voit qu'il y a une erreur qui survient et ça nous dit UncaughtReferenceError, c'est-à-dire une erreur de référence non rattrapée, et c'est dû à la fonction qui n'est pas définie. Alors il s'agit là d'un exemple classique du genre d'erreurs qui sont commises par manque d'attention des développeurs. De la même manière, si on exécute l'instruction c= a, c'est-à-dire que l'on va affecter la valeur de a à la variable c, ça nous dit que a n'est pas définie non plus, c'est-à-dire c'est la même chose. Ou encore, si on appelle la fonction console.log avec le message salut par exemple, mais on va commettre une erreur ici, on va mettre par exemple lode. C'est-à-dire c'est une fonction qui n'existe pas, ou bien c'est une méthode qui n'appartient pas à l'objet console. Exécutons. Alors c'est toujours une erreur, mais vous avez constaté que le type a changé. Dans ce cas c'est TypeError. En réalité il existe 6 types d'erreurs en JavaScript, et pour les voir il suffit de se rendre sur le site MDN Web Docs, comme ceci. Et ça nous donne tous les types d'erreurs disponibles. On voit qu'il y en a 6. EvalError, RangeError, ReferenceError, SyntaxError, TypeError et les erreurs qui sont dues aux URL. Afin de ne pas faire face à ce genre de problème, ce que l'on va faire c'est utiliser la gestion des exceptions grâce aux mots-clés try-catch comme ceci. On commence par le bloc try, c'est-à-dire que l'on va essayer d'exécuter l'instruction qui va suivre. Par exemple, on mettra ici la fonction func, c'est un appel de la fonction qui n'a pas été déclarée, donc forcément ça va générer une erreur. Mais à l'inverse de ce que nous avons fait tout à l'heure, cette erreur nous allons la gérer nous-mêmes. Notez que try, il va exécuter un bloc d'instructions, mais quand il va rencontrer une erreur, alors il va lancer une exception automatiquement. Et cette exception devrait être rattrapée par le développeur grâce au bloc catch, comme ça. Et comme argument, on va passer n'importe quoi, par exemple on mettra r. En réalité, c'est une instance de l'objet Error qui est lancée automatiquement par JavaScript. Et là, on va afficher un message. On mettra juste l'erreur. Alors, exécutons. Maintenant, le message a un peu changé. Ça ne me dit plus que l'erreur n'est plus rattrapée. Ça a bien été géré, mais l'affichage lui-même n'est pas très convenable. Alors, on va essayer de régler tout ça. Il faut savoir que l'objet Error contient 2 attributs, à savoir le name, c'est-à-dire le nom de l'erreur, et le message associé à l'erreur. Dans ce cas-ci, je mets name. Alors ce que je vais afficher, c'est uniquement le nom de l'erreur. Ça me donne ReferenceError, c'est-à-dire l'une des erreurs qui ont été listées dans la documentation. Comme ça. Et si je mets message, dans ce cas, ça va m'afficher le message d'erreur qui a été généré automatiquement par le moteur JavaScript. Comme ceci. Ça me dit que la fonction n'est pas définie. Il existe un troisième bloc qu'on appelle Finally qui va exécuter un bout de code quel que soit le sort des instructions qui ont précédé, c'est-à-dire que ce bloc sera toujours exécuté. Parce qu'en fait, si le bloc Try est exécuté correctement, dans ce cas Catch ne sera pas appelé, alors il sera ignoré. Et s'il y a une erreur dans le bloc Try, dans ce cas c'est le premier bloc Catch qui va prendre la main, c'est-à-dire celui qui va exécuter le reste du code. Et le bloc finally fait aussi partie de la gestion des exceptions. Il sera exécuté dans tous les cas. On mettra par exemple, on affiche ce message sera affiché dans tous les cas. Et quel que soit le sort de ce qui précède, on aura toujours ce message sur la console. Donc voilà ce qu'on a. Bien sûr, si la fonction est déjà déclarée, c'est une fonction fléchée qui va afficher le message salut sur la console. Dans ce cas, on imagine que la fonction existe, alors le bloc try ne va pas lancer d'erreur, c'est-à-dire que le bloc catch ne sera pas exécuté. Alors tout ce qu'on aura, c'est salut suivi de ce message. Et voilà. Notez qu'il est parfois possible de lancer ses propres erreurs, ou bien ce qu'on appelle des erreurs personnalisées. Et pour faire ça, on va faire appel à un autre terme, c'est throw, ou bien lancer. Imaginez que je veux générer un nombre aléatoire et je veux qu'il soit pair. Alors on va générer le nombre qu'on appellera a avec la méthode Math.random. On va multiplier par exemple par 10. Dans ce cas, ça va générer un nombre aléatoire compris entre 0 et 9,999, etc., c'est-à-dire c'est pratiquement le 10, mais on va l'arrondir en entier. Alors là, ce qui va être généré, c'est un nombre entier compris entre 0 et 10. On mettra par exemple let pour gérer la portée, mais pour que le code soit consistant, on va le mettre dans un bloc try parce parce que notez bien qu'on veut générer des nombres aléatoires mais qui sont pairs. Alors je mettrai try. Dans ce même bloc, je vais vérifier tous les tas de figures possibles, c'est-à-dire est-ce que le nombre est pair, est-ce que le nombre est impair, ou bien est-ce que le nombre est nul. Je mettrai if a est égal à 0, c'est-à-dire c'est un test d'égalité du type et de valeur. Alors ce qu'on va faire ici, c'est lancer une erreur par nous-mêmes. C'est-à-dire une erreur personnalisée. Pour faire ça, c'est grâce au mot-clé throw. Et ce qu'on en fait, c'est une instance de l'objet Error comme ceci. Et comme message, on mettra membre null. Bon, on va directement sauter au bloc catch, toujours l'objet Error. On va afficher le message, par exemple, .message directement. On va fermer, on va afficher erreur, par exemple ici erreur concaténée avec le message d'erreur que nous avons généré, c'est-à-dire nombre nul. Exécutons, on n'a rien. En fait, quand est-ce qu'on aura le message? C'est quand on aura généré un nombre qui est nul. Alors on va réduire un petit peu l'intervalle pour avoir plus de chances de tomber sur 0, on mettra par exemple 4. Exécutons. Voilà, maintenant ça donne nombre nul, c'est le message que nous avons généré nous-mêmes. Maintenant on va vérifier les autres cas de figure, else. Dans ce cas, if a modulo 2 est différent de 0, c'est-à-dire si le nombre est impair, on va encore lancer une exception. On génère une instance de l'objet Error. Dans ce cas, on mettra nombre impair. Alors, exécutons. Nombre nul, on n'a rien, c'est-à-dire que le nombre forcément est pair. Nombre nul encore, et là c'est nombre impair. Voilà. Et si jamais le nombre est vraiment pair, dans ce cas, pas la peine d'exécuter le bloc catch parce qu'il est censé que notre code est fonctionnel. Alors directement à la fin du bloc try, on mettra console.log nombre pair, c'est-à-dire qu'il n'y a pas d'erreur. Alors exécutons. Alors nombre pair, alors dans ce cas c'est le bloc try qui a été exécuté et non pas le bloc catch. Encore nombre pair, nombre nul et nombre impair, c'est-à-dire nous avons couvert tous les états de figure possibles. Alors il s'agit là d'une erreur personnalisée que nous avons lancée par nous-mêmes et c'est grâce à l'instance Error qu'on lance avec le mot-clé throw. On peut ajouter un bloc finally qui va s'exécuter dans tous les cas. On mettra par exemple fin d'exécution comme ça. Réexécutons. Alors ce message fin d'exécution sera généré dans tous les cas quel que soit le sort du bloc try-catch. Notez qu'avec ECMAScript 6, il est possible d'éviter cette concaténation de cette façon. Il existe une autre manière de déclarer les chaînes de caractères, c'est grâce aux backquotes ou bien les accents graves. On va faire comme ça, même chose ici, et on retire ça. Et pour évaluer les variables, il faut les mettre entre les accolades et on les précède par un dollar. Alors exécutons, on a le même résultat. On appelle ça un template de chaîne de caractères, c'est-à-dire ce sont des chaînes de caractères que l'on délimite par des backquotes ou bien des accents graves, et ça permet d'éviter les concaténations excessives avec le symbole+. Mais ça reste un choix, moi personnellement je préfère la méthode classique. Voilà, comme ça. Et voilà. Alors là, c'est un exemple concret d'utilisation des mots-clés try, catch, finally et throw. Maintenant, faisons un autre exemple plus concret. Imaginez que je veux accéder au DOM de cette manière. On mettra par exemple const égale document. Ça signifie que l'on a créé un objet const à partir d'un élément identifié par conteneur dans nos codes HTML. Bien sûr, dans ce code, on n'a pas cet élément-là. C'est-à-dire, une fois je voudrais accéder à cet objet, ça va générer une erreur. Par exemple, je mettrai count.innerHTML salut. De préférence, on mettra ici const pour dire c'est une constante puisque c'est un objet immuable qui ne change pas. Exécutons. Ça m'affiche une erreur, c'est normal parce que count n'a pas été trouvé. L'idée maintenant, c'est de mettre ces instructions dans le bloc try. Comme ça. Et ensuite on mettra catch, toujours error. Donc là, pas la peine de lancer l'erreur manuellement parce que le moteur JavaScript va faire directement à notre place. C'est-à-dire, si jamais une erreur, dans ce cas je peux en déduire que cet élément n'existe pas dans le HTML, alors je vais le créer. C'est-à-dire que j'ai créé l'objet count qui n'est rien d'autre qu'une div qui sera créée dans le navigateur. Ensuite, je vais lui appliquer un attribut ID avec la valeur container. Et ensuite, je vais ajouter le texte Salut. Il s'agit seulement d'une impression du texte Salut, non pas d'ajout d'un élément. Pour ajouter l'élément, on va utiliser la méthode createTextNode, mais par souci de simplicité, on va se contenter de ça. Maintenant que l'élément a été créé, on va l'ajouter au body à l'aide de la méthode appendChild. On mettra count. Alors exécutons. Maintenant c'est bon. Tout à l'heure nous avons eu une erreur, mais maintenant c'est plus le cas parce qu'avec le bloc catch, on a vraiment créé l'objet div identifié par container. Comme ceci. Voilà, elle est bien là. Alors j'espère que vous avez compris comment gérer les erreurs en JavaScript grâce à la gestion des exceptions en utilisant principalement les mots-clés try-catch. Et au choix, on peut utiliser aussi throw pour lancer des erreurs personnalisées, ou bien le mot-clé finally pour exécuter un traitement dans tous les cas. Merci pour votre attention et à la vidéo prochaine.
