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

Événements et JavaScript : cours de Première NSI

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

L'essentiel

Une page écrite seulement en HTML et CSS reste figée ; JavaScript la rend interactive en exécutant du code dans le navigateur, côté client ³.
Un événement (clic, saisie, envoi de formulaire) est un signal émis par le navigateur ; on y associe une fonction, le gestionnaire, qui s'exécute à chaque fois qu'il se produit.
Le script réagit en lisant et en modifiant le DOM, l'interface fournie par le navigateur pour accéder au document HTML ³.
Le code se place dans un attribut d'événement comme onclick, entre balises script, ou dans un fichier à part ¹³.
Méthode : repérer l'élément, choisir l'événement, écrire la fonction, la relier à l'élément, tester dans le navigateur.

Pourquoi une page web a besoin de JavaScript

Jusqu'ici, tu as construit des pages avec HTML, qui décrit le contenu, et CSS, qui décrit la présentation. Une telle page s'affiche, mais elle ne réagit à rien : tu peux lire le texte, suivre un lien, et c'est tout. Pour qu'un bouton affiche un message, qu'un champ de formulaire signale une erreur ou qu'un menu se déplie, il faut un programme qui s'exécute pendant que la page est ouverte.

C'est le rôle de JavaScript. Ce langage de scripts sert surtout dans les pages web interactives, et avec HTML et CSS il fait partie du socle des langages du développement web ³. La majorité des navigateurs embarquent un moteur JavaScript chargé d'interpréter ce code ³. Ton programme n'a donc pas besoin d'être installé : le navigateur de la personne qui visite la page le lit et l'exécute.

Cette exécution se fait côté client, c'est-à-dire dans le navigateur de l'utilisateur et non sur le serveur. Le document de ressources d'Éduscol cite des usages de ce côté client : des info-bulles contextuelles qui apparaissent, des animations ¹. Dans ce cours, nous restons côté client ; la communication avec le serveur est l'objet du chapitre suivant sur le protocole HTTP.

Un peu d'histoire et ce que JavaScript n'est pas

JavaScript a été créé en 1995 par Brendan Eich, alors employé de Netscape Communication Corporation, principal concurrent d'Internet Explorer à cette époque ¹. Le langage a ensuite été confié à l'ECMA, l'association européenne des fabricants d'ordinateurs ¹. Quelques jours avant la sortie, Netscape a changé le nom LiveScript en JavaScript, et le 4 décembre 1995 Netscape et Sun Microsystems ont annoncé ensemble sa sortie dans un communiqué de presse ³.

Java et JavaScript : deux langages différents
Critère	Java	JavaScript
Typage	Fortement typé	Typage dynamique
Exécution	Précompilé	Interprété
Orientation objet	Oui	Oui

Java et JavaScript : deux langages différents · D'après Éduscol : les deux noms se ressemblent, les langages non.

Où écrire le code JavaScript

Dans une page HTML, les instructions d'un langage de script, JavaScript compris, doivent être placées entre des balises prévues pour cela ¹. Plusieurs façons d'intégrer JavaScript à une page existent ³. Voici celles que nous utiliserons.

ExempleLe plus court des programmes interactifs

Un bouton affiche une boîte de dialogue au clic. Il suffit d'ajouter à la balise du bouton cet attribut :

onclick="alert('clic !')"

Le code alert('clic !') est exécuté quand le bouton est cliqué ³. Le nom onclick signifie « au clic ». À gauche du signe égal, l'événement ; à droite, entre guillemets, l'instruction à exécuter.

ExempleUn script qui modifie un paragraphe

Imagine un paragraphe d'identifiant message contenant « Bonjour », suivi d'un bloc script contenant :

let p = document.getElementById('message');
p.textContent = 'Texte modifié par le script';

Ce script s'exécute dès le chargement de la page : il cherche le paragraphe d'identifiant message et remplace son texte. Aucun événement utilisateur n'est en jeu, la modification est immédiate.

La notion d'événement

Cette façon de programmer s'appelle la programmation événementielle. Dans un programme classique en Python, les instructions s'enchaînent de la première à la dernière. Ici, le déroulement dépend de l'utilisateur : le code reste en attente et ne se déclenche que si l'événement associé arrive. Si personne ne clique, la fonction liée au clic ne s'exécute jamais.

