2022-2023/1NSI/08_Interaction_web/exercises.tex

\begin{exercise}[subtitle={JS pour modifier page web}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
    Le but de cet exercice est d'utiliser le language Javascript pour modifier une page web.
    \begin{enumerate}
        \item Créer une fichier \texttt{index.html} avec le code suivant
            \begin{center}
                \begin{minipage}{0.8\linewidth}
                    \inputminted[bgcolor=base3]{html}{./script/1E_index.html}
                \end{minipage}
            \end{center}

        \item Dans les outils du développeur (\texttt{F12}) allez dans l'onglet console et taper successivement les commandes suivantes. Expliquer l'action de chaque commande et commencer à ce faire un mémo des commandes javascript.
            \begin{center}
                \begin{minipage}{0.8\linewidth}
                    \inputminted[bgcolor=base3]{js}{./script/1E_index.js}
                \end{minipage}
            \end{center}

        \item Passez la console en mode multiligne en pressant \texttt{CTRL+B}, saisir puis exécuter le code suivant.
            \begin{center}
                \begin{minipage}{0.8\linewidth}
                    \inputminted[bgcolor=base3]{js}{./script/1E_interaction.js}
                \end{minipage}
            \end{center}

            Interagir avec la page. Quelles sont les interactions possibles ? Comment ont-elles été programmées ?

        \item Recharger la page. Qu'en est-il des interactions ?
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Corpus du Javascript}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
    Pour réaliser l'exercice suivant vous devez ouvrir la console de votre navigateur (F12 le plus souvent).

    Cet exercice propose des commandes javascript à vous d'extraire les spécificités du language et de le comparer au language Python.

    \begin{multicols}{2}
        \begin{enumerate}
            \item \textbf{Opérations et variables}: exécuter les commandes suivantes les unes après les autres puis compléter les pointillées
                \begin{center}
                    \begin{minipage}{\linewidth}
                        \inputminted[bgcolor=base3]{js}{./script/1E_ope_varia.js}
                    \end{minipage}
                \end{center}
                Pour la suite passer l'éditeur en mode multiligne (\texttt{CTRL-B})
            \item \textbf{Conditionnement}
                \begin{center}
                    \begin{minipage}{\linewidth}
                        \inputminted[bgcolor=base3]{js}{./script/1E_condi.js}
                    \end{minipage}
                \end{center}
            \item \textbf{Boucles}
                \begin{center}
                    \begin{minipage}{\linewidth}
                        \inputminted[bgcolor=base3]{js}{./script/1E_boucles.js}
                    \end{minipage}
                \end{center}
            \item \textbf{Fonctions}
                \begin{center}
                    \begin{minipage}{\linewidth}
                        \inputminted[bgcolor=base3]{js}{./script/1E_fonction.js}
                    \end{minipage}
                \end{center}
            \item Traduire les programmes précédents en Python.
        \end{enumerate}
    \end{multicols}
\end{exercise}

\begin{exercise}[subtitle={Compteur de clics}, step={2}, origin={frederic-junier}, topics={ Interaction web }, tags={ Javascript, Web }]
    Dans cet exercice, on étudie un compteur de clics.

    \begin{enumerate}
        \item Ouvrir le fichier \texttt{2E\_compteur.html} avec un navigateur et lister les interactions possibles ainsi que les éléments auxquels ils sont liés.
        \item Dans l'outil Inspecteur du navigateur, vérifier que les interactions apparaissent bien à travers les boites \texttt{event}. Quels sont évènements qui déclenchent l'évènement?
        \item Ouvrir le code source de la page. Identifier la partie code javascript et comment les évènements sont attachés aux éléments HTML.
        \item Expliquer comment le compteur arrive à être augmenté.
        \item Expliquer comment le compteur est réinitialisé.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Le pire du web!}, step={2}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
    Dans cet exercice, on étudie la pire création du web!

    \begin{enumerate}
        \item Ouvrir le fichier \texttt{2E\_pire\_web.html}. Lister les interactions que vous remarquez et les éléments auxquels elles sont liées.
        \item Ouvrir le fichier \texttt{2E\_pire\_web.html} avec un éditeur de texte. Comment est importé le code javascript?
        \item Comment sont associés les évènements aux liens?
        \item (*) Ajouter un 4e article identique aux premiers. Arriverez-vous à faire disparaitre la croix pour fermer l'article quand on passe la souris dessus puis la faire réapparaitre ?
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Projets multiples}, step={3}, origin={frederic-junier.org/NSI/premiere/chapitre23/javascript-git2/}, topics={ Interaction web }, tags={ Javascript, Web }]
    Copier et coller le dossier \texttt{codes} dans votre répertoire personnel.

    La page d'accueil (\texttt{index.html}) contient une liste de liens vers des pages dynamiques qui contiennent ou sont liés à des codes Javascript à compléter

    \begin{enumerate}
        \item Depuis la page d'accueil, suivre le lien vers l'activité Calcul d'âge de la page age.html.

            \begin{enumerate}
                \item Quel élément HTML a reçu un gestionnaire d'événement ? Quel événement est surveillé ?
                \item Compléter le code Javascript dans le fichier code-age.js afin que la page puisse calculer l'âge de l'utilisateur à partir de sa date de naissance?
            \end{enumerate}

        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Jouer avec les événements I. Compléter le code Javascript qui se trouve dans l'en-tête du fichier evenements.html pour :

            \begin{enumerate}
                \item attacher un gestionnaire d'événement click à l'élément d'identifiant titre
                \item un clic sur cet élément doit déclencher l'apparition d'une fenêtre pop-up avec le message "Attention, je peux griffer !"
            \end{enumerate}

        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Jouer avec les événements II. Compléter le code Javascript qui se trouve dans l'en-tête du fichier evenements2html pour :

            \begin{enumerate}
                \item attacher un gestionnaire d'événement click à l'élément img d'identifiant chat
                \item un clic sur cet élément doit déclencher le changement de sa propriété src, qui doit prendre pour valeur le chemin "images/chat-bonjour.png", ainsi un clic sur l'image devra provoquer son changement.
            \end{enumerate}

        \item Revenir sur la page d'accueil et suivre le lien vers l'activité Conversion d'unité de température. La page temperature.html propose de convertir une mesure de température de Celsius en Fahrenheit ou réciproquement. Le code Javascript se trouve dans le fichier code-temperature.js.

            \begin{enumerate}
                \item Quel élément HTML a reçu un gestionnaire d'événement ? Quel événement est surveillé ?
                \item Compléter le code Javascript qui se trouve dans le fichier code-temperature.js pour rendre la page temperature.html fonctionnelle.
            \end{enumerate}
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={IMC version WEB}, step={3}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
    Dans cet exercice, vous allez programmer un calculateur d'IMC interactif.

    Pour rappelle, l'indice d'IMC, ce calcule à partir de la masse et de la taille d'une personne par la formule
    \[
        IMC = \frac{\mbox{mass}}{\mbox{taille}^2}
    \]

    \begin{enumerate}
        \item Créer une page HTML avec un formulaire où l'on a deux inputs masse et taille et un bouton soumettre ainsi qu'un endroit où mettre le résultat de l'IMC.
        \item Ajouter un évènement sur le bouton soumettre pour qu'il calcule l'indice IMC et l'affiche au bon endroit.
        \item Modifier l'évènement pour que l'interprétation  soit affichée sous l'indice et que le fond de la page s'accorde avec la couleur de l'image:
            \begin{center}
                \includegraphics[scale=0.5]{./fig/IMC}
            \end{center}
    \end{enumerate}

