L'interaction homme machine avec JavaScript
Lorsque vous consultez un site web, vous ne faites pas que lire une page (et de retenir son contenu lorsqu’il s’agit du site sur lequel vous vous trouvez actuellement). Vous interagissez avec elle. Vous cliquez sur des boutons et des liens hypertextes, vous remplissez des formulaires, vous sélectionnez des options dans des listes, vous faites défiler des menus ou vous saisissez du texte. Toutes ces actions constituent des interactions homme-machine (IHM).
Niveau de cette page : classe de première générale, cours de NSI.
IHM
L’IHM est l'ensemble des éléments qui permettent à un utilisateur de communiquer avec un programme informatique. Dans le cas d'une application web, cette interface est affichée dans un navigateur et repose principalement sur trois langages :
- HTML, qui décrit les éléments de la page,
- CSS, qui définit leur présentation,
- JavaScript, qui rend la page interactive en réagissant aux actions de l'utilisateur.
En classe de seconde, on découvre le HTML et le CSS. Ici, nous allons davantage nous intéresser au rôle de JavaScript dans la gestion des interactions.
HTML et IHM
Une interface web est constituée de nombreux composants graphiques. Chacun possède une fonction particulière.
Parmi les plus courants, on trouve :
| Composant | Balise HTML | Utilisation |
| Bouton | <button> | Lancer une action |
| Champ de texte | <input type="text"> | Saisir du texte |
| Zone de texte | <textarea> | Écrire un texte plus long |
| Case à cocher | <input type="checkbox"> | Oui / Non |
| Bouton radio | <input type="radio"> | Choisir une seule réponse |
| Liste déroulante | <select> | Choisir une valeur parmi plusieurs |
| Lien | <a> | Ouvrir une autre page |
| Image | <img> | Afficher une illustration |
Ces composants constituent l'interface visible de l'application.
Par exemple :
<h2>Inscription</h2>
<label>Nom :</label>
<input type="text"><br><br>
<label>Classe :</label>
<select>
<option>Première</option>
<option>Terminale</option>
</select><br><br>
<button>Valider</button>
Cette page contient :
- un titre,
- un champ de saisie,
- une liste déroulante,
- un bouton.
À ce stade, le bouton ne fait encore rien. Il est juste décrit par le HTML. Celui-ci indique quels composants sont présents, leur ordre et leur contenu. En revanche, il ne précise pas ce qui doit se produire lorsqu'un utilisateur clique sur un bouton ou modifie un champ. C'est le rôle de JavaScript.
Évènements
Un évènement est une action réalisée par l'utilisateur (ou parfois par le navigateur) et détectée par la page web. Par exemple :
- cliquer sur un bouton,
- déplacer la souris,
- appuyer sur une touche du clavier,
- modifier un champ de texte,
- faire défiler la page.
Lorsqu'un évènement se produit, JavaScript peut exécuter une ou plusieurs instructions. On dit qu'il réagit à l'évènement.
Voici les évènements les plus fréquents.
| Évènement | Quand se produit-il ? |
| click | L'utilisateur clique sur un élément. |
| dblclick | Double-clic. |
| mouseover | La souris passe sur un élément. |
| mouseout | La souris quitte un élément. |
| keydown | Une touche du clavier est enfoncée. |
| keyup | Une touche est relâchée. |
| input | Le contenu d'un champ change. |
| change | La valeur d'un composant est modifiée. |
| submit | Envoi d'un formulaire. |
| load | La page vient d'être chargée. |
Chaque composant peut gérer plusieurs évènements. Par exemple :
- un bouton réagit à click,
- un champ de texte peut réagir à input, change, keydown, etc.
Pour qu'un évènement produise un effet, on lui associe une fonction JavaScript. Exemple :
<h2>Bienvenue</h2>
<button onclick="bonjour()">
Dire bonjour
</button>
<p id="message"></p>
<script>
function bonjour() {
document.getElementById("message").textContent =
"Bonjour et bienvenue en NSI !";
}
</script>
Le HTML décrit la présence d'un bouton et d'un paragraphe vide.
<button onclick="bonjour()">
Dire bonjour
</button>
L'attribut onclick indique que lorsque l'utilisateur clique sur le bouton, la fonction bonjour() est exécutée. La fonction JavaScript est function bonjour() {…}. Elle recherche l'élément dont l'identifiant est message puis remplace son contenu.
Alors que le HTML décrit l’interface, le JavaScript décrit son comportement. Il indique quelle fonction exécuter, quel élément modifier et quel texte afficher.