Quelques événements courants

Événement	Se produit quand…	Exemple d'usage
`click`	l'utilisateur clique sur un élément	ouvrir un menu, valider
`input`	le contenu d'un champ change	compter les caractères saisis
`change`	un champ perd le focus après modification	vérifier une valeur
`submit`	un formulaire est envoyé	contrôler les données avant envoi
`keydown`	une touche est enfoncée	raccourci clavier
`mouseover`	le pointeur arrive sur l'élément	afficher une info-bulle
`load`	la page a fini de se charger	initialiser l'affichage

ActionL'utilisateur clique ou saisit du texte.
DétectionLe navigateur émet l'événement.
GestionnaireLa fonction associée s'exécute.
DOMLe script modifie des éléments.
AffichageLa page se met à jour.

Du clic à la page modifiée · Le déroulement d'un événement.

Les gestionnaires d'événements

Nous avons déjà vu une première manière de relier un événement à du code : l'attribut onclick placé dans la balise ³. Elle convient pour une instruction très courte, mais elle mélange HTML et JavaScript. La méthode usuelle consiste à écrire une fonction, puis à la relier à l'élément depuis le script avec addEventListener.

ExempleUn bouton qui change un texte

Le HTML contient un bouton d'identifiant bouton (texte « Dis bonjour ») et un paragraphe vide d'identifiant zone. Le JavaScript est :

function saluer() {
  document.getElementById('zone').textContent = 'Bonjour !';
}
let b = document.getElementById('bouton');
b.addEventListener('click', saluer);

À chaque clic sur le bouton, la fonction saluer est appelée et le paragraphe affiche « Bonjour ! ».

Le gestionnaire reçoit en paramètre un objet décrivant l'événement. Il donne par exemple la touche enfoncée ou l'élément précis qui a déclenché l'action. On le nomme le plus souvent event (ou e), et il sert surtout à connaître l'élément concerné avec event.target.

ExempleUtiliser l'objet événement

document.addEventListener('keydown', function (event) {
  console.log('Touche : ' + event.key);
});

À chaque touche enfoncée, la console affiche son nom. Cette technique sert à construire des raccourcis clavier ou de petits jeux.

Le DOM : lire et modifier la page

Pour réagir, il ne suffit pas de savoir quand agir : il faut aussi agir sur la page. Pour cela, JavaScript passe par l'interface Document Object Model, le DOM, que le navigateur met à sa disposition pour dialoguer avec le document HTML ³. On parle parfois alors de HTML dynamique, ou DHTML ³.

ExempleAfficher ou cacher un paragraphe

Un script peut montrer ou cacher un paragraphe selon les actions de l'utilisateur ³. Suppose un bouton d'identifiant bascule et un paragraphe d'identifiant texte.

let p = document.getElementById('texte');
document.getElementById('bascule').addEventListener('click', function () {
  if (p.style.display === 'none') {
    p.style.display = 'block';
  } else {
    p.style.display = 'none';
  }
});

À chaque clic, le programme teste l'état courant du paragraphe et inverse son affichage. Remarque le triple signe égal ===, qui sert à comparer ; un seul signe égal sert à affecter.

Variables, conditions et fonctions dans un gestionnaire

Le code d'un gestionnaire utilise les mêmes briques que celles que tu connais en Python, avec une syntaxe un peu différente : variables, tests, boucles, fonctions. Comme JavaScript est à typage dynamique ¹, on déclare une variable avec let sans préciser son type.

De Python à JavaScript

Idée	Python	JavaScript
Affectation	`n = 0`	`let n = 0;`
Test	`if n > 5:`	`if (n > 5) { … }`
Sinon	`else:`	`else { … }`
Fonction	`def f(x):`	`function f(x) { … }`
Affichage	`print(n)`	`console.log(n)`
Égalité	`==`	`===`

ExempleUn compteur de clics

Suppose un bouton d'identifiant plus et un élément d'identifiant total qui affiche 0 au départ.

