Premiers pas en JavaScript
condition... SWITCH
cuy copyleft
  See You Why?  

 


Test : conditions complexes (17.9) | | SWITCH expression (18.2)

Contenu

 

 

I. L'instruction SWITCH

De nombreux cas peuvent se présenter où les tests à effectuer n'ont pas comme seules réponses possibles vrai ou faux. Les tests peuvent souvent avoir différentes valeurs, toutes à traiter de façon (quasi) équivalentes. Si un de vos élèves répond à une question, votre réaction pourra être différente selon que la réponse émane de Frédéric, Kathia ou Siham...

Ce chapitre a pour but de modifier les procédures selon la valeur qu'aura une variable JS... et vous savez qu'une variable peut contenir des informations aussi diverses que le résultat à un test, le prénom de l'internaute qui visite vos pages, la réponse qu'il aura donné à une de vos questions, son âge, etc.

"Pas de problèmes" me direz-vous, "je connais l'instruction IF, il suffit de la répéter autant de fois que de valeurs prévues pour cette variable". Je ne pourrais que vous féliciter pour cette approche de programmation, mais JS a prévu une procédure plus simple selon la valeur que prendra une variable.

A. la syntaxe de l'instruction SWITCH

Puisqu'il s'agit d'appliquer des procédures différentes selon le cas que prendra une variable (ici, elle s'appelle ma_variable...) voyons la syntaxe du début de l'instruction SWITCH (que l'on pourrait traduire par : "selon la valeur qu'aura la variable ma_variable") :

switch (ma_variable) {
     // ici on listera les diverses valeurs que pourront
     // prendre la variable ma_variable
}

Il ne reste dès lors plus qu'à envisager les différents cas que pourraient prendre la variable... et comme il s'agit de cas, la syntaxe sera :

