Appliquer la notion
Créer un repl HTML, CSS, JavaScript et exécuter le code ci-après.
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta http-equiv="X-UA-Compatible" content="ie=edge">
6
<title>Example</title>
7
</head>
8
<body>
9
10
<input type="text" id="text" />
11
<p id="holder"></p>
12
</body>
13
<script>
14
const text = document.getElementById("text");
15
const holder = document.getElementById("holder");
16
17
function updateHolder(event) {
18
holder.innerText = text.value;
19
}
20
21
text.addEventListener("keyup", updateHolder);
22
</script>
23
</html>
Vous pouvez aussi copier le code HTML et JavaScript dans un fichier exercice.html et l'ouvrir avec un navigateur web.
Question
Que se passe t-il lorsqu'on écrit dans le champ input ?
Solution
Le paragraphe en dessous est mis à jour avec la nouvelle valeur du champ input.
Question
Pourquoi est-ce de la programmation événementielle ?
Solution
On a placé une brique logicielle qui s'occupe d'attendre qu'un événement se produise pour exécuter une fonction. Ici, l'événement se produit lorsqu'une touche a été pressée dans le champ input.