Veuillez observer les changements dans le panneau DEV TOOLS de cette vidéo muette de 20 secondes
Ce que l’on va construire
Avant d’attaquer un cas concret plus complexe (le menu responsive du chapitre 850), ce chapitre est une première prise en main de JavaScript, avec l’exemple le plus simple possible : un bouton qui change l’apparence de la page.
Le résultat final, en langage naturel : une page affiche un texte et un bouton, sur un fond blanc avec du texte noir. Un clic sur le bouton fait passer le fond en gris anthracite et le texte en blanc. Un second clic sur le même bouton revient à l’état de départ (fond blanc, texte noir) — comme un interrupteur qu’on allume et éteint.
Étape 0 : Pourquoi JavaScript ici ?
Jusqu’ici, tout ce que vous avez fait en CSS réagit automatiquement à certaines situations : une couleur qui change au survol avec :hover, une transition qui se déclenche… le navigateur gère ça tout seul.
Mais un clic qui doit déclencher un changement précis ailleurs sur la page — ici, changer les couleurs de fond et de texte — c’est différent. Le CSS seul ne sait pas réagir à un clic pour modifier un autre élément. C’est exactement ce que JavaScript sait faire : écouter un événement (un clic) et réagir en conséquence.
Comme pour tout ce cours, l’objectif n’est pas de vous apprendre à écrire du JavaScript en profondeur — ce cours reste HTML/CSS. Le code JavaScript de ce chapitre est fourni tel quel ; on explique ce qu’il fait dans les grandes lignes et où le placer, sans entrer dans le détail complet de sa syntaxe.
Étape 1 : Le HTML
Une structure minimale : un texte et un bouton.
<!-- un texte quelconque -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- le bouton qui déclenchera le changement -->
<button class="bouton-theme">Changer le thème</button>
Étape 2 : Le CSS de base
On prépare l’état initial : fond blanc, texte noir, une police sans-serif, et un bouton simple.
/* état de départ : fond blanc, texte noir */
body {
margin: 0;
padding: 40px;
background-color: #ffffff;
color: #000000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
/* anime le changement de couleur en douceur, plutôt qu'un basculement brutal */
transition: background-color 0.3s ease, color 0.3s ease;
}
/* bouton simple */
.bouton-theme {
padding: 10px 20px;
font-size: 1rem;
border: 1px solid #333;
border-radius: 4px;
background-color: transparent;
color: inherit;
cursor: pointer;
}
Un détail utile : color: inherit; sur le bouton. Cette valeur dit au bouton « prends la même couleur de texte que ton parent » (ici, body). Résultat : quand le JavaScript changera la couleur du texte sur body à l’étape suivante, le texte du bouton changera automatiquement avec, sans qu’on ait besoin de cibler le bouton séparément en JS.
Étape 3 : Le JavaScript
On ajoute le code suivant, tel quel, juste avant la balise fermante </body> — comme vu au chapitre 850, c’est l’endroit le plus simple pour un premier contact avec JavaScript, puisqu’on est certain que tout le HTML est déjà chargé à ce moment-là.
<script>
// attend que toute la page soit chargée avant d'exécuter le code
document.addEventListener("DOMContentLoaded", function() {
// on récupère le bouton
const bouton = document.querySelector(".bouton-theme");
// une "mémoire" qui retient si on est actuellement en mode sombre ou non
// au départ : false, donc on N'EST PAS en mode sombre
let modeSombre = false;
// au clic sur le bouton :
bouton.addEventListener("click", function() {
// on inverse la mémoire : true devient false, et false devient true
modeSombre = !modeSombre;
// si on vient de passer en mode sombre...
if (modeSombre) {
// ...on applique directement les nouvelles couleurs
document.body.style.backgroundColor = "#2b2b2b";
document.body.style.color = "#ffffff";
} else {
// ...sinon, on revient aux couleurs de départ
document.body.style.backgroundColor = "#ffffff";
document.body.style.color = "#000000";
}
});
});
</script>
Ce que fait ce code, dans les grandes lignes :
- On récupère le bouton dans la page, pour pouvoir « l’écouter ».
- On crée une mémoire (
modeSombre) qui garde la trace de l’état actuel :true(vrai) oufalse(faux). Au départ, elle vautfalsecar on n’est pas encore en mode sombre. - À chaque clic, cette mémoire est inversée (
!modeSombreveut dire « le contraire de modeSombre »). C’est ce mécanisme d’inversion qui crée l’effet interrupteur : un clic passe en mode sombre, le suivant repasse en mode clair, et ainsi de suite. - Selon la nouvelle valeur de cette mémoire, le code applique soit les couleurs sombres, soit les couleurs claires, directement sur
document.body(l’élément<body>de la page) via.style.backgroundColoret.style.color.
Note pour la suite du cours : ici, on modifie les couleurs directement depuis JavaScript — une technique simple pour un premier contact. Au chapitre 850, vous verrez une autre façon de faire, un peu plus propre : au lieu de changer des couleurs précises depuis JavaScript, on bascule une classe CSS, et c’est le CSS qui décide de l’apparence. Les deux techniques existent et sont valables, selon les cas.
Étape 4 : Assembler le tout
Voici le squelette du fichier complet. À vous de copier-coller, aux bons endroits indiqués en commentaire, les blocs de code déjà vus aux étapes précédentes :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier JavaScript</title>
<style>
/* collez ici le CSS de l'étape 2 */
</style>
</head>
<body>
<!-- collez ici le HTML de l'étape 1 -->
<script>
/* collez ici le JavaScript de l'étape 3 */
</script>
</body>
</html>
Étape 5 : Tester
Ouvrez votre fichier assemblé dans le navigateur. La page doit s’afficher avec un fond blanc et du texte noir. Cliquez sur le bouton : le fond doit passer en gris anthracite et le texte en blanc, avec une transition douce (grâce au transition vu à l’étape 2). Cliquez à nouveau : la page doit revenir à son état de départ.
Bloqué, ou envie de comparer votre résultat ? Cliquez sur le bouton ci-dessous pour afficher le fichier complet assemblé.