NSI Première — Chapitre 5 : Interactions Homme-Machine sur le Web
NSI — Première — Lycée

Chapitre 5 :
Interactions Homme‑Machine sur le Web

Comprendre comment le navigateur et le serveur communiquent, comment JavaScript rend les pages interactives, et comment les formulaires transmettent des données de façon sécurisée.

Client-Serveur
DOM & JavaScript
GET / POST
HTTPS & Cookies
📖

Introduction

Au début du Web (années 1990), les pages étaient statiques : de simples documents HTML affichés sans aucune interaction possible. L'utilisateur consultait du contenu, c'est tout.

Exemple — Web statique (1994) L'utilisateur tape une URL → le serveur renvoie un fichier HTML figé → le navigateur l'affiche. Aucun calcul, aucune personnalisation.

Aujourd'hui, le Web est dynamique et interactif : vous cliquez sur un bouton, remplissez un formulaire, recevez des suggestions en temps réel… Tout cela est rendu possible par la combinaison de plusieurs technologies travaillant ensemble :

HTML — Structure CSS — Mise en forme JavaScript — Interactivité PHP / Python — Serveur Protocole HTTP(S)

Ce chapitre explore comment ces technologies s'articulent et comment l'utilisateur interagit avec le serveur à travers son navigateur.

📚

Cours

1
Le modèle client-serveur
💻
Client
(Navigateur)
➜ Requête HTTP
◄ Réponse HTTP
🖥️
Serveur Web
(Apache, Nginx…)
🗄️
Base de
données
Définition — Client Le client est le programme (navigateur web : Chrome, Firefox…) qui envoie des requêtes HTTP à un serveur et affiche la réponse à l'utilisateur. Il s'exécute sur la machine de l'utilisateur.
Définition — Serveur Le serveur web est un ordinateur connecté à Internet qui attend des requêtes, les traite (éventuellement en interrogeant une base de données) et renvoie une réponse (généralement une page HTML, du CSS, du JSON…).

Codes de statut HTTP

Chaque réponse du serveur contient un code numérique indiquant le résultat :

200 OK — Succès 301 Redirect — Redirection 404 Not Found — Page introuvable 500 Internal Server Error
Exemple concret Vous tapez https://www.google.fr dans votre navigateur.
1. Le navigateur envoie une requête GET / HTTP/1.1 au serveur de Google.
2. Le serveur répond avec le code 200 OK et renvoie le HTML de la page d'accueil.
3. Le navigateur interprète le HTML et affiche la page.
2
Les langages du Web
Langage Côté Rôle Exemple
HTML Client Structure et contenu de la page <h1>, <p>, <form>
CSS Client Mise en forme, couleurs, polices color: red;
JavaScript Client Interactivité dynamique (sans rechargement) document.getElementById()
PHP Serveur Génération de pages HTML dynamiques, accès BDD <?php echo "Bonjour"; ?>
Python Serveur Traitement des requêtes (Flask, Django…) @app.route('/')
Point clé : HTML, CSS et JavaScript s'exécutent dans le navigateur de l'utilisateur (côté client). PHP et Python s'exécutent sur le serveur distant. L'utilisateur ne voit jamais le code serveur, seulement le résultat HTML renvoyé.
3
Le DOM et les composants graphiques
Définition — DOM (Document Object Model) Le DOM est une représentation en mémoire de la page HTML sous forme d'un arbre d'objets. Chaque balise HTML devient un nœud. JavaScript peut parcourir cet arbre, modifier des nœuds, en ajouter ou en supprimer, ce qui modifie la page sans rechargement.

Visualisation de l'arborescence DOM

document
└─ <html>
├─ <head>
│ └─ <title> Ma Page </title>
└─ <body>
├─ <h1 id="titre"> Bonjour </h1>
└─ <form>
├─ <input id="nom" type="text">
└─ <input type="button" value="Envoyer">

Les attributs essentiels

AttributRôleExemple JS
id Identifiant unique d'un élément — permet à JS de le cibler document.getElementById("monId")
value Valeur actuelle d'un champ de formulaire document.getElementById("nom").value
innerHTML Contenu HTML interne d'un élément el.innerHTML = "<b>Texte</b>"

Types de balises <input>

type=RenduUsage
"text"Champ de saisie librePrénom, adresse…
"password"Texte masqué par ●●●Mot de passe
"button"Bouton cliquableDéclencher une action JS
"radio"Bouton rond (choix unique)Sélection d'une option
"checkbox"Case à cocherOptions multiples
"submit"Bouton d'envoiEnvoyer le formulaire
4
Interagir avec JavaScript

JavaScript permet de lire et modifier le DOM en temps réel. Le schéma classique est :

  1. Récupérer l'élément via son id
  2. Lire ou modifier son attribut value ou innerHTML
  3. Afficher le résultat dans un autre élément
// Récupérer la valeur saisie par l'utilisateur
let prenom = document.getElementById('champPrenom').value;

// Modifier le contenu d'un paragraphe résultat
document.getElementById('zoneResultat').innerHTML =
    "Bonjour " + prenom + " !";
