Interactions entre l'homme et la machine sur le Web
Ce domaine décrit le fonctionnement d'une page Web interactive : structure HTML, présentation CSS, comportement JavaScript, document DOM, événements et échanges HTTP entre client et serveur. L'examen demande de distinguer les rôles, de lire un formulaire et d'expliquer ce qui est exécuté côté client ou côté serveur.
Règles et concepts
- HTML décrit la structure et le contenu ; CSS décrit la présentation ; JavaScript ajoute un comportement dynamique.
- Le DOM est la représentation en mémoire de la page construite par le navigateur. JavaScript peut le modifier sans réécrire le fichier HTML source.
- Un événement est une action détectée par le navigateur : clic, saisie, chargement. On associe une fonction gestionnaire avec addEventListener.
- Une URL contient un schéma, un hôte, un chemin et parfois une chaîne de requête. Dans une requête GET, les paramètres sont visibles dans l'URL ; dans POST, ils sont dans le corps de la requête.
- HTTP fonctionne par requête du client et réponse du serveur, avec un code de statut : 200 succès, 404 ressource absente, 500 erreur serveur.
- Un formulaire HTML envoie des champs nommés ; le serveur traite ces valeurs et renvoie une réponse.
Exemple travaillé
On dispose d'un bouton d'identifiant b et d'un paragraphe d'identifiant out. Le code document.getElementById('b').addEventListener('click', function () { document.getElementById('out').textContent = 'OK'; }); associe au clic une fonction qui modifie le texte du paragraphe. Le fichier HTML n'est pas modifié sur le disque : seule la représentation DOM dans le navigateur change. Si JavaScript est désactivé, l'interaction ne se produit pas.
Pièges fréquents
Confondre HTML et langage de programmation ; dire que CSS stocke les données ; croire que JavaScript s'exécute toujours sur le serveur ; oublier que GET expose les paramètres ; confondre code de statut et contenu de la page ; modifier le DOM en croyant modifier le fichier source ; oublier que le client peut refuser ou altérer JavaScript, donc que la validation côté serveur reste nécessaire.
À retenir
- HTML structure, CSS présente, JavaScript anime.
- Le DOM est modifié en mémoire par le navigateur.
- addEventListener associe un événement à une fonction.
- GET place les paramètres dans l'URL, POST dans le corps.
- Les codes HTTP indiquent le résultat de la requête.