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.

type : click ou mouseover (survol par la souris) ou keydown (appui sur une touche), etc.
keyCode : code ASCII de la touche du clavier enfoncée
target : cible de l'évènement c'est à dire le nœud de l'arbre DOM concerné par l'évènement

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

	document.querySelector('button').onclick = function(evt) 
		{	
			alert("type évènement : " + evt.type) ; 
			alert("cible évènement : "+ evt.target);  
		}
	document.querySelector('img').onclick = function(e) 
		{
			alert("type évènement : " + e.type) ; 
			alert("cible évènement : " + e.target); 
		}
	document.onkeydown = function(event) 
	{	// si appui sur une touche du clavier
		alert("code ASCII de la touche : " + event.keyCode) ; 
		alert("type évènement : " + event.type) ; 
		alert("cible évènement : " + event.target) ; 
	}

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

	#billard {position : relative ; width : 100% ; height :200px ; 
		margin : 10px auto 10px auto ; background : lime ;  }
	#boule {width : 20px ; height : 20px ; border-radius : 10px ; 
		box-shadow : 5px 5px 5px gray ; 
		position : absolute ; top : 90px ; left : 50% ; background : red ; }

Le code HTML

<div id = "billard">
	<div id ="boule"></div>
</div>

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

	var billard = document.querySelector('#billard'); 	// variables objet 
	var boule = document.querySelector('#boule'); 
	var x; var y ; 
	
	// programmation des touches de direction
	document.onkeydown = function(event)
	{	
		if (event.keyCode == 37)  gauche(); 
		if (event.keyCode == 39) droite() ; 
		if (event.keyCode == 38) haut();  
		if (event.keyCode == 40) bas() ; 
	} // fin fonction 
	
	// quatre fonctions de déplacement
	function gauche() 
	{
		x = getComputedStyle(boule).left; 
		x = parseInt(x); x= x-20;  
		x = x + "px";
		boule.style.left = x ; 
	} 
	function droite() {x = getComputedStyle(boule).left; 
		x = parseInt(x); x= x+20;  x = x+"px"; boule.style.left = x ; }
	function haut() {y = getComputedStyle(boule).top; 
		y = parseInt(y); y= y-20;  y = y+"px"; boule.style.top = y ; }
	function bas()  {y = getComputedStyle(boule).top; 
	y = parseInt(y); y= y+20;  y = y+"px"; boule.style.top = y ; }

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().

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

JavaScript : l'objet event - programmation du clavier

Exemple

Le script correspondant

Programmation du clavier

Exemple

Le code correspondant

La feuille de style

Le code HTML

Le script