\documentclass[10pt,aspectratio=169]{beamer}

% --- Thème ---
\usetheme[language=french]{Celestia}

% Avec [allowframebreaks] sur les frames de questions, Beamer ajoute
% par défaut « (1) », « (2) », « (3) »... sur chaque sous-slide. On
% supprime entièrement cette annotation : un template vide pour
% « frametitle continuation ». L'enseignant identifie visuellement la
% continuation par le contenu de la slide. (Les variantes [from second]
% et [roman] interagissent mal avec un titre contenant \textemdash{}
% sous Celestia : elles déclenchent une erreur « Missing $ inserted ».)
\setbeamertemplate{frametitle continuation}{}

\subject{Numérique et sciences informatiques}
\title{JavaScript et DOM}
\subtitle{QCM}
\author{Première}
\date{\today}

\begin{document}

\begin{frame}
    \titlepage
\end{frame}

% Q1 - Réponse en C
\begin{frame}[fragile]{Question 1 \textemdash{} Rôle de JavaScript}
    À quoi sert principalement \textbf{JavaScript} dans
une page web ?\medskip
    \begin{itemize}
        \item[A.] À mettre en forme les éléments
        \item[B.] À envoyer des e-mails
        \item[\alert<2>{C.}] \alert<2>{À rendre la page dynamique : interactions, animations, modification du contenu en réaction à l'utilisateur}
        \item[D.] À structurer le contenu de la page
    \end{itemize}
\end{frame}

% Q2 - Réponse en B
\begin{frame}[fragile,allowframebreaks]{Question 2 \textemdash{} Intégrer du JavaScript}
    Comment \textbf{inclure} un fichier \texttt{script.js} dans
une page HTML ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<link href="script.js">
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<script src="script.js"></script>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<import "script.js">
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<js src="script.js"></js>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q2 - Réponse en B
\begin{frame}[fragile,allowframebreaks]{Question 2 \textemdash{} Intégrer du JavaScript}
    Comment \textbf{inclure} un fichier \texttt{script.js} dans
une page HTML ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<link href="script.js">
\end{lstlisting}

        \item[\alert{B.}]~\\
\begin{lstlisting}
<script src="script.js"></script>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<import "script.js">
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<js src="script.js"></js>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q3 - Réponse en C
\begin{frame}[fragile]{Question 3 \textemdash{} Déclaration de variable}
    Quel mot-clé moderne déclare une variable
\textbf{modifiable} en JavaScript ?\medskip
    \begin{itemize}
        \item[A.] \texttt{var}
        \item[B.] \texttt{def}
        \item[\alert<2>{C.}] \alert<2>{\texttt{let}}
        \item[D.] \texttt{int}
    \end{itemize}
\end{frame}

% Q4 - Réponse en A
\begin{frame}[fragile]{Question 4 \textemdash{} Afficher dans la console}
    Comment \textbf{afficher} un message dans la console
du navigateur en JavaScript ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{console.log("Hello")}}
        \item[B.] \texttt{echo "Hello"}
        \item[C.] \texttt{print("Hello")}
        \item[D.] \texttt{puts "Hello"}
    \end{itemize}
\end{frame}

% Q5 - Réponse en C
\begin{frame}[fragile]{Question 5 \textemdash{} DOM}
    Que signifie \textbf{DOM} ?\medskip
    \begin{itemize}
        \item[A.] Dynamic Output Module
        \item[B.] Display Order Manager
        \item[\alert<2>{C.}] \alert<2>{Document Object Model}
        \item[D.] Domain Object Method
    \end{itemize}
\end{frame}

% Q6 - Réponse en D
\begin{frame}[fragile]{Question 6 \textemdash{} Sélection par id}
    Comment récupérer en JavaScript l'élément ayant
\texttt{id="titre"} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{getElementById(titre)}
        \item[B.] \texttt{document.find("\#titre")}
        \item[C.] \texttt{document.getId("titre")}
        \item[\alert<2>{D.}] \alert<2>{\texttt{document.getElementById("titre")}}
    \end{itemize}
\end{frame}

% Q7 - Réponse en C
\begin{frame}[fragile]{Question 7 \textemdash{} Modifier le texte}
    Comment changer le \textbf{texte} d'un élément \texttt{el}
