68 lines
3.2 KiB
TeX
68 lines
3.2 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}
|