Apprendre Javascript pour rendre vos pages Web interactives
Leçon 17: Exercice - Afficher un message lettre par lettre
Toutes les leçons 
Apprendre Javascript pour rendre vos pages Web interactives
Leçon 17
Exercice - Afficher un message lettre par lettre
Exercice - Afficher un message lettre par lettre
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:
<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>
- 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.
Leçon 17
Exercice - Afficher un message lettre par lettre
Exercice - Afficher un message lettre par lettre