let compteur = 0;
document.getElementById('plus').addEventListener('click', function () {
  compteur = compteur + 1;
  document.getElementById('total').textContent = compteur;
});

La variable compteur est déclarée en dehors de la fonction : elle conserve sa valeur d'un clic à l'autre. Si tu la déclarais à l'intérieur, elle serait recréée à zéro à chaque appel et l'affichage resterait bloqué à 1.

Contrôler la saisie dans un formulaire

Un usage fréquent de JavaScript est le contrôle des données saisies dans les formulaires HTML ³. L'idée est de prévenir l'utilisateur tout de suite, sans attendre une réponse du serveur. Les méthodes GET et POST viendront ensuite, mais le contrôle côté client fait déjà partie des interactions de ce chapitre.

ExempleVérifier un âge

Suppose un champ numérique d'identifiant age, un bouton d'identifiant verifier et un paragraphe d'identifiant retour.

document.getElementById('verifier').addEventListener('click', function () {
  let age = Number(document.getElementById('age').value);
  let retour = document.getElementById('retour');
  if (age >= 18) {
    retour.textContent = 'Accès autorisé';
  } else {
    retour.textContent = 'Accès refusé';
  }
});

Le script lit la valeur, la convertit en nombre, la compare à 18 et écrit le résultat dans le paragraphe.

MéthodeBloquer l'envoi d'un formulaire invalide

Pour un formulaire, on écoute l'événement submit. Si la saisie est incorrecte, on appelle event.preventDefault() : l'envoi est annulé et l'utilisateur peut corriger.

formulaire.addEventListener('submit', function (event) {
  if (champ.value === '') {
    event.preventDefault();
    message.textContent = 'Le champ est vide';
  }
});

Méthode générale et erreurs fréquentes

Exercices corrigés

Exercice 1 Un bouton qui salue

★☆☆Environ 10 min

Le HTML contient un bouton d'identifiant go (texte « Valider ») et un paragraphe vide d'identifiant sortie.

Écris le code JavaScript qui, au clic sur le bouton, remplace le contenu du paragraphe par le texte « Bien reçu ».

Indice 1

Commence par récupérer le bouton avec son identifiant.

Indice 2

Pense à donner la fonction à addEventListener sans parenthèses.

Voir la correction pas à pas

On récupère le bouton : let b = document.getElementById('go');.
On écrit la fonction qui modifie le paragraphe : function repondre() { document.getElementById('sortie').textContent = 'Bien reçu'; }.
On relie la fonction au clic : b.addEventListener('click', repondre);, sans parenthèses après repondre.
On teste : à chaque clic, le paragraphe affiche « Bien reçu ».

Les ingrédients sont tous là : un élément (go), un type d'événement (click) et une fonction (repondre).

Exercice 2 Un compteur qui avance de 2

★★☆Environ 15 min

Une page contient un bouton d'identifiant plus et un élément d'identifiant total qui affiche d'abord 0. Chaque clic doit ajouter 2 à un compteur et afficher la nouvelle valeur.

Écris le script.
Quelle valeur est affichée après 7 clics ?

Indice 1

Le compteur doit être déclaré en dehors de la fonction.

Indice 2

Après chaque clic, la valeur augmente de 2 : calcule 7 fois 2.

Voir la correction pas à pas

On déclare la variable hors du gestionnaire : let compteur = 0;.
On écrit le gestionnaire : document.getElementById('plus').addEventListener('click', function () { compteur = compteur + 2; document.getElementById('total').textContent = compteur; });.
À chaque clic, le compteur gagne 2 : après 7 clics, il vaut $7 \times 2 = 14$ .
On vérifie le cas de départ : avant tout clic, l'affichage reste 0.

Après 7 clics, la page affiche 14. Le compteur étant déclaré à l'extérieur, il garde sa valeur d'un clic à l'autre.

Exercice 3 Contrôler un code postal

★★★Environ 20 min

Un formulaire contient un champ texte d'identifiant cp, un bouton d'identifiant ok et un paragraphe d'identifiant info. Au clic, le script doit écrire « Valide » si le texte saisi contient exactement 5 caractères, sinon « Invalide : 5 chiffres attendus ».

