4.3.1 Exemple: 1ère étape. Positionnement

Le →programme suivant fait apparaître Donald Duck dans un bloc dont le coin supérieur gauche est situé aux coordonnées (500 pixels,300 pixels) à partir du coin supérieur de l'écran: L'image "donald.gif" se trouve enregistrée dans le sous-rèpertoire "images" du répertoire où se trouve le fichier Html (./).

.........
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;">
<img src="./images/donald.gif"/>
</div>
</body>

Voici donc la situation:

4.3.2 Exemple: 2e étape. Visibilité

Le →programme suivant réalise absolument le même chose que l'exemple précédent, sauf que nous avons caché Donald par la propriété "visibility" de l'attribut "style" qui peut prendre les valeurs "hidden" ou "visible". (On pourrait aussi utiliser la propriété "display " qui peut prendre les valeurs "none" ou "block") Essayez de changer "hidden" en "visible"! Nous verrons dans l'exemple suivant le sens de de cette manoeuvre.

.........
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: hidden">
<img src="./images/donald.gif"/>
</div>
</body>

4.3.3 Exemple: 3e étape. Javascript

Le →programme suivant comporte une fonction Javascript dans le <head> qui 1) change la position de Donald, puis 2) le rend visible . Cette fonction est appelée en fin du <body>

.........
<head>
<script>
function change()
{
document.getElementById("donald").style.left="100px";
document.getElementById("donald").style.visibility="visible";
}
</script>
 </head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: hidden" >
<img src="./images/donald.gif"/>
</div>
<script>
change();
</script>
 </body>

L'expression : "document.getElementById("donald").style.left" signifie:
la propriété "left"
de l'attribut "style"
de l'objet (Element) d'identité "donald" (Id !)
du document "document" courant.

4.3.4 Exemple: 4e étape. Variable

Le →programme suivant réalise la même chose que le programme précédent, sauf que la nouvelle position left de 50px est d'abord mise en réserve une "boîte x " appelée "variable x ", puis seulement employée dans la fonction change().

.........
</head>
<script>
x="50px";
function change()
{
document.getElementById("donald").style.left= x;
document.getElementById("donald").style.visibility="visible";
}
</script>
</head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: hidden" >
<img src="./images/donald.gif"/>
</div>
<script>
change();
</script>
</body>

On peut s'imaginer la variable précédente de la manière suivante:

4.3.5 Exemple: 5e étape. Button

Le →programme suivant réalise la même chose que le programme précédent, sauf que Donald reste visible en sa position initiale et qu'en cliquant sur un bouton , on décenche le repositionnement.

.........
</head>
<script>
x="50px";
function change()
{
document.getElementById("donald").style.left=x;
document.getElementById("donald").style.visibility="visible";
}
</script>
</head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: hidden" > <img src="./images/donald.gif"/>
</div>
<input type="button" value="cliquez ici!" onClick="change();">
</body>

4.3.6 Exemple: 6e étape. Transmission de la variable

Le →programme suivant réalise la même chose que le programme précédent, sauf que x n'est pas définie au début, mais est transmise lors de l'appel de la fonction change() comme "paramètre".

.........
</head>
<script>
function change(x)
{
document.getElementById("donald").style.left=x;
document.getElementById("donald").style.visibility="visible";
}
</script>
</head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: hidden" > <img src="./images/donald.gif"/>
</div>
<input type="button" value="cliquez ici!" onClick="change('50px');">
</body>

Notez les signes ' qui deviennent nécessaires à cause des signes " qui les entourent.

4.3.7 Exemple: 7e étape. Input: Choix et transmission de la variable

Le →programme suivant réalise la même chose que le programme précédent, sauf qu'il permet à l'utilisateur d'entrer la valeur de la variable dans un champ d'entrée du type "texte" incorporé dans un "formulaire" et qui sera soumis à la fonction change.

.........
</head>
<script>
<script>
function change()
{
x=document.getElementById("montexte").value;
document.getElementById("donald").style.left=x;
}
</script>
</head>
<body>
<div id="donald" style="position:absolute;left:500px;top:100px;visibility: visible">
<img src="./images/donald.gif"/>
</div>
<form id="monformulaire" action="javascript:change()">
Introduisez ici le nombre de pixels (p.ex.: 50px) que vous voulez que Donald s'éloigne du bord gauche de l'écran: <input type="text" id="montexte" value="" />
<input type="submit" value="soumettez" />
</form>
 </body>

4.3.8 Exercice:

Vous trouverez →ici ou ailleurs (cherchez!) des petits personnages appelés "screenbeans" .
Construisez une scène où quelques beans se répartissent partout sur l'écran, puis, en cliquant sur un bouton , faites apparaître des musiciens et des danseuses au milieu de l'écran, finalement, cliquant sur un autre bouton, faites affluer vos beans autour de l'orchestre !