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

LE SWITCH EN JAVASCRIPT

Cas d’utilisation

Parfois, dans vos conditions, vous voudrez pouvoir dissocier de nombreux cas afin de traiter chacun d’entre eux différemment.

Par exemple, on peut imaginer renvoyer un message différent à des élèves selon la note obtenue par ceux-ci à un test.

Pour faire cela, on peut bien évidemment toujours utiliser un if… else if… else. Cependant, il va parfois être plus judicieux d’utiliser une instruction switch.

Le switch est semblable à une condition dans laquelle on va pouvoir générer autant d’issues que l’on souhaite.

Attention cependant à une limitation importante du switch : cette instruction ne peut tester que l’égalité de valeurs et non pas l’inégalité.

Exemple d’utilisation du switch

Imaginons donc que l’on souhaite renvoyer un message différent pour chaque heure entre 8h et 12h.

Pour cela, nous allons avoir besoin d’une variable heure. On va ensuite switcher sur cette valeur.

Premier exemple d’utilisation du switch

Essayer ce code !

Le switch n’est pas très compliqué à comprendre à partir du moment où vous avez compris les conditions, car le principe est le même et seule l’écriture change.

Dans notre cas, nous « switchons » donc sur notre variable heure, ce qui signifie que notre variable heure va être notre variable de test.

Dans un switch, nous allons créer des cas (case) pour chaque issue que l’on souhaite traiter.

Ici, on souhaite renvoyer un message différent selon que notre variable contienne les valeurs 8, 9, 10, 11 ou 12. On crée donc les cas correspondants.

Si heure contient la valeur 8, par exemple, on rentre dans le case 8 : et le code qui se trouve à l’intérieur de celui-ci est exécuté.

Dans le cas présent, si l'on souhaite faire un parallèle avec nos conditions, on peut considérer que le premier cas correspond à un if (heure === 8), les cas suivants à des else if et le dernier à un else.

Notez bien qu’il faut préciser un « : » après chaque utilisation du mot case.

J’attire également votre attention sur deux autres choses : l’utilisation du mot clef break ainsi que du default en fin de switch.

Vous devez absolument préciser un break pour chaque issue créée afin de sortir du switch. Si vous oubliez le break, le switch va lire et exécuter le code contenu dans chaque case à la suite, ce qui n’est pas du tout le comportement attendu.

Finalement, vous devez également créer un cas par défaut (default). Si notre variable contient une valeur non prise en charge par les cas ci-dessus, alors le code contenu dans default sera exécuté.

Il n’est pas nécessaire de mentionner de break dans le default car celui-ci doit toujours être placé en fin de switch.

If… else if… else ou switch ?

Comme cela a été précisé en début de partie, nous pouvons arriver à des résultats similaires en utilisant le switch ou une condition de type if… else if… else.

Cependant, si les issues sont nombreuses et si vous ne souhaitez tester que l’égalité de valeurs, le switch peut être préféré à une condition « classique ».

Chapitre précédent

Chapitre suivant