\documentclass[a4paper,11pt]{article}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[francais,bloc,completemulti]{automultiplechoice}
\usepackage[french]{babel}
\usepackage{amsmath, amssymb}

\title{JavaScript et DOM}
\date{Numérique et sciences informatiques}

\begin{document}

\noindent\textbf{JavaScript et DOM} \hfill \textit{Numérique et sciences informatiques}\\[0.4em]
Nom~: \dotfill\ Prénom~: \dotfill

\bigskip

\element{premierejavascriptdom}{
  \begin{question}{q01}
    À quoi sert principalement \textbf{JavaScript} dans
une page web ?
    \begin{choices}
    \wrongchoice{À mettre en forme les éléments}
    \wrongchoice{À envoyer des e-mails}
    \correctchoice{À rendre la page dynamique : interactions, animations, modification du contenu en réaction à l'utilisateur}
    \wrongchoice{À structurer le contenu de la page}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q02}
    Comment \textbf{inclure} un fichier \texttt{script.js} dans
une page HTML ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
<link href="script.js">
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
<script src="script.js"></script>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<import "script.js">
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<js src="script.js"></js>
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q03}
    Quel mot-clé moderne déclare une variable
\textbf{modifiable} en JavaScript ?
    \begin{choices}
    \wrongchoice{\texttt{var}}
    \wrongchoice{\texttt{def}}
    \correctchoice{\texttt{let}}
    \wrongchoice{\texttt{int}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q04}
    Comment \textbf{afficher} un message dans la console
du navigateur en JavaScript ?
    \begin{choices}
    \correctchoice{\texttt{console.log("Hello")}}
    \wrongchoice{\texttt{echo "Hello"}}
    \wrongchoice{\texttt{print("Hello")}}
    \wrongchoice{\texttt{puts "Hello"}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q05}
    Que signifie \textbf{DOM} ?
    \begin{choices}
    \wrongchoice{Dynamic Output Module}
    \wrongchoice{Display Order Manager}
    \correctchoice{Document Object Model}
    \wrongchoice{Domain Object Method}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q06}
    Comment récupérer en JavaScript l'élément ayant
\texttt{id="titre"} ?
    \begin{choices}
    \wrongchoice{\texttt{getElementById(titre)}}
    \wrongchoice{\texttt{document.find("\#titre")}}
    \wrongchoice{\texttt{document.getId("titre")}}
    \correctchoice{\texttt{document.getElementById("titre")}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q07}
    Comment changer le \textbf{texte} d'un élément \texttt{el}
sélectionné par DOM ?
    \begin{choices}
    \wrongchoice{\texttt{el.value = "..."}}
    \wrongchoice{\texttt{el.text = "..."}}
    \correctchoice{\texttt{el.textContent = "..."}}
    \wrongchoice{\texttt{el.changeText("...")}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q08}
    Quelle structure de données est utilisée pour
modéliser le DOM ?
    \begin{choices}
    \wrongchoice{Un graphe orienté avec cycles}
    \correctchoice{Un arbre dont la racine est \texttt{<html>}}
    \wrongchoice{Une liste plate}
    \wrongchoice{Un dictionnaire}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q09}
    Comment exécuter une fonction \texttt{f} quand on
clique sur un bouton \texttt{btn} ?
    \begin{choices}
    \wrongchoice{\texttt{btn.onClick = f}}
    \wrongchoice{\texttt{btn.click = f}}
    \correctchoice{\texttt{btn.addEventListener("click", f)}}
    \wrongchoice{\texttt{btn.listen(f)}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q10}
    Que fait ce code ?
\begin{lstlisting}
let x = 5;
x = x + 3;
console.log(x);
\end{lstlisting}
    \begin{choices}
    \wrongchoice{Erreur}
    \wrongchoice{Affiche \texttt{53} (concaténation)}
    \wrongchoice{Affiche \texttt{5}}
    \correctchoice{Affiche \texttt{8}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q11}
    Que renvoie
\texttt{document.querySelector(".bouton")} ?
    \begin{choices}
    \wrongchoice{Le bouton cliqué le plus récemment}
    \wrongchoice{Une chaîne contenant le HTML du bouton}
    \correctchoice{Le premier élément ayant la classe « bouton » (ou \texttt{null} si aucun)}
    \wrongchoice{Tous les éléments ayant la classe « bouton »}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q12}
    Quelle est la différence entre \texttt{textContent} et
\texttt{innerHTML} ?
    \begin{choices}
    \wrongchoice{Aucune}
    \correctchoice{\texttt{textContent} traite la valeur comme du texte brut (échappant les balises) ; \texttt{innerHTML} interprète le HTML}
    \wrongchoice{\texttt{textContent} n'existe pas}
    \wrongchoice{\texttt{innerHTML} est plus rapide}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q13}
    Quelle syntaxe est \textbf{valide} en JavaScript pour
une condition ?
    \begin{choices}
    \correctchoice{\begin{lstlisting}
if (x > 0) {
    console.log("positif");
}
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
if x > 0 then
    console.log("positif")
end
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
if x > 0:
    console.log("positif")
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
if x > 0:
    console.log "positif"
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q14}
    Quelle syntaxe \texttt{for} JavaScript itère \textbf{5 fois} ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
for i in range(5)
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
for i = 0 to 5
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
loop 5 times
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
for (let i = 0; i < 5; i++) { ... }
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q15}
    Quelle est la syntaxe valide d'une fonction JS ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
