Interactions Web : JavaScript

Objectifs

Situer le rôle du JavaScript par rapport au HTML et au CSS.
Sélectionner un élément du DOM et modifier son contenu ou son style.
Réagir à un événement (click, input…) avec addEventListener.
Réaliser un petit script interactif (compteur, miroir de saisie).

Idée clé

Le navigateur expose la page sous forme d'arbre : le DOM. Le JavaScript sélectionne des nœuds, les modifie, et s'abonne aux événements utilisateur.

HTML, CSS, JS

Langage	Rôle
HTML	Structure
CSS	Apparence
JavaScript	Comportement dynamique

Le JS côté client s'exécute dans le navigateur (créé en 1995 par Brendan Eich ; aujourd'hui omniprésent sur le Web).

Syntaxe minimale

Blocs avec {} ; let (modifiable), const (constante).

let score = 0;
const viesMax = 3;

function direBonjour(prenom) {
    return "Bonjour " + prenom;
}

console.log(direBonjour("Thomas"));

Le DOM

Sélectionner

let titre = document.getElementById("mon-titre");
let bouton = document.querySelector(".btn-rouge");

Modifier contenu et style

titre.textContent = "Nouveau titre";
titre.style.color = "orange";
titre.style.fontSize = "24px"; // camelCase : backgroundColor, etc.

innerHTML interprète du HTML : à éviter avec du texte utilisateur (risque XSS). Préférer textContent quand c'est possible.

Événements

let monBouton = document.getElementById("btn-action");

monBouton.addEventListener("click", function() {
    alert("Bouton cliqué !");
});

Événement	Quand
`click`	Clic
`mouseover`	Survol
`keydown`	Touche enfoncée
`input`	Champ qui change
`submit`	Envoi de formulaire

Schéma mental : sélectionner → écouter → réagir.

Piège fréquent

Appeler getElementById avant que le HTML existe (script trop haut dans la page) : l'élément est null. Placer le script en fin de <body>, ou écouter l'événement DOMContentLoaded. Autre erreur : oublier que .value lit un champ, pas .textContent.

À retenir

JS = interactions ; DOM = représentation de la page.
getElementById / querySelector pour cibler.
textContent et .style pour mettre à jour.
addEventListener(type, fonction) pour réagir.
input + .value pour suivre une saisie.
Toujours vérifier que l'élément existe avant de l'utiliser.

Pour s'entraîner / Suite

Entraînez-vous avec les exercices ci-dessous. Ensuite, le cours Web et HTTP situe ces pages dans le modèle client-serveur.

Exercices pratiques

Niveaux de difficulté

Introduction, Facile, Moyen, Avancé, Difficile, Expert — puis choisis l'exercice.

Le Compteur

Champ Miroir

Énoncé

Objectif : Créer un compteur de likes

Nous allons créer un bouton qui incrémente un compteur affiché à l'écran.

Code HTML fourni :

<p>Likes : <span id="compteur">0</span></p>
<button id="btn-like">J'aime 👍</button>

Consignes :

Sélectionner l'élément span (le nombre) et le bouton dans des variables.
Créer une variable nombre initialisée à 0.
Ajouter un écouteur d'événement click sur le bouton.
Dans la fonction :
- Augmenter nombre de 1.
- Mettre à jour le texte du span.
- Bonus : Si le nombre dépasse 10, changer la couleur du texte en rouge.