Niveau : moyen. Durée estimée : 60 min. 10 exercices avec corrections détaillées.
Rappel des notions clés
Une page web mélange trois langages, chacun avec son rôle : le HTML décrit le contenu, le CSS règle l'apparence, le JavaScript programme les réactions aux actions de l'utilisateur. Exemple : <button id="ok">Valider</button> crée un bouton (HTML), #ok { color: green; } l'écrit en vert (CSS), et bouton.addEventListener("click", valider); lance la fonction valider à chaque clic sur ce bouton (JavaScript).
Le JavaScript tourne dans le navigateur, c'est-à-dire chez le client. Un événement (un clic, l'envoi d'un formulaire) déclenche la fonction qu'on lui a associée. Attention : la propriété value d'un champ donne toujours du texte, même si l'utilisateur a tapé un nombre.
Un formulaire envoie une requête HTTP, c'est-à-dire un message du navigateur au serveur. Chaque champ y part sous la forme nom=valeur, où le nom est son attribut name : un champ sans name n'est pas envoyé. Avec method="get", ces paires s'ajoutent à la fin de l'adresse, après un ?, séparées par des &. Avec method="post", elles voyagent dans le corps de la requête, hors de l'adresse (documentation MDN). Le serveur la traite avec un programme (en PHP, par exemple) et renvoie une page HTML.
Syntaxes à retenir :
- Règle CSS :
sélecteur { propriété: valeur; }, où le sélecteur estp(une balise),.nom(une classe) ou#nom(un id, unique dans la page). - Formulaire :
<label for="x">pour l'étiquette du champ d'id x,<input>pour un champ,<select>et ses<option value="…">pour une liste. - Adresse en GET :
page.php?nom1=valeur1&nom2=valeur2 - Réagir à un clic :
element.addEventListener("click", fonction);("submit"pour l'envoi d'un formulaire, queevent.preventDefault()annule) - Changer le texte d'un élément :
element.textContent = "Bravo"; - Lire un champ comme un nombre :
Number(document.getElementById("note").value)
Piège classique : croire que POST protège un mot de passe. POST le sort de l'adresse, mais sans HTTPS (la version chiffrée de HTTP) il circule en clair : quiconque intercepte la requête le lit. Pour un mot de passe, il faut POST et HTTPS.
Exercices : niveau facile
Exercice 1 : Pour chaque ligne, donne le langage (HTML, CSS ou JavaScript) et dis si elle décrit le contenu, l'apparence ou une réaction de la page.
a) <h1>Menu de la cantine</h1>
b) h1 { color: navy; }
c) bouton.addEventListener("click", afficherMenu);
d) <img src="frites.jpg" alt="Frites">
e) img { width: 200px; }Correction :
Une balise entre chevrons (< et >), c'est du HTML ; un sélecteur suivi d'accolades, du CSS ; une fonction branchée sur un événement, du JavaScript.
a) HTML, contenu (un titre). b) CSS, apparence. c) JavaScript, réaction au clic. d) HTML, contenu (une image). e) CSS, apparence.
Exercice 2 : Ce code HTML contient deux erreurs. Trouve-les et corrige-les.
<p>Inscris-toi au <strong>club théâtre</p></strong>
<a href="clubs.html">Voir tous les clubsCorrection :
Les balises se ferment dans l'ordre inverse de leur ouverture, comme des boîtes rangées l'une dans l'autre.
<p>Inscris-toi au <strong>club théâtre</strong></p>
<a href="clubs.html">Voir tous les clubs</a>Ligne 1 : fermer strong avant p. Ligne 2 : ajouter la balise fermante du lien.
Exercice 3 : Avec ce HTML et ce CSS, donne la couleur de chaque ligne affichée et dis si elle est en 18 pixels.
<h2 id="titre">Clubs du lycée</h2>
<p class="info">Inscriptions jusqu'à vendredi.</p>
<p>Le club échecs a lieu le mardi.</p>
<p class="info">Le club théâtre a lieu le jeudi.</p>p { font-size: 18px; }
.info { color: red; }
#titre { color: blue; }Correction :
Repère ce que vise chaque règle : p tous les paragraphes, .info ceux de classe info, #titre l'élément d'id titre.
Ligne 1 : bleue, sans les 18 pixels (ce n'est pas un p). Lignes 2 et 4 : rouges, 18 pixels. Ligne 3 : couleur par défaut, 18 pixels.
Exercices : niveau moyen
Exercice 4 : Le lycée ouvre les inscriptions aux clubs. Écris le formulaire HTML : un champ texte pour le prénom, une liste déroulante pour le club (Échecs, Théâtre, Robotique) et un bouton « S'inscrire ». Les données partent vers inscription.php avec la méthode GET. Chaque champ a son étiquette <label>.
Correction :
Sur <form>, action dit où envoyer et method comment ; chaque champ a un name, et le for de chaque étiquette reprend l'id de son champ.
<form action="inscription.php" method="get">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
<label for="club">Club :</label>
<select id="club" name="club">
<option value="echecs">Échecs</option>
<option value="theatre">Théâtre</option>
<option value="robotique">Robotique</option>
</select>
<button type="submit">S'inscrire</button>
</form>Le formulaire envoie deux paramètres : prenom et club.
Exercice 5 : Le formulaire de l'exercice 4 est sur la page https://lycee.example/clubs.html. Hugo tape « Hugo » comme prénom, choisit « Théâtre » et clique sur « S'inscrire ». Écris l'adresse complète que demande le navigateur.
Correction :
En GET : l'adresse de action (même dossier que la page), puis ?, puis les paires name=valeur séparées par &. Pour la liste, la valeur envoyée est l'attribut value de l'option choisie, pas le texte affiché.
https://lycee.example/inscription.php?prenom=Hugo&club=theatre
Exercice 6 : Une page contient <button id="plus">J'aime</button> et <p id="compteur">0 j'aime</p>, avec ce script :
let n = 0;
const bouton = document.getElementById("plus");
const texte = document.getElementById("compteur");
bouton.addEventListener("click", function () {
n = n + 1;
texte.textContent = n + " j'aime";
});a) Quel événement déclenche la fonction ? b) Qu'affiche le paragraphe après trois clics ? c) Modifie la fonction pour que le compteur s'arrête à 5.
Correction :
Chaque clic ajoute 1 à n, puis réécrit le paragraphe.
a) Le clic sur le bouton (« click »). b) « 3 j'aime ». c) On n'ajoute 1 que si n vaut moins de 5 :
bouton.addEventListener("click", function () {
if (n < 5) {
n = n + 1;
}
texte.textContent = n + " j'aime";
});Exercices : niveau difficile
Exercice 7 : La page de connexion de http://jeux.example (sans S) envoie son formulaire à connexion.php avec method="get". Ses champs s'appellent login et mdp. a) Hugo se connecte avec l'identifiant hugo et le mot de passe chat2008 : quelle adresse s'affiche, et quel problème vois-tu ? b) Sa sœur affirme : « Passe en POST et le mot de passe sera protégé. » A-t-elle raison ? Justifie.
Correction :
a) En GET, les paramètres s'ajoutent à l'adresse : http://jeux.example/connexion.php?login=hugo&mdp=chat2008. Le mot de passe s'affiche en clair dans la barre d'adresse et reste dans l'historique.
b) Non. POST sort le mot de passe de l'adresse, mais le site est en HTTP : rien n'est chiffré, et quiconque intercepte la requête lit son corps. Il faut POST et HTTPS.
Exercice 8 : Un formulaire id="inscription" contient un champ mot de passe id="mdp" ; la page a aussi un paragraphe vide id="message". a) Écris le script qui bloque l'envoi et affiche « Mot de passe trop court » si le mot de passe fait moins de 8 caractères. b) Le serveur doit-il refaire ce contrôle ? Justifie.
Correction :
a) On écoute l'événement submit (l'envoi du formulaire) et on l'annule avec preventDefault() si le mot de passe est trop court.
const form = document.getElementById("inscription");
form.addEventListener("submit", function (event) {
const mdp = document.getElementById("mdp").value;
if (mdp.length < 8) {
event.preventDefault();
document.getElementById("message").textContent = "Mot de passe trop court";
}
});b) Oui. Ce script tourne chez l'utilisateur, qui peut désactiver JavaScript ou envoyer une requête sans passer par la page. Le contrôle dans le navigateur aide l'utilisateur ; seul celui du serveur protège le site.
Exercice 9 : Sur un site de recettes, Inès tape crepes dans le champ de recherche (nommé q, méthode GET) et valide. Range ces étapes dans l'ordre, en notant pour chacune : client (le navigateur) ou serveur.
A. Un programme PHP cherche les recettes dans la base de données. B. Le navigateur affiche la page des résultats. C. Un script JavaScript vérifie que le champ n'est pas vide. D. Le navigateur envoie la requête avec ?q=crepes. E. Le serveur renvoie une page HTML.
Correction :
Suis la donnée : le navigateur l'envoie, le serveur la traite, la réponse revient. Le JavaScript tourne chez le client, le PHP sur le serveur.
C (client), D (client), A (serveur), E (serveur), B (client).
Exercice 10 : Une page calcule la moyenne de deux notes tapées dans les champs note1 et note2 :
document.getElementById("calcul").addEventListener("click", function () {
const a = document.getElementById("note1").value;
const b = document.getElementById("note2").value;
document.getElementById("resultat").textContent = (a + b) / 2;
});a) Tu tapes 12 et 15, puis tu cliques. Qu'affiche la page ? Explique. b) Corrige le script.
Correction :
a) value donne du texte : a vaut "12" et b vaut "15". Entre deux textes, + les colle bout à bout : a + b vaut "1215". La division, elle, convertit en nombre : $1215 \div 2 = 607{,}5$. La page affiche 607.5 (JavaScript écrit les décimales avec un point).
b) On convertit chaque valeur avec Number :
const a = Number(document.getElementById("note1").value);
const b = Number(document.getElementById("note2").value);Alors $(12 + 15) \div 2 = 13{,}5$ : la page affiche 13.5.
Bilan et conseils
Ce qu'il faut retenir : chaque langage a son rôle (contenu, apparence, réactions). Un formulaire envoie des paires name=valeur, dans l'adresse en GET, dans le corps de la requête en POST, et seul HTTPS les chiffre. Ce qui tourne dans le navigateur ne protège rien : le serveur revérifie.
Ces exercices couvrent le thème « Le Web » de SNT (seconde) et la partie « Interactions entre l'homme et la machine sur le Web » du programme de NSI (première).
Sources
Programme de NSI de première générale, ministère de l'Éducation nationale (eduscol).
MDN Web Docs, « Envoyer et extraire les données des formulaires » (developer.mozilla.org) et « <input> » (developer.mozilla.org).