Feat(NSI): fin du chapitre sur IHM web

2023-03-06 14:58:54 +01:00 · 2023-03-06 14:58:54 +01:00 · 5751062905
commit 5751062905
parent 688f8161b7
20 changed files with 458 additions and 13 deletions
--- a/1NSI/08_Interaction_web/2B_DOM.pdf
+++ b/1NSI/08_Interaction_web/2B_DOM.pdf
--- a/1NSI/08_Interaction_web/2B_DOM.tex
+++ b/1NSI/08_Interaction_web/2B_DOM.tex
@ -0,0 +1,78 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Mars 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{1}
+\section{Le DOM}
+
+\begin{definition}[Le DOM]
+    Le DOM (Document Objet Model) est une façon de représenter et d'interagir avec des documents HTML.
+
+    Le DOM est une représentation du document sous forme d'arbre où chaque nœud représente un partie du document.
+
+    Le navigateur télécharge la page HTML, le transforme en DOM, complète l'arbre avec les valeurs CSS. Puis le javascript manipule l'arbre pour faire les transformations.
+
+\end{definition}
+
+\paragraph{Exemple} ~
+
+\begin{minipage}{0.4\linewidth}
+ \begin{minted}[bgcolor=base3]{html}
+<html>
+	<body>
+        <h1> Titre </h1>
+        <p> Coucou </p>
+        <ul>
+        <li id="premier">un élément</li>
+        <li>un autre</li>
+        <li id="prefere">encore</li>
+        </ul>
+	</body>
+</html>
+\end{minted}
+\end{minipage}
+
+\afaire{transformer ce document html en DOM}
+
+\begin{propriete}[Javascript et manipulation du DOM]
+    Quelques commandes javascript pour manipuler et interagir avec le DOM.
+
+    Le mot \mintinline{js}{element} correspond dans la suite à un noeud du DOM.
+
+    \begin{itemize}
+        \item \mintinline{js}{document.getElementById(id)}: \dotfill
+        \item \mintinline{js}{document.createElement(type)}: \dotfill
+        \item \mintinline{js}{element.style}: \dotfill
+        \item \mintinline{js}{element.innerHTML}: \dotfill
+        \item \mintinline{js}{element.children}: \dotfill
+        \item \mintinline{js}{element.appendChild(...)}: \dotfill
+    \end{itemize}
+\end{propriete}
+
+\paragraph{Exemple}
+\begin{itemize}
+    \item Récupérer le contenu de la balise avec l'id "premier"
+        \vspace{1cm}
+
+    \item Changer la couleur du titre
+
+        \vspace{1cm}
+
+    \item Avoir la liste des balises li
+
+        \vspace{1cm}
+    \item Ajouter un élément dans ul
+        \vspace{1cm}
+\end{itemize}
+
+\end{document}
--- a/1NSI/08_Interaction_web/3B_interaction.pdf
+++ b/1NSI/08_Interaction_web/3B_interaction.pdf
--- a/1NSI/08_Interaction_web/3B_interaction.tex
+++ b/1NSI/08_Interaction_web/3B_interaction.tex
@ -0,0 +1,54 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Mars 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\setcounter{section}{2}
+\section{Interaction et évènements}
+
+\begin{definition}[Gestionnaire d'évènements]
+Javascript permet grâce à l'interface DOM d'attacher une fonction gestionnaire d'événement à un élément d'un document HTML.
+
+Ce gestionnaire est lié à un événement, qui est une action de l'utilisateur (déplacement de la souris, pression sur une touche du clavier) ou une modification d'un autre élément du document.
+
+Lorsque l'événement ciblé atteint l'élément surveillé par le gestionnaire, celui-ci le capture et déclenche une action.
+\end{definition}
+
+\begin{propriete}[Attacher des évènemnets]
+    Pour attacher un gestionnaire d'événement nommé gestionnaire, à un élément, nommé \mintinline{js}{element}, et le lier à un événement, par exemple click, on peut procéder de deux façons :
+    \begin{itemize}
+        \item Directement dans le code HTML
+
+                \begin{minipage}{0.9\linewidth}
+                    \begin{minted}[bgcolor=base3]{html}
+<element id="id_element" onclick="fonction_a_realiser()"> ... </element>
+                    \end{minted}
+                \end{minipage}
+            \item Dans le code javascript avec la méthode \mintinline{js}{addEventListener}
+
+                \begin{minipage}{0.9\linewidth}
+                    \begin{minted}[bgcolor=base3]{js}
+let v = document.getElementById("id_element");
+v.addEventListener("click", fonction_a_realiser);
+                    \end{minted}
+                \end{minipage}
+
+    \end{itemize}
+\end{propriete}
+
+\paragraph{Remarques: } Il existe de nombreuses type d'évènements que vous pouvez retrouver à l'adresse
+\begin{center}
+    \url{https://developer.mozilla.org/fr/docs/Web/Events#listing_des_%C3%A9v%C3%A9nements}
+\end{center}
+
+
+\end{document}
--- a/1NSI/08_Interaction_web/codes/projets/age.html
+++ b/1NSI/08_Interaction_web/codes/projets/age.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Âge avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" src="code-age.js" defer="defer"></script>
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body class="bg-light">
+
+
+
+<!-- Début de la balise container bootstrap -->
+<div>
+
+  <h1>Calcul d'âge avec Javascript. </h1>
+
+
+
+      <label>Saisissez votre date de naissance </label>
+       <br>
+      <input type="number" id="naissance" value="1975" required />
+      <br>
+      <button id="bouton" onclick="calcul_age()">Calculer</button>
+      <br>
+      <p> Nous sommes en <span id="courant"></span>,
+        donc vous  avez  <span id="age"></span> ans. </p>
+
+
+
+
+<!-- Fin de la balise container bootstrap -->
+</div>
+
+ <p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+</body>
+</html>
--- a/1NSI/08_Interaction_web/codes/projets/code-age.js
+++ b/1NSI/08_Interaction_web/codes/projets/code-age.js
@ -0,0 +1,13 @@
+//gestionnaire d'événement clic pour l'élément bouton
+function calcul_age(){
+    let n = document.getElementById("naissance");
+    let naissance = parseInt(n.value);
+    let date = new Date();
+    let courant = date.getFullYear();
+    let c = document.getElementById("courant");
+    c.innerHTML = courant;
+    //àcompléter
+}
+
+//age par défaut :
+calcul_age();
--- a/1NSI/08_Interaction_web/codes/projets/code-temperature.js
+++ b/1NSI/08_Interaction_web/codes/projets/code-temperature.js
@ -0,0 +1,21 @@
+//gestionnaire d'événement clic pour l'élément bouton
+function conversion_unite(){
+    let u = document.getElementById("unite_source");
+    let m = document.getElementById("mesure_source");
+    let c = document.getElementById("unite_cible");
+    let v = document.getElementById("valeur");
+    if (u.value === 'celsius'){
+        v.innerHTML = 9/5 * parseInt(m.value) + 32;
+        c.innerHTML = 'fahrenheit';
+    }
+    //à compléter avec un bloc else
+}
+
+/*
+Compléter en attachant le  gestionnaire d'événement conversion_unite
+ à l'élément #bouton pour l'événement click
+*/
+
+/* conversion par défaut au chargement de la page
+décommenter la ligne suivante*/
+//conversion_unite();
--- a/1NSI/08_Interaction_web/codes/projets/evenements.html
+++ b/1NSI/08_Interaction_web/codes/projets/evenements.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Onmouseover avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" defer="defer">
+   function chatouille(){
+        let titre = document.getElementById("titre");
+        if (titre.style.color === "red"){
+            titre.style.color = "blue";
+        }
+        else {
+            titre.style.color = "red";
+        }
+   }
+
+   //à compléter avec une fonction griffe
+    </script>
+
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+  <!--  à compléter avec un gestionnaire d'événement click -->
+  <h1 onmouseover="chatouille()"  id="titre" style='color : red'>J'aime les souris </h1>
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+
+</body>
+</html>
--- a/1NSI/08_Interaction_web/codes/projets/evenements2.html
+++ b/1NSI/08_Interaction_web/codes/projets/evenements2.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Evenements avec JS </title>
+
+  <meta charset="utf-8">
+
+   <script type="text/Javascript" defer="defer">
+   function chatouille(){
+        let chat = document.getElementById("chat");
+        chat.src = 'images/chat-touille.png';
+   }
+
+   //àcompléter avec une fonction chatpince
+
+   function chatbonjour(){
+        let chat = document.getElementById("chat");
+        chat.src = 'images/chat-bonjour.png';
+   }
+    </script>
+
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+  <!-- à compléter avec un  gestionnaire d'événement click -->
+  <img src="images/chat-bonjour.png"   alt="Bonjour" onmouseover="chatouille()"  onmouseout="chatbonjour()" id="chat">
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+
+</body>
+</html>
--- a/1NSI/08_Interaction_web/codes/projets/images/chat-bonjour.png
+++ b/1NSI/08_Interaction_web/codes/projets/images/chat-bonjour.png
--- a/1NSI/08_Interaction_web/codes/projets/images/chat-pince.png
+++ b/1NSI/08_Interaction_web/codes/projets/images/chat-pince.png
--- a/1NSI/08_Interaction_web/codes/projets/images/chat-touille.png
+++ b/1NSI/08_Interaction_web/codes/projets/images/chat-touille.png
--- a/1NSI/08_Interaction_web/codes/projets/index.html
+++ b/1NSI/08_Interaction_web/codes/projets/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<head><!-- Début en-tête -->
+  <title>Accueil </title>
+  <meta charset="utf-8">
+</head><!-- Fin en-tête -->
+
+<body><!-- Début corps -->
+  <h1>Menu  </h1>
+
+   <ul>
+    <li> <a href="age.html"> Calcul d'âge </a> </li>
+    <li> <a href="evenements.html"> Jouer avec les événements I </a> </li>
+     <li> <a href="evenements2.html"> Jouer avec les événements II </a> </li>
+    <li> <a href="temperature.html"> Conversion d'unité de température </a> </li>
+   </ul>
+
+</body><!-- Fin corps -->
+
+</html>
--- a/1NSI/08_Interaction_web/codes/projets/script.js
+++ b/1NSI/08_Interaction_web/codes/projets/script.js
@ -0,0 +1,24 @@
+let compteur = 0;
+
+function suivant(){
+    compteur = compteur + 1;
+    let v = document.getElementById("valeur");
+    if (compteur <= 1) {
+      v.innerHTML = compteur + " clic";
+    }
+    else {
+      v.innerHTML = compteur + " clics";
+    }
+}
+
+function reinitialiser(){
+    compteur = 0;
+    let v = document.getElementById("valeur");
+    v.innerHTML = compteur + " clic";
+}
+
+
+let bouton_clic = document.getElementById("bouton_clic");
+bouton_clic.addEventListener("click", suivant);
+let bouton_reset = document.getElementById("bouton_reset");
+bouton_reset.addEventListener("click", reinitialiser);
--- a/1NSI/08_Interaction_web/codes/projets/style.css
+++ b/1NSI/08_Interaction_web/codes/projets/style.css
--- a/1NSI/08_Interaction_web/codes/projets/temperature.html
+++ b/1NSI/08_Interaction_web/codes/projets/temperature.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<html lang="fr">
+
+<!-- Début en-tête -->
+<head>
+
+  <title>Conversion d'unité en JS </title>
+
+  <meta charset="utf-8">
+
+  <script type="text/Javascript" src="code-temperature.js" defer="defer">
+</script>
+
+</head>
+<!-- Fin en-tête -->
+
+<!-- Début corps -->
+<body>
+
+
+
+    <h1> Conversion d'unité d'une mesure de température.  </h1>
+
+
+
+        <label for="unite_source">Choisir l'unité de la mesure source :</label>
+        <select name="unite_source" id="unite_source">
+            <option value="celsius"selected >Celsius</option>
+            <option value="fahrenheit">Fahrenheit</option>
+        </select>
+        <br>
+        <label for="mesure_source">Saisir la mesure de température dans l'unité source : </label>
+        <input type="number" id="mesure_source" value="0">
+        <br>
+        <button id="bouton">Convertir</button>
+        <br>
+        <label>Conversion en <span id="unite_cible"></span> : <span id="valeur"></span>. </label>
+
+<p>
+<a href="index.html">Retour à l'accueil</a>
+</p>
+
+</body>
+</html>
--- a/1NSI/08_Interaction_web/exercises.tex
+++ b/1NSI/08_Interaction_web/exercises.tex
@ -65,7 +65,7 @@
    \end{multicols}
 \end{exercise}

-\begin{exercise}[subtitle={Compteur de clics}, step={1}, origin={frederic-junier}, topics={ Interaction web }, tags={ Javascript, Web }]
+\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}
@ -77,7 +77,7 @@
    \end{enumerate}
 \end{exercise}

-\begin{exercise}[subtitle={Le pire du web!}, step={1}, origin={}, topics={ Interaction web }, tags={ Javascript, Web }]
+\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}
@ -87,3 +87,58 @@
        \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}
--- a/1NSI/08_Interaction_web/fig/IMC.png
+++ b/1NSI/08_Interaction_web/fig/IMC.png
--- a/1NSI/08_Interaction_web/plan_de_travail.pdf
+++ b/1NSI/08_Interaction_web/plan_de_travail.pdf
--- a/1NSI/08_Interaction_web/plan_de_travail.tex
+++ b/1NSI/08_Interaction_web/plan_de_travail.tex
@ -21,22 +21,18 @@

 \bigskip

-Savoir-faire de la séquence
-\begin{itemize}
-    \item
-\end{itemize}

-\bigskip
-
-Ordre des étapes à respecter
-
-
-\section{}
+\section{Découverte du javascript}

 \listsectionexercises

+\section{Interactions}

-\pagebreak
+\listsectionexercises
+
+\section{Page web complètes}
+
+\listsectionexercises

 \input{exercises.tex}
 \printcollection{banque}