switch (ma_variable) {
     case "poireaux à étuver" :
          document.writeln("actuellement 0,99 € la botte de 1,2 kg,
              soit à 0,83 €/kg.");
          break;
     case "clémentines" :
          document.writeln("d'origine espagnole à 3,99 € la caisse de 2,3 kg,
              soit à 1,73 €/kg.");
          break;
     case "oignons" :
          document.writeln("des Pays-Bas à 1,19 € la caisse de 5 kg,
               soit en promo à 0,24¢ €/kg.");
          break;
     case "brocoli" :
          document.writeln("espagnol à 0,69 €/500g,
               ou au prix promotionnels de 1,38 € le kilo.");
          break;
     case "melons" :
     case "ananas" :
          document.writeln("de Costa Rica à 1,79 €/pièce.");
          break;
     case "tomates en grappe" :
          document.writeln("en vrac à 1,29 €/kilo.");
          break;
     default :
          document.writeln("Désolé,
                les autres fruits et légumes ne sont pas en promotion aujourd'hui.");
}

Break, pourquoi ce break après chaque cas envisagé... ne l'oubliez pas, il permet d'arrêter de consulter les autres cas dès qu'un cas favorable est rencontré, mais surtout, il marque la fin des instructions à exécuter dans ce cas favorable. À défaut de l'insérer, la consultation des autres cas se poursuit... et l'exécution des instructions des autres cas se fait aussi, ce qui souvent génère une erreur quasi impossible à détecter.
Cependant, cet oubli peut être volontaire : ainsi, si ma_variable prend la valeur "melons", ce sont les instructions relatives à "ananas" qui s'exécuteront... et qui supposent qu'ils ont même origine et même prix...
"Mais le dernier break est inutile, alors..." retorquera le lecteur attentif... et il a raison, mais mieux vaut un break inutile que l'oubli de 25 utiles... si les cas possibles sont nombreux.

default: c'est quoi ce dernier cas ? Au cas où aucun des cas prévus n'est rencontré, l'instruction default: est la réponse à tous les autres cas... "à défaut des autres cas".

Revoyons cet exemple avec des variables numériques.

B. SWITCH avec variables numériques

Ce même SWITCH (au cas où...) est aussi accessible pour des variables numériques, en voici d'ailleurs un exemple qui met en place une redirection, en fonction du jour de la semaine :

   var dateobj=new Date();
   var today=dateobj.getDay();
   switch(today){
      case 1:
         window.location="lundi.htm";
         break;
      case 2:
         window.location="mardi.htm";
         break;
      case 3:
         window.location="mercredi.htm";
         break;
      case 4:
         window.location="jeudi.htm";
         break;
      case 5:
         window.location="vendredi.htm";
         break;
      case 6:
         window.location="samedi.htm";
         break;
      case 0:
         window.location="dimanche.htm";
         break;
}

Quelques explications s'imposent.

var dateobj=new Date(); est une instruction de déclaration d'une variable, ça vous le saviez déjà ;
le new indique la création d'un objet (ou tableau) qui sera susceptible d'avoir des propriétés et des méthodes... c'est ce que nous avions dit en Introduction ;
la fonction Date() prend la valeur que votre ordinateur a en mémoire pour la date et heure actuelle.
Et voilà terminée la déclaration d'un objet date. Cet objet pourra être affecté de diverses propriétés et/ou méthodes. Heureusement, il s'agit d'un objet inclus de façon native dans Javascript (objet prédéfini), et que l'on peut toujours utiliser de façon standard.

Parmi les méthodes prédéfinies pour des objets de type 'date' dans JS, il existe la méthode getDay() qui permet de récupérer la valeur du jour pour la date en question. L'objet retourné est alors un entier qui correspond au jour de la semaine : 0 pour dimanche, 1 pour lundi, etc.
Notre variable today ne pourra donc prendre que des valeurs entières de 0 à 6 pour les jours dimanche à samedi. Intéressant pour le but poursuivi, selon la valeur numérique entière de la variable today, il suffira de rediriger l'internaute vers une page différente selon les cas.
Les autres propriétés et méthodes des objets date seront étudiées dans le chapitre 35. Patience.

Seul un mystère subsiste peut-être, l'emploi de cette étrange instruction JS, à savoir window.location qui suscite de nombreux débats et qui n'a d'autre but que de rediriger l'internaute visiteur de vos pages sur une page précise.
Si toutefois, window.location ne fonctionne pas, essayer les variantes window.location.href ou window.location.replace qui selon les navigateurs donnent des résultats plus performants.

Remarquons ici que les redirections faites en JS sont parfois mal tolérées et peuvent engendrer des effets secondaires non souhaités :
la redirection peut ne pas être opérationnelle,
l'historique des pages visitées peut être détruit (pas de "page précédente" accessible),
les moteurs de recherche (Google et autres) ne suivent pas ces redirections, etc.

Voici donc ce script à tester, ne soyez pas étonnés de l'absence des fichiers de chaque jour... ce sera l'occasion de tester votre bouton "page précédente"... (n'hésitez pas à modifier pour tester les variantes proposées ci-dessus) :

 

Exemple

<html>
<body>

<h1>switch variable numérique</h1>

<script type="text/javascript">

   var dateobj=new Date();
   var today=dateobj.getDay();
   switch(today){
      case 1:
         window.location="lundi.htm";
         break;
      case 2:
         window.location="mardi.htm";
         break;
      case 3:
         window.location="mercredi.htm";
         break;
      case 4:
         window.location="jeudi.htm";
         break;
      case 5:
         window.location="vendredi.htm";
         break;
      case 6:
         window.location="samedi.htm";
         break;
      case 0:
         window.location="dimanche.htm";
         break;
}


</script>


</body>
</html>

 

 

II. Switch avec expressions ou strings

voir suite >>>

 

 

IV. Test relatif aux conditions IF... ELSE...

voir suite >>>

 

 


Test : conditions complexes (17.9) | | SWITCH expression (18.2)