Interactions Homme-Machine sur le Web en 1ère
Cours complet, points clés à retenir et exercices d'entraînement de interactions homme-machine sur le web pour les élèves de 1ère. Conforme au programme officiel.
Réviser notion par notion
Ce que tu vas réviser
- Formulaires HTML et événements JavaScript
- Protocole HTTP : requêtes GET/POST, réponses et codes de statut
- Interaction client-serveur : architecture du Web
Formulaires HTML et événements JavaScript
Un formulaire HTML est un ensemble de champs (texte, bouton, case à cocher) qu'un utilisateur peut remplir. JavaScript permet de réagir à ses actions (clic, saisie) grâce aux événements.
Exemple
Quand tu remplis un formulaire d'inscription sur Instagram et que tu cliques sur « S'inscrire », JavaScript vérifie que tu as écrit un email valide avant d'envoyer tes données.
À retenir : Les événements JavaScript (click, submit, input) permettent de déclencher des actions quand l'utilisateur interagit avec le formulaire.
Protocole HTTP : requêtes GET et POST
HTTP est la règle de communication entre ton ordinateur (client) et le serveur. GET envoie les données visibles dans l'URL, POST les place dans le corps de la requête, hors de l'URL (mais sans les chiffrer).
Exemple
Quand tu cherches « pizza » sur Google, c'est une requête GET : ?q=pizza apparaît dans l'URL. Quand tu te connectes à ta banque, c'est POST : ton mot de passe ne s'affiche jamais dans l'URL, et le site utilise HTTPS pour chiffrer la communication.
À retenir : GET met les données dans l'URL, POST dans le corps de la requête. Aucun des deux ne chiffre : pour des données sensibles comme les mots de passe, on utilise POST et HTTPS.
Codes de statut HTTP et réponses
Le serveur répond à chaque requête avec un code à 3 chiffres qui indique si tout s'est bien passé ou s'il y a un problème.
Exemple
200 = « tout va bien, voici la page », 404 = « la page n'existe pas » (l'erreur que tu vois souvent), 500 = « le serveur a un problème ».
À retenir : Les codes 200-299 sont des succès, 300-399 des redirections, 400-499 des erreurs client, 500-599 des erreurs serveur.
Architecture client-serveur du Web
Le Web fonctionne sur un modèle simple : le client (ton navigateur) demande quelque chose au serveur (ordinateur distant), le serveur répond avec les données.
Exemple
Tu tapes youtube.com dans ton navigateur. Ton ordinateur (client) envoie un message au serveur YouTube. Le serveur trouve la page et te l'envoie. Ton navigateur l'affiche.
À retenir : Client = celui qui demande (ton ordinateur), Serveur = celui qui répond (ordinateur distant) : tout le Web repose sur cet échange.
Interaction complète entre formulaires et serveur
Quand tu soumets un formulaire, JavaScript vérifie d'abord tes données, puis envoie une requête HTTP (GET ou POST) au serveur qui traite tes informations et répond.
Exemple
Sur Netflix, tu remplis l'email et le mot de passe. JavaScript vérifie que l'email est valide. Puis une requête POST envoie tes données au serveur Netflix. Si c'est correct, il répond avec le code 200 et tu accèdes à ton compte.
À retenir : Le flux complet : formulaire HTML → vérification JavaScript → requête HTTP → serveur traite → réponse HTTP → affichage du résultat.
Les points clés
- Les formulaires HTML collectent les données, JavaScript les valide côté client avant envoi au serveur.
- GET : données visibles dans l'URL (recherches) ; POST : données dans le corps de la requête, hors de l'URL ; seul HTTPS les chiffre.
- Code 200 = succès, 404 = page non trouvée, 500 = erreur serveur : mémoriser les codes les plus courants.
- Client demande au serveur via une requête HTTP, le serveur répond avec un code de statut et les données.
- La sécurité : utiliser POST et HTTPS pour les informations confidentielles, et valider les données côté serveur aussi.
L'essentiel
Le Web fonctionne selon un cycle simple : le client envoie une requête HTTP (formulaire, clic...), le serveur traite et répond avec un code de statut, le navigateur affiche le résultat.
Exercices d'entraînement
Entraîne-toi sur ces exercices, puis fais-toi corriger pas à pas par le tuteur.
Exercice 1
Tu crées un formulaire d'inscription. L'utilisateur entre son email et son mot de passe, puis clique sur « Envoyer ». Explique : (1) quel événement JavaScript se déclenche, (2) quelle méthode HTTP tu utiliseras et pourquoi, (3) quel code le serveur te renverra si tout est correct.
Corrige cet exercice avec le tuteur →Exercice 2
Un utilisateur essaie d'accéder à une page qui n'existe pas sur un site. Son navigateur reçoit une réponse du serveur. Quel sera le code de statut ? Explique ce qu'il signifie. Puis explique pourquoi on ne peut pas utiliser GET pour envoyer un mot de passe.
Corrige cet exercice avec le tuteur →