Interactions entre l'homme et la machine sur le Web

Une page web n'est plus une simple page à lire : on y clique sur des boutons, on remplit des formulaires, on fait défiler des cartes.

Cette interface homme-machine (IHM) repose sur des composants graphiques décrits en HTML, dont le comportement est programmé en JavaScript, en réponse à des événements.

Derrière l'écran, le navigateur (le client) dialogue avec un serveur grâce au protocole HTTP. Ce chapitre apprend à lire le code d'une page interactive, à distinguer ce qui s'exécute côté client et côté serveur, et à comprendre comment un formulaire transmet ses données.

1. Les composants graphiques d'une page

1.1 HTML décrit, CSS habille, JavaScript agit

Le navigateur lit ces trois langages et affiche la page.

Voici une page qui utilise les trois. Change la couleur, le texte du bouton, le message, puis actualise l'aperçu.

<style>
  h3 { color: #7c3aed; }
  button { padding: 6px 14px; border-radius: 8px; }
</style>

<h3>Ma première page interactive</h3>
<button id="bouton">Clique-moi</button>
<p id="message"></p>

<script>
  function reagir() {
    document.getElementById("message").textContent = "Bravo, tu as cliqué !";
  }
  document.getElementById("bouton").addEventListener("click", reagir);
</script>

1.2 Les composants d'interaction

Les voici tous réunis. Ajoute une option à la liste, ou un troisième bouton radio.

<p><input type="text" id="nom" placeholder="Ton nom"></p>
<p><label><input type="checkbox" id="cgu"> J'accepte les conditions</label></p>
<p>
  <label><input type="radio" name="taille" value="S"> S</label>
  <label><input type="radio" name="taille" value="M"> M</label>
</p>
<p>
  <select id="pays">
    <option>France</option>
    <option>Belgique</option>
  </select>
</p>
<p><textarea id="message" rows="2" placeholder="Ton message"></textarea></p>
<button id="ok">Valider</button>

Ici, le bouton ne fait rien : aucun comportement ne lui a encore été associé. C'est l'objet de la partie suivante.

2. Les événements

2.1 Un événement, une fonction

<input type="text" id="prenom" placeholder="Ton prénom">
<button id="ok">Dire bonjour</button>
<p id="message"></p>

<script>
  function saluer() {
    let p = document.getElementById("prenom").value;
    document.getElementById("message").textContent = "Bonjour " + p + " !";
  }
  document.getElementById("ok").addEventListener("click", saluer);
</script>

2.2 Ce qu'il faut savoir lire et modifier

Voici un compteur de clics. La variable compteur est déclarée en dehors de la fonction : elle garde sa valeur d'un clic à l'autre.

<button id="plus">+1</button>
<p>Nombre de clics : <span id="nb">0</span></p>

<script>
  let compteur = 0;
  function clic() {
    compteur = compteur + 1;
    document.getElementById("nb").textContent = compteur;
  }
  document.getElementById("plus").addEventListener("click", clic);
</script>

function remettre() {
  compteur = 0;
  document.getElementById("nb").textContent = compteur;
}
document.getElementById("zero").addEventListener("click", remettre);

if (p === "") {
  document.getElementById("message").textContent = "Écris ton prénom";
  return;
}

JavaScript ressemble à Python, avec quelques différences de syntaxe.

let compteur = 0;

function clic() {
  compteur = compteur + 1;
  if (compteur === 10) {
    console.log("Dix clics !");
  }
}

compteur = 0

def clic():
    global compteur
    compteur = compteur + 1
    if compteur == 10:
        print("Dix clics !")

3. Le dialogue client-serveur

3.1 Requête et réponse HTTP

Une requête contient une méthode (GET pour obtenir, POST pour envoyer des données), une URL et des en-têtes.

Le serveur effectue des calculs : lire un fichier, interroger une base de données, exécuter un programme en Python ou en PHP.

Il renvoie une réponse : un code, puis un contenu (page HTML, image, données). Le client traite la réponse : il affiche la page et exécute son JavaScript.

GET /recherche?q=nsi&page=2 HTTP/1.1        ← requête du client
Host: www.exemple.fr

HTTP/1.1 200 OK                             ← réponse du serveur
Content-Type: text/html; charset=utf-8

<!DOCTYPE html><html>…</html>

3.2 Qui exécute quoi, et dans quel ordre ?

3.3 Ce que le client mémorise et retransmet

C'est ce qui permet de rester connecté d'une page à l'autre, car HTTP ne garde aucun souvenir entre deux requêtes.

Le client mémorise aussi un cache (images et fichiers déjà téléchargés) et l'historique.

3.4 Transmission chiffrée : HTTPS

HTTPS ajoute le chiffrement, grâce au protocole TLS : le contenu des requêtes et des réponses devient illisible pour un tiers.

Un certificat garantit en plus l'identité du serveur : c'est le cadenas affiché par le navigateur.

On chiffre dès qu'il y a des données personnelles, un mot de passe, un paiement. Aujourd'hui, la quasi-totalité des sites utilisent HTTPS.

4. Les formulaires : GET ou POST

4.1 Un formulaire simple

<form action="/inscription" method="post">
  <input type="text" name="pseudo" />
  <input type="password" name="mdp" />
  <input type="submit" value="S'inscrire" />
</form>

Quand l'utilisateur valide, le navigateur envoie au serveur, à l'adresse indiquée par action, les couples nom=valeur de tous les champs qui ont un attribut name.

La méthode décide de la façon de les envoyer.

4.2 GET : les paramètres dans l'URL

Avec method="get", les paramètres sont ajoutés à l'URL après un ?, et séparés par &.

Exemple : /recherche?q=nsi&page=2.

La page ci-dessous construit l'URL qu'un formulaire GET enverrait, sans rien envoyer. Saisis une recherche, puis ajoute un champ name="langue".

<form id="f">
  <input type="text" name="q" value="nsi">
  <input type="number" name="page" value="2" style="width: 60px">
  <button type="button" id="voir">Rechercher</button>
</form>
<p>URL demandée : <code id="url"></code></p>

<script>
  function montrer() {
    // on n'envoie rien : on construit seulement l'URL, comme le ferait le navigateur
    let parametres = new URLSearchParams(new FormData(document.getElementById("f")));
    document.getElementById("url").textContent = "/recherche?" + parametres;
  }
  document.getElementById("voir").addEventListener("click", montrer);
</script>

4.3 POST : les paramètres dans le corps

Avec method="post", les paramètres sont placés dans le corps de la requête : ils sont invisibles dans l'URL, et leur taille n'est pas limitée.

5. Exemple résolu pas à pas

On donne la page suivante. Essaie-la avant de répondre.

<input type="number" id="prix" placeholder="Prix">
<label><input type="checkbox" id="etudiant"> Tarif étudiant</label>
<button id="calc">Calculer</button>
<p id="total"></p>

<script>
  function calculer() {
    let p = Number(document.getElementById("prix").value);
    if (document.getElementById("etudiant").checked) {
      p = p * 0.5;
    }
    document.getElementById("total").textContent = "Total : " + p + " €";
  }
  document.getElementById("calc").addEventListener("click", calculer);
</script>

function calculer() {
  let p = Number(document.getElementById("prix").value);
  if (p < 0) {
    document.getElementById("total").textContent = "Prix invalide";
    return;
  }
  if (document.getElementById("etudiant").checked) {
    p = p * 0.75;
  }
  document.getElementById("total").textContent = "Total : " + p + " €";
}

À retenir