Chapitre 2 : JavaScript et événements¶

Programme officiel (B.O.)¶

B.O. spécial n° 1 du 22 janvier 2019 - NSI Première

Contenus	Capacités attendues	Commentaires
Événements.	Identifier les événements que l'utilisateur peut produire sur une interface graphique et écrire les traitements associés.	On retrouve ici les notions de fonctions et de leur appel.
Interaction entre l'homme et la machine.	Analyser et modifier le comportement d'une page Web en associant des événements à des éléments HTML.	L'objectif est de montrer comment JavaScript permet de rendre une page interactive.

1. Introduction à JavaScript¶

1.1 Pourquoi JavaScript ?¶

HTML et CSS produisent des pages statiques : l'utilisateur peut lire le contenu et cliquer sur des liens, mais la page ne réagit pas à ses actions.

JavaScript (souvent abrégé JS) est un langage de programmation qui s'exécute dans le navigateur, côté client. Il permet de :

Réagir aux actions de l'utilisateur (clic, saisie, survol...)
Modifier le contenu et l'apparence de la page en temps réel
Valider un formulaire avant envoi
Créer des animations et des effets visuels

1.2 JavaScript ≠ Java¶

Attention

Malgré la ressemblance de nom, JavaScript et Java sont deux langages complètement différents. JavaScript a été créé en 1995 par Brendan Eich chez Netscape. C'est un langage interprété, à typage dynamique, alors que Java est compilé et à typage statique.

1.3 Intégrer JavaScript dans une page HTML¶

Script interneScript externe (recommandé)

<body>
    <h1>Ma page</h1>
    <script>
        alert("Bonjour !");
    </script>
</body>

<body>
    <h1>Ma page</h1>
    <script src="script.js"></script>
</body>

Fichier script.js :

alert("Bonjour !");

Bonne pratique

On place la balise <script> juste avant la fermeture de </body> pour que le HTML soit chargé avant l'exécution du script. On peut aussi utiliser l'attribut defer : <script src="script.js" defer></script>.

2. Bases du langage JavaScript¶

2.1 Variables¶

let age = 17;               // variable modifiable
const nom = "Alice";         // constante (non modifiable)
let moyenne = 14.5;
let estMajeur = false;

Mot-clé	Usage
`let`	Variable dont la valeur peut changer
`const`	Constante, valeur fixée à la déclaration

Attention

Le mot-clé var existe aussi mais est déconseillé car il a un comportement de portée (scope) source d'erreurs. On utilise let et const en JavaScript moderne.

2.2 Types de données¶

Type	Exemple	Équivalent Python
`number`	`42`, `3.14`	`int`, `float`
`string`	`"Bonjour"`, `'NSI'`	`str`
`boolean`	`true`, `false`	`True`, `False`
`undefined`	variable non initialisée	—
`null`	absence de valeur	`None`

2.3 Opérateurs¶

// Arithmétique
let somme = 5 + 3;       // 8
let reste = 10 % 3;      // 1 (modulo)

// Comparaison
5 === 5      // true  (égalité stricte, type + valeur)
5 == "5"     // true  (égalité souple, à éviter)
5 !== 3      // true  (différence stricte)

// Logique
true && false   // false (ET)
true || false   // true  (OU)
!true           // false (NON)

Piège fréquent

En JavaScript, toujours utiliser === (égalité stricte) plutôt que == (égalité souple qui convertit les types). Par exemple, 0 == "" vaut true alors que 0 === "" vaut false.

2.4 Structures de contrôle¶

// Condition
if (age >= 18) {
    console.log("Majeur");
} else {
    console.log("Mineur");
}

// Boucle for
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// Boucle while
let compteur = 0;
while (compteur < 3) {
    console.log(compteur);
    compteur++;
}

Comparaison Python / JavaScript :

Concept	Python	JavaScript
Bloc de code	Indentation	Accolades `{ }`
Fin d'instruction	Retour à la ligne	Point-virgule `;`
Affichage	`print()`	`console.log()`
ET / OU / NON	`and`, `or`, `not`	`&&`, `\\|\\|`, `!`

