====== 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>