\end{exercise}


\begin{exercise}[subtitle={QCM}, step={4}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
    \begin{enumerate}
        \item Parmi les langages suivants, lequel est exécuté sur le serveur lors de la consultation d’une page Web ?
            \begin{tasks}(4)
                \task JavaScript
                \task HTML
                \task CSS
                \task PHP
            \end{tasks}

        \item Dans une page HTML, lequel de ces codes permet la présence d'un bouton qui appelle la fonction javascript \mintinline{javascript}{afficher_reponse()} lorsque l'utilisateur clique dessus ?
            \begin{tasks}(1)
                \task \mintinline{html}{<a href="afficher_reponse()">Cliquez ici</a> }
                \task \mintinline{html}{<button if_clicked="afficher_reponse()">Cliquez ici</button> }
                \task \mintinline{html}{<button  value="Cliquez ici"><a> afficher_reponse()</a></button> }
                \task \mintinline{html}{<button onclick="afficher_reponse()">Cliquez ici</button>}
            \end{tasks}
        \item On souhaite qu’un menu apparaisse à chaque fois que l’utilisateur passe sa souris sur l’image de bannière du site. L’attribut de la balise img dans lequel on doit mettre un code Javascript à cet effet est :
            \begin{tasks}(4)
                \task \mintinline{html}{onclick }
                \task \mintinline{html}{src  }
                \task \mintinline{html}{alt }
                \task \mintinline{html}{onmouseover }
            \end{tasks}
        \item Une page HTML contient la ligne suivante dans laquelle un mot a été remplacé par des points de supsension :  \mintinline{html}{<p ...... ="alert('hello')"> Survolez-moi </p> }

            Au survol de la souris, le message hello apparait dans une boite de dialogue.

            Par quel mot faut-il remplacer les points de suspension ?
            \begin{tasks}(4)
                \task \mintinline{javascript}{onmouseout }
                \task \mintinline{javascript}{onmouseover }
                \task \mintinline{javascript}{onmouseleave }
                \task \mintinline{javascript}{onclick}
            \end{tasks}

        \item \mintinline{javascript}{onmouseover} est une méthode qui permet de traiter un événement de quel type ?
            \begin{tasks}(2)
                \task l'appui d'une touche du clavier
                \task un clic sur un bouton de souris
                \task un mouvement de la souris
                \task le survol par la souris d'un élément de la page
            \end{tasks}

        \item Parmi les propriétés suivantes d’une balise <button /> dans une page HTML, laquelle doit être rédigée en langage JavaScript ?

            \begin{tasks}(4)
                \task la propriété name
                \task la propriété type
                \task la propriété onclick
                \task la propriété id
            \end{tasks}

        \item Un élève a écrit une fonction javascript qui détermine la moyenne des valeurs entrées par l'utilisateur dans un  formulaire de sa page HTML.

            Il place sa fonction javascript :
            \begin{tasks}(1)
                \task entre la balise <js> et la balise </js>
                \task entre la balise <code> et la balise </code>
                \task entre la balise <script> et la balise </script>
                \task entre la balise <javascript> et la balise </javascript>
            \end{tasks}

        \item Voici un extrait d'un document HTML.

            \begin{minipage}{0.8\linewidth}
                \inputminted[bgcolor=base3]{html}{./script/QCM_body.html}
            \end{minipage}

            Quelle doit être la ligne qui remplace les pointillés pour obtenir un bouton dont l'appui déclenche la fonction javascript \mintinline{javascript}{actionBouton()} ?
            \begin{tasks}(2)
                \task \mintinline{html}{<button click = "actionBouton();"> }
                \task \mintinline{html}{<button onclick = "actionBouton();"> }
                \task \mintinline{html}{<button onclick => "actionBouton();" }
                \task \mintinline{html}{<button> onclick = "actionBouton();"}
            \end{tasks}
    \end{enumerate}
\end{exercise}