\thumb

%%% 01

\begin{qcm}{Savoir le vocabulaire du cours}{5} % titre , temps
À chaque question ne correspond qu'une seule bonne réponse parmi les trois proposées. Laquelle ?
\begin{questions}
\item La partie du code HTML qui s'exécute quand on clique sur un lien ou sur un bouton est :

\begin{tabularx}{\linewidth}{@{}XXX@{}}
\choix un inattendu
&
\choix un événement
&
\choix un élément
\end{tabularx}


\item \resetchoix Les délimiteurs HTML, tels que \texttt{<head>...</head>}, s'appellent :

\begin{tabularx}{\linewidth}{@{}XXX@{}}
\choix les balises
&
\choix les valises
&
\choix les bornes
\end{tabularx}


\item\resetchoix Une requête est traitée plus rapidement quand elle est du côté :

\begin{tabularx}{\linewidth}{@{}XXX@{}}
\choix client
&
\choix serveur
&
\choix web
\end{tabularx}


\item\resetchoix La méthode qui permet de transmettre les variables en les faisant apparaître dans la barre d'adresse du navigateur est :

\begin{tabularx}{\linewidth}{@{}XXX@{}}
\choix HEAD
&
\choix POST
&
\choix GET
\end{tabularx}

\end{questions}
\end{qcm}

\begin{corrige}
\begin{questions}
\item Réponse \choix[b]. Quand on clique sur un lien s'exécute un événement. 
\item Réponse \choix[a]. Les délimiteurs s'appellent des balises (voir page \pageref{structure-principale}).
\item Réponse \choix[a]. Une requête est plus rapidement traitée du côté client, c'est-à-dire sur votre ordinateur, car il n'y a pas de délai de transmission jusqu'au serveur.
\item Réponse \choix[c]. La méthode GET permet en effet de transmettre des informations, vers un fichier PHP par exemple, et fait apparaître les données dans la barre d'adresse du navigateur sous la forme :
\begin{center}
\texttt{fichier.php?variable1=valeur1\&variable2=valeur2}
\end{center}
\end{questions}
\end{corrige}

%%% 02

