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

Compare commits

base: lafrite:d4e00eadb853518aae95cda0e65555f7a4fa7b63
Branches Tags
lafrite:main
...
compare: lafrite:8282f2ad6eee9941680bd8fda3f19281fff77010
Branches Tags
lafrite:main

4 Commits
d4e00eadb8 ... 8282f2ad6e

Author SHA1 Message Date
Bertrand Benjamin
8282f2ad6e Feat(NSI): exercice de lecture d'évènements
All checks were successful
continuous-integration/drone/push Build is passing
Details
2023-03-04 17:52:58 +01:00
Bertrand Benjamin
50a708b158 Fix(NSI): restore le fichier 2023-03-04 16:00:29 +01:00
Bertrand Benjamin
376be97f01 Feat(NSI): ajoute le deuxième exercice 2023-03-04 16:00:10 +01:00
Bertrand Benjamin
0e00d80273 Feat(1ST): QF pour S10 2023-03-03 09:26:39 +01:00
20 changed files with 585 additions and 20 deletions
Show Stats 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');
});

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

@ -15,15 +15,75 @@
\end{minipage} \end{minipage}
\end{center} \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{center}
\begin{minipage}{0.8\linewidth} \begin{minipage}{0.8\linewidth}
\inputminted[bgcolor=base3]{js}{./script/1E_interaction.js} \inputminted[bgcolor=base3]{js}{./script/1E_interaction.js}
\end{minipage} \end{minipage}
\end{center} \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}
\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{enumerate}
\end{exercise} \end{exercise}

55
1NSI/08_Interaction_web/index.rst
View File

@ -0,0 +1,55 @@
Interaction web
###############
:date: 2023-02-21
:modified: 2023-03-04
: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
* - 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 par 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 les fonctions de bases de manipulation du DOM.
Étape 3: Page HTML avec CSS et Javascript
-----------------------------------------
Des pages HTML à reproduire et des interactions à ajouter.

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

Binary file not shown.

3
1NSI/08_Interaction_web/script/1E_boucles.js Normal file
View File

@ -0,0 +1,3 @@
for (let i = 5; i<10; i++){
console.log("allez " + i);
}

8
1NSI/08_Interaction_web/script/1E_condi.js Normal file
View File

@ -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")
}

5
1NSI/08_Interaction_web/script/1E_fonction.js Normal file
View File

@ -0,0 +1,5 @@
function vousAlerte(texte) {
alert("Je vous alerte!")
alert(texte)
}
vousAlerte("Regarde derrière toi!")

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

@ -1,11 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr">
<head> <head>
<title> "Languages" </title> <title> "Langages" </title>
<meta charset="utf-8"> <meta charset="utf-8">
<body> </head>
<ul id="langages"> <body>
<li> HTML </li> <h1>Langages du web</h1>
<li> CSS </li> <ul id="langages">
</ul> <li> HTML </li>
</body> <li> CSS </li>
</html> </ul>
</body>
</html>

8
1NSI/08_Interaction_web/script/1E_index.js
View File

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

10
1NSI/08_Interaction_web/script/1E_interaction.js
View File

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

17
1NSI/08_Interaction_web/script/1E_ope_varia.js Normal file
View File

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

BIN
1ST/Questions_flashs/P4/QF_S10-1.pdf Normal file
View File

Binary file not shown.

86
1ST/Questions_flashs/P4/QF_S10-1.tex Executable file
View File

@ -0,0 +1,86 @@
\documentclass[12pt]{classPres}
\usepackage{tkz-fct}
\usepackage{pgfplots}
\usetikzlibrary{decorations.markings}
\pgfplotsset{compat=1.18}
\author{}
\title{}
\date{}
\begin{document}
\begin{frame}{Questions flashs}
\begin{center}
\vfill
Première ST
\vfill
30 secondes par calcul
\vfill
\textbf{Calculatrice autorisée}
\vfill
\tiny \jobname
\end{center}
\end{frame}
\begin{frame}{Calcul 1}
% Développer
Développer l'expression suivante
\[
3x(3x - 2) =
\]
\end{frame}
\begin{frame}{Calcul 2}
% Taux d'évolution
Après une baisse de 20\%, on peut acheter une voiture \np{5000}\euro.
Quel était le prix de la voiture avant la réduction ?
\end{frame}
\begin{frame}[fragile]{Calcul 3}
% Proportion
\vfill
\begin{tabular}{|*{4}{c|}}
\hline
Section/regime & Interne & Externe & Total \\
\hline
1ST & 10 & 15 & 25 \\
\hline
1G & 14 & 17 & 31 \\
\hline
Total & 24 & 32 & 56 \\
\hline
\end{tabular}
\vfill
Quelle est la proportion d'élèves interne dans le lycée ?
\vfill
\end{frame}
\begin{frame}[fragile]{Calcul 4}
% Inéquation graphique
Courbe représentative de $f$
\begin{tikzpicture}[xscale=0.8, yscale=0.5]
\tkzInit[xmin=-5,xmax=5,xstep=1,
ymin=-5,ymax=5,ystep=1]
\tkzGrid
\tkzAxeXY
\tkzFct[domain = -5:5,color=red,very thick]%
{x**2-4};
\end{tikzpicture}
Quelles sont les solutions de l'équation $f(x) \leq -3$?
\end{frame}
\begin{frame}{Fin}
\begin{center}
On retourne son papier.
\end{center}
\end{frame}
\end{document}

