Compare commits

...

4 Commits

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

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>

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

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>

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

View File

@ -15,15 +15,75 @@
\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}
\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}

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 linteraction entre lhomme et la machine
- Identifier les différents composants graphiques permettant dinteragir avec une application Web.
- Il sagit dexaminer le code HTML dune 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 lutilisateur dans une page Web
- Analyser et modifier les méthodes exécutées lors dun clic sur un bouton dune 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.

View File

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

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

View File

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

View File

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

View File

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

View File

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

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;

Binary file not shown.

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}

Binary file not shown.

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}

Binary file not shown.

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}