$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).

]]> 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 et interactive

]]> Bonne réponse : HTML structure, CSS
embellit, JavaScript fait vivre. Trois
piliers complémentaires du Web.

]]> À structurer tout 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 ?

]]> Deux variantes : script externe (src) ou
script écrit directement entre
<script> et </script>. Le script externe
facilite la maintenance, car le même
fichier sert à plusieurs pages.

]]> 1.0 0.0 0 true true abc <link href="script.js">]]> Erreur : <link> est pour les feuilles
de style.

]]> <script src="script.js"></script>]]> Bonne réponse : balise <script> avec
l'attribut src, qui indique le fichier
à charger.

]]> <import "script.js">]]> Erreur : balise inexistante en 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 ?

]]> Deux mots-clés modernes : let pour une
variable modifiable, const pour une
valeur qu'on ne réaffecte pas.

]]> 1.0 0.0 0 true true abc var

]]> Erreur : var déclare aussi une
variable, mais c'est l'ancien mot-clé ;
la forme moderne est let.

]]> Let

]]> Erreur de casse : les mots-clés
JavaScript s'écrivent tout en
minuscules. Let x = 5; provoque une
SyntaxError.

]]> let

]]> Bonne réponse : let x = 5; déclare une
variable dont on peut ensuite modifier
la valeur.

]]> 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).

]]> Console.log("Hello")

]]> Erreur de casse : JavaScript distingue
majuscules et minuscules. L'objet
s'appelle console, tout en minuscules ;
Console n'est pas défini
(ReferenceError).

]]> console.log "Hello"

]]> Parenthèses oubliées : en JavaScript,
l'appel d'une fonction exige des
parenthèses autour des arguments. Sans
elles, SyntaxError.

]]> log("Hello")

]]> Préfixe oublié : log seul n'est pas
défini (ReferenceError). C'est une
méthode de l'objet console, il faut
donc écrire console.log.

]]> 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 W$3$C 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 W$3$C,
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 : document ne possède pas de
méthode find.

]]> 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 affiche un texte tel quel,
balises comprises ; innerHTML interprète
les balises contenues dans la chaîne.

]]> 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), on utilise innerHTML.

]]> 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 plusieurs 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.addEventListener("onclick", f)

]]> Erreur : le nom de l'événement est
"click", sans le préfixe on. Aucun
événement nommé "onclick" n'existe : la
fonction n'est jamais appelée, et aucun
message d'erreur ne le signale.

]]> btn.addEventListener("click", f())

]]> Erreur : f() appelle la fonction tout
de suite et transmet son résultat (souvent
undefined) à addEventListener. Il faut
passer la fonction elle-même, f, sans
parenthèses.

]]> btn.addEventListener("click", f)

]]> Bonne réponse : méthode moderne et
recommandée. Permet d'ajouter plusieurs
écouteurs sans s'écraser mutuellement.

]]> btn.onclick("click", f)

]]> Erreur : onclick est une propriété à
laquelle on affecte une fonction
(btn.onclick = f), pas une méthode à
appeler avec le nom de l'événement.

]]> JavaScript et DOM — Q10 : Trace simple Que fait ce code ?
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) renvoie le premier
élément correspondant au sélecteur ;
querySelectorAll(sel) les renvoie tous.

]]> 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 : elle ne sait
pas quel bouton a été cliqué.

]]> Une chaîne contenant le HTML du bouton

]]> Erreur : renvoie l'objet DOM, pas une
chaîne.

]]> Le premier élément de classe « bouton »

]]> 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 ?

]]> Si le contenu vient de l'utilisateur, on
préfère textContent : une balise tapée
dans un champ s'affiche alors telle quelle
au lieu d'être interprétée par le
navigateur.

]]> 1.0 0.0 0 true true abc Aucune, les deux propriétés sont interchangeables

]]> Erreur : l'une affiche les balises telles
quelles, l'autre les interprète.

]]> textContent = texte brut, innerHTML = HTML

]]> Bonne réponse : el.textContent =
"<b>x</b>" affiche littéralement
<b>x</b> ; el.innerHTML = "<b>x</b>"
affiche x en gras.

]]> La propriété textContent n'existe pas en JavaScript

]]> Erreur : c'est une propriété standard du
DOM, disponible sur tout élément.

]]> innerHTML est systématiquement plus rapide

]]> Erreur : la vitesse n'est pas ce qui
distingue les deux propriétés ;
innerHTML interprète les balises,
textContent non.

]]> 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 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.

]]> if x > 0 { console.log("positif"); }]]> Parenthèses du if oubliées : en
JavaScript, la condition doit être
entre parenthèses, if (x > 0). Sans
elles, SyntaxError.

]]> if x > 0: console.log("positif")]]> Réflexe Python : deux-points et bloc
indenté. En JavaScript, la condition va
entre parenthèses et le bloc entre
accolades.

]]> if (x > 0): console.log("positif");]]> Deux-points en trop : malgré les
parenthèses correctes, le : après la
condition n'existe pas en JavaScript
(SyntaxError). Le bloc s'écrit entre
accolades.

]]> JavaScript et DOM — Q14 : Boucle for Quelle syntaxe for JavaScript itère 5 fois ?

]]> La même boucle s'écrit en Python
for i in range(5):. Les deux langages
répètent cinq fois le corps, mais JavaScript
écrit explicitement l'initialisation, la
condition et l'incrément.

]]> 1.0 0.0 0 true true abc for (let i = 0; i <= 5; i++) { ... }]]> Erreur de borne : avec <=, la variable
i prend les valeurs 0, 1, 2, 3, 4 et 5,
soit six itérations. Piège classique
du « un de trop ».

]]> for (let i = 0, i < 5, i++) { ... }]]> Erreur : les trois parties du for sont
séparées par des points-virgules, pas
par des virgules. Ici, SyntaxError.

]]> for (let i = 0; i > 5; i++) { ... }]]> Erreur : la condition i > 5 est fausse
dès le départ (i vaut 0), donc le corps
de la boucle ne s'exécute jamais (zéro
itération, pas cinq).

]]> 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 ?

]]> Comparaison avec Python : def carre(x):
suivi du bloc indenté return x * x. Les
deux langages utilisent return, mais
JavaScript délimite le bloc par des
accolades et Python par l'indentation.

]]> 1.0 0.0 0 true true abc carre(x) { return x * x; }]]> Mot-clé function oublié : sans lui, ce
code est une SyntaxError (le return se
retrouve hors de toute fonction).

]]> Function carre(x) { return x * x; }]]> Erreur de casse : le mot-clé s'écrit
function, tout en minuscules.
Function avec majuscule désigne un
constructeur, pas le mot-clé, d'où
SyntaxError ici.

]]> def carre(x) { return x * x; }]]> Erreur : def est le mot-clé de Python.
En JavaScript, une fonction se déclare
avec function ; ici, SyntaxError.

]]> 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 const p = document.createElement("p"); p.textContent = "Hello";]]> Erreur : l'élément est créé mais jamais
inséré dans le document. Sans
document.body.appendChild(p), rien ne
s'affiche.

]]> const p = document.createElement("p"); p.textContent = "Hello"; document.body.appendChild("p");]]> Erreur : appendChild attend un nœud,
pas une chaîne : "p" provoque une
TypeError. Il faut lui passer l'élément
créé, p.

]]> const p = "<p>Hello</p>"; document.body.innerHTML = p;]]> Erreur : affecter innerHTML remplace
tout le contenu de <body> par ce fragment.
On n'ajoute pas, on écrase (et injecter du
HTML brut est risqué).

]]> 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 : Réagir à chaque caractère tapé Une page contient le champ <input id="pseudo">. On veut que la
fonction verifier s'exécute à chaque caractère tapé dans ce
champ, sans attendre aucun clic :

