TP - Découverte du JavaScript et du DOM

🎯 Objectif du TP

Apprendre à manipuler les éléments d'une page web avec JavaScript :

Récupérer des éléments HTML avec document.getElementById()
Lire les valeurs des boutons et curseurs
Modifier le contenu des éléments pour afficher des informations
Réagir aux événements (clics, changements de valeur)

🕹️ Zone d'interaction

Vitesse: 5

Votre nom:

📊 Zone d'affichage (à remplir avec JavaScript)

Dernier bouton cliqué: Aucun

Valeur du curseur: -

Nom saisi: -

Nombre de clics total: 0

📝 Exercice 1 : Explorer avec la console

Ouvrez la console du navigateur (F12 ou clic droit > Inspecter > Console)

💡 À faire dans la console :

Tapez : document.getElementById('btnRouge') et observez le résultat
Tapez : document.getElementById('curseurVitesse').value
Bougez le curseur, puis retapez la commande précédente
Tapez : document.getElementById('afficheBouton').textContent = 'Test'

Questions :

Que retourne document.getElementById() ?
Comment récupérer la valeur d'un curseur (input range) ?
Comment modifier le texte affiché dans un élément ?

📝 Exercice 2 : Premiers pas dans le script

Complétez le code JavaScript ci-dessous (voir les commentaires // TODO)

// 1. Récupérer les éléments
const btnRouge = document.getElementById('btnRouge');
const afficheBouton = // TODO: récupérer l'élément 'afficheBouton'
// 2. Créer une fonction qui s'exécute au clic
function clicRouge() { afficheBouton.textContent = 'Rouge'; }
// 3. Associer la fonction au bouton
btnRouge.addEventListener('click', clicRouge);

💡 Aide :

const permet de déclarer une constante (une variable qui ne change pas)
addEventListener('click', fonction) dit "quand on clique, exécute cette fonction"
.textContent permet de lire ou modifier le texte d'un élément

📝 Exercice 3 : Gérer le curseur

Faites en sorte que quand on bouge le curseur, sa valeur s'affiche dans "Valeur du curseur"

const afficheVitesse = // TODO: récupérer la zone d'affichage
// TODO: créer une fonction qui met à jour l'affichage
function majVitesse() {
// Récupérer la valeur du curseur avec curseurVitesse.value
// L'afficher dans afficheVitesse avec .textContent
}
// TODO: écouter l'événement 'input' sur le curseur

💡 Indice : Pour les curseurs, on utilise l'événement 'input' au lieu de 'click'

📝 Exercice 4 : Challenge - Compteur de clics

Créez un compteur qui s'incrémente à chaque clic sur n'importe quel bouton

💡 Pistes :

Créez une variable let compteur = 0; (pas const, car elle va changer !)
Dans vos fonctions de clic, ajoutez compteur++; (pour ajouter 1)
Mettez à jour l'affichage avec afficheClics.textContent = compteur;

Exercice 5: Super Challenge - Calculatrice

Vous pourrez télécharger l'énoncé depuis la page index du site allophysique.