Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JavaScript : l'objet event - programmation du clavier

Lorsque vous cliquez sur un noeud ou survolez un noeud ou encore lorsque vous appuyez sur un touche du clavier un évènement se produit c'est à dire un changement d'état qui peut être analysé par JavaScript.

Il y a d'autres propriétés mais qui sont moins utiles ...

L'événement est pour JavaScript un objet. Mais c'est au programmeur de trouver un nom à cet objet. Souvent il est nommé event ou encore e ou plus rarement evt.

Dans la première fonction j'ai nommé l' objet évènement event, e dans la deuxième fonction et evt dans la troisième fonction.

Exemple

Le rendu

Appuyez entre autres sur les touches directionnelles !

Si vous cliquez sur un noeud le code ASCII est zéro ! Donc si la propriété keyCode est différente de zéro cela veut dire que vous avez utilisé le clavier.

Si vous avez suivi les consignes vous avez noté que les touches de direction du clavier ont un code ASCII compris entre 37 et 40 inclus.

Le script correspondant

Programmation du clavier

A l'occasion de l'exemple précédent, vous avez pu noté que le code ASCII des touches directionnelles est compris entre 37 et 40.

Exemple

Essayez

Le code correspondant

La feuille de style

Le code HTML

Une boîte identifiée billard contient une boule. C'est cet élément qu'il faut déplacer avec le clavier.

Pour dessiner un rond il faut appliquer la propriété de style border-radius à une boîte carrée !

Le script

Les quatre touches du pavé directionnel sont programmées. Si appui sur l'une de ces touches appel d'un des quatre fonctions.
Deux fonctions pour changer la valeur de la propriété left de l'objet boule et deux fonctions pour augmenter ou diminuer la valeur de la propriété top.
La méthode getComputedStyle avec la propriété top/left retourne une chaîne telle "90px". Il faut donc convertir en entier puis incrémenter (ou décrémenter) puis rajouter "px". Bref c'est un peu lourd.

La boule peut sortir du billard. Mais ça ne serait pas très compliqué d'éviter cela ...
La programmation avec jQuery serait beaucoup plus simple en particulier grâce à l'emploi de la méthode offset().