document.getElementById("pseudo").addEventListener(???, verifier);

Quel nom d'événement faut-il écrire à la place de ??? ?

]]> Un même composant peut réagir à plusieurs
événements : click pour un clic,
mouseover pour un survol, input pour une
modification du contenu d'un champ, submit
pour l'envoi d'un formulaire. Choisir
l'événement, c'est choisir le moment où la
fonction s'exécute.

]]> 1.0 0.0 0 true true abc "click"

]]> Erreur : click ne se déclenche que
lorsqu'on clique sur le champ. Taper des
caractères ensuite ne rappelle pas la
fonction.

]]> "input"

]]> Bonne réponse : l'événement input se
déclenche à chaque modification du
contenu du champ, donc à chaque caractère
tapé ou effacé.

]]> "mouseover"

]]> Erreur : mouseover se déclenche quand
le pointeur de la souris passe au-dessus
du champ, que l'utilisateur tape ou non.

]]> "submit"

]]> Erreur : submit concerne un formulaire
entier, au moment de son envoi. Il ne se
produit pas à chaque caractère tapé.

]]> JavaScript et DOM — Q19 : Tableau JavaScript Quelle est la notation littérale recommandée
pour 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);

]]> Ce code est valide mais ne crée pas de
tableau : les parenthèses appliquent
l'opérateur virgule, qui évalue chaque
expression et ne garde que la dernière.
Ici t vaut le nombre 3.

]]> 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 gestionnaire. Deux propriétés utiles :
event.target (l'élément qui a déclenché
l'événement) et event.type (le type
d'événement, par exemple "click").

]]> 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 simple variable globale partagée

]]> Erreur : une variable globale ne dit pas
d'elle-même quel élément a déclenché
l'événement ; il faudrait la mettre à jour
à la main, ce qui est fragile.

]]> Avec la propriété event.target

]]> Bonne réponse : avec
function afficher(e) { console.log(e.target); }
puis btn.addEventListener("click", afficher);,
la console 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 ?

]]> Astuce : console.log(...) affiche la valeur
d'une variable dans la console des outils
développeur, ce qui permet de suivre
l'exécution du script pas à pas.

]]> 1.0 0.0 0 true true abc Un environnement de développement comme Visual Studio

]]> IDE pour développer, pas pour déboguer
dans le navigateur, là où le script
s'exécute.

]]> Un éditeur de texte comme Notepad

]]> Un éditeur permet d'écrire le code, pas
de l'exécuter pas à pas ni d'inspecter
la page.

]]> Un simple script Python d'analyse

]]> 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

]]> Bonne réponse : accessibles avec F12.
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, placé dans <head>,
fait document.getElementById("menu") mais
obtient null. L'élément id="menu" existe
bien plus bas dans le <body>, sans faute de
frappe. Pourquoi ?

]]> Le navigateur construit la page au fur et à
mesure de sa lecture : un script ne peut
atteindre que les éléments déjà lus. Placer
le <script> juste avant </body> garantit
que tous les éléments existent.

]]> 1.0 0.0 0 true true abc L'élément n'existe pas dans la page

]]> Erreur : l'énoncé précise que l'élément
existe et que l'id est correct. La
cause est le moment d'exécution.

]]> JavaScript ne peut pas lire le DOM

]]> Erreur : c'est exactement son rôle.

]]> Le script s'exécute avant la lecture du <body>

]]> Bonne réponse : le navigateur lit la page de
haut en bas et exécute le script dès qu'il le
rencontre dans <head>. À ce moment,
l'élément menu, placé plus bas, n'existe pas
encore. Il suffit de placer le <script> à la
fin du <body>.

]]> Le navigateur est buggé

]]> Erreur : tous les navigateurs se comportent
ainsi ; la cause est l'ordre de lecture de la
page.

]]> JavaScript et DOM — Q23 : Un score remis à zéro Une page associe au bouton <button id="jouer"> la fonction
suivante, qui écrit dans l'élément score :
let n = 0;
function clic() {
  n = n + 2;
  if (n > 4) {
    n = 0;
  }
  document.getElementById("score").textContent = n;
}
document.getElementById("jouer").addEventListener("click", clic);