sélectionné par DOM ?\medskip
    \begin{itemize}
        \item[A.] \texttt{el.value = "..."}
        \item[B.] \texttt{el.text = "..."}
        \item[\alert<2>{C.}] \alert<2>{\texttt{el.textContent = "..."}}
        \item[D.] \texttt{el.changeText("...")}
    \end{itemize}
\end{frame}

% Q8 - Réponse en B
\begin{frame}[fragile]{Question 8 \textemdash{} DOM comme arbre}
    Quelle structure de données est utilisée pour
modéliser le DOM ?\medskip
    \begin{itemize}
        \item[A.] Un graphe orienté avec cycles
        \item[\alert<2>{B.}] \alert<2>{Un arbre dont la racine est \texttt{<html>}}
        \item[C.] Une liste plate
        \item[D.] Un dictionnaire
    \end{itemize}
\end{frame}

% Q9 - Réponse en C
\begin{frame}[fragile]{Question 9 \textemdash{} Réagir à un clic}
    Comment exécuter une fonction \texttt{f} quand on
clique sur un bouton \texttt{btn} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{btn.onClick = f}
        \item[B.] \texttt{btn.click = f}
        \item[\alert<2>{C.}] \alert<2>{\texttt{btn.addEventListener("click", f)}}
        \item[D.] \texttt{btn.listen(f)}
    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Trace simple}
    Que fait ce code ?
\begin{lstlisting}
let x = 5;
x = x + 3;
console.log(x);
\end{lstlisting}\medskip
    \begin{itemize}
        \item[A.] Erreur
        \item[B.] Affiche \texttt{53} (concaténation)
        \item[C.] Affiche \texttt{5}
        \item[D.] Affiche \texttt{8}
    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Trace simple}
    Que fait ce code ?
\begin{lstlisting}
let x = 5;
x = x + 3;
console.log(x);
\end{lstlisting}\medskip
    \begin{itemize}
        \item[A.] Erreur
        \item[B.] Affiche \texttt{53} (concaténation)
        \item[C.] Affiche \texttt{5}
        \item[\alert{D.}] \alert{Affiche \texttt{8}}
    \end{itemize}
\end{frame}

% Q11 - Réponse en C
\begin{frame}[fragile]{Question 11 \textemdash{} querySelector}
    Que renvoie
\texttt{document.querySelector(".bouton")} ?\medskip
    \begin{itemize}
        \item[A.] Le bouton cliqué le plus récemment
        \item[B.] Une chaîne contenant le HTML du bouton
        \item[\alert<2>{C.}] \alert<2>{Le premier élément ayant la classe « bouton » (ou \texttt{null} si aucun)}
        \item[D.] Tous les éléments ayant la classe « bouton »
    \end{itemize}
\end{frame}

% Q12 - Réponse en B
\begin{frame}[fragile]{Question 12 \textemdash{} textContent vs innerHTML}
    Quelle est la différence entre \texttt{textContent} et
\texttt{innerHTML} ?\medskip
    \begin{itemize}
        \item[A.] Aucune
        \item[\alert<2>{B.}] \alert<2>{\texttt{textContent} traite la valeur comme du texte brut (échappant les balises) ; \texttt{innerHTML} interprète le HTML}
        \item[C.] \texttt{textContent} n'existe pas
        \item[D.] \texttt{innerHTML} est plus rapide
    \end{itemize}
\end{frame}

% Q13 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 13 \textemdash{} Conditions}
    Quelle syntaxe est \textbf{valide} en JavaScript pour
une condition ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
if (x > 0) {
    console.log("positif");
}
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
if x > 0 then
    console.log("positif")
end
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
if x > 0:
    console.log("positif")
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
if x > 0:
    console.log "positif"
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q13 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 13 \textemdash{} Conditions}
    Quelle syntaxe est \textbf{valide} en JavaScript pour
une condition ?\medskip
    \begin{itemize}
        \item[\alert{A.}]~\\
\begin{lstlisting}
if (x > 0) {
    console.log("positif");
}
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
if x > 0 then
    console.log("positif")
end
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
if x > 0:
    console.log("positif")
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
if x > 0:
    console.log "positif"
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q14 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 14 \textemdash{} Boucle for}
    Quelle syntaxe \texttt{for} JavaScript itère \textbf{5 fois} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
