TP3 - JavaScript : Événements et Interactivité

Travaux Pratiques N°3

JavaScript : Événements et Interactivité

Rendre une page web vivante en réagissant aux actions de l'utilisateur

Objectifs Pédagogiques

Comprendre ce qu'est le DOM et son rôle
Sélectionner des éléments HTML depuis JavaScript
Modifier le contenu et l'apparence d'une page
Réagir aux actions de l'utilisateur (clics, saisie, survol)
Lire les valeurs saisies dans un formulaire
Combiner événements et logique pour créer des pages interactives

Préparation du TP

1.1 Structure du projet

Créez un nouveau dossier TP3 dans votre dossier TP-JavaScript avec ces trois fichiers :

TP-JavaScript/
└── TP3/
    ├── index.html
    ├── style.css
    └── script.js

1.2 Fichier de départ

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TP3 - Événements</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1 id="titre">Mon premier site interactif</h1>
    <p id="description">Cette page va changer grâce à JavaScript.</p>

    <button id="monBouton">Cliquez ici</button>

    <!-- Le script est TOUJOURS à la fin du body -->
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 24px;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid #1e40af;
    background: #1e40af;
    color: white;
    border-radius: 6px;
    margin: 8px;
}

button:hover {
    background: #1d4ed8;
}

input, select {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 8px;
}

.resultat {
    margin-top: 20px;
    padding: 16px;
    background: #f0f9ff;
    border-radius: 8px;
    font-size: 18px;
}

script.js

console.log("TP3 chargé avec succès");

À faire maintenant

Créez ces 3 fichiers, lancez index.html avec Live Server, et vérifiez que le message apparaît dans la console (F12).

Comprendre le DOM

2.1 C'est quoi le DOM ?

Quand le navigateur charge une page HTML, il crée en mémoire une copie structurée de tous les éléments de la page. Cette copie s'appelle le DOM (Document Object Model).

Analogie simple

Imaginez votre page HTML comme un document imprimé (une feuille de papier). Vous ne pouvez pas la modifier une fois imprimée.

Le DOM, c'est comme avoir ce même document sur un écran d'ordinateur : vous pouvez sélectionner un paragraphe, changer son texte, modifier sa couleur, le supprimer ou en ajouter un nouveau — en temps réel, sans recharger la page.

JavaScript est l'outil qui vous permet de faire ces modifications.

Concrètement, quand vous écrivez ce HTML :

<h1 id="titre">Bonjour</h1>
<p>Un paragraphe</p>

Le navigateur crée des objets JavaScript pour chaque élément. Grâce au DOM, JavaScript peut :

Lire le contenu d'un élément (« quel est le texte de ce titre ? »)
Modifier le contenu (« change le texte du titre »)
Changer le style (« rends ce paragraphe rouge »)
Réagir aux actions (« quand on clique sur ce bouton, fais ceci »)

2.2 Sélectionner un élément

Avant de modifier un élément, il faut d'abord le sélectionner (le « pointer du doigt »). La méthode la plus utilisée est document.querySelector().

Elle fonctionne exactement comme les sélecteurs CSS que vous connaissez déjà :

Ce que vous voulez sélectionner	Sélecteur CSS	En JavaScript
Un élément par son id	`#titre`	`document.querySelector("#titre")`
Un élément par sa classe	`.resultat`	`document.querySelector(".resultat")`
Un élément par sa balise	`p`	`document.querySelector("p")`
Un bouton à l'intérieur d'un div	`div button`	`document.querySelector("div button")`

// Sélectionner le h1 qui a l'id "titre"
let titre = document.querySelector("#titre");

// Sélectionner le paragraphe qui a l'id "description"
let paragraphe = document.querySelector("#description");

// Sélectionner le bouton
let bouton = document.querySelector("#monBouton");

// Vérifier dans la console
console.log(titre);       // <h1 id="titre">...</h1>
console.log(paragraphe);  // <p id="description">...</p>
console.log(bouton);      // <button id="monBouton">...</button>

Erreur fréquente

Si vous oubliez le # devant l'id, JavaScript cherchera une balise au lieu d'un id :