Qu'affiche l'élément score après cinq clics sur le bouton ?

]]> Pour analyser une fonction exécutée lors
d'un clic, on déroule chaque appel en notant
la valeur des variables. Une variable
déclarée en dehors de la fonction garde sa
valeur entre deux clics, ce qui permet de
construire un compteur.

]]> 1.0 0.0 0 true true abc 10

]]> Erreur : ce total ignore le if. Au
troisième clic, n passe à 6, dépasse 4
et revient à 0 ; l'affichage ne dépasse
donc jamais 4.

]]> 0

]]> Erreur : la remise à zéro n'est pas
définitive. Après le troisième clic, n
vaut 0, puis les clics suivants l'augmentent à nouveau de 2.

]]> 2

]]> Erreur : un clic manque dans le décompte.
Les valeurs affichées sont successivement
2, 4, 0, 2 puis 4.

]]> 4

]]> Bonne réponse : les cinq clics affichent
successivement 2, 4, 0, 2, 4 (la remise à zéro survient dès que
n dépasse 4). La variable n, déclarée hors de
la fonction, garde sa valeur d'un clic à
l'autre.

]]> JavaScript et DOM — Q24 : Une vérification refaite par le serveur Sur un site d'inscription, une fonction JavaScript vérifie que
le mot de passe choisi compte au moins 8 caractères et bloque
l'envoi du formulaire sinon. Le développeur fait pourtant refaire
la même vérification par le programme du serveur. Pourquoi ?

]]> Une vérification en JavaScript rend service
à l'utilisateur, qui voit son erreur tout de
suite, sans attendre le serveur. Mais seule
une vérification exécutée sur le serveur
garantit les données qu'il enregistre.

]]> 1.0 0.0 0 true true abc Parce que JavaScript ne sait pas compter les caractères d'une chaîne

]]> Erreur : JavaScript compte sans difficulté
les caractères d'une chaîne, avec
length. La raison tient à l'endroit où
le code s'exécute.

]]> Parce que le script s'exécute chez le client, qui peut le contourner

]]> Bonne réponse : le script est envoyé au
navigateur et s'exécute sur la machine de
l'utilisateur, qui peut le modifier ou
envoyer une requête sans passer par la
page. Seul le serveur maîtrise son propre
programme.

]]> Parce que le serveur exécute le script de la page avant de l'envoyer

]]> Erreur : le serveur envoie le script au
navigateur sans l'exécuter ; c'est le
client qui l'exécute. La vérification du
serveur est un programme distinct.

]]> Parce que le formulaire est envoyé deux fois, une fois par vérification

]]> Erreur : le formulaire n'est envoyé
qu'une fois. Le navigateur vérifie avant
l'envoi, puis le serveur vérifie à la
réception.

]]> JavaScript et DOM — Q25 : Synthèse Parmi les affirmations suivantes sur JavaScript
et le DOM, laquelle est fausse ?

]]> Pour afficher un simple texte, on utilise
textContent ; innerHTML sert quand la
chaîne contient des balises à interpréter.

]]> 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.

]]> textContent interprète les balises contenues dans la chaîne affectée

]]> Faux (donc bonne réponse) : textContent
affiche la chaîne telle quelle, balises
comprises. C'est innerHTML qui interprète
les balises.

]]> Le DOM est une représentation arborescente de la page HTML

]]> Vrai : structure clé du Web.

]]> JavaScript et DOM — Q26 : Ce qui décide de la réaction d'un bouton Une page contient :