2.5 Fonctions¶

function saluer(prenom) {
    return "Bonjour " + prenom + " !";
}

let message = saluer("Alice");
console.log(message);    // "Bonjour Alice !"

Les fonctions JavaScript se déclarent avec le mot-clé function, suivies du nom, des paramètres entre parenthèses et du corps entre accolades.

3. Le DOM (Document Object Model)¶

3.1 Qu'est-ce que le DOM ?¶

Quand le navigateur charge une page HTML, il construit en mémoire une représentation arborescente du document appelée DOM (Document Object Model). Chaque balise HTML devient un nœud de l'arbre.

Pour le code HTML :

<body>
    <h1 id="titre">Bonjour</h1>
    <p class="texte">Un paragraphe.</p>
</body>

L'arbre DOM correspondant est :

document
  └── html
       ├── head
       │    └── ...
       └── body
            ├── h1#titre
            │    └── "Bonjour"
            └── p.texte
                 └── "Un paragraphe."

3.2 Accéder aux éléments du DOM¶

JavaScript permet de sélectionner des éléments du DOM pour les lire ou les modifier :

// Par identifiant (renvoie UN élément)
let titre = document.getElementById("titre");

// Par sélecteur CSS (renvoie le PREMIER élément correspondant)
let para = document.querySelector(".texte");

// Par sélecteur CSS (renvoie TOUS les éléments correspondants)
let tousLesParagraphes = document.querySelectorAll("p");

3.3 Modifier le contenu¶

let titre = document.getElementById("titre");

// Modifier le texte
titre.textContent = "Bienvenue en NSI";

// Modifier le HTML interne
titre.innerHTML = "Bienvenue en <em>NSI</em>";

Propriété	Effet
`textContent`	Modifie le texte brut
`innerHTML`	Modifie le contenu HTML

3.4 Modifier le style¶

let titre = document.getElementById("titre");
titre.style.color = "blue";
titre.style.fontSize = "32px";
titre.style.backgroundColor = "#f0f0f0";

Noms de propriétés

En CSS on écrit font-size (avec un tiret), mais en JavaScript on utilise la notation camelCase : fontSize. C'est le cas pour toutes les propriétés CSS à tiret : background-color → backgroundColor, text-align → textAlign, etc.

3.5 Modifier les classes CSS¶

Plutôt que de modifier le style directement, il est préférable d'ajouter ou retirer des classes CSS :

let element = document.getElementById("boite");
element.classList.add("visible");       // ajouter une classe
element.classList.remove("cache");      // retirer une classe
element.classList.toggle("actif");      // ajouter si absente, retirer si présente

4. Les événements¶

4.1 Qu'est-ce qu'un événement ?¶

Un événement est une action déclenchée par l'utilisateur (ou le navigateur). Le programme JavaScript peut écouter ces événements et exécuter du code en réponse : c'est la programmation événementielle.

4.2 Les principaux événements¶

Événement	Déclencheur
`click`	Clic gauche sur un élément
`dblclick`	Double-clic
`mouseover`	La souris entre sur l'élément
`mouseout`	La souris quitte l'élément
`keydown`	Une touche du clavier est enfoncée
`keyup`	Une touche du clavier est relâchée
`input`	Le contenu d'un champ de saisie change
`change`	La valeur d'un champ est modifiée (après validation)
`submit`	Un formulaire est soumis
`load`	La page a fini de charger

4.3 Associer un événement à un élément¶

Il existe trois méthodes pour associer un gestionnaire d'événements :

Méthode 1 : attribut HTML (déconseillé)Méthode 2 : propriété DOMMéthode 3 : addEventListener (recommandé)

<button onclick="alert('Clic !')">Cliquez</button>

Mélange HTML et JavaScript : à éviter.

let bouton = document.getElementById("monBouton");
bouton.onclick = function() {
    alert("Clic !");
};

