Cours du 08 février 2010 : gestion d'événements
Prenez encore un peu de temps pour continuer votre horloge.
Voici l'horloge faite par Lionel.
Voici un autre exemple d'adjonction de code HTML par programmation.
Le dernier point important pour développer des applications intéressantes en javascript est la gestion d'événements.
Par exemple, un click sur une image, relacher le boutton de la souris, le déplacement de la souris sur une image ou hors de l'image, le déplacement de la souris dans la fenêtre, losqu'on change la taille de la fenêtre, etc.
Il existe plus d'une vingtaine d'événement gérables, nous allons nous limiter.
Allez sur la page référencée ici.
Détectez les divers événements liés au passage de la souris au-dessus d'une image.
Voici d'autres exemples ici.
Exercice :
A l'aide de ces exemples, en partant de "ImagesDansPage.html", modifiez le code pour qu'une image ou sa position change, lorsque la souris passe au dessus d'une image.
Autre information :
Reprenez le programme "attraction de l'image pas la souris".
Il gère l'événement "la souris s'est déplacer dans la fenêtre".
Regardez l'instruction <body bgcolor="#FFFF44" onmousemove="MyMouseMove(event)"> en ligne 139.
Le "onmousemove" indique que lorsque la souris c'est déplacée dans le "body", c'est à dire dans la fenêtre, il faut appeler la fonction "MyMouseMove(event)".
Dans cette fonction, on peut connaître la position de la souris, l'état des bouttons, l'état de divers touches du clavier etc.
Malheureusement, FireFox gère différemment les informations que Internet Explorer.
Lisez la fonction "MyMouseMove(myEvent)" pour voir comment la position de la souris est lue.
Il n'a pas été prévu de manière standard de jouer un son en javascript. Mais voici un exemple de gestion d'événements qui permet de jouer un son en fonction de la position de la souris.
Par curiosité, voici quelques informations disponibles concernant l'écrant, le navigateur et la fenêtre.
Plan du Site : index.html
zCours_20100208.html
Page mise à jour le 5 février 2010 par Bernard Gisin.
Hébergement par : www.educanet2.ch