<button id="valider">Envoyer</button>
<p id="message"></p>
<script src="page.js"></script>

et le fichier page.js contient :

function valider() {
  document.getElementById("message").textContent = "Merci !";
}
document.getElementById("valider").addEventListener("click", valider);

Qu'est-ce qui décide de ce qui se passe au clic sur le bouton ?

]]> Il faut distinguer la description d'un
composant graphique, écrite en HTML, de son
comportement, programmé en JavaScript.
Modifier ce qui se passe au clic revient à
modifier la fonction associée à l'événement,
sans toucher au HTML.

]]> 1.0 0.0 0 true true abc Le texte Envoyer écrit entre les balises du bouton

]]> Erreur : ce texte décrit seulement ce
qu'affiche le bouton. Le remplacer par
OK ne changerait rien à la réaction au
clic.

]]> La fonction du fichier page.js associée à l'événement click

]]> Bonne réponse : le HTML décrit le
composant, un bouton d'identifiant
valider ; le JavaScript programme son
comportement en associant la fonction
valider à l'événement click.

]]> L'attribut id="valider", qui lance la fonction du même nom

]]> Erreur : l'identifiant sert seulement à
retrouver le bouton depuis le script. La
fonction pourrait porter un autre nom :
c'est addEventListener qui la relie au
clic.

]]> La balise <button>, qui envoie la page au serveur à chaque clic

]]> Erreur : hors d'un formulaire, un bouton
n'envoie rien au serveur. Sans le script,
un clic sur ce bouton ne produirait aucun
effet.

]]> 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
des éléments de la page ; cette ligne lève
une erreur.

]]> 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 Pour un même identifiant présent dans la page, que
renvoient les deux appels 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 Une liste d'éléments pour le premier, un seul élément pour le second

]]> Erreur : getElementById renvoie un seul
élément (ou null). C'est getElementsByClassName
ou querySelectorAll qui renvoient une
collection.

]]> null pour le second, car querySelector attend le nom titre sans dièse

]]> Erreur : querySelector attend un
sélecteur CSS, et le dièse y désigne
justement un identifiant. Sans dièse,
titre viserait une balise <titre>.

]]> Le même élément, dans les deux cas

]]> 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.

]]> Un élément pour le second seulement, le premier ne ciblant que les classes

]]> Erreur : getElementById cible bien un
identifiant (pas une classe), et renvoie donc
ici l'élément. querySelector, lui, accepte
tout sélecteur CSS, dont les classes
(.maClasse).

]]> JavaScript et DOM — Q29 : Le même programme en Python et en JavaScript Voici deux programmes.

