Tutoriel JavaScript

JS ACCUEIL Présentation de JS JS Où aller Sortie JS Déclarations JS Syntaxe JS Commentaires JS Variables JS JS Let Const JS Opérateurs JS Arithmétique JS Affectation JS Types de données JS Fonctions JavaScript Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherche de chaîne JS Modèles de chaîne JS Numéros JS Méthodes de nombre JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const tableau JS Dates JS Formats de date JS Méthodes d'obtention de date JS Méthodes de définition de date JS JS Mathématiques JS Aléatoire Booléens JS Comparaisons JS Conditions JS Commutateur JS Boucle JS pour Boucle JS pour dans Boucle JS pour de Boucle JS pendant Pause JS Itérables JS Ensembles JS Cartes JS Type de JS Conversion de type JS JS au niveau du bit JS RegExp Erreurs JS Portée JS JS Levage Mode JS strict JS ce mot clé Fonction flèche JS Cours JS JSJSON Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performances JS Mots réservés JS

Versions JavaScript

Versions JavaScript JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historique JS

Objets JS

Définitions d'objet Propriétés de l'objet Méthodes d'objet Affichage d'objet Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

Fonctions JavaScript

Définitions des fonctions Paramètres de fonction Appel de fonction Appel de fonction Fonction Appliquer Fermetures de fonction

Cours JS

Introduction de classe Héritage de classe Classe Statique

JS asynchrone

Rappels JS JS asynchrone JS promet JS asynchrone/en attente

JS HTML DOM

Introduction DOM Méthodes DOM Documents DOM Éléments DOM HTML DOM Formulaires DOM DOM CSS Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds DOM

Nomenclature du navigateur JS

Fenêtre JS Écran JavaScript Emplacement JS Historique JS Navigateur JS Alerte contextuelle JS Calendrier JS Cookies JavaScript

API Web JS

Présentation de l'API Web API des formulaires Web API d'historique Web API de stockage Web API de travail Web API de récupération Web API de géolocalisation Web

JS AJAX

Introduction à AJAX AJAX XMLHttp Requête AJAX Réponse AJAX Fichier XML AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples AJAX

JSJSON

Présentation JSON Syntaxe JSON JSON contre XML Types de données JSON Analyse JSON Chaîne JSON Objets JSON Tableaux JSON Serveur JSON JSON PHP HTML JSON JSON JSONP

JS contre jQuery

Sélecteurs jQuery jQuery HTML jQuery CSS jQuery DOM

Graphiques JS

Graphiques JS Canevas JS JS Complot JS Chart.js Graphique Google JS JS D3.js

Exemples JS

Exemples JS JS HTML DOM Entrée HTML JS Objets HTML JS Événements HTML JS Navigateur JS Éditeur JavaScript Exercices JS Questionnaire JS Certificat JS

Références JavaScript

Objets JavaScript Objets DOM HTML


Instruction de commutation JavaScript


L' switchinstruction est utilisée pour effectuer différentes actions en fonction de différentes conditions.


L'instruction JavaScript Switch

Utilisez l' switchinstruction pour sélectionner l'un des nombreux blocs de code à exécuter.

Syntaxe

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Voilà comment cela fonctionne:

  • L'expression switch est évaluée une fois.
  • La valeur de l'expression est comparée aux valeurs de chaque cas.
  • S'il y a correspondance, le bloc de code associé est exécuté.
  • S'il n'y a pas de correspondance, le bloc de code par défaut est exécuté.

Exemple

La getDay()méthode renvoie le jour de la semaine sous la forme d'un nombre compris entre 0 et 6.

(dimanche=0, lundi=1, mardi=2 ..)

Cet exemple utilise le numéro du jour de la semaine pour calculer le nom du jour :

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

Le résultat de la journée sera :

Saturday


La pause

Lorsque JavaScript atteint un mot- break clé, il sort du bloc de commutation.

Cela arrêtera l'exécution à l'intérieur du bloc de commutation.

Il n'est pas nécessaire de casser le dernier cas dans un bloc de commutation. Le bloc se casse (se termine) là de toute façon.

Remarque : Si vous omettez l'instruction break, le cas suivant sera exécuté même si l'évaluation ne correspond pas au cas.


Le mot clé par défaut

Le defaultmot clé spécifie le code à exécuter s'il n'y a pas de correspondance de casse :

Exemple

La getDay()méthode renvoie le jour de la semaine sous la forme d'un nombre compris entre 0 et 6.

Si aujourd'hui n'est ni samedi (6) ni dimanche (0), écrivez un message par défaut :

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

Le résultat du texte sera :

Today is Saturday

Le defaultcas ne doit pas nécessairement être le dernier cas dans un bloc de commutation :

Exemple

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

Si defaultce n'est pas le dernier cas dans le bloc de commutation, n'oubliez pas de terminer le cas par défaut par une pause.


Blocs de code communs

Parfois, vous souhaiterez que différents cas de commutation utilisent le même code.

Dans cet exemple, les cas 4 et 5 partagent le même bloc de code, et 0 et 6 partagent un autre bloc de code :

Exemple

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

Détails de commutation

Si plusieurs cas correspondent à une valeur de cas, le premier cas est sélectionné.

Si aucun cas correspondant n'est trouvé, le programme continue avec l' étiquette par défaut .

Si aucune étiquette par défaut n'est trouvée, le programme continue à l'instruction ou aux instructions après le commutateur .


Comparaison stricte

Les cas de commutation utilisent une comparaison stricte (===).

Les valeurs doivent être du même type pour correspondre.

Une comparaison stricte ne peut être vraie que si les opérandes sont du même type.

Dans cet exemple, il n'y aura pas de correspondance pour x :

Exemple

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

Testez-vous avec des exercices

Exercer:

Créez une switchdéclaration qui alertera "Bonjour" si fruitsc'est "banane", et "Bienvenue" si fruitsc'est "pomme".

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}