Le JavaScript côté client est au cœur de l'interactivité web. En spécialité NSI, tu vas manipuler le DOM, gérer des événements et créer des pages dynamiques. Pas de panique : avec cette checklist, tu vas tout déchirer. On y va ?
1. Comprendre le rôle du JavaScript côté client
Le JavaScript côté client s'exécute dans le navigateur de l'utilisateur. Contrairement à Python que tu utilises pour des scripts serveur ou des algorithmes, JS permet de modifier la page web après son chargement : afficher/cacher des éléments, valider un formulaire, animer une interface, etc.
En NSI, on ne te demande pas de devenir un expert en JS, mais de comprendre les bases : sélectionner un élément HTML, réagir à un clic, modifier le contenu d'une balise. C'est exactement ce qu'on va voir.
2. La checklist des incontournables
2.1. Sélectionner un élément du DOM
Pour interagir avec une page, il faut d'abord cibler un élément. Les méthodes de base :
document.getElementById('id'): sélectionne un élément par sonid.document.querySelector('selecteur'): sélectionne le premier élément correspondant à un sélecteur CSS.document.querySelectorAll('selecteur'): sélectionne tous les éléments.
Exemple :
// HTML : <p id="demo">Bonjour</p>
let paragraphe = document.getElementById('demo');
console.log(paragraphe.textContent); // Affiche "Bonjour"2.2. Modifier le contenu et les attributs
Une fois l'élément sélectionné, tu peux :
- Changer son texte :
element.textContent = 'Nouveau texte' - Changer son HTML :
element.innerHTML = '<strong>Gras</strong>' - Modifier un attribut :
element.setAttribute('src', 'image.jpg') - Modifier le style :
element.style.color = 'red'
Exemple interactif :
<button id="btn">Clique-moi</button>
<p id="message">Tu n'as pas cliqué.</p>
<script>
let bouton = document.getElementById('btn');
let message = document.getElementById('message');
bouton.addEventListener('click', function() {
message.textContent = 'Bravo, tu as cliqué !';
message.style.color = 'green';
});
</script>2.3. Gérer les événements
Les événements sont le cœur de l'interactivité. Le plus courant : click. Mais tu as aussi mouseover, keydown, submit, etc.
Syntaxe :
element.addEventListener('evenement', fonction);La fonction peut être anonyme ou nommée. Important : ne pas mettre les parenthèses quand on passe la fonction (sinon elle s'exécute tout de suite).
2.4. Créer et supprimer des éléments
Parfois tu veux ajouter un élément dynamiquement :
let newParagraphe = document.createElement('p');
newParagraphe.textContent = 'Nouveau paragraphe';
document.body.appendChild(newParagraphe);
// Pour supprimer :
let oldElement = document.getElementById('ancien');
oldElement.parentNode.removeChild(oldElement);3. Exemple complet : une to-do list simple
Rien de tel qu'un petit projet pour tout assembler. Voici une to-do list en pur JS (sans frameworks).
<!DOCTYPE html>
<html>
<head>
<title>Ma to-do</title>
</head>
<body>
<h1>To-do list</h1>
<input type="text" id="tacheInput" placeholder="Nouvelle tâche">
<button id="ajouterBtn">Ajouter</button>
<ul id="listeTaches"></ul>
<script>
let input = document.getElementById('tacheInput');
let bouton = document.getElementById('ajouterBtn');
let liste = document.getElementById('listeTaches');
bouton.addEventListener('click', function() {
if (input.value.trim() !== '') {
let li = document.createElement('li');
li.textContent = input.value;
// Ajouter un bouton supprimer
let suppr = document.createElement('button');
suppr.textContent = 'Supprimer';
suppr.addEventListener('click', function() {
liste.removeChild(li);
});
li.appendChild(suppr);
liste.appendChild(li);
input.value = '';
}
});
</script>
</body>
</html>Ce code illustre : sélection, création d'éléments, gestion d'événements, modification du DOM. Tu peux le tester directement dans ton navigateur.
4. Conseils pour le bac NSI et les révisions
Au bac, l'épreuve pratique peut te demander d'écrire un court script JS. Voici les points à retenir :
- Lis bien l'énoncé : parfois on te donne le HTML et tu dois seulement écrire le JS.
- Utilise les bons sélecteurs : privilégie
getElementByIdsi l'élément a un id. - N'oublie pas d'attacher l'événement :
addEventListenerest la méthode moderne. - Teste ton code : même mentalement, vérifie que les variables sont bien définies.
- Attention à la portée : une variable déclarée avec
letdans une fonction n'est pas accessible dehors.
Pour approfondir, consulte nos fiches de révision NSI et le cours complet sur le web. Si tu veux t'entraîner sur des exercices, jette un œil à Allo Lycée.
5. Pièges à éviter
- Confondre
textContentetinnerHTML: le premier est sécurisé (pas d'injection), le second interprète le HTML. - Oublier le
#pour les id dans querySelector :document.querySelector('#monId'). - Placer le script avant les éléments HTML : mets ton script à la fin du
<body>ou utiliseDOMContentLoaded. - Ne pas tester dans plusieurs navigateurs : certains navigateurs anciens ne supportent pas
addEventListener(mais c'est rare en 2026).
6. Pour aller plus loin
Le JavaScript côté client n'est qu'une partie de la programmation web. En NSI, tu verras aussi le modèle client-serveur, les requêtes HTTP, et peut-être un peu de Node.js. Mais les bases restent les mêmes : DOM, événements, interactivité.
N'oublie pas de t'entraîner régulièrement. Tu peux aussi consulter la référence Python NSI pour comparer avec la syntaxe Python (même si Python n'est pas fait pour le navigateur).
Et si tu bloques, pas de stress : demande de l'aide sur Allo Bac.
Alors, prêt à dynamiser tes pages web ? Lance-toi, essaie des exemples, et surtout amuse-toi !
