Cours
4. XHTML et Javascript
4.5. Variables numériques et chaînes de caractères
4.5.1 Donald se déplace
Pendant cette leçon, Donald →va nous montrer comment on s'y prend pour voyager sur l'écran.
Rappelons-nous que la position de Donald (coin supérieur gauche du bloc <div> qui contient le personnage) est déterminée par l'attribut style de ce bloc:
.....
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: visible" >
<img src="donald.gif"/>
</div>
.....
En rouge: l'abscisse.
En bleu: l'ordonnée (renversée, à partir du haut de l'écran))
Pour changer la position de Donald, il faut manifestement changer ces deux nombres en cours de programme. Javascript permet d'y accéder:
.......
<script>
function abscisse()
{
x = document.getElementById("donald").style.left;
alert(x);
}
function ordonnee()
{
x = document.getElementById("donald").style.top;
alert(x);
}
</script>
......
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: visible" >
<img src="donald.gif"/>
</div>
<input type="button" value="abscisse? " onClick="abscisse();">
<input type="button" value="ordonnée?" onClick="ordonnee();">
......
Vous voyez que la méthode getElementById du document courant récupère des balises Html avec leurs propriétés de style pour les utiliser dans Javascript: Malheureusement, ce ne sont pas les deux nombres 500 et 200 que nous récupérons et que nous pourrions manipuler facilement, mais les chaînes de caractères 500px et 200px et voilà tout le problème de Donald pour avancer proprement! Penchons nous sur la différence entre nombres et chaînes de caractères:
4.5.2 Variables du type "string"(chaîne de caractères) et variables numériques
La routine Javascript →suivante introduit la chaîne de caractères 500px dans la variable chne, montre le contenu de cette variable, additionne le caractère 2 et montre le résultat.
......
<script>
chne="200px";
alert(chne);
chne=chne+2;
alert(chne)
</script>
......
Par contre, la routine Javascript →suivante introduit le nombre 500 dans la variable nbre, montre le contenu de cette variable, additionne le nombre 2 et montre le résultat.
......
<script>
nbre=200;
alert(nbre);
nbre=nbre+2;
alert(nbre)
</script>
......
L'addition à une chaîne de caractères est une simple ajoute en bout de file, l'addition à un nombre est le résultat arithmétique escompté!
Vous trouverez →ici tout ce qu'il faut pour manipuler des chaînes de caractères et →ici de quoi manipuler les nombres.
4.5.2 Faisons avancer Donald
Nous voulons réaliser un programme qui fait avancer Donald disons de 50 pixels vers la droite chaque fois qu'on pousse sur un bouton. Pour cela, nous créons un bouton. En déclenchant l'événement onClick sur ce bouton (c.à.d. en cliquant dessus) nous voulons qu'une fonction javascript avance() soit appelée qui fera avancer Donald:
→Première étape: Nous plaçons Donald dans un bloc:
<html>
<head>
<script>
function avance()
{
}
</script>
</head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: visible" >
<img src="donald.gif"/>
</div>
</body>
</html>
→Deuxième étape: Nous créons le bouton et le cadre pour la fonction avance() :
<html>
<head>
<script>
function avance()
{
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px >
<img src="donald.gif"/>
</div>
</body>
</html>
→Troisième étape: Nous faisons passer l'abscisse de Donald sous la forme de la chaîne de caractères "500px" et nous l'inscrivons dans une variable Javascript :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
alert(x);
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
alert(x) sert uniquement de contrôle pour voir si l'opération a réussi. Après, nous allons laisser cela de côté.
→Quatrième étape: Nous éliminons les caractères px :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
x=x.replace("px","");
alert(x);
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
→Cinquème étape: Nous transformons la variable x du type string en une variable numérique :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
x=x.replace("px","");
x=x*1;
alert(x);
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
Cela se fait en multipliant par 1. Sans cette opération, x reste du type string et nous ne pouvons pas calculer avec!
→Sixième étape: Nous ajoutons 50 à la valeur (numérique!) de x :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
x=x.replace("px","");
x=x*1;
x=x+50;
alert(x);
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
→Septième étape: Nous remettons les caractères "px" en place par concaténation :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
x=x.replace("px","");
x=x*1;
x=x+50;
x=x+"px";
alert(x);
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
→Huitième étape: Nous donnons à l'abscisse de Donald la nouvelle valeur renfermée dans la variable x :
<html>
<head>
<script>
function avance()
{
x = document.getElementById("donald").style.left;
x=x.replace("px","");
x=x*1;
x=x+50;
x=x+"px";
document.getElementById("donald").style.left=x
}
</script>
</head>
<body>
<input type="button" value="→" onClick="avance()" />
<div id="donald" style="position:absolute;left:500px;top:100px" >
<img src="donald.gif"/>
</div>
</body>
</html>
Le tour est joué,→essayez !
4.5.2 Exercice
Placer quatre boutons sur l'écran provoquant des déplacements de donald vers la gauche, la droite, le haut et le bas, puis un bouton provoquant un déplacement en biais vers la droite et le bas.