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

Feat(NSI): premier exercice js
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Bertrand Benjamin 2023-02-23 18:24:09 +01:00
parent cfa6b42e23
commit e9a07c0061
6 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,29 @@
\begin{exercise}[subtitle={JS pour modifier page web}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
<++>
\end{exercise}
Le but de cet exercice est d'utiliser le language Javascript pour modifier une page web.
\begin{enumerate}
\item Créer une fichier \texttt{index.html} avec le code suivant
\begin{center}
\begin{minipage}{0.8\linewidth}
\inputminted[bgcolor=base3]{html}{./script/1E_index.html}
\end{minipage}
\end{center}
\begin{solution}
<++>
\end{solution}
\item Dans les outils du développeur (\texttt{F12}) allez dans l'onglet console et taper successivement les commandes suivantes. Expliquer l'action de chaque commande et commencer à ce faire un mémo des commandes javascript.
\begin{center}
\begin{minipage}{0.8\linewidth}
\inputminted[bgcolor=base3]{js}{./script/1E_index.js}
\end{minipage}
\end{center}
\item Passez la console en mode multiligne en pressant \texttt{CRTL+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.
\item Recharger la page. Qu'en est-il des interactions?
\end{enumerate}
\end{exercise}

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

Binary file not shown.

1
1NSI/08_Interaction_web/plan_de_travail.tex
View File

@ -1,5 +1,6 @@
\documentclass[a4paper,12pt]{article}
\usepackage{myXsim}
\usepackage{minted}
\author{Benjamin Bertrand}
\title{Interaction web - Plan de travail}

11
1NSI/08_Interaction_web/script/1E_index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<head>
<title> "Languages" </title>
<meta charset="utf-8">
<body>
<ul id="langages">
<li> HTML </li>
<li> CSS </li>
</ul>
</body>
</html>

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

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

9
1NSI/08_Interaction_web/script/1E_interaction.js Normal file
View File

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