for i in range(5)
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
for i = 0 to 5
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
loop 5 times
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
for (let i = 0; i < 5; i++) { ... }
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q14 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 14 \textemdash{} Boucle for}
    Quelle syntaxe \texttt{for} JavaScript itère \textbf{5 fois} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
for i in range(5)
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
for i = 0 to 5
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
loop 5 times
\end{lstlisting}

        \item[\alert{D.}]~\\
\begin{lstlisting}
for (let i = 0; i < 5; i++) { ... }
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q15 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 15 \textemdash{} Définir une fonction}
    Quelle est la syntaxe valide d'une fonction JS ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
def carre(x): return x * x
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
method carre(x) { ... }
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
carre(x) -> x * x
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
function carre(x) { return x * x; }
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q15 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 15 \textemdash{} Définir une fonction}
    Quelle est la syntaxe valide d'une fonction JS ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
def carre(x): return x * x
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
method carre(x) { ... }
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
carre(x) -> x * x
\end{lstlisting}

        \item[\alert{D.}]~\\
\begin{lstlisting}
function carre(x) { return x * x; }
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q16 - Réponse en C
\begin{frame}[fragile]{Question 16 \textemdash{} Modifier un attribut}
    Comment changer l'\textbf{attribut \texttt{src}} d'une image ?\medskip
    \begin{itemize}
        \item[A.] \texttt{img.attribute("src", "...")}
        \item[B.] \texttt{img.changeSrc("...")}
        \item[\alert<2>{C.}] \alert<2>{\texttt{img.src = "nouvelle.jpg"}}
        \item[D.] \texttt{img.attr.src = "..."}
    \end{itemize}
\end{frame}

% Q17 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 17 \textemdash{} Créer un élément}
    Comment créer dynamiquement un nouveau
paragraphe \texttt{<p>} et l'\textbf{ajouter} au \texttt{<body>} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
add("p", "Hello");
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
new HTMLElement("p");
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
document.body.innerHTML = "<p>Hello</p>";
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q17 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 17 \textemdash{} Créer un élément}
    Comment créer dynamiquement un nouveau
paragraphe \texttt{<p>} et l'\textbf{ajouter} au \texttt{<body>} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
add("p", "Hello");
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
new HTMLElement("p");
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
document.body.innerHTML = "<p>Hello</p>";
\end{lstlisting}

        \item[\alert{D.}]~\\
\begin{lstlisting}
const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q18 - Réponse en B
\begin{frame}[fragile]{Question 18 \textemdash{} == vs ===}
    Quelle est la différence entre \texttt{==} et \texttt{===} en
JavaScript ?\medskip
    \begin{itemize}
        \item[A.] Aucune
        \item[\alert<2>{B.}] \alert<2>{\texttt{==} compare avec conversion de type (\texttt{5 == "5"} est \texttt{true}) ; \texttt{===} compare strictement (sans conversion : \texttt{5 === "5"} est \texttt{false})}
        \item[C.] \texttt{==} n'existe pas en JS moderne
        \item[D.] \texttt{===} est obsolète
    \end{itemize}
\end{frame}

% Q19 - Réponse en A
\begin{frame}[fragile]{Question 19 \textemdash{} Tableau JavaScript}
    Comment déclarer un \textbf{tableau} de trois
éléments en JS ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{let t = [1, 2, 3];}}
        \item[B.] \texttt{Array(1, 2, 3)}
        \item[C.] \texttt{let t = \{1, 2, 3\};}
        \item[D.] \texttt{let t = (1, 2, 3);}
    \end{itemize}
\end{frame}

% Q20 - Réponse en D
\begin{frame}[fragile]{Question 20 \textemdash{} Événement et données}
    Comment savoir \textbf{sur quel élément} un
événement a eu lieu dans le gestionnaire ?\medskip
    \begin{itemize}
        \item[A.] En relançant le code
        \item[B.] Impossible
        \item[C.] Avec une variable globale
        \item[\alert<2>{D.}] \alert<2>{Via \texttt{event.target} (passé au callback)}
    \end{itemize}
\end{frame}

% Q21 - Réponse en D
\begin{frame}[fragile]{Question 21 \textemdash{} Débogage}
    Pour déboguer un script JavaScript dans le
navigateur, quel outil utiliser ?\medskip
    \begin{itemize}
        \item[A.] Visual Studio
        \item[B.] Notepad
        \item[C.] Un script Python
        \item[\alert<2>{D.}] \alert<2>{Les outils développeur du navigateur (touche F12) : console, débogueur, inspecteur, onglet Network}
    \end{itemize}
