$course$/QCM de NSI/Première/JavaScript et DOM
Bases de JavaScript pour interagir avec une page web :
intégration au HTML, syntaxe de base, manipulation du DOM
(Document Object Model), sélection et modification
d'éléments, exemples typiques.]]>
JavaScript et DOM — Q01 : Rôle de JavaScript
À quoi sert principalement JavaScript dans
une page web ?]]>
Trois langages du Web côté navigateur : HTML
(structure), CSS (style), JavaScript
(comportement). JavaScript a aussi un
pendant côté serveur (Node.js).]]>
1.0
0.0
0
true
true
abc
À mettre en forme les éléments]]>
C'est le rôle de CSS.]]>
À envoyer des e-mails]]>
Erreur : pas son rôle (cela demande un
serveur).]]>
À rendre la page dynamique : interactions, animations, modification du contenu en réaction à l'utilisateur]]>
Bonne réponse : HTML structure, CSS
embellit, JavaScript fait vivre. Trois
piliers complémentaires du Web.]]>
À structurer le contenu de la page]]>
C'est le rôle de HTML.]]>
JavaScript et DOM — Q02 : Intégrer du JavaScript
Comment inclure un fichier script.js dans
une page HTML ?]]>
Variantes : script externe (src), script
inline (<script>...</script>), module
(type="module"). Toujours préférer le
script externe pour la maintenance.]]>
1.0
0.0
0
true
true
abc
`html
<link href="script.js">
`]]>
Erreur : <link> est pour les feuilles
de style.]]>
`html
<script src="script.js"></script>
`]]>
Bonne réponse : balise <script> avec
src. Préférable de placer en bas du
<body> (ou avec defer dans <head>)
pour ne pas bloquer le rendu.]]>
`html
<import "script.js">
`]]>
Erreur : balise inexistante en HTML.]]>
`html
<js src="script.js"></js>
`]]>
Erreur : balise inexistante.]]>
JavaScript et DOM — Q03 : Déclaration de variable
Quel mot-clé moderne déclare une variable
modifiable en JavaScript ?]]>
Trois mots-clés : var (ancien, à éviter),
let (modifiable), const (constante,
non réassignable). Privilégier const par
défaut, let quand on doit modifier.]]>
1.0
0.0
0
true
true
abc
var]]>
Possible mais désuet (portée
déroutante). Préférer let.]]>
def]]>
Erreur : c'est Python.]]>
let]]>
Bonne réponse : let x = 5; déclare une
variable de portée bloc, modifiable.
Standard depuis ES6 (2015).]]>
int]]>
Erreur : JS n'est pas typé statiquement.]]>
JavaScript et DOM — Q04 : Afficher dans la console
Comment afficher un message dans la console
du navigateur en JavaScript ?]]>
Variantes : console.warn, console.error,
console.table (pour les objets/tableaux),
console.dir (pour les éléments DOM).]]>
1.0
0.0
0
true
true
abc
console.log("Hello")]]>
Bonne réponse : console.log est le
standard. Visible dans l'onglet
« Console » des outils développeur (F12).]]>
echo "Hello"]]>
Erreur : c'est PHP/Bash.]]>
print("Hello")]]>
Erreur : c'est Python.]]>
puts "Hello"]]>
Erreur : c'est Ruby.]]>
JavaScript et DOM — Q05 : DOM
Que signifie DOM ?]]>
Le DOM est la « porte d'entrée » de
JavaScript vers la page. Chaque élément HTML
devient un objet manipulable.]]>
1.0
0.0
0
true
true
abc
Dynamic Output Module]]>
Aucune spécification ne
porte ce nom. Le DOM est
la représentation arborescente
d'un document HTML, exposée
aux scripts pour permettre
la modification dynamique
de la page.]]>
Display Order Manager]]>
Cette dénomination est
inventée. Le sigle DOM
renvoie au Document
Object Model, normalisé
par le W3C dans le cadre
de la modélisation des
documents HTML.]]>
Document Object Model]]>
Bonne réponse : représentation
arborescente de la page HTML, accessible
et modifiable depuis JavaScript via des
objets et des méthodes.]]>
Domain Object Method]]>
Cette appellation n'est
pas standard. Le sigle
DOM, défini par le W3C,
signifie Document Object
Model : il décrit la
structure d'un document
HTML sous forme d'arbre
d'objets.]]>
JavaScript et DOM — Q06 : Sélection par id
Comment récupérer en JavaScript l'élément ayant
id="titre" ?]]>
Alternative moderne et flexible :
document.querySelector("#titre") (accepte
tout sélecteur CSS).]]>
1.0
0.0
0
true
true
abc
getElementById(titre)]]>
Erreur : il manque document. et les
guillemets autour de la chaîne.]]>
document.find("#titre")]]>
Erreur : pas en JavaScript natif (oui en
jQuery).]]>
document.getId("titre")]]>
Erreur : méthode inexistante.]]>
document.getElementById("titre")]]>
Bonne réponse : méthode classique. Renvoie
l'objet DOM correspondant ou null si
l'id n'existe pas.]]>
JavaScript et DOM — Q07 : Modifier le texte
Comment changer le texte d'un élément el
sélectionné par DOM ?]]>
textContent (texte pur) vs innerHTML
(HTML brut). Préférer textContent quand on
affiche du contenu utilisateur (sécurité).]]>
1.0
0.0
0
true
true
abc
el.value = "..."]]>
Erreur : value concerne les champs de
formulaire (<input>, <select>).]]>
el.text = "..."]]>
Erreur : propriété inexistante.]]>
el.textContent = "..."]]>
Bonne réponse : textContent modifie le
contenu textuel. Pour insérer du HTML
(avec balises), utiliser innerHTML
(mais attention aux failles XSS).]]>
el.changeText("...")]]>
Erreur : méthode inexistante.]]>
JavaScript et DOM — Q08 : DOM comme arbre
Quelle structure de données est utilisée pour
modéliser le DOM ?]]>
Vocabulaire : nœud parent, nœud enfant,
frère, racine, feuille. Chaque élément du
DOM est un nœud, qui peut être de type
« élément », « texte », « attribut », etc.]]>
1.0
0.0
0
true
true
abc
Un graphe orienté avec cycles]]>
Erreur : un arbre n'a pas de cycles.]]>
Un arbre dont la racine est <html>]]>
Bonne réponse : structure hiérarchique
reflétant l'imbrication des balises HTML.
Chaque élément a un parent et peut avoir
des enfants.]]>
Une liste plate]]>
Erreur : trop limité.]]>
Un dictionnaire]]>
Erreur : pas la structure adaptée.]]>
JavaScript et DOM — Q09 : Réagir à un clic
Comment exécuter une fonction f quand on
clique sur un bouton btn ?]]>
addEventListener est la méthode standard.
Premier paramètre = type d'événement
("click", "input", "submit"...),
second = fonction à exécuter.]]>
1.0
0.0
0
true
true
abc
btn.onClick = f]]>
Casse incorrecte. C'est onclick (tout
en minuscules).]]>
btn.click = f]]>
Erreur : .click est une méthode (pour
déclencher le clic), pas un setter de
handler.]]>
btn.addEventListener("click", f)]]>
Bonne réponse : méthode moderne et
recommandée. Permet d'ajouter plusieurs
écouteurs sans s'écraser mutuellement.]]>
btn.listen(f)]]>
Erreur : méthode inexistante en JS natif.]]>
JavaScript et DOM — Q10 : Trace simple
Que fait ce code ?
`javascript
let x = 5;
x = x + 3;
console.log(x);
`]]>
Attention au piège de l'addition vs
concaténation : 5 + "3" = "53" en JS
(coercition de type). C'est une source
classique de bugs.]]>
1.0
0.0
0
true
true
abc
Erreur]]>
Erreur : code valide.]]>
Affiche 53 (concaténation)]]>
Erreur : 3 est un nombre, pas une chaîne,
donc addition arithmétique.]]>
Affiche 5]]>
Erreur : on additionne 3.]]>
Affiche 8]]>
Bonne réponse : x devient 5 + 3 = 8, puis
on l'affiche.]]>
JavaScript et DOM — Q11 : querySelector
Que renvoie
document.querySelector(".bouton") ?]]>
querySelector(sel) = premier élément ;
querySelectorAll(sel) = NodeList. Plus
flexibles que getElementById /
getElementsByClassName.]]>
1.0
0.0
0
true
true
abc
Le bouton cliqué le plus récemment]]>
La méthode querySelector
interroge la structure du
document, pas son historique
d'interaction. Le suivi de
l'élément actif passe par
document.activeElement ou
des gestionnaires d'évènements.]]>
Une chaîne contenant le HTML du bouton]]>
Erreur : renvoie l'objet DOM, pas une
chaîne.]]>
Le premier élément ayant la classe « bouton » (ou null si aucun)]]>
Bonne réponse : querySelector accepte
un sélecteur CSS (classe, id,
combinaisons...) et renvoie le premier
élément correspondant.]]>
Tous les éléments ayant la classe « bouton »]]>
Erreur : c'est querySelectorAll qui
renvoie tous les éléments.]]>
JavaScript et DOM — Q12 : textContent vs innerHTML
Quelle est la différence entre textContent et
innerHTML ?]]>
Sécurité : si le contenu vient de
l'utilisateur, toujours utiliser
textContent pour éviter les attaques XSS
(injection de scripts).]]>
1.0
0.0
0
true
true
abc
Aucune]]>
Erreur : différence importante.]]>
textContent traite la valeur comme du texte brut (échappant les balises) ; innerHTML interprète le HTML]]>
Bonne réponse : el.textContent =
"<b>x</b>" affiche littéralement
<b>x</b> ; el.innerHTML = "<b>x</b>"
affiche x en gras.]]>
textContent n'existe pas]]>
Erreur : méthode standard.]]>
innerHTML est plus rapide]]>
Erreur : tendance inverse, et la sécurité
prime.]]>
JavaScript et DOM — Q13 : Conditions
Quelle syntaxe est valide en JavaScript pour
une condition ?]]>
Syntaxe similaire à C/Java. Astuce : les
points-virgules sont techniquement
facultatifs (insertion automatique), mais
recommandés pour éviter les pièges.]]>
1.0
0.0
0
true
true
abc
`javascript
if (x > 0) {
console.log("positif");
}
`]]>
Bonne réponse : parenthèses autour de la
condition, accolades pour le bloc, points-
virgules en fin d'instruction.]]>
`javascript
if x > 0 then
console.log("positif")
end
`]]>
Erreur : c'est la syntaxe Lua/Ruby.]]>
`javascript
if x > 0:
console.log("positif")
`]]>
Erreur : c'est la syntaxe Python.]]>
`javascript
if x > 0:
console.log "positif"
`]]>
Erreur : syntaxe inventée.]]>
JavaScript et DOM — Q14 : Boucle for
Quelle syntaxe for JavaScript itère 5 fois ?]]>
Variantes modernes : for...of (itérer sur
les valeurs d'un tableau), for...in
(itérer sur les clés d'un objet),
forEach (méthode des tableaux).]]>
1.0
0.0
0
true
true
abc
`javascript
for i in range(5)
`]]>
Erreur : c'est Python.]]>
`javascript
for i = 0 to 5
`]]>
Erreur : c'est BASIC/Pascal.]]>
`javascript
loop 5 times
`]]>
Erreur : syntaxe inventée.]]>
`javascript
for (let i = 0; i < 5; i++) { ... }
`]]>
Bonne réponse : trois parties dans le
for : initialisation, condition,
incrément (séparées par ;).]]>
JavaScript et DOM — Q15 : Définir une fonction
Quelle est la syntaxe valide d'une fonction JS ?]]>
Syntaxe moderne (« arrow function ») :
const carre = x => x * x;. Plus concise
mais subtilités sur this.]]>
1.0
0.0
0
true
true
abc
`javascript
def carre(x): return x * x
`]]>
Erreur : c'est Python.]]>
`javascript
method carre(x) { ... }
`]]>
Erreur : pas de mot-clé method global
en JS.]]>
`javascript
carre(x) -> x * x
`]]>
Erreur : syntaxe inventée.]]>
`javascript
function carre(x) { return x * x; }
`]]>
Bonne réponse : mot-clé function,
accolades pour le bloc, return pour la
valeur.]]>
JavaScript et DOM — Q16 : Modifier un attribut
Comment changer l'attribut src d'une image ?]]>
Pour les attributs standards (src, href,
alt, id...), on accède directement par
la propriété. Pour les attributs
personnalisés ou spéciaux : setAttribute/
getAttribute.]]>
1.0
0.0
0
true
true
abc
img.attribute("src", "...")]]>
Erreur : méthode inexistante.]]>
img.changeSrc("...")]]>
Erreur : méthode inexistante.]]>
img.src = "nouvelle.jpg"]]>
Bonne réponse : on peut accéder aux
attributs comme à des propriétés JS.
Forme alternative :
img.setAttribute("src", "nouvelle.jpg").]]>
img.attr.src = "..."]]>
Erreur : .attr n'existe pas.]]>
JavaScript et DOM — Q17 : Créer un élément
Comment créer dynamiquement un nouveau
paragraphe <p> et l'ajouter au <body> ?]]>
Variantes pour ajouter : appendChild (à la
fin), prepend (au début), insertBefore
(à un endroit précis).]]>
1.0
0.0
0
true
true
abc
`javascript
add("p", "Hello");
`]]>
Erreur : fonction inexistante.]]>
`javascript
new HTMLElement("p");
`]]>
Erreur : pas la bonne API.]]>
`javascript
document.body.innerHTML = "<p>Hello</p>";
`]]>
Cela écrase tout le contenu de
<body>. Pas équivalent (et peu sûr).]]>
`javascript
const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);
`]]>
Bonne réponse : trois étapes, à savoir
créer, remplir, ajouter au DOM.]]>
JavaScript et DOM — Q18 : == vs ===
Quelle est la différence entre == et === en
JavaScript ?]]>
Règle d'or : toujours utiliser === sauf
cas très précis. Idem pour l'inégalité :
!== plutôt que !=.]]>
1.0
0.0
0
true
true
abc
Aucune]]>
Erreur : différence importante !]]>
== compare avec conversion de type (5 == "5" est true) ; === compare strictement (sans conversion : 5 === "5" est false)]]>
Bonne réponse : préférer === pour
éviter les surprises de coercition.
Source de bugs subtils en JS.]]>
== n'existe pas en JS moderne]]>
Erreur : il existe, mais à éviter.]]>
=== est obsolète]]>
Erreur : c'est la version recommandée.]]>
JavaScript et DOM — Q19 : Tableau JavaScript
Comment déclarer un tableau de trois
éléments en JS ?]]>
Tableaux JS : indexés à partir de 0,
hétérogènes (peuvent contenir n'importe quel
type). Très polyvalents.]]>
1.0
0.0
0
true
true
abc
let t = [1, 2, 3];]]>
Bonne réponse : crochets, virgules.
Accès : t[0] (= 1). Méthodes :
t.push, t.pop, t.length...]]>
Array(1, 2, 3)]]>
Forme valide mais on préfère la
notation littérale [1, 2, 3].]]>
let t = {1, 2, 3};]]>
Erreur : {} désigne un objet en JS,
avec syntaxe {cle: valeur}.]]>
let t = (1, 2, 3);]]>
Erreur : ce serait un tuple Python.]]>
JavaScript et DOM — Q20 : Événement et données
Comment savoir sur quel élément un
événement a eu lieu dans le gestionnaire ?]]>
L'objet event est passé automatiquement
au callback. Propriétés utiles :
event.target (qui a déclenché),
event.type (type d'événement),
event.preventDefault() (annuler le
comportement par défaut).]]>
1.0
0.0
0
true
true
abc
En relançant le code]]>
Relancer le script ne
fournit aucune information
supplémentaire. C'est l'objet
event, automatiquement
transmis au gestionnaire,
qui contient toutes les
données utiles.]]>
Impossible]]>
Erreur : il existe une variable
d'événement.]]>
Avec une variable globale]]>
Pratique fragile, à éviter.]]>
Via event.target (passé au callback)]]>
Bonne réponse :
btn.addEventListener("click", (e) =>
console.log(e.target)); affiche
l'élément qui a déclenché l'événement.]]>
JavaScript et DOM — Q21 : Débogage
Pour déboguer un script JavaScript dans le
navigateur, quel outil utiliser ?]]>
Astuces : debugger; pour mettre un point
d'arrêt en code ; console.table(arr) pour
visualiser un tableau ; console.dir(elem)
pour explorer un nœud DOM.]]>
1.0
0.0
0
true
true
abc
Visual Studio]]>
IDE pour développer, pas pour déboguer
dans le navigateur.]]>
Notepad]]>
Pas un débogueur.]]>
Un script Python]]>
Python est un langage
autonome, exécuté côté
serveur ou en local. Le
débogage d'un script
JavaScript se fait dans
le navigateur, là où le
code s'exécute réellement.]]>
Les outils développeur du navigateur (touche F12) : console, débogueur, inspecteur, onglet Network]]>
Bonne réponse : Chrome DevTools, Firefox
DevTools, Safari Web Inspector. Tous
gratuits et puissants. Apprendre à les
utiliser est essentiel.]]>
JavaScript et DOM — Q22 : DOM pas encore prêt
Mon script JS fait document.getElementById
mais renvoie null. Pourquoi ?]]>
Trois solutions : (1) placer le <script> à
la fin de <body>, (2) <script defer>
dans <head>, (3) document.addEventListener
("DOMContentLoaded", ...).]]>
1.0
0.0
0
true
true
abc
L'élément n'existe pas dans la page]]>
Possible aussi, mais la cause la plus
fréquente est le timing.]]>
JavaScript ne peut pas lire le DOM]]>
Erreur : c'est exactement son rôle.]]>
Le script s'exécute avant que le DOM ait été parsé. L'élément n'existe pas encore.]]>
Bonne réponse : si <script> est dans
<head> sans defer, il s'exécute avant
le <body>. Solutions : placer le
script en bas du <body>, utiliser
defer, ou encapsuler dans un
écouteur DOMContentLoaded.]]>
Le navigateur est buggé]]>
Très improbable.]]>
JavaScript et DOM — Q23 : Coercition de type
Que renvoie "5" + 3 en JavaScript ?]]>
Comparaison : "5" - 3 = 2 (le - force
la conversion en nombre). Imprévisible :
toujours convertir explicitement avec
Number(s) ou parseInt(s).]]>
1.0
0.0
0
true
true
abc
"53" (chaîne, par concaténation)]]>
Bonne réponse : avec +, si l'un des
opérandes est une chaîne, l'autre est
converti en chaîne et on concatène.
Comportement spécifique à JS, source
fréquente de bugs.]]>
Erreur de type]]>
Erreur : JS coercite silencieusement.]]>
5]]>
Erreur : 5 ignorerait le 3.]]>
8]]>
Erreur : pas d'addition arithmétique car
un opérande est une chaîne.]]>
JavaScript et DOM — Q24 : Sécurité innerHTML
Pourquoi el.innerHTML = userInput; est-il
dangereux ?]]>
Règle d'or : ne jamais insérer de contenu
utilisateur via innerHTML. Préférer
textContent, ou un nettoyage avec une
bibliothèque (DOMPurify).]]>
1.0
0.0
0
true
true
abc
Parce que c'est lent]]>
Erreur : pas d'impact significatif sur la
performance.]]>
Parce qu'un utilisateur malveillant peut injecter du code HTML/JS (attaque XSS : Cross-Site Scripting)]]>
Bonne réponse : si userInput contient
<script>...</script>, le code malveillant
s'exécute dans le navigateur. Solution :
utiliser textContent (qui échappe) ou
assainir l'entrée.]]>
Parce que innerHTML est obsolète]]>
Erreur : pas obsolète.]]>
Aucun risque réel]]>
Erreur : XSS est l'une des
vulnérabilités les plus exploitées.]]>
JavaScript et DOM — Q25 : Synthèse
Parmi les affirmations suivantes sur JavaScript
et le DOM, laquelle est fausse ?]]>
Mnémonique : « toujours triple égal » en
JS, sauf cas très exceptionnels documentés.]]>
1.0
0.0
0
true
true
abc
addEventListener permet d'ajouter plusieurs gestionnaires d'événements à un élément]]>
Vrai : avantage majeur sur onclick =.]]>
document.getElementById(id) renvoie le premier élément ou null]]>
Vrai : comportement standard.]]>
== et === sont synonymes en JavaScript]]>
Faux (donc bonne réponse) : == fait
une comparaison avec coercition (donc
parfois surprenante : 0 == false,
"" == 0...) ; === est une
comparaison stricte, sans conversion
de type.]]>
Le DOM est une représentation arborescente de la page HTML]]>
Vrai : structure clé du Web.]]>
JavaScript et DOM — Q26 : let, const et var
Lequel de ces mots-clés permet, en JavaScript
moderne, de déclarer une variable dont la valeur ne
pourra plus changer après l'affectation initiale ?]]>
Recommandation moderne : préférer const par
défaut, et n'utiliser let que si on a vraiment
besoin de réaffecter la variable. Le mot-clé var
est conservé pour la rétrocompatibilité mais ne
doit plus apparaître dans du code récent.]]>
1.0
0.0
0
true
true
abc
var]]>
Erreur : var autorise au contraire la
réaffectation. C'est l'ancien mot-clé de
déclaration, à éviter aujourd'hui car il a
également une portée moins prévisible.]]>
function]]>
Erreur : function sert à déclarer une
fonction, pas une variable. Il n'a aucun
rapport avec la modification d'une valeur.]]>
const]]>
Bonne réponse : const interdit la
réaffectation après l'initialisation. Cela
n'empêche cependant pas de muter un objet
ou un tableau (modifier ses propriétés ou ses
éléments).]]>
let]]>
Erreur : let déclare une variable dont la
valeur peut être réaffectée. Pour interdire la
réaffectation, on utilise plutôt const.]]>
JavaScript et DOM — Q27 : Modifier les classes d'un élément
Pour ajouter la classe actif à un élément el
sélectionné via querySelector, quelle instruction
utiliser en JavaScript moderne ?]]>
Avantages de classList : on n'écrase pas les
autres classes, le code est lisible, et
toggle("actif") est un raccourci pratique pour
ajouter ou retirer la classe selon son état
courant. C'est l'API à privilégier pour basculer
entre des états visuels.]]>
1.0
0.0
0
true
true
abc
el.style.actif = true]]>
Erreur : la propriété style permet de
modifier les styles inline, pas la liste
des classes. Il n'existe pas de style
actif.]]>
el.addClass("actif")]]>
Erreur : addClass n'est pas une méthode
native du DOM. C'est une fonction de jQuery,
librairie qui n'est pas disponible par défaut
dans le navigateur.]]>
el.classList.add("actif")]]>
Bonne réponse : la propriété classList
fournit une API dédiée à la gestion des
classes : add, remove, toggle,
contains. C'est la méthode recommandée
aujourd'hui.]]>
`el.class = "actif"]]>
Erreur : la propriété DOM s'appelle
className, pas class (qui est un mot
réservé en JavaScript). Et l'assigner écrase
toutes les classes existantes au lieu d'en
ajouter une.]]>
JavaScript et DOM — Q28 : getElementById vs querySelector
Quelle est la différence entre document.getElementById("titre")
et document.querySelector("#titre") ?]]>
Bonne pratique : utiliser getElementById quand
on cible précisément un identifiant ;
querySelector lorsqu'on a besoin d'un sélecteur
complexe (par exemple nav > a.actif:first-child).
Pour récupérer plusieurs éléments,
querySelectorAll renvoie une NodeList
itérable.]]>
1.0
0.0
0
true
true
abc
La première renvoie une liste, la seconde un seul élément]]>
Erreur : getElementById renvoie un seul
élément (ou null). C'est getElementsByClassName
ou querySelectorAll qui renvoient une
collection.]]>
querySelector ne fonctionne que sur les pages chargées par AJAX]]>
Erreur : querySelector fonctionne sur tout
élément du DOM, quel que soit son mode de
chargement.]]>
Aucune dans le résultat ; les deux retournent l'élément dont l'id vaut titre (s'il existe)]]>
Bonne réponse : pour un identifiant donné, les
deux méthodes renvoient le même élément.
getElementById est plus rapide et plus
ancienne ; querySelector accepte tout
sélecteur CSS, ce qui la rend plus polyvalente
mais légèrement plus lente.]]>
La première fonctionne sur les classes, la seconde sur les identifiants]]>
Erreur : c'est l'inverse. getElementById
cible un identifiant ; querySelector accepte
tout sélecteur CSS, dont les classes
(.maClasse).]]>