samedi 8 août 2015

Commutateur 3 positions

Le script présenté ensuite est prévu pour dessiner un commutateur selon trois positions, à l'instant où il est cliqué. Ex : un clic sur sa droite le fait s'orienter vers la droite. La position, pourra être enregistrée pour un usage ultérieur. La lecture de ce script est livrée en bas de cette page.

 

Lecture du code Javascript

Ce code apparait aux lignes 17 et 32.
Ligne 18: Cette instruction est exécutée une seule fois, à la fin du chargement de la page web dans le navigateur. C'est la déclaration et l'affectation à la valeur 0, d'une variable nommée pos. Elle contiendra la position du commutateur : 0, 1 ou 2.

Lignes 19 à 32 : C'est la déclaration d'une fonction  qui sera exécutée lorsqu'elle sera appelée au clic de l'image déclarée en ligne 14.
Ligne 19 : Cette fonction est nommée rot() et reçoit le paramètre event qui contient notamment l'endroit de l'image où le clic s'est produit.
Ligne 20 : Déclaration et affectation de la variable locale x. Au terme de l'exécution de cette ligne, x contient l'abscisse du lieu du clic. Il s'agit d'un nombre indiquant le nombre de pixels comptés à partir du bord gauche de l'image.
Ligne 21 :  Déclaration et affectation de la variable locale but. Cette variable représente le style de l'élément html identifié par id="cmt". Il s'agit donc du style de l'image du commutateur comme l'indique la ligne 14.
Lignes 22 à 25 : Il s'agit d'une structure alternative : un segment d'instructions va être exécuté selon une condition.
Ligne 22 : C'est la condition de l'alternative. Elle est composée de 2 sous-conditions qui doivent être toutes les deux vraies pour que le segment d'instructions s'exécute. C'est à dire que lorsque x est inférieur à 50 et (opérateur &&) lorsque la variable pos est supérieure à 0 alors le segment situé aux lignes 23 et 24 s'exécute.
Lignes 23 et 24 : La première instruction fait tourner l'image du commutateur dans le sens anti-horaire et d'un angle de 20 degrés. La seconde instruction retire 1 à la variable pos.
Lignes 26 à 29 : Il s'agit d'une seconde structure alternative qui se lit de façon semblable à la première. C'est la rotation dans le sens horaire qui est traitée ici.
Ligne 30 : Cette instruction affecte la valeur de x à l'élément html <p> déclaré en ligne 16. Cette instruction n'a d'intérêt que pendant la phase de mise au point du script et pourra disparaître. De cette façon on peut suivre l'évolution de la variable x pendant l'exécution du script. On pourra faire de même pour la variable pos si nécessaire.

%%%

Aucun commentaire:

Enregistrer un commentaire