{ "chapter": { "id": "javascript-dom", "level": "premiere", "theme": "IHM Web", "title": "JavaScript et DOM", "description": "Bases de JavaScript pour interagir avec une page web :\nintégration au HTML, syntaxe de base, manipulation du DOM\n(Document Object Model), sélection et modification\nd'éléments, exemples typiques.", "prerequisites": [], "references": [] }, "questions": [ { "id": "q01", "difficulty": 1, "skills": [ "definition" ], "title": "Rôle de JavaScript", "statement": "À quoi sert principalement **JavaScript** dans\nune page web ?", "options": [ { "text": "À mettre en forme les éléments", "correct": false, "feedback": "C'est le rôle de CSS.\n" }, { "text": "À envoyer des e-mails", "correct": false, "feedback": "Erreur : pas son rôle (cela demande un\nserveur).\n" }, { "text": "À rendre la page dynamique : interactions, animations, modification du contenu en réaction à l'utilisateur", "correct": true, "feedback": "Bonne réponse : HTML structure, CSS\nembellit, JavaScript fait vivre. Trois\npiliers complémentaires du Web.\n" }, { "text": "À structurer le contenu de la page", "correct": false, "feedback": "C'est le rôle de HTML.\n" } ], "explanation": "Trois langages du Web côté navigateur : HTML\n(structure), CSS (style), JavaScript\n(comportement). JavaScript a aussi un\npendant côté serveur (Node.js)." }, { "id": "q02", "difficulty": 1, "skills": [ "integration" ], "title": "Intégrer du JavaScript", "statement": "Comment **inclure** un fichier `script.js` dans\nune page HTML ?", "options": [ { "text": "```html\n\n```\n", "correct": false, "feedback": "Erreur : `` est pour les feuilles\nde style.\n" }, { "text": "```html\n\n```\n", "correct": true, "feedback": "Bonne réponse : balise ``), module\n(`type=\"module\"`). Toujours préférer le\nscript externe pour la maintenance." }, { "id": "q03", "difficulty": 1, "skills": [ "variable" ], "title": "Déclaration de variable", "statement": "Quel mot-clé moderne déclare une variable\n**modifiable** en JavaScript ?", "options": [ { "text": "`var`", "correct": false, "feedback": "Possible mais désuet (portée\ndéroutante). Préférer `let`.\n" }, { "text": "`def`", "correct": false, "feedback": "Erreur : c'est Python.\n" }, { "text": "`let`", "correct": true, "feedback": "Bonne réponse : `let x = 5;` déclare une\nvariable de portée bloc, modifiable.\nStandard depuis ES6 (2015).\n" }, { "text": "`int`", "correct": false, "feedback": "Erreur : JS n'est pas typé statiquement.\n" } ], "explanation": "Trois mots-clés : `var` (ancien, à éviter),\n`let` (modifiable), `const` (constante,\nnon réassignable). Privilégier `const` par\ndéfaut, `let` quand on doit modifier." }, { "id": "q04", "difficulty": 1, "skills": [ "console-log" ], "title": "Afficher dans la console", "statement": "Comment **afficher** un message dans la console\ndu navigateur en JavaScript ?", "options": [ { "text": "`console.log(\"Hello\")`", "correct": true, "feedback": "Bonne réponse : `console.log` est le\nstandard. Visible dans l'onglet\n« Console » des outils développeur (F12).\n" }, { "text": "`echo \"Hello\"`", "correct": false, "feedback": "Erreur : c'est PHP/Bash.\n" }, { "text": "`print(\"Hello\")`", "correct": false, "feedback": "Erreur : c'est Python.\n" }, { "text": "`puts \"Hello\"`", "correct": false, "feedback": "Erreur : c'est Ruby.\n" } ], "explanation": "Variantes : `console.warn`, `console.error`,\n`console.table` (pour les objets/tableaux),\n`console.dir` (pour les éléments DOM)." }, { "id": "q05", "difficulty": 1, "skills": [ "dom-definition" ], "title": "DOM", "statement": "Que signifie **DOM** ?", "options": [ { "text": "Dynamic Output Module", "correct": false, "feedback": "Aucune spécification ne\nporte ce nom. Le DOM est\nla représentation arborescente\nd'un document HTML, exposée\naux scripts pour permettre\nla modification dynamique\nde la page.\n" }, { "text": "Display Order Manager", "correct": false, "feedback": "Cette dénomination est\ninventée. Le sigle DOM\nrenvoie au *Document\nObject Model*, normalisé\npar le W$3$C dans le cadre\nde la modélisation des\ndocuments HTML.\n" }, { "text": "Document Object Model", "correct": true, "feedback": "Bonne réponse : représentation\narborescente de la page HTML, accessible\net modifiable depuis JavaScript via des\nobjets et des méthodes.\n" }, { "text": "Domain Object Method", "correct": false, "feedback": "Cette appellation n'est\npas standard. Le sigle\nDOM, défini par le W$3$C,\nsignifie *Document Object\nModel* : il décrit la\nstructure d'un document\nHTML sous forme d'arbre\nd'objets.\n" } ], "explanation": "Le DOM est la « porte d'entrée » de\nJavaScript vers la page. Chaque élément HTML\ndevient un objet manipulable." }, { "id": "q06", "difficulty": 1, "skills": [ "getElementById" ], "title": "Sélection par id", "statement": "Comment récupérer en JavaScript l'élément ayant\n`id=\"titre\"` ?", "options": [ { "text": "`getElementById(titre)`", "correct": false, "feedback": "Erreur : il manque `document.` et les\nguillemets autour de la chaîne.\n" }, { "text": "`document.find(\"#titre\")`", "correct": false, "feedback": "Erreur : pas en JavaScript natif (oui en\njQuery).\n" }, { "text": "`document.getId(\"titre\")`", "correct": false, "feedback": "Erreur : méthode inexistante.\n" }, { "text": "`document.getElementById(\"titre\")`", "correct": true, "feedback": "Bonne réponse : méthode classique. Renvoie\nl'objet DOM correspondant ou `null` si\nl'id n'existe pas.\n" } ], "explanation": "Alternative moderne et flexible :\n`document.querySelector(\"#titre\")` (accepte\ntout sélecteur CSS)." }, { "id": "q07", "difficulty": 1, "skills": [ "textContent" ], "title": "Modifier le texte", "statement": "Comment changer le **texte** d'un élément `el`\nsélectionné par DOM ?", "options": [ { "text": "`el.value = \"...\"`", "correct": false, "feedback": "Erreur : `value` concerne les champs de\nformulaire (``, `