BIN
1ST/Questions_flashs/P4/QF_S10-2.pdf Normal file
View File

Binary file not shown.

86
1ST/Questions_flashs/P4/QF_S10-2.tex Executable file
View File

@ -0,0 +1,86 @@
\documentclass[12pt]{classPres}
\usepackage{tkz-fct}
\usepackage{pgfplots}
\usetikzlibrary{decorations.markings}
\pgfplotsset{compat=1.18}
\author{}
\title{}
\date{}
\begin{document}
\begin{frame}{Questions flashs}
\begin{center}
\vfill
Première ST
\vfill
30 secondes par calcul
\vfill
\textbf{Calculatrice autorisée}
\vfill
\tiny \jobname
\end{center}
\end{frame}
\begin{frame}{Calcul 1}
% Développer
Développer puis réduire l'expression suivante
\[
-x(3x - 2) + 5x =
\]
\end{frame}
\begin{frame}{Calcul 2}
% Taux d'évolution
Après une hausse de 30\%, l'usine produit 300tonnes de trucs.
Quelle était la production avant cette augmentation ?
\end{frame}
\begin{frame}[fragile]{Calcul 3}
% Proportion
\vfill
\begin{tabular}{|*{4}{c|}}
\hline
Section/regime & Interne & Externe & Total \\
\hline
1ST & 10 & 15 & 25 \\
\hline
1G & 14 & 17 & 31 \\
\hline
Total & 24 & 32 & 56 \\
\hline
\end{tabular}
\vfill
Quelle est la proportion d'élèves interne en 1ST ?
\vfill
\end{frame}
\begin{frame}[fragile]{Calcul 4}
% Inéquation graphique
Courbe représentative de $f$
\begin{tikzpicture}[xscale=0.8, yscale=0.5]
\tkzInit[xmin=-5,xmax=5,xstep=1,
ymin=-5,ymax=5,ystep=1]
\tkzGrid
\tkzAxeXY
\tkzFct[domain = -5:5,color=red,very thick]%
{x**2-4};
\end{tikzpicture}
Quelles sont les solutions de l'équation $f(x) \leq 0$?
\end{frame}
\begin{frame}{Fin}
\begin{center}
On retourne son papier.
\end{center}
\end{frame}
\end{document}

BIN
1ST/Questions_flashs/P4/QF_S10-3.pdf Normal file
View File

Binary file not shown.

85
1ST/Questions_flashs/P4/QF_S10-3.tex Executable file
View File

@ -0,0 +1,85 @@
\documentclass[12pt]{classPres}
\usepackage{tkz-fct}
\usepackage{pgfplots}
\usetikzlibrary{decorations.markings}
\pgfplotsset{compat=1.18}
\author{}
\title{}
\date{}
\begin{document}
\begin{frame}{Questions flashs}
\begin{center}
\vfill
Première ST
\vfill
30 secondes par calcul
\vfill
\textbf{Calculatrice autorisée}
\vfill
\tiny \jobname
\end{center}
\end{frame}
\begin{frame}{Calcul 1}
% Développer
Développer puis réduire l'expression suivante
\[
(-x+2)(x+10)=
\]
\end{frame}
\begin{frame}{Calcul 2}
% Taux d'évolution
Après une hausse de 80\%, l'usine produit 100 tonnes de trucs.
Quelle était la production avant cette augmentation ?
\end{frame}
\begin{frame}[fragile]{Calcul 3}
% Proportion
\vfill
\begin{tabular}{|*{4}{c|}}
\hline
Section/regime & Interne & Externe & Total \\
\hline
1ST & 10 & 15 & 25 \\
\hline
1G & 14 & 17 & 31 \\
\hline
Total & 24 & 32 & 56 \\
\hline
\end{tabular}
\vfill
Quelle est la proportion d'élèves de 1ST externes dans ce lycée ?
\vfill
\end{frame}
\begin{frame}[fragile]{Calcul 4}
% Inéquation graphique
Courbe représentative de $f$
\begin{tikzpicture}[xscale=0.8, yscale=0.5]
\tkzInit[xmin=-5,xmax=5,xstep=1,
ymin=-5,ymax=5,ystep=1]
\tkzGrid
\tkzAxeXY
\tkzFct[domain = -5:5,color=red,very thick]%
{-(x+1)**2+5};
\end{tikzpicture}
Quelles sont les solutions de l'équation $f(x) \geq 1$ ?
\end{frame}
\begin{frame}{Fin}
\begin{center}
On retourne son papier.
\end{center}
\end{frame}
\end{document}