Session BRE05 Help

Exercices sur les modules

Exercice 0

  • Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j9

  • Clonez-le dans le dossier sites/js de votre IDE.

Exercice 1

  • Dans le dossier bre05-js-j9, créez un dossier exercice-1.

  • Dans le dossier exercice-1, créez trois fichiers : index.html, index.js et variables.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 1 </title> </head> <body> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier variables.js exportez une variable appellée question dont la valeur est "Life, the universe and everything in it"

  • Dans le fichier variables.js exportez une variable appellée answer dont la valeur est 42

  • Dans le fichier index.js importez question et answer depuis le fichier variables.js

  • Affichez question et answer avec console.log

Exercice 2

  • Dans le dossier bre05-js-j9, créez un dossier exercice-2.

  • Dans le dossier exercice-2, créez trois fichiers : index.html, index.js et numbers.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 2 </title> </head> <body> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier numbers.js exportez un tableau appellée numbers dont la valeur est [15, 28, 39, 54, 41]

  • Dans le fichier index.js importez numbers depuis le fichier numbers.js

  • Affichez chaque valeur du tableau numbers avec console.log

Exercice 3

  • Dans le dossier bre05-js-j9, créez un dossier exercice-3.

  • Dans le dossier exercice-3, créez quatre fichiers : index.html, index.js, functions.js et numbers.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 3 </title> </head> <body> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier numbers.js exportez un tableau appellée numbers dont la valeur est [15, 28, 39, 54, 41]

  • Dans le fichier functions.js exportez une fonction computeAverage(numbers) qui calcule la moyenne des nombres contenus dans le tableau qu'elle reçoit en paramètre et l'affiche avec console.log

  • Dans le fichier index.js importez numbers depuis le fichier numbers.js

  • Dans le fichier index.js importez computeAverage depuis le fichier functions.js

  • Dans le fichier index.js, appelez computeAverage en lui passant le tableau numbers

Exercice 4

  • Dans le dossier bre05-js-j9, créez un dossier exercice-4.

  • Dans le dossier exercice-4, créez trois fichiers : index.html, index.js et dom-utils.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 4 </title> </head> <body> <p id="text-to-color">Ceci est un texte à colorer</p> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier dom-utils.js, exportez une fonction changeTextColor(elementId, color) qui récupère l'élément par son ID et modifie sa propriété CSS color avec la valeur reçue en paramètre.

  • Dans le fichier index.js, importez changeTextColor depuis le fichier dom-utils.js.

  • Dans le fichier index.js, appelez `changeTextColor pour passer le texte en rouge.

Exercice 5

  • Dans le dossier bre05-js-j9, créez un dossier exercice-5.

  • Dans le dossier exercice-5, créez trois fichiers : index.html, index.js et events.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 5 </title> </head> <body> <button id="alert-btn">Cliquez-moi !</button> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier events.js, exportez une fonction setupAlert(buttonId, message) qui ajoute un écouteur d'événement click sur le bouton correspondant à l'ID et affiche le message avec window.alert.

  • Dans le fichier index.js, importez setupAlert depuis le fichier events.js.

  • Dans le fichier index.js, appelez setupAlert en lui passant l'ID du bouton et un message de votre choix.

Exercice 6

  • Dans le dossier bre05-js-j9, créez un dossier exercice-6.

  • Dans le dossier exercice-6, créez quatre fichiers : index.html, index.js, data.js et render.js.

index.html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" > <title> Exercice 6 </title> </head> <body> <article id="user-profile"></article> </body> <script type="module" src="index.js"></script> </html>

index.js

// vos imports ici window.addEventListener("DOMContentLoaded", () => { // votre code ici });

  • Dans le fichier data.js, exportez un objet nommé user contenant les propriétés firstName et lastName.

  • Dans le fichier render.js, exportez une fonction fillArticle(articleId, userData) qui sélectionne l'article par son ID et injecte à l'intérieur une balise <h2> contenant le nom complet de l'utilisateur.

  • Dans le fichier index.js, importez user depuis le fichier data.js.

  • Dans le fichier index.js, importez fillArticle depuis le fichier render.js.

  • Dans le fichier index.js, appelez fillArticle en lui passant l'ID de l'article et l'objet user.

16 January 2026
Manipuler les modulesClasses et attributs