Feat(NSI): premier exercice js

1NSI/08_Interaction_web/1B_javascript.tex

@@ -0,0 +1,75 @@
+\documentclass[a4paper,10pt]{article}
+\usepackage{myXsim}
+\usepackage{minted}
+
+\author{Benjamin Bertrand}
+\title{Interaction Homme machine sur le WEB- Cours}
+\date{Février 2023}
+
+\pagestyle{empty}
+
+\begin{document}
+
+\maketitle
+
+\section{Language Javascript}
+
+\begin{definition}[Javascript]
+    \hfill
+    \begin{minipage}{0.2\linewidth}
+       \includegraphics[scale=0.3]{./fig/JavaScript_logo}
+    \end{minipage}
+    \hfill
+    \begin{minipage}{0.7\linewidth}
+    \textbf{JavaScript} est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web.
+
+    Dans les navigateurs, il a pour principale fonction de réagir aux évènements déclenchés par l'utilisateur et de modifier le code HTML ou CSS de la page consultée à travers la manipulation du DOM (document Object Model). On peut utiliser directement du language Javascript dans la console du navigateur accessible en pressant \texttt{F12}.
+    \end{minipage}
+    \hfill
+\end{definition}
+
+\paragraph{Remarque:} Rendez vous sur le lien suivant pour comprendre le lien entre le code HTML, CSS et javascript et le DOM.
+
+\begin{center}
+    \url{https://gitlab.com/frederic-junier/parc-nsi/-/raw/master/docs/chapitre23/images/schema-dom.png}
+\end{center}
+
+\section{Corpus Python et Javascript}
+
+\subsection*{Variables}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_var.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_var.js}
+\end{multicols}
+
+\subsection*{Types de base}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_type.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_type.js}
+\end{multicols}
+
+\subsection*{Conditions}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_conditions.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_conditions.js}
+\end{multicols}
+
+\subsection*{Boucles}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_boucles.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_boucles.js}
+\end{multicols}
+
+\subsection*{Fonctions}
+\begin{multicols}{2}
+    \inputminted[bgcolor=base3]{python}{./script/1B_fonctions.py}
+
+    \inputminted[bgcolor=base3]{js}{./script/1B_fonctions.js}
+\end{multicols}
+
+
+\end{document}

1NSI/08_Interaction_web/exercises.tex

@@ -1,7 +1,29 @@
-\begin{exercise}[subtitle={<++>}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
-    <++>
-\end{exercise}
+\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}
 