\begin{vf}{Connaître le cours}{5} % titre , temps
Les affirmations suivantes sont-elles vraies ou fausses ?
\begin{questions}
\item Si l'adresse d'un site Internet commence par \og \texttt{https://} \fg{} alors on peut être assurés que les données transmises sont chiffrées.

\item Les événements peuvent être gérés aussi bien dans l'en-tête que dans le corps d'un fichier HTML.

\item La méthode la plus sûre pour transmettre des données sensibles est la méthode POST.

\item Plusieurs serveurs peuvent se connecter à un client.
\end{questions}
\end{vf}

\begin{corrige}
\begin{questions}
\item La proposition est \textit{vraie}. Le protocole \texttt{https} est la combinaison du\linebreak protocole \texttt{HTTP} (pour transmettre des données) et d'un certificat de sécurité, \texttt{SSL} par exemple, qui chiffre les données.

\item La proposition est \textit{vraie}. Les événements peuvent être mis :
\begin{itemize}
\item dans le corps, sous forme de liens hypertextes comme :
\begin{center}
\texttt{<a href='monfichier.html'>Mon lien</a>};
\end{center}
\item dans l'en-tête, sous forme de fonction Javascript, et dans le corps (pour faire appel aux fonctions Javascript créées).
\end{itemize}

\item La proposition est \textit{vraie}. En effet, avec la méthode POST, les données ne paraissent pas dans la barre d'adresse du navigateur Internet.

\item La proposition est \textit{fausse}. En effet, il n'y a qu'un serveur qui héberge une page donnée disponible sur le web. En revanche, plusieurs clients peuvent se connecter au même serveur (c'est d'ailleurs le principe\linebreak d'Internet).
\end{questions}
\end{corrige}

%%% 03

\begin{exo}{Interpréter un code}{Lycée André Theuriet, Civray}{1}{5} 
Voici le code HTML du corps d'un fichier :
\begin{listing}[language=html]{}{04-03.html}\end{listing}

\begin{questions}
\item De combien de paragraphes cette page est-elle composée ?
\item Que représente la première ligne ?
\item Comment apparaît le mot \og ingenuus \fg{} sur la page web ? Y a-t-il un autre mot qui apparaît de la même façon ?
\item Comment apparaît le mot \og ingénu \fg{} sur la page web ?
\end{questions}
\end{exo}

\begin{corrige}
\begin{questions}\enlargethispage*{2em}
\item Les paragraphes sont délimités par les balises \texttt{<p>} et \texttt{</p>}. Il y a donc ici deux paragraphes.

\item La première ligne comporte les balises \texttt{<h1>} et \texttt{</h1>}; par conséquent, la première ligne représente un titre (de niveau 1, donc le titre principal).

\item Le mot \og ingenuus \fg{}  est entre les balises \texttt{<b>} et \texttt{</b>}; par conséquent, il apparaît en gras sur la page web.

Il y a aussi le mot \og inné \fg{} qui est entre les mêmes balises, donc il apparaît aussi en gras.

\item Le mot \og ingénu \fg{} est entre les balises \texttt{<i>} et \texttt{</i>}; par conséquent, il apparaît en italique sur la page web.
\end{questions}
\end{corrige}

%%% 04

\begin{exo}{Liens hypertextes}{Lycée Jean-Joseph Fourier, Auxerre}{1}{5} 
Voici un bout de code HTML :

\Par

\qquad\texttt{<a href="rene.html"><img src="images/papi-rene.jpg"}

\qquad\texttt{alt="Papi René" /></a>}

\begin{questions}
\item Qu'affiche ce code ?
\item Où se trouve l'objet affiché par ce code ?
\item Y a-t-il un événement lié à ce code ? Lequel ?
\end{questions}
\end{exo}

\begin{corrige}
\begin{questions}
\item Ce code affiche une image intitulée \og papi-rene.jpg \fg. Si l'image n'est pas disponible alors le texte \og Papi René \fg{} est affiché.
\item L'objet affiché, donc l'image, se trouve apparemment dans le répertoire nommé \og images \fg{} (relativement au répertoire dans lequel se trouve le fichier HTML de la page web).
\item L'image se trouve entre les balises \texttt{<a href='rene.html'>} et \texttt{</a>} donc quand on clique dessus, il y a effectivement un événement : nous sommes redirigés vers la page \og rene.html \fg.
\end{questions}
\end{corrige}

%%% 05

\begin{exo}{Un menu}{Lycée Camille Claudel, Blois}{1}{5} 
Voici une partie de code HTML :
\begin{listing}[language=html]{}{04-05.html}\end{listing}

\begin{questions}
\item Expliquer ce qu'il affiche dans une page web.
\item La méthode utilisée vous semble-t-elle judicieuse ?
\item Un visiteur écrit directement dans la barre d'adresse du navigateur :
\begin{center}
\texttt{redirect.php?2.html}
\end{center}
Est-ce équivalent à l'événement qui est déclenché en sélectionnant la deuxième valeur du menu ?
\end{questions}
\newpage
\end{exo}

\begin{corrige}
\begin{questions}
\item Ce code affiche un formulaire dans lequel il y a un unique champ de sélection. Les deux valeurs que peut prendre ce champ sont \og 1.html \fg{} et \og 2.html \fg. Il y a aussi un bouton poussoir (de validation du formulaire).

\item La méthode utilisée ici pour envoyer les données vers le serveur est la méthode GET. A priori, il n'y a pas de données sensibles : la variable envoyée n'est que le nom d'une page Internet.

La méthode GET est donc judicieuse ici... du moins, elle n'est pas gênante.

\item Quand on choisit la seconde option du menu, à savoir \og 2.html \fg, et en validant le formulaire, nous sommes redirigés vers la page \texttt{redirect.php}, et la valeur de la variable transmise s'affiche à la suite, séparée par un point-virgule, sous la forme :
\begin{center}
\texttt{redirect.php?page=2.html}
\end{center}
Ainsi, quand on entre directement \texttt{redirect.php?2.html}, il manque la variable qui est égale à \og 2.html \fg. Ainsi, cela n'aura pas la même conséquence, et il est fort à parier que cela engendrera une erreur.
\end{questions}
\end{corrige}

%%% 06

\begin{exo}{Un événement sur formulaire}{Lycée Sophie Germain, Paris}{1}{10} 
\begin{questions}
\item Que fait le code HTML suivant ?
\begin{listing}[language=html]{}{04-06.html}\end{listing}

\item Ce code peut-il fonctionner si la connexion Internet est interrompue ?
\end{questions}
\end{exo}

\begin{corrige}
\enlargethispage*{4em}
\begin{questions}
\item Ce code est composé :
\begin{itemize}
\item d'un en-tête dans lequel il y a une fonction javascript qui affiche la variable mise en argument (\texttt{val});
\item d'un corps qui affiche un formulaire où il y a un unique champ de sélection. Par défaut, le champ affiché est vide (la première option est vide).
\end{itemize}
Il n'y a pas de bouton poussoir de validation, mais un événement est prévu quand on change la valeur de la variable \texttt{page} : l'appel de la fonction \texttt{controle}.

\item Dans la mesure où ce code ne fait appel qu'à un événement javascript, il est exécuté uniquement côté client, donc il peut être exécuté sans connexion internet.
\end{questions}
\end{corrige}

%%% 07

\begin{exo}{Mot de passe}{Lycée polyvalent Émile Zola, Aix-en-Provence}{2}{10} 
Paul administre un site Internet où les visiteurs peuvent créer un compte en informant un identifiant et un mot de passe.

Il compte créer un formulaire dans lequel il demandera l'identifiant et le mot de passe, informations qu'il enverra par la méthode POST à son serveur qui les enregistrera dans une base de données sans les modifier.

\Par

Expliquez pourquoi ce qu'il compte faire n'est pas recommandé.
\end{exo}

\begin{corrige}
L'envoi des données par la méthode POST est une bonne idée. Cependant, les enregistrer en brut dans la base de données, c'est-à-dire sans modification, est déconseillé car des pirates pourraient avoir accès à cette base de données et ainsi connaître le mot de passe de chaque personne inscrite. 

\Par

Dans la pratique, le mot de passe est chiffré avant d'être enregistré.

Ensuite, quand la personne veut s'identifier, le mot de passe en brut est\linebreak envoyé au serveur, puis chiffré de la même façon, et comparé à ce qui est enregistré dans la base de données. Si cela coïncide, cela signifie que les deux mots de passe sont identiques.
\end{corrige}

%%% 08
\newpage
\begin{exo}{Un champ bien rempli}{Lycée François Villon, Les Mureaux}{2}{15} 
Afin d'être sûr que le champ \texttt{pseudo} de son formulaire soit bien rempli, Luc utilise le code suivant :
\begin{listing}[language=html]{}{04-08.html}\end{listing}

\Par

Expliquer le fonctionnement de ce code.
\end{exo}

\begin{corrige}
\begin{questions}
\item Dans l'en-tête, outre l'encodage, on voit qu'il y a une partie en\linebreak javascript.
\begin{itemize}
\item \texttt{window.onload = function()}\\\texttt{\{ document.getElementById('nom').focus(); \}} signifie que\linebreak l'on donne le focus au champ dont l'identifiant est \og nom \fg{} dès que la fenêtre est lue (\og window.onload \fg). Ainsi, nous sommes assurés que le champ a bien le focus dès le début.
\item On définit ensuite une fonction \texttt{controle} qui teste si l'argument est vide, auquel cas elle affiche une popup avec un texte nous incitant à remplir le champ.
\end{itemize}

\item Dans le corps:
\begin{itemize}
\item il s'affiche un formulaire avec un champ unique, et un bouton de\linebreak validation;

\item sur le champ, dont l'identifiant est \og nom \fg, il est mis un événement  \texttt{onblur}, qui déclenche l'appel de la fonction \texttt{controle}, définie en en-tête, dès que le champ perd le focus. Cet événement est réalisé même si on ne quitte pas le champ et que l'on clique directement sur le bouton de validation (car dès qu'on clique sur un bouton, les champs perdent le focus).
\end{itemize}
\end{questions}
\end{corrige}

%% NEW 2025

\begin{exo}{Formulaire d'inscription \newexo}{Lycée Raoul Follereau, Nevers}{3}{30}
\enlargethispage*{\baselineskip}
Vous devez créer un formulaire d'inscription pour un site web. Ce formulaire doit permettre aux utilisateurs de s'inscrire en fournissant leur nom, prénom, adresse e-mail et mot de passe. Le formulaire doit également inclure une validation côté client pour s'assurer que tous les champs sont remplis avant l'envoi des données au serveur.

\begin{questions}
\item Créer le formulaire HTML.
\begin{itemize}
\item Le formulaire doit inclure les champs suivants : nom, prénom, adresse e-mail, et mot de passe.
\item Utiliser les balises \texttt{<label>} pour étiqueter chaque champ.
\item Utiliser les balises \texttt{<input>} pour les champs de saisie.
\item Ajouter un bouton de validation pour soumettre le formulaire.
\end{itemize}

\item Ajouter la validation côté client.
\begin{itemize}
\item Utiliser JavaScript pour vérifier que tous les champs sont remplis avant l'envoi du formulaire.
\item Afficher un message d'erreur si un champ est vide.
\end{itemize}

\item Utiliser la méthode POST.
\begin{itemize}
\item Configurer le formulaire pour utiliser la méthode POST pour envoyer les données au serveur.
\item Spécifier l'action du formulaire (par exemple, \texttt{action="inscription.php"}).
\end{itemize}

\end{questions}

\textit{Questions complémentaires:}

\begin{questions}
\item Pourquoi utilise-t-on la méthode POST pour envoyer les données du formulaire au serveur ?
\item Quelle est l'importance de la validation côté client avant l'envoi des données au serveur ?
\end{questions}

\end{exo}

\begin{corrige}
\begin{questions}
\item La méthode POST est utilisée pour envoyer les données du formulaire au serveur car elle permet de transmettre des données de manière \textit{sécurisée} et \textit{sans les afficher dans l'URL}.

%Cela est particulièrement important pour les données sensibles comme les mots de passe et les informations personnelles. Contrairement à la méthode GET, qui ajoute les données du formulaire à l'URL, la méthode POST envoie les données dans le corps de la requête HTTP, ce qui les rend moins visibles et plus sûres.

\item La validation côté client est importante pour plusieurs raisons :
\begin{itemize}
\item \textit{Rapidité:} elle permet de vérifier les données avant qu'elles ne soient envoyées au serveur, ce qui réduit le temps de traitement et améliore l'expérience utilisateur en fournissant une rétroaction immédiate.

\item \textit{Réduction de la charge serveur:} en validant les données côté client, on évite d'envoyer des requêtes inutiles au serveur, ce qui réduit la charge sur celui-ci.

\item \textit{Sécurité:} bien que la validation côté client ne soit pas suffisante à elle seule pour garantir la sécurité (car elle peut être contournée), elle constitue une première ligne de défense contre les entrées incorrectes ou malveillantes.
\end{itemize}

\end{questions}
\enlargethispage*{5em}

L'en-tête du code HTML peut-être le suivant:

%\begin{listing}[language=html]{}{05-forminscr.html}\end{listing}

\begin{listing}[language=html]{}{05-forminscr01.txt}\end{listing}

\newpage


Le reste du code est le suivant. Vous pouvez télécharger le code entier à l'aide du QR code.


% lien vers le programme entier : 
\qrset{height=1.1cm,version=5}\rput(-1,-0.7){
\psframebox{\qrcode{https://idl-live.prepamath.fr/IL1NSI/05-forminscr.html}}}
\vspace*{-10pt}

\begin{listing}[language=html]{}{05-forminscr02.txt}\end{listing}


\end{corrige}

% NEW 2025


\begin{exo}{Calculatrice interactive \newexo}{Lycée Sainte-Anne, Brest}{3}{30}
L'objectif de cet exercice est de créer une mini-calculatrice web capable d'effectuer des opérations simples (addition, soustraction, multiplication, division) entre deux nombres. Les calculs devront se faire \textit{côté client} grâce à JavaScript.

\begin{questions}
    \item Créez un formulaire HTML avec les champs suivants:
    \begin{itemize}
        \item deux champs pour entrer des nombres;
        \item un menu déroulant pour choisir l'opération à effectuer \texttt{(+,-,*,/)};
        \item un bouton pour effectuer le calcul.
    \end{itemize}
    
    \item Lorsque l'utilisateur clique sur le bouton:
    \begin{itemize}
        \item une fonction JavaScript est déclenchée;
        \item le résultat est affiché dynamiquement sur la page \textit{sans recharger} celle-ci.
    \end{itemize}
    
    \item Vérifiez côté client que:
    \begin{itemize}
        \item les deux champs contiennent des nombres;
        \item une erreur s'affiche si un champ est vide ou si une division par zéro est tentée.
    \end{itemize}
\end{questions}

\textbf{Exemple d'affichage attendu :}

Champs pour les nombres : \texttt{3} et \texttt{4}.\\
Opération sélectionnée : \texttt{*}.\\
Résultat affiché : \texttt{12}.

\end{exo}

\begin{corrige}
\enlargethispage*{5em}
Voici un exemple de code HTML :
\vspace*{-3mm}

% lien vers le programme entier : 
\qrset{height=1.1cm,version=5}\rput(-1,-0.6){
\psframebox{\qrcode{https://idl-live.prepamath.fr/IL1NSI/05-calculatrice.html}}}
\vspace*{-10pt}
\begin{listing}[language=html]{}{05-calculatrice-1.txt}\end{listing}

\newpage

\begin{listing}[language=html]{}{05-calculatrice-2.txt}\end{listing}

\newpage

\begin{listing}[language=html]{}{05-calculatrice-3.txt}\end{listing}

\end{corrige}

\thumb
\AfficheCorrige
