Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 9: Exercices - Permutation et calculatrice

Toutes les pages

Exercices

Exercice 1: Permutation

Il s'agit d'un exercice des plus classiques en programmation. L'objectif est de créer un formulaire qui contient deux zones de texte et un bouton de commande. Le fait de cliquer sur le bouton permute le contenu des deux zones de texte.

Aperçu: Mettez deux textes différents dans les deux zones de texte puis cliquez sur le bouton.


Solution

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <script language="javascript">
         function permuter(){
            x=document.fo.a.value;
            document.fo.a.value=document.fo.b.value;
            document.fo.b.value=x;
         }
      </script>
   </head>
   <body>
      <form name="fo">   
         <input type="text" name="a" /><br />
         <input type="text" name="b" /><br />
         <input type="button" value="Permuter" onClick="permuter()" />
      </form>
   </body>
</html>
Notez qu'il existe plusieurs façons pour réussir l'exercice. Dans le code que je propose, j'ai fait intervenir une variable x pour y stocker provisoirement le contenu de la première zone de texte, car le fait d'affecter le contenu de la deuxième zone à la première (document.fo.a.value=document.fo.b.value;) écrase le contenu de cette dernière.

Astuce:

Supposons qu'au chargement de la page, on veut placer le curseur automatiquement dans la première zone de texte. Dans ce cas on va faire appel à la méthode focus() sur l'objet qui correspond à la première zone de texte.

Puisque la méthode sera appliquée au chargement de la page, alors on doit associer le code correspondant à l'événement load qui sera placé dans la balise <body>.

Le code ressemblera à ceci:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <script language="javascript">
         function permuter(){
            x=document.fo.a.value;
            document.fo.a.value=document.fo.b.value;
            document.fo.b.value=x;
         }
         function init(){
            document.fo.a.focus();
         }
      </script>
   </head>
   <body onLoad="init()">   
      <form name="fo">   
         <input type="text" name="a" /><br />
         <input type="text" name="b" /><br />
         <input type="button" value="Permuter" onClick="permuter()" />
      </form>
   </body>
</html>
J'ai l'habitude de déclarer une fonction du nom de init() où je place tous les traitements qui doivent s'exécuter au chargement de la page.
Quand vous déclarez vos fonctions, faite juste attention à ne pas utiliser des mots clé de Javascript (comme for, while...). Pour faire simple, nommez vos fonctions de telle sorte à ce qu'ils reflètent la nature de l'opération à exécuter. Si le nom est composé, ayez l’habitude de capitaliser les initiaux (par exemple: prmuterDeuxChamps()...).

Exercice 2: Calculatrice

Dans cet exercice, on va essayer de créer une calculatrice qui exécute les opérations basiques, à savoir, addition, soustraction, multiplication et division. La page contiendra trois zones de texte qui représenterons respectivement: nombre 1, nombre 2 et résultat de l'opération, ainsi que 4 boutons qui représenteront les 4 opérations prévues.

En tout, notre page ressemblerait à ceci:



Solution

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <script language="javascript">
         function operation(op){
            nombre1=document.calc.nbr1.value;
            nombre2=document.calc.nbr2.value;
            switch(op){
               case "add": resultat=parseFloat(nombre1)+parseFloat(nombre2); break;
               case "sou": resultat=nombre1-nombre2; break;
               case "mul": resultat=nombre1*nombre2; break;
               case "div": {
                  if(nombre2!=0)
                     resultat=nombre1/nombre2;
                  else
                     resultat="Erreur!";
               }
            }
            document.calc.res.value=resultat;
         }
      </script>
   </head>
   <body>   
      <form name="calc">   
         <input type="text" name="nbr1" /><br />
         <input type="text" name="nbr2" /><br />
         <input type="button" value="+" onClick="operation('add')" />
         <input type="button" value="-" onClick="operation('sou')" />
         <input type="button" value="*" onClick="operation('mul')" />
         <input type="button" value="/" onClick="operation('div')" />
         <br />
         <input type="text" name="res" />
      </form>
   </body>
</html>
Comme toujours, il y a de nombreuses autres façons pour réussir l'exercice. Dans ce cas, j'ai prévu une fonction qui assure les 4 opérations selon le bouton actionné par l’utilisateur. Un argument est donc passé à la fonction pour savoir quelle opération effectuer.

La structure de contrôle switch case est encore utilisée pour tester plusieurs conditions. Cependant, l'utilisation de la structure if else est possible aussi.

Vous avez peut être remarqué que pour l'addition j'ai placé les deux nombres dans la fonction parseFloat(). En effet, toutes les valeurs qui proviennent des champs de formulaire sont vues par Javascript comme des chaînes de caractères. L'opérateur + signifiera donc la concaténation et non pas l'addition. Le fait de parser les valeurs des zones de textes en nombres réels obligera le programme à additionner les nombres au lieu de les concaténer.