Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

GESTION DES ERREURS EN JAVASCRIPT

Pourquoi gérer les erreurs ?

Lorsqu’un code est exécuté, il y a toujours une chance pour qu’une erreur survienne.

Les erreurs peuvent provenir de différents facteurs : une erreur faite dans le code par le développeur, une mauvaise valeur envoyée par l’utilisateur, un facteur de l’environnement interne déficient, etc.

Il va donc être important de gérer les cas d’erreur potentiels afin d’éviter que tout le code autour de l’erreur plante.

Comment gérer les erreurs ?

La meilleure façon de gérer une potentielle erreur va être d’utiliser trois blocs try, catch et throw.

Le principe va être le suivant : tout d’abord, on teste un code dans le bloc try. Si le code est valide, il sera exécuté normalement.

Si une erreur est détectée dans le code lors de son exécution, on va lancer ou jeter (throw) une exception. Le bloc throw va nous permettre de créer un message d’erreur personnalisé et d’obtenir des informations sur l’erreur rencontrée.

Finalement, on va attraper (catch) notre erreur / exception dans notre bloc catch afin d’afficher les informations relative à celle-ci.

Ce dernier bloc va également généralement contenir le code à exécuter en cas d’erreur.

Try… throw… catch : la pratique

Imaginons que nous demandions à nos utilisateurs de rentrer un nombre compris entre 1 et 10 sur notre site.

On veut s’assurer que les données envoyées vont bien correspondre à un nombre valide.

Dans le cas où l’utilisateur envoie autre chose qu’un nombre, ou si le nombre envoyé n’est pas dans le bon intervalle, on veut déclencher une erreur.

Essayons de créer le script correspondant. Du côté HTML, on va se contenter d’un élément input et d’un bouton de validation.

Ensuite, on JavaScript, nous allons commencer par attacher un gestionnaire d’évènements click à notre bouton afin de pouvoir récupérer et tester la valeur envoyée.

Nous allons effectuer les tests de validité à l’intérieur de la fonction liée à notre évènement clic.

Voici le script que je vous propose :

Gestion des erreurs en JavaScript

Essayer ce code !

N’hésitez pas à manipuler et à tester ce script avec différentes valeurs afin de bien comprendre comment il fonctionne.

Comme on l'a dit plus haut, on commence ici par tester la valeur envoyée à l’intérieur d’un bloc try.

Dans le cas où la valeur n’est pas bonne, on lance (throw) une exception avec un message décrivant l’erreur.

Si la valeur est bonne (else), on affiche le message « Nombre ok ».

Finalement, si une exception a été lancée, on la récupère dans un objet e et on affiche le message correspondant dans notre paragraphe.

Un quatrième bloc optionnel : le bloc finally

Le bloc finally est optionnel. Il permet d’exécuter un code quelque soit le résultat suite aux blocs try et catch.

On peut par exemple utiliser finally pour réinitialiser le champ où l’utilisateur rentre la valeur.

Utilisation du bloc finally en JavaScript

Essayer ce code !

Attention : réinitialiser la valeur de x ici ne servirait à rien car on n’a fait qu’affecter la valeur entrée dans le champ à x.

Il faut bel et bien réinitialiser la valeur du champ en soi.

Chapitre précédent

Chapitre suivant