Aller au contenu
FR

Numérique et sciences informatiques (spécialité) · Première

Événements et JavaScript : exercices corrigés de Première NSI

Publié le 6 novembre 2026 · Mis à jour le 6 novembre 2026 · Signaler une erreur

L'essentiel

  • Un événement (clic, saisie…) déclenche l'exécution d'un code JavaScript placé dans la page, côté navigateur.3
  • Dans un attribut comme onclick, le code se déclenche quand l'utilisateur clique sur l'élément.3
  • JavaScript interagit avec le document HTML grâce au DOM, fourni par le navigateur.3
  • Pour tout exercice : repérer l'élément, l'événement, puis l'action à lancer et ce qu'elle modifie dans la page.
  • Ne confonds pas JavaScript et Java : deux langages distincts malgré le nom.1

Comment utiliser ces exercices

Ces exercices s'adressent à toi si tu as déjà écrit une page en HTML et CSS et que tu découvres comment la rendre vivante. Tu vas travailler sur un réflexe : devant une page interactive, tu cherches toujours trois choses. Quel est l'élément concerné ? Quel est l'événement attendu ? Quelle action doit se produire ?

Pour progresser, cherche chaque exercice sur papier ou dans un éditeur avant d'ouvrir les indices. Tu peux tester tes codes dans un outil en ligne de type bac à sable, comme ceux que proposent les ressources Éduscol.1 Lis la correction seulement après avoir écrit une réponse, même fausse : comparer ta version à la correction t'apprend davantage que la recopier.

Les exercices

Exercice 1 Repérer l'élément, l'événement et l'action

★☆☆Environ 5 min

On considère le bouton suivant dans une page :

<button onclick="alert('Bienvenue')">Entrer</button>
  1. Quel est l'élément concerné ?
  2. Quel est l'événement qui déclenche le code ?
  3. Quelle est l'action exécutée ?
  4. Que se passe-t-il quand la page se charge, tant que personne n'a cliqué ?
Indice 1

L'événement se lit dans le nom de l'attribut : enlève le préfixe on.

Indice 2

Le code entre guillemets est l'action, il n'est lu que quand l'événement se produit.

Voir la correction pas à pas

  1. Élément : c'est le bouton portant le texte « Entrer ».

  2. Événement : l'attribut s'appelle onclick, donc l'événement est le clic sur ce bouton.

  3. Action : l'instruction alert('Bienvenue') fait apparaître une fenêtre avec le message « Bienvenue ».

  4. Au chargement : rien ne s'affiche. Le code placé dans onclick ne s'exécute que lorsque le bouton est cliqué, comme dans l'exemple de référence avec alert('clic !').3

Tu viens d'appliquer la méthode des trois questions : élément, événement, action. Elle te servira pour tous les exercices suivants.

Exercice 2 Un compteur qui avance par pas de 3

★☆☆Environ 8 min

Une page contient le script suivant et un bouton dont l'attribut est onclick="ajouter()".

let n = 0;
function ajouter() {
  n = n + 3;
}

Un élève clique 7 fois sur le bouton. Quelle est la valeur de n après ces clics ?

Indice 1

Chaque clic appelle la fonction ajouter() une fois.

Indice 2

La variable n conserve sa valeur entre deux clics : la déclaration let n = 0; n'est exécutée qu'une fois.

Voir la correction pas à pas

  1. Avant tout clic, n vaut 0.

  2. Chaque clic déclenche l'événement, donc l'appel de ajouter(), qui ajoute 3 à n.

  3. Après 1 clic, n vaut 3 ; après 2 clics, 6 ; après 3 clics, 9, et ainsi de suite.

  4. Après 7 clics, on a ajouté 3 sept fois : 7×3=217 \times 3 = 21.

Après 7 clics, n vaut 21. Retiens que la variable déclarée en dehors de la fonction garde sa valeur d'un événement à l'autre, alors que le code de la fonction se rejoue à chaque clic.