Limite : un seul gestionnaire par événement.

let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
    alert("Clic !");
});

Permet d'ajouter plusieurs gestionnaires au même événement.

Bonne pratique

La méthode addEventListener est la méthode recommandée. Elle sépare clairement le HTML du JavaScript et permet d'associer plusieurs fonctions au même événement.

4.4 L'objet événement¶

Quand un événement se produit, JavaScript crée automatiquement un objet événement contenant des informations sur ce qui s'est passé :

document.addEventListener("click", function(e) {
    console.log("Type :", e.type);           // "click"
    console.log("Cible :", e.target);        // l'élément cliqué
    console.log("Position X :", e.clientX);  // position horizontale
    console.log("Position Y :", e.clientY);  // position verticale
});

Propriété	Description
`e.type`	Type de l'événement (`"click"`, `"keydown"`...)
`e.target`	L'élément qui a déclenché l'événement
`e.clientX`, `e.clientY`	Position de la souris
`e.key`	Touche pressée (pour `keydown`/`keyup`)
`e.preventDefault()`	Empêche le comportement par défaut

4.5 Exemple complet : changer la couleur au clic¶

HTML :

<<

href="#__codelineno-17-1"><!DOCTYPE html> class="nt">html lang="fr"> class="nt">head> <meta charset="utf-8"> <title>Couleur au clic</title> <style> .boite { width: 200px; height: 200px; background-color: #3498db; margin: 50px auto; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; border-radius: 10px; } </style> </head> <body> class="p"><div id="maBoite" class="boite">Cliquez ici</div> class="p"><script src="couleur.js"></script> </body> </html>

JavaScript (couleur.js) :

let boite = document.getElementById("maBoite");
let couleurs = ["#3498db", "#e74c3c", "#2ecc71", "#f39c12", "#9b59b6"];
let index = 0;

boite.addEventListener("click", function() {
    index = (index + 1) % couleurs.length;
    boite.style.backgroundColor = couleurs[index];
});

À chaque clic sur la boîte, sa couleur de fond change en parcourant le tableau couleurs de manière cyclique grâce à l'opérateur modulo %.

5. Exemples d'interactions courantes¶

5.1 Afficher / masquer un élément¶

<button id="btnToggle">Afficher/Masquer</button>
<p id="texteCache" style="display: none;">Texte secret !</p>

let btn = document.getElementById("btnToggle");
let texte = document.getElementById("texteCache");

btn.addEventListener("click", function() {
    if (texte.style.display === "none") {
        texte.style.display = "block";
    } else {
        texte.style.display = "none";
    }
});

5.2 Compteur de clics¶

<p>Nombre de clics : <span id="compteur">0</span></p>
<button id="btnCompter">+1</button>
<button id="btnReset">Réinitialiser</button>

let compteur = 0;
let affichage = document.getElementById("compteur");
let btnPlus = document.getElementById("btnCompter");
let btnReset = document.getElementById("btnReset");

btnPlus.addEventListener("click", function() {
    compteur++;
    affichage.textContent = compteur;
});

btnReset.addEventListener("click", function() {
    compteur = 0;
    affichage.textContent = compteur;
});

5.3 Réagir au clavier¶

document.addEventListener("keydown", function(e) {
    console.log("Touche pressée :", e.key);
    if (e.key === "Escape") {
        alert("Vous avez appuyé sur Échap !");
    }
});

À retenir¶

JavaScript rend les pages Web interactives en s'exécutant côté client (dans le navigateur).
Le DOM est la représentation arborescente de la page HTML en mémoire.
On accède aux éléments avec document.getElementById(), querySelector(), querySelectorAll().
On modifie le contenu avec textContent / innerHTML et le style avec .style ou .classList.
Un événement est une action de l'utilisateur (click, keydown, input...).
addEventListener("evenement", fonction) est la méthode recommandée pour associer un traitement à un événement.
L'objet événement e donne accès à e.target, e.key, e.clientX, e.preventDefault()...