Gestion du clavier et de la souris

Benoit BIAUDET

Mis en ligne le 19-07-2021 à 00:00

Langues disponibles

1 . Gestion des événements clavier

2 . Gestion de l'appui/relâchement

Grâce aux différentes propriétés de JS, il est possible d’exécuter du code en appuyant sur une touche ou en la relâchant.

Voyons comment gérer l’appui et le relâchement :
```html
document.onkeydown = votre_fonction1;
document.onkeyup = votre_fonction2;
```
<br>

Ici, la propriété ``onkeydown`` permet de déclencher la fonction ``votre_fonction1`` quand l’utilisateur appuie sur une touche de son clavier alors que la propriété ``onkeyup`` quant à elle permet de déclencher la fonction ``votre_fonction2`` quand l’utilisateur relâche la touche de son clavier.
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="clavier.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion du clavier</h2>
        <br>
        <section>
            <h3>Les événements liés au clavier</h3>
            <p id="reste">Je reste appuyé sur une touche
            </p>
            <p id="relache">
                Je relâche la touche
            </p>
        </section>
    </body>
    <script src="clavier.js"></script>
</html>
```
<br>

Je souhaite afficher la balise ``<p>`` avec la valeur "reste" pour l’attribut ``id`` et faire disparaître la balise ``<p>`` avec la valeur "relache" quand je reste appuyé sur une touche de mon clavier. Quand je relâche la touche je souhaite que la balise ``<p>`` avec la valeur "reste" s’affiche et que la balise ``<p>`` avec la valeur "reste" disparaisse. 
<br>
Pour cela je fais le code JS suivant :
```html
let ciblereste = document.getElementById("reste");
let ciblerelache = document.getElementById("relache");

function actionrelache(){
    ciblereste.style.display = "none";
    ciblerelache.style.display = "block";
}

function actionreste(){
    ciblerelache.style.display = "none";
    ciblereste.style.display = "block";
}

document.onkeydown = actionreste;
document.onkeyup = actionrelache;
```
<br>

Ma variable ``ciblereste`` contient la balise avec l’id « reste » qui correspond à la balise que je souhaite faire apparaître lors de l’appui de ma touche et ma variable ``ciblerelache`` contient la balise avec l’id « relache » qui correspond à la balise que je souhaite faire apparaître lors du relâchement de la touche. ``document.onkeydown = actionreste`` permet de lancer la fonction ``actionreste`` lorsque l’on appuie sur une touche du clavier. `` document.onkeyup = actionrelache`` permet de lancer la fonction ``actionrelache`` lorsque l’on relâche la touche du clavier.
<br>
Pour modifier un paramètre de style, c’est-à-dire la couleur de police, du fond, le placement, etc… , on appelle l’élément que nous souhaitons modifier, on va dans le paramètre ``style`` et on écrit le nom de l’attribut de style et on lui affecte une nouvelle valeur. ``ciblerelache.style.display = "none"`` signifie que pour l’élément ``ciblerelache`` (qui contient la balise <p> avec l’id « relache ») nous modifions l’attribut de style ``display`` (qui correspond à l’affichage de la balise) pour que la balise disparaisse. 
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion clavier 1](https://coding-school.fr/images/users/1627630164.png)
<br>
	
Lorsque j’appui/reste appuyé sur la touche :<br>![JS - Gestion clavier 2](https://coding-school.fr/images/users/1627630183.png)
<br>
	
En relâchant la touche :<br>![JS - Gestion clavier 3](https://coding-school.fr/images/users/1627630197.png)
 <br>

3 . Gestion de la pression

Grâce aux différentes propriétés de JS, il est possible d’exécuter du code en fonction de la pression sur une touche du clavier. Quelle est la différence avec ce que l’on a vu précédemment ? Ici, on prendra en compte la pression de la touche : cela signifie que le code sera exécuté lors de l’appui et lorsque nous restons appuyés, le code se réexécute tant que nous ne relâchons pas la touche.
<br>
Voyons comment gérer la pression d’une touche du clavier :
```html
document.onkeypress = votre_fonction ;
```
<br>

Ici, la propriété ``onkeypress`` permet de déclencher la fonction ``votre_fonction`` quand l’utilisateur appui et maintient la touche. La fonction sera exécutée une fois à l’appui et plusieurs fois pendant le temps que vous restez appuyé.
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="clavier.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion du clavier</h2>
        <br>
        <section>
            <h3>Les événements liés au clavier</h3>
            <p id="colors">
                La couleur change lors d'un appui et plusieurs fois tant que je reste appuyé 
            </p>
        </section>
    </body>
    <script src="clavier.js"></script>
</html>
```
<br>

