Interactions entre l'homme et la machine sur le Web

On considère l'extrait de page suivant :

<p id="statut">Non connecte</p>
<button onclick="document.querySelector('#statut').innerHTML = 'Connecte'">Se connecter</button>
<button onclick="document.querySelector('#statut').innerHTML = 'Non connecte'">Se deconnecter</button>

1. Quel événement ? Quel événement JavaScript est utilisé dans ce code pour déclencher l'exécution des instructions ? À quelle action de l'utilisateur correspond-il ?

2. Que fait le code ? En une phrase pour chaque bouton, décrire précisément ce que fait le code associé lorsqu'il s'exécute.

3. Dérouler des clics. L'utilisateur clique d'abord sur « Se connecter », puis sur « Se déconnecter ». Quel est le texte affiché dans le paragraphe #statut après chacun de ces deux clics ?

4. Associer chaque situation à son événement. Le cours présente quatre événements : onclick, onmouseover, onchange, onsubmit. Associer chacune des situations suivantes à l'événement le plus adapté :

a. L'utilisateur survole une image avec la souris, sans cliquer. b. L'utilisateur valide un formulaire d'inscription en cliquant sur le bouton d'envoi. c. L'utilisateur sélectionne une nouvelle option dans une liste déroulante. d. L'utilisateur clique sur un bouton pour agrandir une image.

Un utilisateur tape, dans la barre d'adresse de son navigateur, l'URL https://lycee-exemple.fr/accueil. Voici ce qui est échangé :

Requête envoyée par le navigateur :

Réponse renvoyée par le serveur :

1. Qui envoie quoi ? Qui joue le rôle de client dans cet échange, et qui joue le rôle de serveur ? Qui envoie la requête, et qui envoie la réponse ?

2. Pourquoi cette méthode ? La méthode utilisée est GET. Expliquer, en une phrase, pourquoi cette méthode est adaptée à une simple visite de page.

3. Un code différent. Si l'utilisateur avait fait une faute de frappe et demandé /acceuil (page inexistante), quel code de statut le serveur aurait-il vraisemblablement renvoyé ? Que se passe-t-il alors côté navigateur ?

4. Combien d'échanges au total ? La page d'accueil contient, en plus du HTML, une feuille de style CSS et un script JavaScript. Combien d'échanges requête/réponse au minimum sont nécessaires pour charger complètement cette page ? Justifier.

Une page contient l'extrait suivant, représentant une lampe connectée :

<p id="lampe">Lampe eteinte</p>
<button onclick="document.querySelector('#lampe').innerHTML = 'Lampe allumee'; document.querySelector('#lampe').classList.add('actif')">Allumer</button>
<button onclick="document.querySelector('#lampe').innerHTML = 'Lampe eteinte'; document.querySelector('#lampe').classList.remove('actif')">Eteindre</button>

1. Trois façons de modifier une page. Le cours présente trois façons de modifier un élément avec JavaScript : changer son style, changer ses classes CSS, ou changer son contenu. Laquelle (ou lesquelles) sont utilisées dans ce code ? Justifier en citant les instructions concernées.

2. Un clic. L'utilisateur clique sur le bouton « Allumer ». Donner le texte affiché dans le paragraphe #lampe juste après, et indiquer si la classe actif est alors présente sur cet élément.

3. Une séquence de clics. L'utilisateur clique successivement sur : Allumer, puis Allumer une seconde fois, puis Éteindre. Donner le texte affiché après chacun des trois clics. Le second clic sur « Allumer » a-t-il un effet visible ? Justifier en expliquant ce que fait classList.add lorsque la classe est déjà présente.

