diff --git a/1NSI/08_Interaction_web/exercises.tex b/1NSI/08_Interaction_web/exercises.tex index 4505e07..a012d6d 100644 --- a/1NSI/08_Interaction_web/exercises.tex +++ b/1NSI/08_Interaction_web/exercises.tex @@ -15,15 +15,53 @@ \end{minipage} \end{center} - \item Passez la console en mode multiligne en pressant \texttt{CRTL+B}, saisir puis exécuter le code suivant. + \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. Que se passe-t-il? Expliquer le code ci-dessus. + 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? + \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} diff --git a/1NSI/08_Interaction_web/plan_de_travail.pdf b/1NSI/08_Interaction_web/plan_de_travail.pdf index 1785718..7d138aa 100644 Binary files a/1NSI/08_Interaction_web/plan_de_travail.pdf and b/1NSI/08_Interaction_web/plan_de_travail.pdf differ diff --git a/1NSI/08_Interaction_web/script/1E_boucles.js b/1NSI/08_Interaction_web/script/1E_boucles.js new file mode 100644 index 0000000..e9b8e43 --- /dev/null +++ b/1NSI/08_Interaction_web/script/1E_boucles.js @@ -0,0 +1,3 @@ +for (let i = 5; i<10; i++){ + console.log("allez " + i); +} diff --git a/1NSI/08_Interaction_web/script/1E_condi.js b/1NSI/08_Interaction_web/script/1E_condi.js new file mode 100644 index 0000000..dfb794f --- /dev/null +++ b/1NSI/08_Interaction_web/script/1E_condi.js @@ -0,0 +1,8 @@ +let age = prompt("Quel age as tu?") +if (age === 10) { + console.log("Tu as 10ans!") +} else if (age > 18) { + alert("Va voter!") +} else { + console.log("C'est pour bientot") +} diff --git a/1NSI/08_Interaction_web/script/1E_fonction.js b/1NSI/08_Interaction_web/script/1E_fonction.js new file mode 100644 index 0000000..84f8d49 --- /dev/null +++ b/1NSI/08_Interaction_web/script/1E_fonction.js @@ -0,0 +1,5 @@ +function vousAlerte(texte) { + alert("Je vous alerte!") + alert(texte) +} +vousAlerte("Regarde derrière toi!") diff --git a/1NSI/08_Interaction_web/script/1E_index.html b/1NSI/08_Interaction_web/script/1E_index.html index 101af3d..e03e89b 100644 --- a/1NSI/08_Interaction_web/script/1E_index.html +++ b/1NSI/08_Interaction_web/script/1E_index.html @@ -1,11 +1,13 @@ - "Languages" + "Langages" - - - - + + +

Langages du web

+ + + diff --git a/1NSI/08_Interaction_web/script/1E_index.js b/1NSI/08_Interaction_web/script/1E_index.js index 6e43fb6..938ba96 100644 --- a/1NSI/08_Interaction_web/script/1E_index.js +++ b/1NSI/08_Interaction_web/script/1E_index.js @@ -1,8 +1,8 @@ ->>> let languages = document.getElementById("languages") ->>> languages.style.color = "red" ->>> let item1 = languages.children[0] +>>> let langages = document.getElementById("langages") +>>> langages.style.color = "red" +>>> let item1 = langages.children[0] >>> item1 >>> item1.innerHTML = 'HTML5' >>> let item3 = document.createElement("li") ->>> languages.appendChild(item3) +>>> langages.appendChild(item3) >>> item3.innerHTML = "Javascript" diff --git a/1NSI/08_Interaction_web/script/1E_interaction.js b/1NSI/08_Interaction_web/script/1E_interaction.js index 71aa116..c493e28 100644 --- a/1NSI/08_Interaction_web/script/1E_interaction.js +++ b/1NSI/08_Interaction_web/script/1E_interaction.js @@ -1,9 +1,9 @@ function apparition(){ - list.style.visibility = "visible"; + langages.style.backgroundColor = "white"; } function disparition(){ - list.style.visibility = "hidden"; + langages.style.backgroundColor = "blue"; } -list.onmouseover = disparition ; -list.onmouseleave = apparition ; -list.onclick = function() { alert("Clic !") ; } ; +langages.onmouseover = disparition ; +langages.onmouseleave = apparition ; +langages.onclick = function() { alert("Clic !") ; } ; diff --git a/1NSI/08_Interaction_web/script/1E_ope_varia.js b/1NSI/08_Interaction_web/script/1E_ope_varia.js new file mode 100644 index 0000000..34473f2 --- /dev/null +++ b/1NSI/08_Interaction_web/script/1E_ope_varia.js @@ -0,0 +1,17 @@ +>>> let a = 1 +... +>>> (a * 3 + 1) ** 2 / 5 - 1 +... +>>> let b = "Hello" +... +>>> b + " World" +... +>>> typeof(a) +... +>>> typeof(b) +... +>>> a = b + a; +... +>>> const c = 1; +... +>>> c = c + 1;