-\begin{solution}
-    <++>
-\end{solution}
+        \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{CRTL+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. Que se passe-t-il? Expliquer le code ci-dessus.
+
+        \item Recharger la page. Qu'en est-il des interactions?
+    \end{enumerate}
+\end{exercise}

1NSI/08_Interaction_web/index.rst

@@ -1,58 +0,0 @@
-Interaction web
-###############
-
-:date: 2023-02-21
-:modified: 2023-02-21
-:authors: Benjamin Bertrand
-:tags: Javascript, Web
-:category: 1NSI
-:summary: Programmation javascript et évènement sur une page web.
-
-
-Éléments du programme
-=====================
-
-.. list-table:: Interaction Homme machine sur le web
-    :header-rows: 1
-
-    * - Contenus
-      - Capacités attendues
-      - Commentaires
-    * - Systèmes d'exploitation
-      - Identifier les fonctions d’un système d’exploitation. Utiliser les commandes de base en ligne de commande. Gérer les droits et permissions d’accès aux fichiers.
-      - Les différences entre systèmes d’exploitation libres et propriétaires sont évoquées. Les élèves utilisent un système d’exploitation libre. Il ne s’agit pas d’une étude théorique des systèmes
-
-    * - Modalités de l’interaction entre l’homme et la machine
-      - Identifier les différents composants graphiques permettant d’interagir avec une application Web.
-      - Il s’agit d’examiner le code HTML d’une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript.
-
-    * - Événements
-      - Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter.
-      -
-
-    * - Interaction avec l’utilisateur dans une page Web
-      - Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Web.
-      -
-
-
-Progression
-===========
-
-Étape 1: Découverte du language Javascript dans la console
-----------------------------------------------------------
-
-Toutes les activités de cette étape se dérouleront dans la console du navigateur. On commencera pas un effet Wahou du javascript. Puis une étude un peu plus théorique du corpus de javascript.
-
-Bilan: Description du language JS, comparaison du corpus de Python et de Javascript.
-
-Étape 2: Trouver les interactions possibles
--------------------------------------------
-
-Des pages HTML avec du code javascript intégré ou importé. Les élèves doivent comprendre les interactions et décortiquer le code javascript.
-
-Bilan: importer du code JS dans une page HTML et
-
-Étape 3: Page HTML avec CSS et Javascript
------------------------------------------
-
-Des pages HTML à reproduire et des interactions à ajouter.

1NSI/08_Interaction_web/plan_de_travail.tex

@@ -1,5 +1,6 @@
 \documentclass[a4paper,12pt]{article}
 \usepackage{myXsim}
+\usepackage{minted}
 
 \author{Benjamin Bertrand}
 \title{Interaction web - Plan de travail}

1NSI/08_Interaction_web/script/1B_boucles.js

@@ -0,0 +1,3 @@
+for (var i = 0; i < 3; i++){
+    console.log(i)
+}

1NSI/08_Interaction_web/script/1B_boucles.py

@@ -0,0 +1,2 @@
+for i in range(3):
+    print(i)

1NSI/08_Interaction_web/script/1B_conditions.js

@@ -0,0 +1,7 @@
+let age = 12;
+let permi = True;
+if (age > 18) && (permi === True) {
+    console.log("Tu peux conduire")
+} else {
+    console.log("Tu ne peux pas conduire")
+}

1NSI/08_Interaction_web/script/1B_conditions.py

@@ -0,0 +1,6 @@
+age = 12
+permi = True
+if age > 18 and permi == True:
+    print("Tu peux conduire")
+else:
+    print("Tu ne peux pas conduire")

1NSI/08_Interaction_web/script/1B_fonctions.js

@@ -0,0 +1,3 @@
+function carre(n) {
+    return n**2
+}

1NSI/08_Interaction_web/script/1B_fonctions.py

@@ -0,0 +1,2 @@
+def carre(n):
+    return n**2

1NSI/08_Interaction_web/script/1B_type.js

@@ -0,0 +1,5 @@
+let entier = 1;
+let string = "coucou";
+let virgule = 2.2;
+let bouleen = true;
+let liste = [1, 2, 3];

1NSI/08_Interaction_web/script/1B_type.py

@@ -0,0 +1,5 @@
+entier = 1
+string = "coucou"
+virgule = 2.2
+bouleen = True
+liste = [1, 2, 3]

1NSI/08_Interaction_web/script/1B_var.js

@@ -0,0 +1,3 @@
+let a = 2;
+let mot = "coucou";
+const constante = "coucou"

1NSI/08_Interaction_web/script/1B_var.py

@@ -0,0 +1,2 @@
+a = 2
+b = "coucou"

1NSI/08_Interaction_web/script/1E_index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<head>
+    <title> "Languages" </title>
+    <meta charset="utf-8">
+    <body>
+        <ul id="langages">
+            <li> HTML </li>
+            <li> CSS </li>
+        </ul>
+    </body>
+    </html>

1NSI/08_Interaction_web/script/1E_index.js

@@ -0,0 +1,8 @@
+>>> let languages = document.getElementById("languages")
+>>> languages.style.color = "red"
+>>> let item1 = languages.children[0]
+>>> item1
+>>> item1.innerHTML = 'HTML5'
+>>> let item3 = document.createElement("li")
+>>> languages.appendChild(item3)
+>>> item3.innerHTML = "Javascript"

1NSI/08_Interaction_web/script/1E_interaction.js

@@ -0,0 +1,9 @@
+function apparition(){
+    list.style.visibility = "visible";
+}
+function disparition(){
+    list.style.visibility = "hidden";
+}
+list.onmouseover = disparition ;
+list.onmouseleave = apparition ;
+list.onclick = function() { alert("Clic !") ; } ;