diff --git a/1NSI/08_Interaction_web/codes/2E_compteur.html b/1NSI/08_Interaction_web/codes/2E_compteur.html new file mode 100644 index 0000000..4c15ccd --- /dev/null +++ b/1NSI/08_Interaction_web/codes/2E_compteur.html @@ -0,0 +1,40 @@ + + + + + Compteur de clics + + + + + +

Compteur de clics en Javascript

+ +
+ 0 +
+ + + + diff --git a/1NSI/08_Interaction_web/codes/popup/2E_popup.css b/1NSI/08_Interaction_web/codes/popup/2E_popup.css new file mode 100644 index 0000000..01b9afd --- /dev/null +++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.css @@ -0,0 +1,34 @@ +section { + background-color: #f1f1f1; + padding: 20px; + margin: 20px 0; + border: 1px solid black; +} + +section h2 { + margin-top: 0; +} + +section .close { + float: right; +} + +section a { + text-decoration: none; + color: black; +} + +#popup { + position: fixed; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background-color: red; + border: 1px solid black; + z-index: 9999; +} + +.hidden { + display: none; +} diff --git a/1NSI/08_Interaction_web/codes/popup/2E_popup.html b/1NSI/08_Interaction_web/codes/popup/2E_popup.html new file mode 100644 index 0000000..5b1b3d2 --- /dev/null +++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.html @@ -0,0 +1,37 @@ + + + + Exemple de liens avec popup + + + +

Venez voir mes super articles

+ +
+

Article 1 + X +

+

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

+
+ +
+

Article 2 + X +

+

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

+
+ +
+

Article 3 + X +

+

Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.

+
+ + + + + diff --git a/1NSI/08_Interaction_web/codes/popup/2E_popup.js b/1NSI/08_Interaction_web/codes/popup/2E_popup.js new file mode 100644 index 0000000..f3e5979 --- /dev/null +++ b/1NSI/08_Interaction_web/codes/popup/2E_popup.js @@ -0,0 +1,46 @@ +const popup = document.getElementById('popup'); + + +function closeSection1 () { + let section = document.getElementById('section1'); + section.style.display = "none"; + popup.classList.remove('hidden'); + +} +document.getElementById("close-section1").addEventListener('click', closeSection1) + +function closeSection2 () { + let section = document.getElementById('section2'); + popup.classList.remove('hidden'); + + let p = document.createElement('p') + p.innerHTML = "Je disparais pas!" + section.appendChild(p) +} + +document.getElementById("close-section2").addEventListener('click', closeSection2) + +let compteur = 0 +function closeSection3 () { + let popup = document.getElementById('popup'); + let section = document.getElementById('section3'); + if (compteur > 2) { + section.style.display = "none"; + popup.classList.remove('hidden'); + } else { + compteur = compteur + 1; + popup.classList.remove('hidden'); + let p = document.createElement('p') + p.innerHTML = "Restez! Je vous fait une promo de 10%!" + section.appendChild(p) + } + +} +document.getElementById("close-section3").addEventListener('click', closeSection3) + + +const closePopupLink = document.getElementById('close-popup'); +closePopupLink.addEventListener('click', (event) => { + event.preventDefault(); + popup.classList.add('hidden'); +}); diff --git a/1NSI/08_Interaction_web/exercises.tex b/1NSI/08_Interaction_web/exercises.tex index a012d6d..88251f3 100644 --- a/1NSI/08_Interaction_web/exercises.tex +++ b/1NSI/08_Interaction_web/exercises.tex @@ -63,5 +63,27 @@ \item Traduire les programmes précédents en Python. \end{enumerate} \end{multicols} - +\end{exercise} + +\begin{exercise}[subtitle={Compteur de clics}, step={1}, 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={1}, 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} diff --git a/1NSI/08_Interaction_web/plan_de_travail.pdf b/1NSI/08_Interaction_web/plan_de_travail.pdf index 7d138aa..ade2440 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_index.html b/1NSI/08_Interaction_web/script/1E_index.html index e03e89b..f05c88e 100644 --- a/1NSI/08_Interaction_web/script/1E_index.html +++ b/1NSI/08_Interaction_web/script/1E_index.html @@ -1,4 +1,5 @@ + "Langages"