total = 0
for i in range(1, 4):
    total = total + i
print(total)
let total = 0;
for (let i = 1; i < 4; i++) {
    total = total + i;
}
console.log(total);

Que peut-on dire ?

]]> Affectation, boucle bornée, accumulateur, affichage :
les constructions élémentaires sont les mêmes d'un
langage à l'autre. Ce qui change est la syntaxe :
accolades et point-virgule en JavaScript,
indentation et range en Python.

]]> 1.0 0.0 0 true true abc Ils affichent tous deux 6 : mêmes constructions, seule la syntaxe diffère

]]> Les deux boucles font prendre à i les valeurs
$1$, $2$ et $3$.

]]> Le programme JavaScript affiche 10, car la condition i < 4 fait entrer la valeur $4$ dans la boucle

]]> i < 4 est strict : la boucle s'arrête avant
$4$, exactement comme range(1, 4).

]]> Le programme Python affiche 10, car range(1, 4) parcourt les entiers de $1$ à $4$ inclus

]]> range(1, 4) s'arrête avant $4$ ; la somme est
$1 + 2 + 3 = 6$.

]]> Seul le programme Python contient une vraie boucle ; JavaScript répète simplement l'addition trois fois

]]> for (let i = 1; i < 4; i++) est bien une
boucle ; elle s'écrit avec une initialisation,
une condition et un pas.

]]> JavaScript et DOM — Q30 : Un trait particulier de JavaScript Parmi ces affirmations, laquelle décrit un trait de
JavaScript qui le distingue de Python ?

]]> Les deux langages partagent variables, conditions,
boucles et fonctions. JavaScript se distingue par sa
syntaxe (accolades, points-virgules, let,
function) et par son terrain d'emploi, le
navigateur.

]]> 1.0 0.0 0 true true abc Les blocs d'instructions sont délimités par des accolades, et non par l'indentation

]]> En JavaScript, l'indentation est libre ; ce sont
{ et } qui marquent le début et la fin d'un
bloc.

]]> Les variables doivent être déclarées avec leur type, par exemple int x

]]> JavaScript déclare avec let ou const, sans
type ; c'est en C ou en Java qu'on écrit int x.

]]> Une fonction JavaScript ne peut pas renvoyer de valeur au programme qui l'appelle

]]> return existe et joue le même rôle qu'en
Python.

]]> JavaScript ne possède pas de boucle while, seulement des boucles for

]]> while existe en JavaScript avec la même logique
qu'en Python.

]]> JavaScript et DOM — Q31 : Traduire une division entière En Python, n // 2 donne le quotient entier de n
par $2$. Un élève traduit en JavaScript :

let n = 7;
let q = n // 2;
console.log(q);

