145 lines
8.5 KiB
TeX
145 lines
8.5 KiB
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}
|