Interactions entre l'homme et la machine sur le Web en 1ère
Cours complet, points clés à retenir et exercices d'entraînement de interactions entre l'homme et la 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
- Sécurité : injection, HTTPS et bonnes pratiques
Formulaires HTML et événements JavaScript
Un formulaire HTML permet à l'utilisateur d'envoyer des données (texte, choix, fichiers...). JavaScript capture les actions de l'utilisateur (clic, saisie) via des événements pour réagir en temps réel.
Exemple
Quand tu remplis un formulaire de connexion sur Instagram et que tu cliques sur 'Se connecter', le formulaire envoie tes données. JavaScript peut vérifier que tu as bien saisi un email avant d'envoyer.
À retenir : Les formulaires HTML collectent les données, JavaScript les valide et réagit aux événements utilisateur (onclick, onchange, onsubmit...).
Protocole HTTP : requêtes GET et POST
HTTP est le langage que utilisent le navigateur (client) et le serveur pour communiquer. GET envoie les données dans l'URL (visible), POST les envoie cachées dans le corps du message.
Exemple
Quand tu cherches 'recette pizza' sur Google, c'est une requête GET : tu vois ?q=recette+pizza dans l'URL. Quand tu te connectes à ton compte, c'est POST : ton mot de passe ne s'affiche pas dans l'URL.
À retenir : GET = données visibles dans l'URL (recherches), POST = données cachées (identifiants, mots de passe).
Codes de statut HTTP et réponses
Le serveur répond à chaque requête par un code numérique à 3 chiffres qui indique si tout s'est bien passé, s'il y a une erreur, ou si la page a bougé.
Exemple
200 = OK (la page s'affiche normalement), 404 = Page non trouvée (tu as mal tapé l'URL), 500 = Erreur du serveur (le site a un problème).
À retenir : Les codes 2xx = succès, 3xx = redirection, 4xx = erreur client, 5xx = erreur serveur.
Architecture client-serveur du Web
Le Web fonctionne selon un modèle client-serveur : ton navigateur (client) demande des ressources à un ordinateur distant (serveur) qui les envoie en retour.
Exemple
Quand tu ouvres YouTube, ton navigateur envoie une requête au serveur de YouTube qui te renvoie la page HTML, les vidéos, les images. C'est un échange question-réponse.
À retenir : Client = ton navigateur qui demande, Serveur = l'ordinateur distant qui répond et stocke les données.
Sécurité : injection et HTTPS
Une injection est une attaque où un pirate insère du code malveillant dans un formulaire pour accéder à des données. HTTPS chiffre la communication pour que personne ne puisse lire tes données en transit.
Exemple
Si un site n'est pas sécurisé (HTTP), quelqu'un sur le même WiFi peut voir ton mot de passe. Avec HTTPS (le cadenas dans le navigateur), c'est chiffré. Une injection SQL : un pirate tape du code dans un champ de connexion pour accéder à la base de données.
À retenir : HTTPS chiffre les données, valider les formulaires empêche les injections, jamais faire confiance aux données de l'utilisateur.
Bonnes pratiques de sécurité Web
Ce sont les règles à respecter pour protéger un site et ses utilisateurs : valider les données, utiliser HTTPS, limiter les accès, mettre à jour régulièrement.
Exemple
Un bon site de banque : vérifie que tu es vraiment toi (authentification), chiffre tes données (HTTPS), ne stocke pas ton mot de passe en clair, limite le nombre de tentatives de connexion.
À retenir : Toujours valider les données côté serveur, utiliser HTTPS, et ne jamais faire confiance aux données du client.
Les points clés
- Un formulaire HTML + JavaScript permet une interaction dynamique avec l'utilisateur
- GET et POST sont deux méthodes HTTP différentes : GET pour afficher, POST pour sécuriser
- Le code de statut HTTP indique le résultat de la requête (200, 404, 500...)
- Le modèle client-serveur : le navigateur demande, le serveur répond
- HTTPS chiffre les données, les injections exploitent les formulaires mal validés
- La sécurité Web repose sur la validation des données et la confiance zéro envers l'utilisateur
L'essentiel
Le Web fonctionne sur un échange client-serveur sécurisé par HTTPS et la validation des données, où les formulaires et événements JavaScript permettent l'interaction.
Exercices d'entraînement
Entraîne-toi sur ces exercices, puis fais-toi corriger pas à pas par le tuteur.
Exercice 1
Vous devez créer une page HTML simple avec un formulaire de connexion. Le formulaire doit contenir : - Un champ pour l'email (type email) - Un champ pour le mot de passe (type password) - Un bouton de soumission Ecrivez le code HTML correspondant et expliquez la structure utilisée.
Corrige cet exercice avec le tuteur →Exercice 2
On considère une page web avec un bouton qui doit afficher une alerte au clic. Écrivez le code HTML et JavaScript nécessaire. Puis, modifiez le code pour que le bouton change de couleur (rouge) lors du clic, sans utiliser d'alerte.
Corrige cet exercice avec le tuteur →