HTML Dynamique

Roll Over simple (Image animée au passage de la souris)

Le Fichier10 montre un exemple très simple de Roll Over.

Barre de navigation - 1 (Application du Roll Over) (Pour Internet Explorer)

Le Fichier11 utilise le principe du Roll Over pour animer une barre de navigation. Le changement de couleur au passage de la souris est réalisé en utilisant des images presque identiques. La fonction ChangeBar() est appelée par onMouseOn() et la fonction RemetBar() par onMouseOut(). L'image affichée est appelée en fonction de la position de la souris détectée par event.offsetX et event.offsetY. document.images[0] est la première image de la page (qui n'en compte qu'une !). La fonction n'est pas appelée quand la souris se déplace à l'intérieur de l'image.

Barre de navigation - 2 (Application du Roll Over) (Gestion de la souris pour Internet Explorer)

Le Fichier12 corrige le problème précédent. Tous les mouvements de la souris sur l'image sont transmis à la fonction ChangeBar() par la ligne ObjetMove.onmousemove = ChangeBar (ObjetMove = document.images[0] est la première image du document).

Barre de navigation - 2' (Application du Roll Over) (Gestion de la souris pour Netscape)

Le Fichier12bis est identique au précédent mais la gestion de la souris est différente. Il faut ajouter ObjetMove.captureEvents(Event.MOUSEMOVE);, transmettre les mouvements de la souris à la fonction ChangeBar(e) et remplacer offsetX et offsetY par layerX et layerY.

Ticker dans le document (Texte défilant)

Le Fichier13 montre un exemple de défilement de texte. La fonction ListeTexte() est le constructeur d'un objet ListeTexte qui construit un tableau avec les phrases qu'il reçoit en argument. Texte() est une instance de l'objet ListeTexte. La fonction Defile() affiche lettre par lettre chaque phrase de Texte() dans la zone Affiche du formulaire Panneau. max est le nombre d'arguments, x le numéro de la chaîne affichée, lg la longueur de la chaîne en cours, pos la position du dernier caractère affiché et att le paramètre d'attente de setTimeOut(). Chaque chaîne est une bonne (?) contrepèterie.

Ticker dans la barre d'état (Texte défilant)

Le Fichier14 utilise la même méthode que le précédent mais envoie l'affichage dans la barre d'état, window.status.

Vérification de formulaire

Le formulaire du Fichier15 pose trois questions. La touche "OK" fait appel à la fonction Corrige() qui contrôle les réponses fournies.

Modification de style

Le Fichier16 utilise la fonction Bouge() pour modifier à chaque "clic" la visibilité de l'image et la couleur du fond.