def carre(x): return x * x
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
method carre(x) { ... }
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
carre(x) -> x * x
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
function carre(x) { return x * x; }
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q16}
    Comment changer l'\textbf{attribut \texttt{src}} d'une image ?
    \begin{choices}
    \wrongchoice{\texttt{img.attribute("src", "...")}}
    \wrongchoice{\texttt{img.changeSrc("...")}}
    \correctchoice{\texttt{img.src = "nouvelle.jpg"}}
    \wrongchoice{\texttt{img.attr.src = "..."}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q17}
    Comment créer dynamiquement un nouveau
paragraphe \texttt{<p>} et l'\textbf{ajouter} au \texttt{<body>} ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
add("p", "Hello");
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
new HTMLElement("p");
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
document.body.innerHTML = "<p>Hello</p>";
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q18}
    Quelle est la différence entre \texttt{==} et \texttt{===} en
JavaScript ?
    \begin{choices}
    \wrongchoice{Aucune}
    \correctchoice{\texttt{==} compare avec conversion de type (\texttt{5 == "5"} est \texttt{true}) ; \texttt{===} compare strictement (sans conversion : \texttt{5 === "5"} est \texttt{false})}
    \wrongchoice{\texttt{==} n'existe pas en JS moderne}
    \wrongchoice{\texttt{===} est obsolète}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q19}
    Comment déclarer un \textbf{tableau} de trois
éléments en JS ?
    \begin{choices}
    \correctchoice{\texttt{let t = [1, 2, 3];}}
    \wrongchoice{\texttt{Array(1, 2, 3)}}
    \wrongchoice{\texttt{let t = \{1, 2, 3\};}}
    \wrongchoice{\texttt{let t = (1, 2, 3);}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q20}
    Comment savoir \textbf{sur quel élément} un
événement a eu lieu dans le gestionnaire ?
    \begin{choices}
    \wrongchoice{En relançant le code}
    \wrongchoice{Impossible}
    \wrongchoice{Avec une variable globale}
    \correctchoice{Via \texttt{event.target} (passé au callback)}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q21}
    Pour déboguer un script JavaScript dans le
navigateur, quel outil utiliser ?
    \begin{choices}
    \wrongchoice{Visual Studio}
    \wrongchoice{Notepad}
    \wrongchoice{Un script Python}
    \correctchoice{Les outils développeur du navigateur (touche F12) : console, débogueur, inspecteur, onglet Network}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q22}
    Mon script JS fait \texttt{document.getElementById}
mais renvoie \texttt{null}. Pourquoi ?
    \begin{choices}
    \wrongchoice{L'élément n'existe pas dans la page}
    \wrongchoice{JavaScript ne peut pas lire le DOM}
    \correctchoice{Le script s'exécute avant que le DOM ait été parsé. L'élément n'existe pas encore.}
    \wrongchoice{Le navigateur est buggé}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q23}
    Que renvoie \texttt{"5" + 3} en JavaScript ?
    \begin{choices}
    \correctchoice{"53" (chaîne, par concaténation)}
    \wrongchoice{Erreur de type}
    \wrongchoice{5}
    \wrongchoice{8}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q24}
    Pourquoi \texttt{el.innerHTML = userInput;} est-il
\textbf{dangereux} ?
    \begin{choices}
    \wrongchoice{Parce que c'est lent}
    \correctchoice{Parce qu'un utilisateur malveillant peut injecter du code HTML/JS (attaque XSS : Cross-Site Scripting)}
    \wrongchoice{Parce que \texttt{innerHTML} est obsolète}
    \wrongchoice{Aucun risque réel}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q25}
    Parmi les affirmations suivantes sur JavaScript
et le DOM, laquelle est \textbf{fausse} ?
    \begin{choices}
    \wrongchoice{\texttt{addEventListener} permet d'ajouter plusieurs gestionnaires d'événements à un élément}
    \wrongchoice{\texttt{document.getElementById(id)} renvoie le premier élément ou \texttt{null}}
    \correctchoice{\texttt{==} et \texttt{===} sont synonymes en JavaScript}
    \wrongchoice{Le DOM est une représentation arborescente de la page HTML}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q26}
    Lequel de ces mots-clés permet, en JavaScript
moderne, de déclarer une variable dont la valeur ne
pourra \textbf{plus changer} après l'affectation initiale ?
    \begin{choices}
    \wrongchoice{\texttt{var}}
    \wrongchoice{\texttt{function}}
    \correctchoice{\texttt{const}}
    \wrongchoice{\texttt{let}}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q27}
    Pour ajouter la classe \texttt{actif} à un élément \texttt{el}
sélectionné via \texttt{querySelector}, quelle instruction
utiliser en JavaScript moderne ?
    \begin{choices}
    \wrongchoice{\texttt{el.style.actif = true}}
    \wrongchoice{\texttt{el.addClass("actif")}}
    \correctchoice{\texttt{el.classList.add("actif")}}
    \wrongchoice{`el.class = "actif"}
    \end{choices}
  \end{question}
}

\element{premierejavascriptdom}{
  \begin{question}{q28}
    Quelle est la différence entre \texttt{document.getElementById("titre")}
et \texttt{document.querySelector("\#titre")} ?
    \begin{choices}
    \wrongchoice{La première renvoie une liste, la seconde un seul élément}
    \wrongchoice{\texttt{querySelector} ne fonctionne que sur les pages chargées par AJAX}
    \correctchoice{Aucune dans le résultat ; les deux retournent l'élément dont l'\texttt{id} vaut \texttt{titre} (s'il existe)}
    \wrongchoice{La première fonctionne sur les classes, la seconde sur les identifiants}
    \end{choices}
  \end{question}
}


\onecopy{1}{
  \shufflegroup{premierejavascriptdom}
  \insertgroup{premierejavascriptdom}
}

\end{document}