Je souhaite changer la couleur de fond de ma balise ``<p>`` quand je presse une touche du clavier et je maintiens la pression. 
<br>
Pour cela je fais le code JS suivant :
```html
let ciblecolors = document.getElementById("colors");

function randomcolors(){
    let randomColor = (Math.floor(Math.random()*0xFFFFFF)).toString(16);
    return "#" + randomColor;
}

function actionpress(){
    let colors = randomcolors();
    ciblecolors.style.backgroundColor = colors;
}

document.onkeypress = actionpress;
```
<br>

Ma variable ``ciblecolors`` contient la balise avec l’id « colors » qui correspond à la balise dont je souhaite modifier la couleur de fond. ``document.onkeypress = actionpress`` permet de lancer la fonction ``actionpress`` lorsque l’on presse une touche du clavier et que l’on maintient la pression.
<br>
Je souhaite modifier la couleur de fond de façon aléatoire, pour cela j’utilise la formule suivante qui permet de générer un nombre hexadécimal : `` Math.floor(Math.random()*0xFFFFFF)``. Puis je transforme le résultat en string. Puisqu’en HTML les codes couleurs sont représentés avec un hashtag « # » j’ajoute au début le « # ».
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion clavier 4](https://coding-school.fr/images/users/1627630208.png)
<br>

Lorsque j’appui une fois sur une touche :<br>![JS - Gestion clavier 5](https://coding-school.fr/images/users/1627630219.png)
<br>

Lorsque je maintiens la pression sur la touche :<br>![JS - Gestion clavier 6](https://coding-school.fr/images/users/1627630234.png)
 <br>

<br>![JS - Gestion clavier 7](https://coding-school.fr/images/users/1627630248.png)

4 . Gestion des événements souris

5 . Gestion du clic

Grâce aux différentes propriétés de JS, il est possible d’exécuter du code en cliquant sur un élément, en appuyant sur le clic gauche (sans relâcher) ou en relâchant le clic gauche.
<br>
Commençons par voir comment gérer le clic et le doucle-clic :
```html
"votre_element".onclick = votre_fonction1
"votre_element".ondblclick = votre_fonction2
```
<br>

Ici, la propriété ``onclick`` permet de déclencher la fonction ``votre_fonction1`` quand l’utilisateur clique sur ``votre element`` (qui sera une balise HTML) alors que la propriété ``ondblclick`` quant à elle permet de déclencher la fonction ``votre_fonction2`` quand l’utilisateur clique deux fois sur ``votre element``.
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="Souris.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion de la souris</h2>
        <br>
        <section id="section">
            <h3>Les événements liés à la souris</h3>
            <p id="test">
                Quand je clique ici, mon texte change de couleur !
                Mais quand je double clique, il disparaît !
            </p>
        </section>
    </body>
    <script src="Souris1.js"></script>
</html>
```
<br>

Je souhaite passer du vert au rose et vice-versa en couleur de fond de ma balise ``<p>`` quand je clique sur la balise ``<section>`` et quand je double-clique je souhaite qu’elle disparaisse. 
<br>
Pour cela je fais le code JS suivant :
```html
var n = 0;
var i = 0;
let clic = document.getElementById('section'); 
let cible = document.getElementById("test");

function actiondblclick(){
    if (n == 0) {
        cible.style.display = "none";
        n = 1;
    } else {
        cible.style.display = "block";
        n = 0;
    }
}

function actionclick(){
    if (i == 0) {
        cible.style.backgroundColor = "pink";
        i = 1;
    } else {
        cible.style.backgroundColor = "green";
        i = 0;
    }
}

clic.onclick = actionclick;
clic.ondblclick = actiondblclick;
```
<br>

Ma variable ``clic`` contient la balise avec l’id « section » qui correspond à l’endroit où je vais cliquer et ma variable ``cible`` contient la balise avec l’id « test » qui correspond à la balise que je souhaite modifier. `` clic.onclick = actionclick`` permet de lancer la fonction ``actionclick`` lorsque que l’on clique sur la balise que contient la variable ``clic``. `` clic.ondblclick = actiondblclick``permet de lancer la fonction ``actiondblclick`` lorsque l’on double clique sur la balise que contient la variable ``clic``.

Pour modifier un paramètre de style, c’est-à-dire la couleur de police, du fond, le placement, etc… , on appel l’élément que nous souhaitons modifier, on va dans le paramètre ``style`` et on écrit le nom de l’attribut de style et on lui affecte une nouvelle valeur. ``cible.style.backgroundColor = "green"`` signifie que pour l’élément ``cible`` (qui contient la balise ``<p>`` avec la classe « test ») nous modifions l’attribut de style ``BackgroundColor`` (qui correspond à la couleur du fond de la zone de la balise) pour que ce soit vert. L’attribut ``display`` ici nous permet d’afficher ou non le contenu de la balise.
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion souris 1](https://coding-school.fr/images/users/1627304060.png)

Après un premier clic :<br>![JS - Gestion souris 2](https://coding-school.fr/images/users/1627304075.png)

Après un deuxième clic :<br>![JS - Gestion souris 3](https://coding-school.fr/images/users/1627304086.png)

Après un double-clic :<br>![JS - Gestion souris 4](https://coding-school.fr/images/users/1627304100.png)
<br>
	
Maintenant, voyons comment gérer le maintien et le relâchement du clic gauche :
```html
"votre_element".onmousedown = votre_fonction1
"votre_element".onmouseup = votre_fonction2
```
<br>

Ici, la propriété ``onmousedown`` permet de déclencher la fonction ``votre_fonction1`` quand l’utilisateur laisse le clic gauche (ou droite) enfoncé sur ``votre_element`` (qui sera une balise HTML) alors que la propriété ``onmouseup`` quant à elle permet de déclencher la fonction ``votre_fonction2`` quand l’utilisateur relâche le clic sur ``votre_element``.
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="Souris.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion de la souris</h2>
        <br>
        <section id="section">
            <h3>Les événements liés à la souris</h3>
            <p id="reste">Je reste appuyé sur le clic gauche
            </p>
            <p id="relache">
                Je relache le clic gauche
            </p>
        </section>
    </body>
    <script src="Souris.js"></script>
</html>
```
<br>

Je souhaite afficher la balise ``<p>`` avec la valeur "reste" pour l’attribut ``id`` et faire disparaître la balise ``<p>`` avec la valeur "relache" quand je laisse le clic appuyé sur la balise ``<section>``. Quand je relâche je souhaite que la balise ``<p>`` avec la valeur "reste" s’affiche et que la balise ``<p>`` avec la valeur "reste" disparaisse. 
<br>
Pour cela je fais le code JS suivant :
```html
let clic = document.getElementById('section'); 
let ciblereste = document.getElementById("reste");
let ciblerelache = document.getElementById("relache");

function actionrelache(){
    ciblereste.style.display = "none";
    ciblerelache.style.display = "block";
}

function actionreste(){
    ciblerelache.style.display = "none";
    ciblereste.style.display = "block";
}

clic.onmousedown = actionreste;
clic.onmouseup = actionrelache;
```
<br>

Ma variable ``clic`` contient la balise avec l’id « section » qui correspond à l’endroit où je vais cliquer, ma variable ``ciblereste`` contient la balise avec l’id « reste » qui correspond à la balise que je souhaite faire apparaître lors du maintien du clic et ma variable ``ciblerelache`` contient la balise avec l’id « relache » qui correspond à la balise que je souhaite faire apparaître lors du relâchement du clic. ``clic.onmousedown = actionreste`` permet de lancer la fonction ``actionreste`` lorsque que l’on reste appuyé avec le clic souris sur la balise que contient la variable ``clic``. `` clic.onmouseup = actionrelache`` permet de lancer la fonction ``actionrelache`` lorsque que l’on relâche le clic souris de la balise que contient la variable ``clic``.

Ici, on utilise l’attribut ``display`` qui nous permet d’afficher ou non le contenu de la balise.
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion souris 5](https://coding-school.fr/images/users/1627304112.png)

En restant appuyé sur le clic :<br>![JS - Gestion souris 6](https://coding-school.fr/images/users/1627304125.png)

En relâchant le clic :<br>![JS - Gestion souris 7](https://coding-school.fr/images/users/1627304136.png)

6 . Gestion de la position

Grâce aux différentes propriétés de JS, il est possible d’exécuter du code en survolant un élément, en quittant l’élément ou en déplaçant la souris sur l’élément.
<br>
Commençons par voir comment le survole et le fait de quitter l’élément :
```html
"votre_element".onmouseover = votre_fonction1
"votre_element".onmouseout = votre_fonction2
```
<br>

Ici, la propriété ``onmouseover`` permet de déclencher la fonction ``votre_fonction1`` quand l’utilisateur passe sur ``votre element`` (qui sera une balise HTML) avec la souris alors que la propriété ``onmouseout`` quant à elle permet de déclencher la fonction ``votre_fonction2`` quand l’utilisateur quitte ``votre element`` avec la souris.
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="Souris.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion de la souris</h2>
        <br>
        <section id="section">
            <h3>Les événements liés à la souris</h3>
            <p id="survole">
                Je survole la balise
            </p>
            <p id="quitte">
                Je n'ai plus ma souris sur la balise
            </p>
        </section>
    </body>
    <script src="Souris.js"></script>
</html>
```
<br>

Je souhaite passer du vert au rose et vice-versa en couleur de fond de ma balise ``<p>`` quand je clique sur la balise ``<section>`` et quand je double-clique je souhaite qu’elle disparaisse. 
<br>
Pour cela je fais le code JS suivant :
```html
let clic = document.getElementById('section'); 
let ciblesurvole = document.getElementById("survole");
let ciblequitte = document.getElementById("quitte");

function actionquitte(){
    ciblesurvole.style.display = "none";
    ciblequitte.style.display = "block";
}

function actionsurvole(){
    ciblequitte.style.display = "none";
    ciblesurvole.style.display = "block";
}

clic.onmouseover = actionsurvole;
clic.onmouseout = actionquitte;
```
<br>

Ma variable ``clic`` contient la balise avec l’id « section » qui correspond à l’endroit où je vais passer ma souris, ma variable ``ciblesurvole`` contient la balise avec l’id « survole » qui correspond à la balise que je souhaite faire apparaître lors du passage de ma souris et ma variable ``ciblequitte`` contient la balise avec l’id « quitte » qui correspond à la balise que je souhaite faire apparaître lorsque ma souris n’est plus sur la balise avec l’id « section ». `` clic.onmouseover = actionsurvole`` permet de lancer la fonction ``actionsurvole`` lorsque que l’on passe notre souris sur la balise que contient la variable ``clic``. `` clic.onmouseout = actionquitte`` permet de lancer la fonction ``actionquitte`` lorsque que l’on n’a plus la souris sur la balise que contient la variable ``clic``.
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion souris 8](https://coding-school.fr/images/users/1627304147.png)

Lorsque je survole la balise avec ma souris :<br>![JS - Gestion souris 9](https://coding-school.fr/images/users/1627304159.png)

Lorsque je n’ai plus ma souris sur la balise :<br>![JS - Gestion souris 10](https://coding-school.fr/images/users/1627304195.png)
<br>

Maintenant voyons comment gérer le déplacement de la souris sur une balise :
```html
"votre_element".onmousemove = votre_fonction
```
<br>

Ici, la propriété ``onmousemove`` permet de déclencher la fonction ``votre_fonction`` quand l’utilisateur déplace sa souris sur ``votre element`` (qui sera une balise HTML).
<br>
Prenons un exemple avec le code HTML suivant :
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Apprendre le JavaScript</title>
        <link rel="stylesheet" href="Souris.css">
        <meta charset="utf-8">
    </head>
    <body>
        <h2>La gestion de la souris</h2>
        <br>
        <section id="section">
            <h3>Les événements liés à la souris</h3>
            <p id="move">
                La couleur change pendant que je bouge ma souris sur la balise
            </p>
        </section>
    </body>
    <script src="Souris.js"></script>
</html>
```
<br>

Je souhaite changer la couleur de fond de ma balise ``<p>`` quand je bouge ma souris sur la balise ``<section>``. 
<br>
Pour cela je fais le code JS suivant :
```html
let clic = document.getElementById('section'); 
let ciblemove = document.getElementById("move");

function randomcolors(){
    let randomColor = (Math.floor(Math.random()*0xFFFFFF)).toString(16);
    return "#" + randomColor;
}

function actionmove(){
    let colors = randomcolors();
    ciblemove.style.backgroundColor = colors;
}

clic.onmousemove = actionmove;
```
<br>

Ma variable ``clic`` contient la balise avec l’id « section » qui correspond à l’endroit où je vais bouger ma souris et ma variable ``ciblemove`` contient la balise avec l’id « move » qui correspond à la balise dont je souhaite modifier la couleur de fond. ``clic.onmousemove = actionmove`` permet de lancer la fonction ``actionmove`` lorsque que l’on bouge notre souris sur la balise que contient la variable ``clic``.

Je souhaite modifier la couleur de fond de façon aléatoire, pour cela j’utilise la formule suivante qui permet de générer un nombre hexadécimal : `` Math.floor(Math.random()*0xFFFFFF)``. Puis je transforme le résultat en string. Puisqu’en HTML les codes couleurs sont représentés avec un hashtag « # » j’ajoute au début le « # ».
<br>
Résultat :

Premier lancement de la page :<br>![JS - Gestion souris 11](https://coding-school.fr/images/users/1627304206.png)

Lorsque je bouge ma souris sur la balise :<br>![JS - Gestion souris 12](https://coding-school.fr/images/users/1627304217.png)
<br>![JS - Gestion souris 13](https://coding-school.fr/images/users/1627304229.png)