Exercices sur les events

Exercice 10 : Événement au clic (Disparition)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-10.
Dans le dossier exercice-10, créez deux fichiers : index.html et script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exercice 10 - Disparition</title>
</head>
<body>
    <button id="mon-bouton">Cacher le texte</button>
    <p id="texte-a-cacher">Ceci est un texte important à faire disparaître.</p>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Sélectionnez le bouton et le paragraphe par leurs identifiants.
Ajoutez un écouteur d'événement click sur le bouton.
Lorsque l'on clique sur le bouton, modifiez le style du paragraphe pour que sa propriété display passe à none.

Exercice 11 : Événement au clic (Déplacement)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-11.
Dans le dossier exercice-11, créez deux fichiers : index.html et script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exercice 11 - Déplacement</title>
    <style>
        #carre {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 0;
            transition: left 0.3s;
        }
    </style>
</head>
<body>
    <div id="carre"></div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Sélectionnez l'élément avec l'id carre.
Ajoutez un écouteur d'événement click sur cette div.
À chaque clic, modifiez la propriété de style left de la div pour lui ajouter 50px par rapport à sa position actuelle.

Exercice 12 : Événements de souris (Mousedown et Mouseup)

Dans le dossier bre05-js-soutien-2, créez un dossier exercice-12.
Dans le dossier exercice-12, créez deux fichiers : index.html et `script.js.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exercice 12 - Changement de couleur</title>
    <style>
        #zone-interactive {
            width: 200px;
            height: 200px;
            background-color: lightgrey;
            border: 2px dashed black;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="zone-interactive">Maintenez le clic ici</div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Sélectionnez la div zone-interactive.
Ajoutez un écouteur d'événement mousedown (clic enfoncé) : changez la couleur de fond de la div en orange.
Ajoutez un écouteur d'événement mouseup (clic relâché) : remettez la couleur de fond de la div à sa valeur d'origine (lightgrey).

16 January 2026