Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Activité Javascript N°2 - gérer les touches du clavier ======
===== Présentation =====
**JavaScript** permet de gérer des **événements**. Pour **chaque** événement, un **objet Event** est créé et permet d'accéder à beaucoup d'**informations sur l'événement** actuellement déclenché. Cela permet par exemple : 
  * lors de **l'appui** d'un touche du clavier de connaître de quelle **touche** il s'agit,
  * pour la souris d'avoir les **coordonnées** du clic.

==== La gestion des touches du clavier ====
La **détection** d'une touche du clavier se fait en ajoutant un **gestionnaire d'événement** sur le **document** c'est à dire sur la **page HTML tout entière**.
<code javascript>
// Lorsqu'une touche est appuyée, lancer une fonction
document.addEventListener('keydown', fonctionToucheEnfoncee);
// Lorsqu'une touche est relachée, lancer une fonction
document.addEventListener('keyup', fonctionToucheRelachee);
</code>

La fonction **appelée** reçoit en paramètre l'**objet Event** et peut donc accéder aux informations liées à l'événement :
<code javascript>
// gestion de l'appui d'une touche
function fonctionToucheEnfoncee(event) {
  // touche haut appuyée
  if(e.keyCode == '38') {
     // action à faire
  }

// Gestion du relachement d'une touche
function fonctionToucheRelachee(event) {
  // touche haut relachée
  if(e.keyCode == '38') {
     // action à faire
  }
</code>

<WRAP center round info>
Les événements **keyup** et **keydown** capturent **toutes les frappes de touches** : les lettres, chiffres, touches de fonction, flèches, ALT, CTRL, etc.

L'événement **keypress** capture **uniquement** les touches qui **écrivent un caractère** et non pas les touches qui n'affichent pas de caractère comme CTRL, ALT, etc.

**Exemple** pour la combinaison de touche Maj + A est gérée :
  * l'événement **keypress** détectera uniquement un **A majuscule**,
  * les événements **keyup** et **keydown** se **déclencheront deux fois**, une fois pour la touche **Maj** et une deuxième fois pour la **touche A**.
</WRAP>

La propriété **keyCode** de l'**objet Event** renvoie le **code ASCII** de la touche pressée. Voici quelques exemples de **touche** et de leur **code ASCII**  :

^Touche^Code ASCII^
|Flèche gauche|37|
|Flèche haut|38|
|Flèche droite|39|
|Flèche bas|40|



==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
