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={1}, 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={1}, 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}