Exercices sur les évènements
Exercice 0 : préparation du repository
Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j4
Clonez-le dans le dossier sites/js de votre IDE.
Exercice 1 : changer la couleur du texte
Créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 1 : changer la couleur du texte
</title>
</head>
<body>
<p id="text">
Au départ ce texte est en noir. À la fin, il devrait être en rouge.
</p>
<button>Rouge</button>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre javascript devra faire en sorte qu'au clic sur le bouton le texte du paragraphe s'affiche en rouge.
Exercice 2 : alterner la couleur du texte
Créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 2 : alterner la couleur du texte
</title>
</head>
<body>
<style>
.red {
color: red;
}
</style>
<p id="text">
Au départ ce texte est en noir. À la fin, il devrait être en rouge puis si je reclique il redevient noir.
</p>
<button>Rouge</button>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre javascript devra faire en sorte qu'au clic sur le bouton le texte du paragraphe s'affiche en rouge puis au reclic il se raffiche en noir.
Exercice 3 : masquer / afficher un texte
Créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 3 : masquer / afficher un texte
</title>
</head>
<body>
<p id="text">
Au départ ce texte est visible. Je peux utiliser les boutons pour le cacher ou l'afficher.
</p>
<button id="hide">Masquer</button>
<button id="show">Afficher</button>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre javascript devra faire que le texte soit masqué ou affiché selon quel bouton est cliqué.
Exercice 4 : changer d'onglet
Créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 4 : changer d'onglet
</title>
</head>
<body>
<style>
p {
display: none;
}
</style>
<button id="tab-1">Onglet 1</button>
<button id="tab-2">Onglet 2</button>
<button id="tab-3">Onglet 3</button>
<p id="tab-1-content">
Je suis le contenu de l'onglet 1.
</p>
<p id="tab-2-content">
Je suis le contenu de l'onglet 2.
</p>
<p id="tab-3-content">
Je suis le contenu de l'onglet 3.
</p>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre javascript devra faire que le texte d'un onglet soit affiché au clic sur le bouton correspondant et que le tete des autres onglets soit masqué.
Exercice 5 : afficher des précisions
Créez un dossier exercice-5. Dans le dossier exercice-5 créez un fichier index.html et un fichier index.js.
Le contenu du fichier index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>
Exercice 5 : afficher des précisions
</title>
</head>
<body>
<style>
.closed {
display: none;
}
.open {
display: block;
}
</style>
<article>
<h2>Titre de l'article <span>+</span></h2>
<section class="closed">
<p>
Ceci est un paragraphe qui contient des détails sur l'article
</p>
</section>
</article>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Votre javascript devra faire que les détails de l'article soient masqués ou affichés au clic sur le span dans le titre.
09 January 2026