Quand utiliser le commutateur Instruction pour programmer HTML avec JavaScript - mannequins

Bien que l'instruction if soit couramment utilisée pour des choix simples en JavaScript, l'instruction switch est utilisée pour gérer une gamme de choix. Un commutateur fournit une manière élégante de manipuler des données variables. Il y a deux formes d'instruction switch.

Le premier fournit les moyens de travailler avec une gamme prédéfinie de choix, et le second fournit les moyens de travailler avec des données pouvant contenir des informations inattendues. Cette seconde forme rend l'instruction switch particulièrement utile car les utilisateurs sont imprévisibles, et cette seconde forme peut prendre en compte de tels utilisateurs.

Comment créer un commutateur de base en JavaScript

De nombreux développeurs préfèrent passer des instructions sur des instructions if imbriquées, car les instructions switch sont plus faciles à comprendre. Une instruction switch nécessite également moins de frappe pour obtenir le même résultat.

function CheckChoice (option) {// Vérifie que l'entrée est un nombre. if (typeof (option)! = "nombre") {// Affiche une boîte de dialogue d'erreur. alert ("Veuillez fournir une entrée numérique!"); // Retourne sans rien faire de plus. return;} // Assure que cette option est réellement un entier. var Sélectionnez = Math. rond (option); // Vérifie que l'entrée est dans la plage. if ((Select 3)) {// Affiche une boîte de dialogue d'erreur. alert ("La valeur fournie est hors limites!"); // Retourne sans rien faire de plus. return;} // Faire une sélection. commutateur (Select) {cas 1: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi l'élément A."; Pause; cas 2: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi le point B."; Pause; cas 3: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi le point C."; break}}

Que vous utilisiez une instruction switch ou une instruction imbriquée if, vous devez fournir une logique pour vous assurer que l'entrée est correcte, sinon votre application échouera probablement. Dans ce cas, l'échec équivaut à ce que l'application ne fasse rien du tout, mais le concept d'échec est le même. Vérifiez toujours vos entrées pour les valeurs correctes.

Certaines personnes ont du mal à comprendre où se trouve la valeur de vérité dans l'instruction switch. L'instruction switch requiert une variable, qui est Select dans ce cas. Chaque clause case effectue une comparaison avec la variable. Par conséquent, vous pouvez voir la première clause case comme suit: case Select == 1.

Lorsque vous utilisez des instructions switch, vous devez également inclure une instruction break à la fin de chaque segment de traitement. La déclaration de rupture dit simplement que l'affaire a été évaluée et traitée.

Si vous laissez la déclaration break, le code continue avec l'instruction exécutable suivante dans le cas suivant.Cette condition est connue sous le nom de fall-through, et certains développeurs l'utilisent comme technique de programmation pour combiner des tâches et réduire la quantité de code requise. L'utilisation de cette technique est dangereuse car les autres développeurs peuvent ne pas se rendre compte que la procédure d'intercommunication est nécessaire et peuvent donc ajouter une déclaration d'interruption pour vous.

Comment utiliser l'option par défaut de JavaScript

L'instruction switch inclut une autre clause, la clause default. La clause par défaut est semblable à la clause else pour l'instruction if. Lorsqu'aucune des clauses case n'est vraie, le code exécute le code dans la clause default. L'exemple suivant utilise la clause default pour modifier le fonctionnement de l'exemple.

function MakeAChoice () {// Demande à l'utilisateur de fournir une entrée. var Selection = prompt ("Tapez une option de menu."); // Convertit la chaîne en un nombre. var IntSelect = parseInt (Sélection); // Vérifie que l'utilisateur a fourni un nombre. if (isNaN (IntSelect)) {// Afficher une boîte de dialogue d'erreur. alert ("Veuillez fournir une entrée numérique!"); // Retourne sans rien faire de plus. return;} // Appelle la fonction de sélection. CheckChoice (IntSelect);}

Au lieu de fournir une myriade de boutons, cet exemple s'appuie sur la boîte de dialogue prompt () pour obtenir des entrées de l'utilisateur. Le résultat est l'interface du nettoyeur. Lorsque l'utilisateur clique sur Choisir un élément de menu, l'application affiche une boîte de dialogue d'invite () dans laquelle l'utilisateur peut entrer une valeur.

Vous pourriez penser que c'est une recette pour un désastre, mais l'application effectue les mêmes vérifications pour la validité des entrées qu'auparavant, mais elle utilise une technique différente.

Dans ce cas, l'application utilise partInt () pour vérifier que l'entrée est un nombre et pour convertir le nombre en entier. Lorsque l'entrée est incorrecte, IntSelect est défini sur Not a Number (NaN). L'exemple détecte ce problème en utilisant la fonction isNaN (). Lorsqu'un utilisateur fournit une entrée numérique, l'application appelle CheckChoice (), qui est affiché dans le code suivant:

function CheckChoice (option) {// Effectuer une sélection. commutateur (option) {cas 1: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi l'élément A."; Pause; cas 2: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi le point B."; Pause; cas 3: document. getElementById ("Résultat"). innerHTML = "Vous avez choisi le point C."; Pause; par défaut: // Affiche une boîte de dialogue d'erreur. alert ("La valeur fournie est hors limites!"); break}}

Vous vous demandez peut-être où se trouve le reste du code, mais c'est tout ce dont vous avez besoin. L'instruction switch vérifie les valeurs 1, 2 ou 3. Lorsque les valeurs sont en dehors de cette plage, le code utilise la clause default, qui contient le message d'erreur hors plage. Comme vous pouvez le voir, ces deux fonctions rendent les tâches de travail avec le menu beaucoup plus simples pour le développeur et l'utilisateur.