jeudi 6 août 2015

Interrupteur ON/OFF

Le script présenté ensuite est prévu pour dessiner un interrupteur en position ON ou OFF alternativement dès que cet élément est cliqué. Sa position, 0 ou 1, pourra être enregistrée sur un serveur distant pour un usage ultérieur.


Lecture du script

Il remplace l'image de l'interrupteur par une autre à chaque clic sur l'élément libellé btn de la page html qui l'intègre. Ce script est ajouté à la page juste avant sa balise </body>.

La ligne 2 s'exécute dès la fin du chargement de la page dans le navigateur. Elle associe l'image identifiée "btn" à la fonction nommée tog() et déclarée ensuite. Celle-ci sera appelée à l'instant du clic (click) sur l'élément libellé btn.

La fonction tog() est déclarée en lignes 3 à 13. Elle s'exécutera lorsqu'elle sera appelée.

En ligne 4, une variable nommée imgon est déclarée et affectée de l'URL du fichier contenant l'image. L'image est enregistrée sur le web et représente un interrupteur en position ON. Si le fichier est enregistré sur un serveur du web, son URL commencera par http:// mais si le fichier est enregistré sur l'ordinateur client alors l'URL sera le chemin pour y accéder et commencera par file:///

En ligne 5, commentaires similaires à propos de la variable imgoff  mais il s'agit de l'image représentant l'interrupteur en position OFF.

En ligne 6, la variable img représente l'élément <img> de la page html, identifié par son attribut id="btn". Ceci simplifie les scripts qui suivent.

En lignes 7 à 12, une instruction alternative remplace l'image en modifiant son attribut src.

En ligne 7, img.src est l'URL du fichier-image affiché avant le clic. Elle est comparée à celle du fichier-image de l'interrupteur en position OFF. S'il s'agit de l'image de l'interrupteur en position OFF (égalité ==) alors la ligne 8 s'exécute.

La ligne 8 remplace l'URL du fichier-image affiché par celle du fichier-image de l'interrupteur en position ON.

Mais si c'est l'image en position ON qui est affichée, la ligne 11 sera exécutée. Elle remplace l'image par celle de l'interrupteur en position OFF qui prend place dans l'élément html <img> identifiée par son attribut id="btn".

%%%

Aucun commentaire:

Enregistrer un commentaire