Comme on essaie de séparer les de la présentation CSS dans des fichiers différents, on essaie de séparer les données HTML des traitements Javascript dans deux fichiers différents. Je vais présenter ici comment effectuer strictement cette séparation.
Tout ce qu'on va conserver dans le fichier HTML, c'est le lien vers le fichier Javascript (qui porte l'extension .js). Il n'y aura plus dans le fichier HTML ni code Javascript, ni événement :
Les événements que l'on gérait directement à l'intérieur des balises HTML, par exemple (pour une image et pour un lien) :
vont devenir, pour le fichier HTML :
et, pour le fichier Javascript mes-fonctions.js :
Explications :
window.onload, img.onmouseover, a.onclick.window.onload = initAll : signifie que lorsque la page aura finie de se charger, on va appeler notre fonction initAll. On associe la fonction initAll à l'événement window.onload.function initAll() : on implémente ici la fonction initAll.document.image1.onmouseover = function () { this.src='menu_on.jpg' }Comme on l'a fait pour window.onload, on associe à nouveau une fonction à l'événement img.onmouseover. La fonction n'a pas de nom car elle est créée ici à la volée. A un événement on associe forcément une fonction (pas une valeur ni une instruction), cette fonction peut être prédéfinie (comme c'est le cas pour initAll) ou créée à la volée (comme c'est le cas ici).name="image1", réutilisé en Javascript grâce à document.image1).document.getElementById("lien1").onclick = function () { return window.confirm("Etes-vous sûr ?"); }De la même façon que précédemment, on associe une fonction à l'événement a.onclick. Cette fonction est créée ici aussi à la volée. Contrairement à précédemment, on fait référence au lien par son ID (document.getElementById("lien1")) et non pas par son nom. Les deux sont possibles.Travail à faire : prenez votre code du TP Javascript débutant, paragraphe 9 (exécuter une fonction de façon répétitive : window.setTimeout), et séparez-le en un fichier HTML et un fichier Javascript conformément aux instructions de ce paragraphe.
| Le fichier HTML | Le fichier Javascript |
|---|---|
Votre réponse n°1 | Votre réponse n°2 |
Un problème se pose dans le cas de l'image survolée du TP débutant : lors du premier survol, l'image survolée est téléchargée depuis le serveur, ce qui peut prendre un certain délai si l'image est lourde ou si la connexion est lente. Nous allons résoudre ce problème en pré-chargeant l'image dès le chargement de la page (window.onload).
L'image pré-chargée sera stockée dans un objet image membre de l'image d'origine. Ce n'est pas une obligation mais c'est une habitude sur Internet, et cela évite de manipuler des tableaux pour l'étape suivante. Explications :
window.onload = function () : on crée à la volée la fonction qui va s'exécuter sur l'événement window.onload. Cette fonction va préparer le survol.mon_image = document.getElementById("image1"); : facultatif, mais c'est plus court par la suite de réécrire mon_image plutôt que document.getElementById("image1").mon_image.image_on = new Image(); : dans mon image, je crée un nouveau membre que j'appelle arbitrairement image_on (notez bien que image_on est un nom inventé par nous et n'est pas un mot-clé de Javascript). On dit que ce membre est une nouvelle image.mon_image.image_on.src = "image_on.jpg"; : c'est comme ça qu'on résoud notre problème, en pré-chargeant ici la deuxième image. mon_image.src contient l'image "image_off.jpg", et mon_image.image_on.src contient l'image "image_on.jpg".mon_image.onmouseover = ... : on crée à la volée la fonction qui s'exécutera sur l'événement "survol", on affichera "image_on.jpg".mon_image.onmouseout = ... : on restaure "image_off.jpg" lorsque la souris quitte l'image.Travail à faire : grâce à un logiciel de dessin, créez
une image négative de la terre (image_inv.jpg). Ajoutez des gestions d'événements
pour que la terre apparaisse en négatif lorsqu'on clique dessus, puis redevienne
normale (image_on.jpg) lorsqu'on relâche le clic. Ne collez ici que ce que
vous avez rajouté par rapport au code ci-dessus :
Travail à faire : en fusionnant ce que vous avez vu dans
ce paragraphe, et les méthodes
d'accès aux balises du TP débutant (je suggère d'utiliser document.images),
créez automatiquement les survols pour toutes les
7 images du menu ci-joint. Pré-chargez les images. Je conseille de mettre
aux images l'attribut alt="menu1" pour recomposer le nom des
deux images à partir de cette valeur.
Examinez le code source suivant, qui permet de faire un menu déroulant :
Remarquez qu'on joue avec la propriété .style.display (en lui donnant comme valeur none ou bloc), pour afficher ou effacer les différents menus.
Travail à faire : modifier le code ci-dessus pour que les menus s'affichent et se ferment lorsqu'on survole, et non pas lorsqu'on clique.