Feat(NSI): premier exercice js
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
cfa6b42e23
commit
e9a07c0061
|
@ -1,7 +1,29 @@
|
||||||
\begin{exercise}[subtitle={JS pour modifier page web}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
|
\begin{exercise}[subtitle={JS pour modifier page web}, step={1}, origin={<++>}, topics={ Interaction web }, tags={ Javascript, Web }]
|
||||||
<++>
|
Le but de cet exercice est d'utiliser le language Javascript pour modifier une page web.
|
||||||
\end{exercise}
|
\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}
|
\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}
|
||||||
\end{solution}
|
\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}
|
||||||
|
|
Binary file not shown.
|
@ -1,5 +1,6 @@
|
||||||
\documentclass[a4paper,12pt]{article}
|
\documentclass[a4paper,12pt]{article}
|
||||||
\usepackage{myXsim}
|
\usepackage{myXsim}
|
||||||
|
\usepackage{minted}
|
||||||
|
|
||||||
\author{Benjamin Bertrand}
|
\author{Benjamin Bertrand}
|
||||||
\title{Interaction web - Plan de travail}
|
\title{Interaction web - Plan de travail}
|
||||||
|
|
|
@ -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>
|
|
@ -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"
|
|
@ -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 !") ; } ;
|
Loading…
Reference in New Issue