Exécution côté client Tout ce code s'exécute dans le navigateur de l'utilisateur. Le serveur n'est pas contacté. C'est pourquoi la page ne se recharge pas.
5
Les gestionnaires d'évènements
Définition — Évènement Un évènement est une action de l'utilisateur (clic, survol, frappe clavier…) ou du navigateur (chargement de la page) que JavaScript peut détecter et auquel il peut répondre en exécutant une fonction.
GestionnaireDéclenché quand…Exemple HTML
onclick L'utilisateur clique sur l'élément <button onclick="maFonction()">
onchange La valeur d'un champ change et perd le focus <select onchange="filtrer()">
onmouseover La souris passe sur l'élément <img onmouseover="zoom()">
onkeydown Une touche est pressée <input onkeydown="check()">
onload La page a fini de se charger <body onload="init()"> 
// Exemple : changer la couleur d'un titre au clic
function changerCouleur() {
    let titre = document.getElementById('monTitre');
    titre.style.color = 'red';
}
6
Formulaires et requêtes HTTP : GET vs POST

Lorsqu'un formulaire est soumis, le navigateur envoie les données au serveur en utilisant l'une des deux méthodes suivantes :

🔵 Méthode GET

  • Les données sont ajoutées à l'URL : ?nom=Alice&age=17
  • Visible dans la barre d'adresse
  • Taille limitée (~2 000 caractères)
  • Peut être mise en favori, partagée
  • Pour les recherches et consultations

🟣 Méthode POST

  • Les données sont dans le corps de la requête
  • Invisible dans l'URL
  • Pas de limite de taille significative
  • Ne peut pas être mis en favori
  • Pour les formulaires avec données sensibles
Exemple GET — URL visible https://recherche.fr/resultats?q=javascript&page=1
Les paramètres q et page sont lisibles dans l'URL.
Exemple POST — formulaire de connexion 
<form action="/login" method="post">
  <input type="text"     name="login">
  <input type="password" name="mdp">
  <input type="submit"   value="Connexion">
</form>
Le mot de passe n'apparaît pas dans l'URL.
7
Sécurité : HTTPS et Cookies

🔒 Protocole HTTPS (SSL/TLS)

  • HTTPS = HTTP + chiffrement SSL/TLS
  • Les données échangées sont chiffrées : un intercepteur ne peut pas les lire
  • Le cadenas 🔒 dans la barre d'adresse indique une connexion sécurisée
  • Protège contre le phishing et l'interception de mots de passe
  • Obligatoire pour tout site qui collecte des données personnelles

🍪 Les Cookies

  • Petits fichiers texte stockés par le navigateur
  • Permettent de maintenir une session (rester connecté)
  • Le serveur envoie un cookie lors de la connexion, le navigateur le renvoie à chaque requête
  • Risque : vol de session si un cookie est intercepté
  • Réglementé par le RGPD en Europe (bandeau de consentement)
Définition — Phishing Le phishing (ou hameçonnage) est une technique d'attaque où un pirate crée un faux site imitant un site légitime (banque, réseaux sociaux…) pour voler les identifiants. HTTPS ne garantit pas l'identité du site, mais certifie que la connexion est chiffrée.
Règle simple : Ne jamais saisir un mot de passe sur un site sans https:// dans l'URL (cadenas fermé). En cas de doute, vérifier l'URL exacte du site.
✅

L'essentiel à retenir

1

Le Web repose sur un modèle client-serveur : le navigateur envoie une requête HTTP, le serveur envoie une réponse (code 200 = OK, 404 = introuvable…).

2

HTML structure la page, CSS la met en forme, JavaScript la rend interactive — tous trois s'exécutent côté client. PHP/Python traitent les données côté serveur.

3

Le DOM est l'arbre des éléments HTML. JavaScript accède aux éléments via document.getElementById('id') et peut modifier .value ou .innerHTML sans recharger la page.

4

La méthode GET transmet les données dans l'URL (visible, limité). La méthode POST les envoie dans le corps de la requête (invisible dans l'URL, adapté aux données sensibles).

5

HTTPS chiffre les échanges (cadenas 🔒). Les cookies maintiennent la session mais peuvent être volés → jamais de données sensibles sur un site HTTP.

⚡

Activités interactives

1

QCM — Client/Serveur, GET/POST et HTTPS

3 questions · Sélectionnez une réponse par question puis validez.

1. Quelle affirmation sur le modèle client-serveur est correcte ?

2. Pour envoyer un formulaire contenant un mot de passe, quelle méthode HTTP faut-il utiliser ?

3. À quoi sert le protocole HTTPS ?

📋 Corrigé — QCM

  • Q1 → Réponse B : Le modèle client-serveur repose bien sur le client (navigateur) qui envoie une requête et le serveur qui répond. Le serveur s'exécute sur une machine distante, pas celle de l'utilisateur.
  • Q2 → Réponse C : POST est obligatoire pour les mots de passe car les données ne s'affichent pas dans l'URL (contrairement à GET). Une URL contenant un mot de passe serait conservée dans l'historique du navigateur et visible par tous.
  • Q3 → Réponse B : HTTPS chiffre la communication via SSL/TLS. Attention : HTTPS ne garantit pas qu'un site est légitime (un site de phishing peut aussi avoir un certificat HTTPS). Il faut toujours vérifier l'URL.
