lafrite/2022-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(NSI): exercice de lecture d'évènements
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Bertrand Benjamin 2023-03-04 17:52:58 +01:00
parent 50a708b158
commit 8282f2ad6e
7 changed files with 181 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
1NSI/08_Interaction_web/codes/2E_compteur.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Compteur de clics </title>
<meta charset="utf-8">
<script>
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";
}
</script>
</head>
<body>
<h1>Compteur de clics en Javascript </h1>
<button onclick="suivant();">Clic !</button>
<br>
<span id="valeur">0</span>
<br>
<button onclick="reinitialiser();">Réinitialiser !</button>
</body>
</html>

34
1NSI/08_Interaction_web/codes/popup/2E_popup.css Normal file
View File

@ -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;
}

37
1NSI/08_Interaction_web/codes/popup/2E_popup.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Exemple de liens avec popup</title>
<link rel="stylesheet" type="text/css" href="./2E_popup.css">
</head>
<body>
<h1>Venez voir mes super articles</h1>
<section id="section1">
<h2>Article 1
<a href="#" id="close-section1" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<section id="section2">
<h2>Article 2
<a href="#" id="close-section2" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<section id="section3">
<h2>Article 3
<a href="#" id="close-section3" class="close">X</a>
</h2>
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
</section>
<div id="popup" class="hidden">
<p>Cette section est maintenant fermée.</p>
<a href="#" id="close-popup">OK</a>
</div>
<script src="./2E_popup.js"></script>
</body>
</html>

46
1NSI/08_Interaction_web/codes/popup/2E_popup.js Normal file
View File

@ -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');
});

24
1NSI/08_Interaction_web/exercises.tex
View File

@ -63,5 +63,27 @@
\item Traduire les programmes précédents en Python. \item Traduire les programmes précédents en Python.
\end{enumerate} \end{enumerate}
\end{multicols} \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} \end{exercise}

BIN
1NSI/08_Interaction_web/plan_de_travail.pdf
View File

Binary file not shown.

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

@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr">
<head> <head>
<title> "Langages" </title> <title> "Langages" </title>
<meta charset="utf-8"> <meta charset="utf-8">