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 17: Exercice - Afficher un message lettre par lettre

Toutes les pages

Exercice

Avant d'aller plus loin en Javascript, je préfère nous arrêter sur un petit exercice pour mettre en pratique les notions que nous avons vu en chaines de caractères, tableaux et fonctions récursives temporisées.

On souhaite afficher, dans une zone de texte, 4 messages consécutifs: "Bonjour à tous.", "Cette phrase", "est affichée" et "lettre par lettre." de telle sorte à ce que chaque message s'affiche lettre par lettre et non pas d'un seul coup.

Pour mieux comprendre le principe, voilà à quoi cela devrait ressembler:


Il existe plusieurs façons de réussir cet exercice, mais j'aimerais que vous tentiez de faire appel aux tableaux pour déclarer les 4 messages.

Solution

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <style>   
         input[type="text"]{
            font:24pt monospace;
            border:solid 1px #CCCCCC;
            padding:10px;
            color:#EE6600;
         }
      </style>
      <script language="javascript">
         message=new Array(
         "Bonjour à tous.",
         "Cette phrase",
         "est affichée",
         "lettre par lettre.");
         index=0;
         i=0;
         dir="aGauche";
         function decoup(){
            setTimeout("decoup()",40);
            document.fo.msg.value=message[index%4].substring(0,i);
            if(dir=="aGauche"){
               i+=1;
               if(i>message[index%4].length+5)
                  dir="aDroite";
            }
            if(dir=="aDroite"){
               i-=1;
               if(i<-5){
                  dir="aGauche";
                  index+=1;
               }
            }
         }
      </script>
   </head>
   <body onLoad="decoup()">   
      <center>   
         <form name="fo">
            <input type="text" name="msg" readonly /><br />
         </form>
      </center>
   </body>
</html>
J'aimerais clarifier certains points:
  • la variable dir précise la direction d'écriture du message: aGauche signifie "écrire" et aDroite signifie "effacer".
  • Pour basculer entre les deux variables de dir j'ai précisé comme conditions si la variable i qui parcours la chaîne est supérieur à la longueur de celle ci + 5 ou inférieure à -5. Il s'agit juste d'une astuce pour marquer un temps mort avant de commencer à écrire une nouvelle phrase ou effacer la phrase en cours.
  • Pour la condition if(dir=="aGauche") j'aurais pu lui mettre else au lieu de faire le test if(dir=="aDroite") car la variable dir ne peut avoir que deux valeurs. Cependant, j'ai opté pour cette méthode pour mettre en valeur les deux possibilités sur lesquelles bascule la variable dir.