Qu'affiche ce programme ?

]]> Un même symbole peut changer de sens d'un langage à
l'autre : // est la division entière en Python et
un commentaire en JavaScript. La traduction correcte
est let q = Math.floor(n / 2);, qui affiche 3.

]]> 1.0 0.0 0 true true abc 7

]]> En JavaScript, // commence un commentaire : la
ligne se lit let q = n; et q vaut $7$.

]]> 3

]]> Ce serait le résultat voulu, obtenu avec
Math.floor(n / 2) ; // n'est pas un opérateur
en JavaScript.

]]> 3.5

]]> n / 2 donnerait $3{,}5$, mais ici la division
n'est jamais exécutée : tout ce qui suit // est
ignoré.

]]> Une erreur de syntaxe, car // n'existe pas en JavaScript

]]> // existe, mais comme marque de commentaire ; le
programme est valide et s'exécute.

]]> JavaScript et DOM — Q32 : La fonction passée au gestionnaire Quelle écriture déclenche la fonction saluer à chaque clic sur le
bouton btn ?

]]> Un gestionnaire est une fonction donnée en argument, pas appelée :
c'est l'événement qui l'appellera plus tard.

]]> 1.0 0.0 0 true true abc btn.addEventListener("click", saluer);

]]> Bonne réponse : on transmet la fonction elle-même, sans
parenthèses. Le navigateur l'appellera à chaque clic.

]]> btn.addEventListener("click", saluer());

]]> Erreur : avec les parenthèses, saluer est appelée une seule
fois, tout de suite, et c'est son résultat qui est transmis.

]]> btn.addEventListener(saluer, "click");

]]> Erreur : l'ordre des arguments est inversé ; le nom de
l'événement vient en premier.

]]> btn.click = saluer();

]]> Erreur : cette affectation appelle saluer immédiatement et ne
crée aucun gestionnaire.

]]> JavaScript et DOM — Q33 : Deux gestionnaires pour un même clic Un bouton reçoit addEventListener("click", a) puis
addEventListener("click", b). Que se passe-t-il lors d'un clic ?

]]> addEventListener empile les gestionnaires ; pour en retirer un, on
utilise removeEventListener.

]]> 1.0 0.0 0 true true abc a puis b sont appelées, dans l'ordre d'enregistrement

]]> Bonne réponse : addEventListener ajoute un gestionnaire sans
remplacer les précédents. Tous sont appelés, dans l'ordre où ils
ont été attachés.

]]> Seule b est appelée, le second enregistrement remplaçant le premier

]]> Erreur : le remplacement serait le comportement d'une affectation
onclick, pas d'addEventListener.

]]> Seule a est appelée, le second enregistrement étant refusé

]]> Erreur : rien n'est refusé ; plusieurs gestionnaires peuvent
coexister.

]]> Une erreur, un événement n'acceptant qu'un seul gestionnaire

]]> Erreur : c'est précisément l'intérêt d'addEventListener que
d'en accepter plusieurs.

]]> JavaScript et DOM — Q34 : Gestionnaire dans le HTML ou dans le script <button onclick="valider()"> et
btn.addEventListener("click", valider) déclenchent tous deux
valider au clic. Pourquoi préfère-t-on la seconde écriture ?

]]> HTML pour le contenu, CSS pour la forme, JavaScript pour le
comportement : attacher les gestionnaires dans le script respecte
cette séparation.

]]> 1.0 0.0 0 true true abc Elle sépare le script du HTML et accepte plusieurs gestionnaires

]]> Bonne réponse : le HTML reste purement descriptif, le script
regroupe toute la logique, et plusieurs fonctions peuvent écouter
le même événement.

]]> Elle est la seule qui fonctionne dans les navigateurs récents

]]> Erreur : l'attribut onclick fonctionne toujours ; la question
est d'organisation.

]]> Elle rend le bouton plus rapide à réagir au clic

]]> Erreur : les deux écritures réagissent aussi vite.

]]> Elle évite d'avoir à définir la fonction valider

]]> Erreur : dans les deux cas, la fonction doit exister.

]]> JavaScript et DOM — Q35 : Changer une couleur depuis JavaScript Que fait l'instruction
document.getElementById("titre").style.color = "red"; ?

]]> Modifier element.style revient à ajouter un style en ligne ;
changer une classe est souvent préférable pour garder le CSS
centralisé.

]]> 1.0 0.0 0 true true abc Elle colore en rouge le texte de l'élément d'id titre

]]> Bonne réponse : la propriété style d'un élément donne accès à
ses propriétés CSS, modifiables depuis le script.

]]> Elle colore en rouge tous les titres de la page

]]> Erreur : getElementById ne renvoie que l'élément portant cet
id.

]]> Elle ajoute la classe red à l'élément

]]> Erreur : aucune classe n'est touchée ; la couleur est fixée
directement.

]]> Elle provoque une erreur, le style étant réservé au CSS

]]> Erreur : JavaScript peut lire et écrire les styles d'un élément.

]]> JavaScript et DOM — Q36 : Modifier tous les éléments d'une liste Sami veut mettre en rouge tous les li de la page. Pourquoi
document.querySelector("li").style.color = "red"; ne suffit-il
pas ?

]]> querySelector donne un élément, querySelectorAll une collection
à parcourir : la différence se voit dès qu'on veut agir sur
plusieurs éléments.

]]> 1.0 0.0 0 true true abc Parce que querySelector ne renvoie que le premier li

]]> Bonne réponse : querySelectorAll("li") renvoie tous les
éléments correspondants ; une boucle applique ensuite le style à
chacun.

]]> Parce que les li ne peuvent pas être colorés depuis JavaScript

]]> Erreur : tout élément peut recevoir un style depuis le script.

]]> Parce que style.color n'accepte pas la valeur red

]]> Erreur : red est une valeur de couleur valide.

]]> Parce que querySelector ne fonctionne qu'avec des id

]]> Erreur : querySelector accepte tout sélecteur CSS, ici le nom
d'une balise.

]]>