NSI · Première · Interagir sur le web
Pages interactives
HTML, CSS, JavaScript, et la confiance.
En bref
Une page web se construit avec trois langages, aux rôles strictement distincts.
Les trois rôles
| Le langage | Ce qu'il décrit | Des exemples |
|---|---|---|
| HTML | La structure et le sens | Titres, paragraphes, listes, liens, formulaires |
| CSS | La présentation | Couleurs, polices, marges, adaptation à l'écran |
| JavaScript | Le comportement | Réagir à un clic, valider un champ, modifier la page sans la recharger |
Cette séparation n'est pas cosmétique : elle permet de changer toute l'apparence sans toucher au contenu, et elle assure l'accessibilité aux lecteurs d'écran, qui s'appuient sur la structure HTML.
Le DOM
Le navigateur transforme le HTML en un arbre d'objets, le DOM. JavaScript agit sur cet arbre : sélectionner un élément, changer son texte, en ajouter un.
Un événement est une action détectable — clic, saisie, envoi de formulaire, chargement — à laquelle on associe une fonction, le gestionnaire d'événement.
C'est le mécanisme central de toute page interactive.
Où s'exécute le code
| Le code | Où il s'exécute | Sa vitesse | Sa maîtrise |
|---|---|---|---|
| Côté client | Dans le navigateur du visiteur | Immédiate, sans aller-retour | Entièrement sous le contrôle du visiteur : lisible, modifiable, désactivable |
| Côté serveur | Sur la machine distante | Un aller-retour réseau | Le seul lieu sûr, et le seul qui accède aux données |
La règle de sécurité attendue en devoir : une validation côté client est un confort, jamais une sécurité. Elle évite un aller-retour inutile ; elle ne protège de rien, puisque n'importe qui peut envoyer la requête sans passer par la page. Toute donnée reçue doit être revérifiée côté serveur.
Formulaires
Un formulaire envoie ses champs par GET ou POST. Chaque champ porte un nom, qui devient la clé sous laquelle le serveur lira la valeur.
Les types de champ — courriel, nombre, date — apportent une aide à la saisie, et là encore aucune garantie.
Teste-toi
6 questions pour vérifier
Touche une réponse : la correction s’affiche tout de suite.
1.Quel langage décrit la structure d’une page web ?
2.Qu’est-ce que le DOM ?
3.Une validation de formulaire côté client suffit à sécuriser une application.
4.Où s’exécute le code JavaScript d’une page ?
5.Qu’est-ce qu’un gestionnaire d’événement ?
6.Pourquoi séparer structure, présentation et comportement ?
0 / 6 questions
Dans l’app, ce chapitre a son quiz complet, chronométré, et tes erreurs reviennent au bon moment pour ne plus les refaire.
La fiche de révision, sur une page
Tout « Pages interactives » sur une seule page A4 illustrée : l’essentiel, les pièges et un mini-test. Elle se débloque dans l’app avec des gemmes — et ton compte gratuit en offre assez pour tes trois premières fiches.