Exercice 3 Corriger un attribut d'événement cassé

★☆☆Environ 8 min

Un élève écrit ce bouton, mais rien ne fonctionne :

<button onclick="alert("Salut")">Dire bonjour</button>
  1. Explique pourquoi le navigateur ne comprend pas ce code.
  2. Propose deux corrections différentes.
Indice 1

Compte les guillemets doubles : où l'attribut HTML s'arrête-t-il ?

Indice 2

Il existe deux types de guillemets pour une chaîne de caractères en JavaScript.

Voir la correction pas à pas

  1. Le navigateur lit l'attribut onclick entre des guillemets doubles. Il s'arrête au deuxième guillemet double, juste avant Salut.

  2. Le code reçu est donc alert( : il est incomplet, et le reste de la ligne est mal interprété.

  3. Première correction : utiliser des guillemets simples dans le code, comme dans l'exemple de référence alert('clic !').3 On écrit onclick="alert('Salut')".

  4. Seconde correction : entourer l'attribut de guillemets simples et garder des guillemets doubles à l'intérieur : onclick='alert("Salut")'.

Le code d'un attribut d'événement se trouve dans une chaîne HTML : les deux niveaux de guillemets doivent être différents pour que le navigateur sache où l'attribut se termine.

Exercice 4 Une suite de clics avec doublement

★★☆Environ 10 min

Voici un script et un bouton qui appelle evoluer() à chaque clic.

let total = 5;
function evoluer() {
  total = total * 2 + 1;
}
  1. Donne la valeur de total après chacun des trois premiers clics.
  2. Que vaut total après le troisième clic ?
  3. La valeur de départ est-elle modifiée si l'on recharge la page ? Justifie.
Indice 1

Applique la formule à la valeur obtenue au clic précédent, pas à la valeur de départ.

Indice 2

Recharger la page relance l'exécution du script depuis le début.

Voir la correction pas à pas

  1. Départ : total vaut 5.

  2. Premier clic : 5×2+1=115 \times 2 + 1 = 11.

  3. Deuxième clic : 11×2+1=2311 \times 2 + 1 = 23.

  4. Troisième clic : 23×2+1=4723 \times 2 + 1 = 47.

  5. Rechargement : le script est lu de nouveau, la ligne let total = 5; est réexécutée et total repart de 5. Les clics précédents sont oubliés.

Après trois clics, total vaut 47. Un état stocké dans une variable vit tant que la page reste ouverte ; le rechargement le remet à zéro.

Exercice 5 Afficher et cacher un paragraphe

★★☆Environ 12 min

Une page contient un paragraphe d'identifiant aide et un bouton « Aide ». Le comportement attendu : un clic sur le bouton cache le paragraphe s'il est visible, et l'affiche s'il est caché.

  1. Complète le code HTML du bouton pour appeler une fonction basculer().
  2. Écris la fonction basculer() en JavaScript.
  3. Pourquoi ce type d'effet n'est-il pas réalisable avec HTML et CSS seuls dans cet énoncé ?
Indice 1

On peut retrouver un élément grâce à son identifiant avec document.getElementById.

Indice 2

La propriété style.display vaut "none" quand l'élément est caché.

Voir la correction pas à pas

  1. Le bouton reçoit l'attribut onclick="basculer()". L'événement est le clic, l'action est l'appel de la fonction.

  2. Dans la fonction, on récupère d'abord le paragraphe : let p = document.getElementById("aide");. On passe ainsi par le DOM, l'interface fournie par le navigateur pour agir sur le document.3

  3. On teste l'état courant : if (p.style.display === "none") { p.style.display = "block"; } else { p.style.display = "none"; }.

  4. Ce comportement dépend d'une action de l'utilisateur au moment où il a lieu. C'est précisément le rôle de JavaScript : afficher ou cacher un paragraphe selon les interactions de l'utilisateur.3

La fonction complète tient en quelques lignes : récupérer l'élément, tester son état, le modifier. C'est le schéma de la plupart des interactions simples.

Exercice 6 Contrôler une saisie avant de la valider

★★☆Environ 12 min

Un formulaire demande l'âge d'un utilisateur dans un champ d'identifiant age. Un bouton « Valider » appelle la fonction verifier().

Écris verifier() pour qu'elle :

  • lise la valeur saisie et la convertisse en nombre ;
  • affiche l'alerte « Âge invalide » si la valeur est négative ou supérieure à 120 ;
  • affiche l'alerte « Âge enregistré » sinon.

Teste ton code mentalement avec les saisies 17, -3 et 150.

Indice 1

La valeur lue dans un champ est du texte : Number(...) la convertit en nombre.

Indice 2

Les deux conditions d'invalidité se combinent avec le « ou » logique ||.

Voir la correction pas à pas

  1. On récupère le champ : let champ = document.getElementById("age");.

  2. On convertit : let a = Number(champ.value);.

  3. On teste : if (a < 0 || a > 120) { alert("Âge invalide"); } else { alert("Âge enregistré"); }.

  4. Saisie 17 : 17<017 < 0 est faux et 17>12017 > 120 est faux, donc « Âge enregistré ».

  5. Saisie -3 : −3<0-3 < 0 est vrai, donc « Âge invalide ».

  6. Saisie 150 : 150>120150 > 120 est vrai, donc « Âge invalide ».

Contrôler les données saisies dans un formulaire fait partie des usages courants de JavaScript.3 Ce contrôle se fait côté client, dans le navigateur, avant tout envoi.1

Exercice 7 Où placer le script et que dit la page ?

★★☆Environ 10 min

Voici une page incomplète :

<body>
  <button onclick="saluer()">Saluer</button>
  function saluer() { alert('Coucou'); }
</body>
  1. Pourquoi le texte function saluer()... s'affichera-t-il à l'écran au lieu de s'exécuter ?
  2. Corrige la page.
  3. Où s'exécute ce code : sur le serveur ou dans le navigateur ?
Indice 1

Le navigateur ne devine pas qu'un texte est du code : il faut le lui signaler.

Indice 2

Pense à la distinction « côté client » et « côté serveur ».

Voir la correction pas à pas

  1. Le navigateur traite tout texte du corps de la page comme du contenu à afficher. Le code JavaScript doit se trouver entre des balises de script.1

  2. Correction : placer la fonction entre une balise ouvrante et une balise fermante de type script, juste après le bouton.

  3. Le bouton garde son attribut onclick="saluer()" : au clic, la fonction définie dans le script est appelée.

  4. Ce code s'exécute côté client, dans le navigateur de l'utilisateur, ce qui permet par exemple des info-bulles ou des animations.1

Retiens la règle : un script est du code balisé, interprété par le navigateur. Sans balise, ce n'est que du texte à afficher.

Exercice 8 Vrai ou faux : JavaScript et Java

★★★Environ 10 min

Pour chaque affirmation, dis si elle est vraie ou fausse et justifie en une phrase.

  • A. JavaScript est une version simplifiée de Java.
  • B. JavaScript est un langage interprété à typage dynamique.
  • C. Un navigateur web peut exécuter du JavaScript grâce à un moteur intégré.
  • D. JavaScript permet de modifier le contenu d'une page déjà affichée.
Indice 1

Relis les rappels de cours en début de page.

Indice 2

Une page statique est une page figée : que change JavaScript ?

Voir la correction pas à pas

  1. A est fausse : les deux langages sont proches par la syntaxe mais pas par leurs concepts fondamentaux.3 Java impose des types stricts et une traduction préalable, alors que JavaScript décide des types à l'exécution et passe par un interpréteur.1

  2. B est vraie : c'est la caractérisation donnée par la ressource Éduscol.1

  3. C est vraie : la majorité des navigateurs disposent d'un moteur JavaScript pour interpréter le code.3

  4. D est vraie : un script peut rendre dynamique une page qui serait sinon statique et figée.3

Seule l'affirmation A est fausse. La confusion entre les deux langages est classique : elle vient en partie d'une annonce commune faite en 1995.3

Exercice 9 Mini-projet : un compteur de clics limité

★★★Environ 20 min

Tu veux une page avec un bouton « Cliquer », un paragraphe d'identifiant score qui affiche le nombre de clics, et un message d'alerte à partir du dixième clic.

  1. Écris le HTML nécessaire.
  2. Écris le script : à chaque clic, le compteur augmente de 1, le paragraphe est mis à jour, et au dixième clic une alerte « Limite atteinte » apparaît.
  3. Modifie ensuite ton code pour que le bouton cesse de réagir après le dixième clic.
  4. Quelle valeur affiche score après 4 clics ?
Indice 1

Pour changer le texte d'un paragraphe, utilise la propriété textContent.

Indice 2

Pour bloquer le bouton, une condition au début de la fonction suffit : si le compteur a atteint 10, on sort de la fonction avec return.

Voir la correction pas à pas

  1. HTML : un bouton dont l'attribut est onclick="cliquer()" et un paragraphe d'identifiant score contenant d'abord le texte 0.

  2. Script, partie données : let compteur = 0;.

  3. Script, fonction : function cliquer() { compteur = compteur + 1; document.getElementById("score").textContent = compteur; if (compteur === 10) { alert("Limite atteinte"); } }.

  4. Blocage : on ajoute en première ligne de la fonction if (compteur >= 10) { return; }. Dès que le compteur vaut 10, les clics suivants ne changent plus rien.

  5. Après 4 clics, compteur vaut 4 et le paragraphe score affiche 4.

Ce projet réunit les trois ingrédients vus dans les exercices : un état stocké dans une variable, un événement qui déclenche une fonction, une modification du document via le DOM.3 Après 4 clics, le score affiché est 4.

Les questions qu'on se pose

Comment tester mon code JavaScript sans installer de logiciel ?

Tu peux utiliser un site de bac à sable en ligne, qui permet d'écrire du HTML, du CSS et du JavaScript et de voir tout de suite le résultat.1 Une autre solution consiste à enregistrer un fichier de page sur ton ordinateur, puis à l'ouvrir dans ton navigateur : celui-ci contient un moteur qui interprète le JavaScript.3

Pourquoi mon bouton ne réagit pas alors que mon code me paraît juste ?

Vérifie dans l'ordre : le nom de l'événement dans l'attribut (par exemple onclick), l'orthographe exacte du nom de la fonction, les guillemets de l'attribut, puis la présence des balises autour du script.1 Une faute de frappe dans l'identifiant d'un élément est aussi fréquente : si getElementById ne trouve rien, la suite du code échoue.

Est-ce que JavaScript sert uniquement à écrire des pages web ?

Il est surtout employé dans les pages web interactives, mais pas seulement. Certains logiciels de mathématiques ou de traitement d'images disposent d'une console JavaScript pour écrire des scripts.3 Au programme de Première, on se concentre sur son rôle dans le navigateur : réagir aux actions de l'utilisateur et modifier la page.

Sources

  1. Document ressource Éduscol — Interactions avec le Web et JavaScript, Éduscol. Consulté le 6 novembre 2026.
  2. Ressource pédagogique Éduscol — Événements et DOM, Éduscol. Consulté le 6 novembre 2026.
  3. JavaScript, Wikipédia. Consulté le 6 novembre 2026.

Les numéros dans le texte renvoient à ces sources. Une source qui ne dit pas ce qu'on lui fait dire ? Signale-le.

Signaler une erreur sur cette page

Je suis en…

Primaire

  • CP Bientôt
  • CE1 Bientôt
  • CE2 Bientôt
  • CM1 Bientôt
  • CM2 Bientôt

Collège

Lycée

Supérieur

  • BTS Bientôt
  • BUT Bientôt
  • Licence Bientôt
  • Prépas Bientôt

Sur cette page