Partie 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 interne

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

Script externe (recommandé)

<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é)

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

Mélange HTML et JavaScript : à éviter.

Méthode 2 : propriété DOM

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

Limite : un seul gestionnaire par événement.

Méthode 3 : addEventListener (recommandé)

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 :

<!DOCTYPE html>
<html lang="fr">
<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>
    <div id="maBoite" class="boite">Cliquez ici</div>
    <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()...