querySelector("titre") → cherche une balise <titre> (n'existe pas !)
querySelector("#titre") → cherche l'élément avec id="titre" ✅

À faire maintenant

Dans script.js, sélectionnez les trois éléments de votre page (titre, paragraphe, bouton) et affichez-les dans la console. Vérifiez que vous obtenez bien les éléments HTML et pas null.

2.3 Modifier le contenu d'un élément

Une fois l'élément sélectionné, on peut changer son texte avec la propriété textContent :

// Sélectionner l'élément
let titre = document.querySelector("#titre");

// LIRE le contenu actuel
console.log(titre.textContent);  // "Mon premier site interactif"

// MODIFIER le contenu
titre.textContent = "Nouveau titre !";
// → Le titre change immédiatement sur la page

textContent vs innerHTML

textContent — change le texte brut (plus sûr, recommandé)
innerHTML — change le contenu HTML (permet d'insérer des balises)

let paragraphe = document.querySelector("#description");

// Avec textContent : le HTML est affiché comme du texte
paragraphe.textContent = "Texte <strong>en gras</strong>";
// → Affiche littéralement : Texte <strong>en gras</strong>

// Avec innerHTML : le HTML est interprété
paragraphe.innerHTML = "Texte <strong>en gras</strong>";
// → Affiche : Texte en gras

À faire maintenant

Changez le titre de votre page en "Bienvenue sur mon site !" et le paragraphe en "Modifié par JavaScript". Rechargez et observez le changement.

2.4 Modifier le style (l'apparence)

Chaque élément a une propriété style qui permet de modifier son CSS depuis JavaScript :

let titre = document.querySelector("#titre");

// Changer la couleur du texte
titre.style.color = "red";

// Changer la taille
titre.style.fontSize = "40px";

// Changer le fond
titre.style.backgroundColor = "#ffffcc";

// Ajouter un padding
titre.style.padding = "10px";

Attention à la syntaxe

En CSS, on écrit background-color (avec un tiret). En JavaScript, on écrit backgroundColor (en camelCase, sans tiret). C'est la même règle pour toutes les propriétés composées :

CSS	JavaScript
`font-size`	`fontSize`
`background-color`	`backgroundColor`
`border-radius`	`borderRadius`
`text-align`	`textAlign`

À faire maintenant

Changez la couleur du titre en bleu et la couleur du paragraphe en gris. Ajoutez un fond jaune clair au paragraphe.

Les Événements : Réagir aux Actions

3.1 Qu'est-ce qu'un événement ?

Analogie simple

Un événement, c'est comme une sonnette de porte. Quelqu'un appuie sur la sonnette (l'action), et vous réagissez en ouvrant la porte (la réaction).

En JavaScript :

L'action = l'utilisateur clique, tape au clavier, survole un élément...
La réaction = le code JavaScript que vous décidez d'exécuter

Voici les événements les plus courants :

Événement	Se déclenche quand...	Exemple d'usage
`"click"`	L'utilisateur clique sur l'élément	Bouton, lien, image
`"input"`	L'utilisateur tape dans un champ	Recherche en temps réel
`"change"`	La valeur d'un champ change (après validation)	Liste déroulante, checkbox
`"mouseover"`	La souris survole l'élément	Afficher un aperçu
`"mouseout"`	La souris quitte l'élément	Masquer un aperçu
`"keydown"`	Une touche du clavier est pressée	Raccourcis clavier
`"submit"`	Un formulaire est soumis	Validation de formulaire

3.2 Écouter un événement avec addEventListener

Pour réagir à un événement, on utilise addEventListener. La syntaxe est toujours la même, en 3 étapes :

// Étape 1 : Sélectionner l'élément
let bouton = document.querySelector("#monBouton");

// Étape 2 : Écrire la fonction qui sera exécutée
function reagirAuClic() {
    console.log("Le bouton a été cliqué !");
}

// Étape 3 : Associer l'événement à la fonction
bouton.addEventListener("click", reagirAuClic);
//                       │              │
//              Quel événement ?    Quelle fonction exécuter ?

Erreur très fréquente

On écrit reagirAuClic sans parenthèses. Si vous écrivez reagirAuClic(), la fonction s'exécute immédiatement au chargement de la page au lieu d'attendre le clic !

addEventListener("click", reagirAuClic) → attend le clic ✅
addEventListener("click", reagirAuClic()) → s'exécute tout de suite ❌

À faire maintenant

Copiez le code ci-dessus dans votre script.js. Cliquez sur le bouton et vérifiez que le message apparaît dans la console à chaque clic.

3.3 Premier exemple concret : changer le titre au clic

Combinons ce qu'on a appris — sélection, modification, et événement :

// 1. Sélectionner les éléments
let bouton = document.querySelector("#monBouton");
let titre = document.querySelector("#titre");

// 2. Écrire la réaction
function changerTitre() {
    titre.textContent = "Titre modifié !";
    titre.style.color = "green";
}

// 3. Associer
bouton.addEventListener("click", changerTitre);

Résultat

Quand l'utilisateur clique sur le bouton, le titre change de texte et devient vert — sans recharger la page.

À faire maintenant

Testez ce code. Puis modifiez-le pour qu'au clic, le titre affiche votre prénom et devienne bleu.

3.4 Écriture courte avec une fonction anonyme

En pratique, quand la réaction est courte, on peut écrire la fonction directement dans addEventListener sans lui donner de nom :

// Version longue (avec fonction nommée)
function direBonjour() {
    console.log("Bonjour !");
}
bouton.addEventListener("click", direBonjour);

// Version courte (fonction anonyme)
bouton.addEventListener("click", function() {
    console.log("Bonjour !");
});

// Version courte avec arrow function
bouton.addEventListener("click", () => {
    console.log("Bonjour !");
});

Quelle version utiliser ?

Les trois versions font exactement la même chose. Utilisez celle avec laquelle vous êtes le plus à l'aise. Dans ce TP, nous utiliserons les fonctions nommées pour plus de clarté.

Lire les Saisies de l'Utilisateur

4.1 Récupérer la valeur d'un champ input

Au TP1, on utilisait prompt() pour demander une saisie. C'est pratique pour apprendre, mais dans un vrai site, on utilise des champs HTML (<input>).

Modifiez votre index.html pour ajouter un champ de saisie :

index.html (à ajouter dans le body)

<h2>Salutation personnalisée</h2>
<input type="text" id="champNom" placeholder="Entrez votre nom">
<button id="btnSaluer">Saluer</button>
<div id="resultatSalut" class="resultat"></div>

script.js

// 1. Sélectionner les éléments
let champNom = document.querySelector("#champNom");
let btnSaluer = document.querySelector("#btnSaluer");
let resultatSalut = document.querySelector("#resultatSalut");

// 2. Réaction au clic
function saluerUtilisateur() {
    // Lire ce que l'utilisateur a tapé
    let nom = champNom.value;

    // Vérifier que le champ n'est pas vide
    if (nom === "") {
        resultatSalut.textContent = "Veuillez entrer votre nom.";
        resultatSalut.style.color = "red";
        return;  // Arrêter la fonction ici
    }

    // Afficher le message
    resultatSalut.textContent = `Bonjour, ${nom} ! Bienvenue.`;
    resultatSalut.style.color = "green";
}

// 3. Associer
btnSaluer.addEventListener("click", saluerUtilisateur);

Le mot-clé .value

Pour les éléments <input>, on utilise .value (pas .textContent) pour lire ce que l'utilisateur a tapé. C'est la principale chose à retenir :

element.textContent → pour les <p>, <h1>, <div>... (éléments d'affichage)
element.value → pour les <input>, <select>, <textarea> (éléments de saisie)

À faire maintenant

Testez ce code. Essayez de cliquer sans rien écrire, puis avec un nom. Observez les deux comportements différents.

4.2 Champ numérique et conversion

Ajoutez cette section dans votre page :

index.html (à ajouter)

<h2>Calculateur d'âge</h2>
<input type="number" id="champAnnee" placeholder="Année de naissance">
<button id="btnAge">Calculer mon âge</button>
<div id="resultatAge" class="resultat"></div>

script.js (à ajouter)

let champAnnee = document.querySelector("#champAnnee");
let btnAge = document.querySelector("#btnAge");
let resultatAge = document.querySelector("#resultatAge");

function calculerAge() {
    let annee = Number(champAnnee.value);  // Conversion en nombre !
    let anneeActuelle = 2026;

    if (annee < 1900 || annee > anneeActuelle) {
        resultatAge.textContent = "Année invalide.";
        resultatAge.style.color = "red";
        return;
    }

    let age = anneeActuelle - annee;
    resultatAge.textContent = `Vous avez ${age} ans.`;
    resultatAge.style.color = "#333";
}

btnAge.addEventListener("click", calculerAge);

Rappel important (vu au TP1)

.value retourne toujours une chaîne de caractères, même pour type="number". Il faut convertir avec Number() avant de faire des calculs.

À faire maintenant

Testez le calculateur d'âge. Essayez avec une année valide, puis avec 1800 ou 2030. Vérifiez que la validation fonctionne.

4.3 L'événement "input" : réagir en temps réel

L'événement "click" attend que l'utilisateur appuie sur un bouton. L'événement "input" se déclenche à chaque caractère tapé, ce qui permet des réactions en temps réel.

index.html (à ajouter)

<h2>Compteur de caractères</h2>
<input type="text" id="champTexte" placeholder="Tapez quelque chose...">
<div id="compteur" class="resultat">0 caractère(s)</div>

script.js (à ajouter)

let champTexte = document.querySelector("#champTexte");
let compteur = document.querySelector("#compteur");

function mettreAJourCompteur() {
    let texte = champTexte.value;
    let nb = texte.length;
    compteur.textContent = `${nb} caractère(s)`;
}

// "input" se déclenche à CHAQUE frappe de touche
champTexte.addEventListener("input", mettreAJourCompteur);

Résultat

Le compteur se met à jour instantanément à chaque lettre tapée ou effacée. Pas besoin de cliquer sur un bouton.

À faire maintenant

Testez le compteur. Puis modifiez-le pour qu'il affiche le texte en rouge si on dépasse 20 caractères (comme une limite de tweet).

4.4 Les listes déroulantes (select) et l'événement "change"

index.html (à ajouter)

<h2>Choix de couleur</h2>
<select id="listeCouleur">
    <option value="">-- Choisir une couleur --</option>
    <option value="#e74c3c">Rouge</option>
    <option value="#3498db">Bleu</option>
    <option value="#2ecc71">Vert</option>
    <option value="#f39c12">Orange</option>
</select>
<div id="apercu" class="resultat">Choisissez une couleur pour voir l'aperçu.</div>

script.js (à ajouter)

let listeCouleur = document.querySelector("#listeCouleur");
let apercu = document.querySelector("#apercu");

function changerCouleur() {
    let couleur = listeCouleur.value;  // Récupère la value de l'option sélectionnée

    if (couleur === "") {
        apercu.style.backgroundColor = "#f0f9ff";
        apercu.textContent = "Choisissez une couleur pour voir l'aperçu.";
        return;
    }

    apercu.style.backgroundColor = couleur;
    apercu.style.color = "white";
    apercu.textContent = `Couleur sélectionnée : ${couleur}`;
}

// "change" se déclenche quand l'utilisateur choisit une option
listeCouleur.addEventListener("change", changerCouleur);

À faire maintenant

Testez ce code. Changez les couleurs dans la liste déroulante et observez comment le fond de l'aperçu change immédiatement.

Le Schéma à Retenir

Tous les exemples de ce TP suivent le même schéma en 3 étapes. Si vous retenez ce schéma, vous pouvez rendre n'importe quelle page interactive :

// ========================================
// ÉTAPE 1 : SÉLECTIONNER les éléments
// ========================================
let monBouton = document.querySelector("#id-du-bouton");
let monChamp = document.querySelector("#id-du-champ");
let maZone = document.querySelector("#id-de-la-zone");

// ========================================
// ÉTAPE 2 : ÉCRIRE la réaction (fonction)
// ========================================
function maReaction() {
    // Lire la saisie :    monChamp.value
    // Modifier du texte :  maZone.textContent = "..."
    // Modifier le style :  maZone.style.color = "..."
}

// ========================================
// ÉTAPE 3 : ASSOCIER événement + réaction
// ========================================
monBouton.addEventListener("click", maReaction);

Résumé en une phrase

« Je sélectionne un élément, j'écris ce qui doit se passer, et je dis quand ça doit se passer. »

Exercices

Pour chaque exercice, ajoutez le HTML nécessaire dans index.html et le JavaScript dans script.js. Suivez toujours le schéma en 3 étapes.

Exercice 1 Convertisseur °C ↔ °F

Créez un convertisseur de température avec :

Un champ <input type="number"> pour saisir la température
Deux boutons : "Vers °F" et "Vers °C"
Un <div> pour afficher le résultat

Formules (rappel du TP1) : F = C × 9/5 + 32 et C = (F − 32) × 5/9

Affichez le résultat arrondi à 2 décimales avec toFixed(2).

Exercice 2 Calculateur de moyenne

Créez une mini-application avec :

Quatre champs <input type="number"> pour saisir 4 notes
Un bouton "Calculer"
Un <div> qui affiche la moyenne et la mention

Mentions : ≥16 Très Bien, ≥14 Bien, ≥12 Assez Bien, ≥10 Passable, <10 Non admis.

Bonus : Changez la couleur du résultat en vert si admis, en rouge sinon.

Exercice 3 Mot de passe

Créez un vérificateur de mot de passe en temps réel avec :

Un champ <input type="password">
Un <div> qui affiche la force du mot de passe

Utilisez l'événement "input" pour réagir à chaque frappe. Règles :

Moins de 4 caractères → Trop court
4 à 7 caractères → Moyen
8 caractères ou plus → Fort

Indice : Utilisez champMotDePasse.value.length pour connaître la longueur.

Exercice 4 Calculatrice simple

Créez une calculatrice avec :

Deux champs <input type="number"> pour les deux nombres
Un <select> pour choisir l'opération (+, −, ×, ÷)
Un bouton "Calculer"
Un <div> pour afficher le résultat

Gérez le cas de la division par zéro (affichez un message d'erreur).

<!-- HTML de départ -->
<input type="number" id="nombre1" placeholder="Nombre 1">

<select id="operation">
    <option value="+">+</option>
    <option value="-">−</option>
    <option value="*">×</option>
    <option value="/">÷</option>
</select>

<input type="number" id="nombre2" placeholder="Nombre 2">
<button id="btnCalculer">Calculer</button>
<div id="resultatCalc" class="resultat"></div>

Indice : Utilisez if / else if ou switch sur la valeur du <select>.

Exercice 5 Liste de tâches (To-Do List)

Créez une mini to-do list avec :

Un champ texte pour saisir une tâche
Un bouton "Ajouter" qui ajoute la tâche en dessous
Chaque tâche ajoutée s'affiche dans un <div>

<!-- HTML de départ -->
<h2>Ma To-Do List</h2>
<input type="text" id="nouvelleTache" placeholder="Nouvelle tâche...">
<button id="btnAjouter">Ajouter</button>
<div id="listeTaches"></div>

Indices :

Utilisez innerHTML += pour ajouter du contenu HTML à la liste
Exemple : listeTaches.innerHTML += "<p>Ma tâche</p>"
N'oubliez pas de vider le champ après l'ajout : champTache.value = ""
Empêchez l'ajout de tâches vides

Récapitulatif

Concept	Syntaxe
Sélectionner par id	`document.querySelector("#monId")`
Sélectionner par classe	`document.querySelector(".maClasse")`
Lire / modifier du texte	`element.textContent`
Lire / modifier du HTML	`element.innerHTML`
Lire une saisie (input)	`champInput.value`
Modifier le style	`element.style.propriété = "valeur"`
Écouter un clic	`element.addEventListener("click", fn)`
Écouter la saisie (temps réel)	`input.addEventListener("input", fn)`
Écouter un changement (select)	`select.addEventListener("change", fn)`
Convertir en nombre	`Number(champInput.value)`

JavaScript : Événements et Interactivité

Objectifs Pédagogiques

Préparation du TP

1.1 Structure du projet

1.2 Fichier de départ

Comprendre le DOM

2.1 C'est quoi le DOM ?

Analogie simple

2.2 Sélectionner un élément

Erreur fréquente

2.3 Modifier le contenu d'un élément

textContent vs innerHTML

2.4 Modifier le style (l'apparence)

Attention à la syntaxe

Les Événements : Réagir aux Actions

3.1 Qu'est-ce qu'un événement ?

Analogie simple

3.2 Écouter un événement avec addEventListener

Erreur très fréquente

3.3 Premier exemple concret : changer le titre au clic

Résultat

3.4 Écriture courte avec une fonction anonyme

Quelle version utiliser ?

Lire les Saisies de l'Utilisateur

4.1 Récupérer la valeur d'un champ input

Le mot-clé .value

4.2 Champ numérique et conversion

Rappel important (vu au TP1)

4.3 L'événement "input" : réagir en temps réel

Résultat

4.4 Les listes déroulantes (select) et l'événement "change"

Le Schéma à Retenir

Résumé en une phrase

Exercices

Exercice 1 Convertisseur °C ↔ °F

Exercice 2 Calculateur de moyenne

Exercice 3 Mot de passe

Exercice 4 Calculatrice simple

Exercice 5 Liste de tâches (To-Do List)

Récapitulatif

Ressources complémentaires