2

Manipulation du DOM en JavaScript

Découvrez comment JavaScript modifie la page côté client, sans rechargement.

Cette activité illustre le mécanisme onclick + getElementById + modification du DOM. Tout s'exécute dans votre navigateur.

← Le résultat apparaîtra ici
Observez : À chaque clic, la page n'est pas rechargée. JavaScript lit la valeur du champ (.value), la transforme, puis met à jour l'affichage (.innerHTML). Tout se passe dans votre navigateur.

Le code JavaScript correspondant :

// Récupérer l'évènement onclick du bouton
function convertirMajuscules() {
    // 1. Lire la valeur du champ texte via son id
    let texte = document.getElementById('inputTexte').value;

    // 2. Transformer la chaîne en majuscules
    let resultat = texte.toUpperCase();

    // 3. Afficher le résultat dans la zone dédiée
    document.getElementById('zoneResultat').innerHTML = resultat;
}

📋 Explications — Manipulation du DOM

  • Étape 1 — Lire : document.getElementById('inputTexte').value cible l'élément HTML dont l'id vaut inputTexte et lit la propriété value (la saisie de l'utilisateur).
  • Étape 2 — Traiter : La méthode JavaScript .toUpperCase() retourne une nouvelle chaîne en majuscules. Le texte original n'est pas modifié.
  • Étape 3 — Afficher : document.getElementById('zoneResultat').innerHTML = resultat insère le texte transformé dans la zone résultat. Le DOM est mis à jour immédiatement, sans aucune requête vers le serveur.
  • Côté client : C'est l'essence même de JavaScript — permettre des interactions immédiates et réactives sans solliciter le serveur à chaque action.
3

Analyse d'un formulaire de connexion

Réfléchissez : quelle méthode HTTP ce formulaire devrait-il utiliser ?

Voici un formulaire de connexion. Examinez-le attentivement puis répondez aux questions.

🔐 Connexion à l'espace élève

Code source de ce formulaire :

<form action="/login"
      method="???">

  <input type="text"
         name="login"
         placeholder="Identifiant">

  <input type="password"
         name="mdp"
         placeholder="Mot de passe">

  <input type="submit"
         value="Se connecter">

</form>

❓ Question 1 : Quelle méthode HTTP devrait-on utiliser à la place de "???" pour ce formulaire ?

❌ GET n'est pas adapté ici. Avec GET, le mot de passe serait ajouté dans l'URL, par exemple : /login?login=alice&mdp=monMotDePasse. Cette URL serait visible dans la barre d'adresse, conservée dans l'historique du navigateur et dans les logs du serveur. C'est une faille de sécurité grave !
✅ Excellente réponse ! POST est la seule méthode adaptée. Les données (identifiant + mot de passe) sont envoyées dans le corps de la requête HTTP, non dans l'URL. Elles restent invisibles dans la barre d'adresse et ne sont pas sauvegardées dans l'historique du navigateur.

❓ Question 2 : En dehors de la méthode, quelle autre mesure de sécurité est indispensable pour ce formulaire ?

❌ HTTP seul est insuffisant. Même avec POST, si la connexion n'est pas chiffrée (HTTP simple), un pirate peut intercepter la requête et lire le mot de passe en clair. C'est ce qu'on appelle une attaque "man-in-the-middle".
✅ Parfait ! HTTPS (HTTP + TLS/SSL) chiffre tout le trafic entre le navigateur et le serveur. Même si un pirate intercepte la requête POST, il ne verra qu'un flux chiffré illisible. POST + HTTPS = combinaison minimale pour tout formulaire d'authentification.

📋 Corrigé — Analyse du formulaire

  • Méthode → POST : Tout formulaire transmettant des données personnelles ou sensibles (mot de passe, numéro de carte, données médicales…) doit impérativement utiliser POST. La valeur method="get" est le réglage par défaut si l'attribut est absent, c'est pourquoi il faut toujours le spécifier explicitement.
  • Protocole → HTTPS : POST seul ne suffit pas. Sans HTTPS, le contenu du corps de la requête POST circule en clair sur le réseau. Il faut le chiffrement SSL/TLS pour protéger les données en transit.
  • Côté serveur : Le mot de passe ne doit jamais être stocké en clair dans la base de données — il doit être haché avec un algorithme robuste (bcrypt, argon2…). Cela sort du cadre de ce chapitre mais est fondamental en sécurité web.
  • Cookie de session : Après une connexion réussie, le serveur envoie généralement un cookie de session. Ce cookie doit avoir les attributs HttpOnly (inaccessible à JavaScript) et Secure (transmis uniquement via HTTPS).

NSI — Première · Chapitre 5 : Interactions Homme-Machine sur le Web

Ressource pédagogique · Programme officiel Terminale NSI 2024