anglais
français
arabe
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
JavaScript en pratique
Mise en ligne :
il y a 3 mois
Mise à jour :
il y a 3 mois
beginner
Passer le quiz
Construisons quelque chose d’interactif
Appliquez les fondamentaux : vous allez faire qu’un bouton mette à jour la page au clic — l’essence du JavaScript côté navigateur.
Projet : un compteur de clics
- Ajoutez un bouton et un endroit pour afficher le compte dans votre HTML.
- Sélectionnez l’élément avec
document.querySelector. - Tenez une variable
count. - À chaque clic, incrémentez-la et mettez le texte à jour.
Le HTML
<button id="btn">Cliqué 0 fois</button>Le JavaScript
const btn = document.querySelector("#btn");
let count = 0;
btn.addEventListener("click", () => {
count++;
btn.textContent = `Cliqué ${count} fois`;
});Les gabarits de chaîne
Les accents graves `...` permettent d’insérer des variables avec ${ } — plus propre que de concaténer avec +.
Bons réflexes vs erreurs courantes
| À faire ✓ | À éviter ✗ |
|---|---|
Utiliser addEventListener | onclick="..." en ligne dans le HTML |
Utiliser const / let | L’ancien var |
Comparer avec === | Utiliser == (égalité lâche) |
| Consulter la console | Deviner pourquoi « ça ne marche pas » |
Exécutez votre script après le DOM
Si votre <script> s’exécute avant que l’élément existe, querySelector renvoie null. Placez le script en fin de <body> ou utilisez defer.
Les programmes doivent être écrits pour être lus par des humains, et seulement accessoirement exécutés par des machines.
Pourquoi mon élément est-il null ?
Le script s’est exécuté avant que le DOM soit prêt. Déplacez-le en fin de
<body> ou ajoutez l’attribut defer.Qu’est-ce que le DOM ?
Le Document Object Model — la représentation vivante et modifiable de votre HTML par le navigateur.
Et après le JavaScript ?
Un framework comme Vue.js, ou un langage back-end comme PHP/Laravel.