Écris le script.
Que s'affiche-t-il pour la saisie 7500 ? Pour 75001 ?
Quelle limite a ce contrôle, si on voulait aussi n'accepter que des chiffres ?

Indice 1

La longueur d'un texte s'obtient avec la propriété length.

Indice 2

Utilise === pour comparer la longueur à 5.

Voir la correction pas à pas

On récupère les éléments : le champ, le bouton et le paragraphe.
On écrit le gestionnaire : document.getElementById('ok').addEventListener('click', function () { let saisie = document.getElementById('cp').value; if (saisie.length === 5) { document.getElementById('info').textContent = 'Valide'; } else { document.getElementById('info').textContent = 'Invalide : 5 chiffres attendus'; } });.
Pour 7500, la longueur est 4, différente de 5 : le message est « Invalide : 5 chiffres attendus ».
Pour 75001, la longueur est 5 : le message est « Valide ».
Limite : abcde a aussi 5 caractères et serait jugé valide. Il faudrait vérifier que chaque caractère est un chiffre, par exemple avec une boucle ou une expression régulière.

Le test porte sur la longueur seulement. Un bon contrôle combine plusieurs conditions, et le serveur doit de toute façon revérifier la donnée.

Les questions qu'on se pose

Quelle différence entre onclick dans le HTML et addEventListener ?

Les deux relient un code à un clic. L'attribut onclick s'écrit dans la balise et exécute le code au clic ³ ; il convient pour une instruction très courte. addEventListener se place dans le script : il sépare le HTML du JavaScript, permet d'associer plusieurs gestionnaires au même événement et rend le code plus lisible. Dès que le code dépasse une ligne, préfère addEventListener.

Pourquoi mon bouton ne fait rien alors que je n'ai aucune erreur visible ?

Ouvre la console du navigateur. Les causes les plus fréquentes : un identifiant mal recopié (getElementById renvoie alors null), un script placé avant l'élément qu'il cherche, un nom d'événement mal orthographié, ou des parenthèses après le nom de la fonction dans addEventListener. Ajoute un console.log dans la fonction pour savoir si elle est appelée.

À quoi sert JavaScript, concrètement, sur un site ?

Il sert à rendre la page interactive : montrer ou cacher des éléments, contrôler les données d'un formulaire, réaliser des animations ou des transitions, manipuler des données réactives ³. Il peut aussi faire apparaître des info-bulles contextuelles ¹.

Le contrôle d'un formulaire en JavaScript suffit-il pour être en sécurité ?

Non. Le contrôle côté client prévient l'utilisateur rapidement, mais il se contourne : le code s'exécute chez l'utilisateur, qui peut le modifier ou envoyer une requête sans passer par ta page. Le serveur doit revérifier les données. C'est l'un des thèmes des chapitres suivants, sur HTTP et les formulaires.

Dois-je connaître tous les événements par cœur ?

Non. Il faut maîtriser la logique (élément, type d'événement, fonction) et connaître les plus courants : click, input, change, submit, keydown. Au contrôle, l'énoncé fournit en général la syntaxe ; ce qu'on attend de toi, c'est de savoir relier un événement à un comportement et de modifier le DOM correctement.

Sources

Document ressource Éduscol — Interactions avec le Web et JavaScript, Éduscol. Consulté le 6 novembre 2026.
Ressource pédagogique Éduscol — Événements et DOM, Éduscol. Consulté le 6 novembre 2026.
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

Événements et JavaScript : cours de Première NSI

L'essentiel

Pourquoi une page web a besoin de JavaScript

Un peu d'histoire et ce que JavaScript n'est pas

Où écrire le code JavaScript

La notion d'événement

Les gestionnaires d'événements

Le DOM : lire et modifier la page

Variables, conditions et fonctions dans un gestionnaire

Contrôler la saisie dans un formulaire

Méthode générale et erreurs fréquentes

Exercices corrigés

Exercice 1 Un bouton qui salue

Exercice 2 Un compteur qui avance de 2

Exercice 3 Contrôler un code postal

Quiz

Les questions qu'on se pose

Sources

Primaire

Collège

Lycée

Supérieur