Passage de données entre fenêtres - 1 (Création d'une nouvelle fenêtre)

Le Fichier17 ouvre une nouvelle page qui reprend le nom donné dans la zone de texte. La fonction nouvPage() affecte à la variable Suivi le contenu du champ Nom du formulaire ou le texte "Inconnu(e)" si le champ est vide (ou blanc). Texte1 contient le code qui permet de construire la nouvelle page (fenNouv1) après sa création. La valeur transmise est affichée dans la page, stockée dans une zone de texte et dans une variable JavaScript. La fonction tuePage() ferme la fenêtre créée.

Passage de données entre fenêtres - 2 (Utilisation d'un Cookie)

Un cookie est un fichier texte qu'un site Web peut faire écrire par un navigateur sur le disque dur d'un client. Il permet essentiellement de partager les éléments d'un dialogue client-serveur entre plusieurs pages. Fichier texte, un cookie n'est porteur d'aucun danger. L'utilisation et la structure sont strictement codifiés (www.netscape.com/newsref/std/cookie_spec.html) : La taille d'un cookie est limitée à 4 kilo octets Un serveur Web ne peut pas installer plus de 20 cookies Un poste client ne peut stocker plus de 300 cookies La création d'un cookie est soumise à l'autorisation de l'utilisateur Un cookie créé par un site Web ne peut pas être lu par un autre. Structure d'un cookie : Nom=Contenu; expires=date d'expiration; path=chemin autorisé; domain=dns autorisé; secure Le couple Nom=Contenu (Identificateur = Information stockée) est la partie visible du cookie expires fixe sa durée de vie path, domain et secure sont facultatifs La date doit être au format GMT ou UTC Pas de point virgule dans Nom et Contenu (c'est le terminateur) Le nom du fichier cookie sur le disque dur est fixé par le navigateur. Le Fichier18 résume l'utilisation d'un cookie : création, lecture, destruction (les différentes fonctions devraient être dans des fichiers différents). La fonction estCook() détecte  (document.cookie) la présence du cookie témoin. En son absence, la fonction creeCook() enregistre sur le disque dur (document.cookie=…) un cookie nommé "Mon cookie" qui contient le texte entré dans la boîte de message avec une date d'expiration à 30 jours. Relancez la page ! La fonction litCook() (qui pourrait être dans n'importe quelle autre page) lit le cookie et en affiche le contenu. La fonction tueCook() supprime le fichier en lui donnant une date d'expiration périmée.

Utilisation de la balise DIV - 1 (Visibilité)

La balise <DIV> ... </DIV> est un conteneur qui permet de définir des "divisions logiques" dans un document HTML. En modifiant dynamiquement (à l'aide de JavaScript) les propriétés de position d'une balise, il est possible de la déplacer (et c'est tout ce qu'elle contient qui bouge avec elle) ou de la rendre invisible (ainsi que tout ce qu'elle contient). Le fichier source de Division1 contient plus de quatre-vingt-dix lignes mais le code est assez répétitif. Chaque balise <DIV> contient du texte et une "sous balise" <DIV> contenant une image. La feuille de style donne les mêmes propriétés initiales aux identificateurs (Un, Deux, Trois, Quatre) des balises <DIV>. La classe Decale permet de déplacer (en relatif) l'image par rapport au texte de la balise. Les changements de couleur au passage de la souris sont effectuées par les fonctions CoulC...() et CoulN...() appelées par les événements onMouseOver et onMouseOut des balises <TD>. L'affichage des balises <DIV> est effectué par les fonctions Affiche...() appelées par l'événement onClick des balises <TD>. Il manque, peut-être, un élément qui permettrait de retrouver l'affichage initial.

Pour aller plus loin - 3 (Création d'un objet)

Le code source du Fichier19 montre comment, après avoir construit un objet Membre, on peut lui associer des propriétés et des méthodes. L'exécution applique ces définitions à une base de données interne. Un objet Membre est un enregistrement dont les attributs et les méthodes sont définis lors de sa création. Membres[ ] est un tableau d'objets Membre. Il constitue une base de données . La fonction Membre() est le constructeur de l'objet Membre. Elle définit neuf propriétés (Nom, PNom, Adr, Ville, CP, Age, Qui, Ou, Tout) et deux méthodes (Region() et Coucou()). Remarquez que, dans le constructeur, this fait référence à l'objet en cours de création et que l'appel aux fonctions-méthodes se fait sans parenthèses (sinon ce serait une affectation). Sans return, les méthodes ne renvoient rien (mais elles peuvent lancer un affichage). Ouvrez le fichier Objets pour voir une utilisation plus complète. Remarque : prototype permet d'ajouter une nouvelle méthode à un objet prédéfini. Ainsi Date.prototype.Dif2000=Test; crée la méthode Date1.Dif2000() qui exécute la fonction Test() sur l'instance Date1 de l'objet Date.

Pour aller plus loin - 4 (Souris et événement) (Gestion des événements pour Internet Explorer)

Le Fichier20 affecte de nouveaux gestionnaires aux événements onClick, onMouseMove, onKeyDown. Pour que les clics de la souris soient traités par le fonction surClick(), on écrit document.onclick = surClick;. Pour bien comprendre les différentes parties du programme, il sera sans doute nécessaire d'en désactiver certaines parties. Chaque Clic affiche la position de la souris (dans divers environnements) et marque cette position d'une croix (fonction surClick()). Tout déplacement de la souris est accompagné par une croix (fonction surBouge()). Enfin, l'utilisation du clavier affiche le code de la touche frappée (fonction surTouche()).

Pour aller plus loin - 4' (Souris et événement) (Gestion des événements pour Netscape)

Le Fichier20bis est identique au fichier précédent mais il utilise la gestion des événements et des styles propre à Netscape.

Retour au début