4. Ajouter une troisième action. Écrire l'attribut onclick d'un troisième bouton « Basculer », qui doit afficher Lampe allumee si le texte actuellement affiché est Lampe eteinte, et Lampe eteinte sinon. (On pourra s'appuyer sur document.querySelector('#lampe').innerHTML pour lire le texte actuel dans une fonction JavaScript séparée, appelée depuis l'attribut onclick.)

On considère le code JavaScript suivant, associé à la page HTML qui le suit :

<p id="message">En attente</p>
<button onclick="reagirAuClic()">Cliquez ici</button>

document.querySelector('#message').innerHTML = 'Page chargee';
 
function reagirAuClic() {
    document.querySelector('#message').innerHTML = 'Bouton clique';
}

1. Juste après le chargement. Le navigateur vient de finir de charger la page, et l'utilisateur n'a encore rien cliqué. Quel texte le paragraphe #message affiche-t-il à cet instant ? Justifier en identifiant quelle ligne du script s'est exécutée, et à quel moment.

2. Après un clic. L'utilisateur clique ensuite sur le bouton. Quel texte le paragraphe affiche-t-il désormais ?

3. Le piège classique. Un élève affirme : « la fonction reagirAuClic s'exécute dès que la page se charge, donc le paragraphe affiche Bouton clique immédiatement, avant même le clic. » Expliquer précisément pourquoi cette affirmation est fausse, en utilisant la distinction faite dans le cours entre une instruction écrite directement dans le fichier JavaScript et une instruction placée à l'intérieur d'une fonction associée à un événement.

4. Une variante. On ajoute une seconde ligne juste après la première, tout en haut du fichier JavaScript : reagirAuClic(); (un appel direct à la fonction, hors de toute fonction et hors de tout gestionnaire d'événement). Que change ce simple ajout au texte affiché juste après le chargement de la page, avant tout clic ?

1. GET ou POST ? Pour chacune des situations suivantes, indiquer si le formulaire concerné devrait utiliser la méthode GET ou la méthode POST, et justifier à l'aide des critères du cours (sensibilité des données, effet ou non sur le serveur).

a. Une barre de recherche sur un site d'e-commerce, qui affiche les articles correspondant au mot tapé. b. Un formulaire de connexion, avec un champ identifiant et un champ mot de passe. c. Un filtre permettant de choisir une fourchette de prix (prix_min, prix_max) pour afficher une liste de produits. d. Un formulaire permettant de publier un nouveau commentaire sous un article de blog.

2. L'URL d'une recherche. Pour la situation (a), en supposant que le champ de recherche se nomme q et que l'utilisateur tape console, à quoi pourrait ressembler l'URL affichée dans la barre d'adresse après validation de la recherche ?

3. Un avantage de GET dans ce cas précis. Pour la situation (c), quel avantage concret y a-t-il à ce que les critères du filtre apparaissent dans l'URL, que ne permettrait pas POST ?

4. Écrire la balise. Écrire la balise form correspondant à la situation (b), avec un attribut action valant connexion.php et la méthode adaptée.

Un élève se connecte à la plateforme de cours en ligne de son lycée, avec son identifiant et son mot de passe. Il navigue ensuite sur plusieurs pages du site (son emploi du temps, ses notes, ses devoirs) sans avoir à ressaisir son mot de passe à chaque page.

1. Le problème posé par HTTP. Le cours indique que le protocole HTTP est « sans état ». Expliquer ce que cela signifie, et pourquoi cela pose, a priori, un problème pour qu'un site se « souvienne » qu'un utilisateur est connecté d'une page à l'autre.

2. Le rôle du cookie. Décrire, étape par étape, comment un cookie permet de résoudre ce problème : que se passe-t-il lors de la première connexion (envoi de l'identifiant et du mot de passe), puis lors de la visite d'une page suivante (par exemple la page des notes) ?

3. Une affirmation à corriger. Un camarade affirme : « puisque le formulaire de connexion utilise la méthode POST, le mot de passe est forcément protégé, HTTPS n'est donc pas indispensable. » Expliquer précisément pourquoi cette affirmation est fausse, en vous appuyant sur la différence entre « ne pas apparaître dans l'URL » et « être chiffré ».

4. Une conséquence concrète. Si le site utilisait HTTP au lieu de HTTPS, et qu'une personne malveillante parvenait à intercepter le trafic réseau de l'élève, quelles données pourrait-elle potentiellement lire en clair lors de la connexion, puis lors des pages suivantes (on pensera notamment au cookie retransmis à chaque requête) ?

Le site d'un club scientifique propose un formulaire d'inscription, dont on étudie successivement le HTML, l'échange HTTP qu'il déclenche, une amélioration en JavaScript, puis le maintien de la connexion.

Partie A — Le formulaire HTML.

<form action="inscription.php" method="post">
    <label>Nom</label> : <input type="text" name="nom" />
    <label>Email</label> : <input type="text" name="email" />
    <label>Mot de passe</label> : <input type="password" name="mdp" />
    <label>Niveau</label> :
    <select name="niveau" onchange="afficherNiveau()">
        <option value="premiere">Premiere</option>
        <option value="terminale">Terminale</option>
    </select>
    <input type="submit" value="S'inscrire" />
</form>
<p id="message"></p>

1. À quoi servent respectivement les attributs action et method de la balise form ?
2. Pourquoi la méthode post est-elle appropriée ici, plutôt que get ? On donnera deux raisons distinctes.

Partie B — L'échange HTTP déclenché par l'envoi.

1. Décrire la requête HTTP envoyée par le navigateur lorsque l'utilisateur remplit le formulaire et clique sur « S'inscrire » : méthode, URL visée, emplacement des données saisies.
2. En cas de succès, le serveur renvoie le code 200. Si, par erreur de configuration, l'attribut action avait pointé vers un fichier inexistant, quel code de statut le serveur renverrait-il vraisemblablement à la place ?

Partie C — Un retour visuel en JavaScript.

On souhaite qu'un message s'affiche dans le paragraphe #message dès que l'utilisateur change le niveau sélectionné, sans attendre l'envoi du formulaire.

1. Écrire la fonction afficherNiveau, appelée par l'attribut onchange de la liste déroulante, qui doit afficher Vous avez choisi : Premiere si l'option premiere est sélectionnée, et Vous avez choisi : Terminale sinon. (On pourra utiliser la propriété value de l'élément select, qui renvoie la valeur de l'option actuellement sélectionnée.)
2. L'utilisateur sélectionne « Terminale », puis change d'avis et sélectionne « Premiere ». Donner, dans l'ordre, les deux textes successivement affichés dans #message.

Partie D — Rester connecté après l'inscription.

Une fois inscrit, l'utilisateur reste connecté au site lorsqu'il navigue vers la page « Mes séances ».

1. Quel mécanisme, décrit en cours, permet au serveur de reconnaître l'utilisateur sur cette nouvelle page, sans lui redemander son mot de passe ?
2. Pourquoi est-il indispensable que l'ensemble du site, y compris la page d'inscription elle-même, soit servi en HTTPS et non en simple HTTP ?