\end{frame}

% Q22 - Réponse en C
\begin{frame}[fragile]{Question 22 \textemdash{} DOM pas encore prêt}
    Mon script JS fait \texttt{document.getElementById}
mais renvoie \texttt{null}. Pourquoi ?\medskip
    \begin{itemize}
        \item[A.] L'élément n'existe pas dans la page
        \item[B.] JavaScript ne peut pas lire le DOM
        \item[\alert<2>{C.}] \alert<2>{Le script s'exécute avant que le DOM ait été parsé. L'élément n'existe pas encore.}
        \item[D.] Le navigateur est buggé
    \end{itemize}
\end{frame}

% Q23 - Réponse en A
\begin{frame}[fragile]{Question 23 \textemdash{} Coercition de type}
    Que renvoie \texttt{"5" + 3} en JavaScript ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{"53" (chaîne, par concaténation)}
        \item[B.] Erreur de type
        \item[C.] 5
        \item[D.] 8
    \end{itemize}
\end{frame}

% Q24 - Réponse en B
\begin{frame}[fragile]{Question 24 \textemdash{} Sécurité innerHTML}
    Pourquoi \texttt{el.innerHTML = userInput;} est-il
\textbf{dangereux} ?\medskip
    \begin{itemize}
        \item[A.] Parce que c'est lent
        \item[\alert<2>{B.}] \alert<2>{Parce qu'un utilisateur malveillant peut injecter du code HTML/JS (attaque XSS : Cross-Site Scripting)}
        \item[C.] Parce que \texttt{innerHTML} est obsolète
        \item[D.] Aucun risque réel
    \end{itemize}
\end{frame}

% Q25 - Réponse en C
\begin{frame}[fragile]{Question 25 \textemdash{} Synthèse}
    Parmi les affirmations suivantes sur JavaScript
et le DOM, laquelle est \textbf{fausse} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{addEventListener} permet d'ajouter plusieurs gestionnaires d'événements à un élément
        \item[B.] \texttt{document.getElementById(id)} renvoie le premier élément ou \texttt{null}
        \item[\alert<2>{C.}] \alert<2>{\texttt{==} et \texttt{===} sont synonymes en JavaScript}
        \item[D.] Le DOM est une représentation arborescente de la page HTML
    \end{itemize}
\end{frame}

% Q26 - Réponse en C
\begin{frame}[fragile]{Question 26 \textemdash{} let, const et var}
    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 ?\medskip
    \begin{itemize}
        \item[A.] \texttt{var}
        \item[B.] \texttt{function}
        \item[\alert<2>{C.}] \alert<2>{\texttt{const}}
        \item[D.] \texttt{let}
    \end{itemize}
\end{frame}

% Q27 - Réponse en C
\begin{frame}[fragile]{Question 27 \textemdash{} Modifier les classes d'un élément}
    Pour ajouter la classe \texttt{actif} à un élément \texttt{el}
sélectionné via \texttt{querySelector}, quelle instruction
utiliser en JavaScript moderne ?\medskip
    \begin{itemize}
        \item[A.] \texttt{el.style.actif = true}
        \item[B.] \texttt{el.addClass("actif")}
        \item[\alert<2>{C.}] \alert<2>{\texttt{el.classList.add("actif")}}
        \item[D.] `el.class = "actif"
    \end{itemize}
\end{frame}

% Q28 - Réponse en C
\begin{frame}[fragile]{Question 28 \textemdash{} getElementById vs querySelector}
    Quelle est la différence entre \texttt{document.getElementById("titre")}
et \texttt{document.querySelector("\#titre")} ?\medskip
    \begin{itemize}
        \item[A.] La première renvoie une liste, la seconde un seul élément
        \item[B.] \texttt{querySelector} ne fonctionne que sur les pages chargées par AJAX
        \item[\alert<2>{C.}] \alert<2>{Aucune dans le résultat ; les deux retournent l'élément dont l'\texttt{id} vaut \texttt{titre} (s'il existe)}
        \item[D.] La première fonctionne sur les classes, la seconde sur les identifiants
    \end{itemize}
\end{frame}

\begin{frame}[standout]{}
    Fin de l'évaluation
\end{frame}

\end{document}
