Aller au contenu

Exemples d'actions déclenchées par un événement☘

Exercice☘

Copiez collez le code ci-dessous dans un éditeur et testez.

le code
<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
        }
        p{
            font-size: 0.8rem;
            color: black;
            background-color: lavender;
            text-align: center;
            height: 5rem;
            line-height: 5rem;
            border-radius: 0;
        }
    </style>

</head>

<body>

<p id="flash">Je flashe lorsqu'on me survole.</p>

<script>
    /*déclaration d'une variable ciblant un élément html: */
    let paragraphe = document.querySelector("#flash");
    /*Un écouteur sur l'événement mouseover: */
    paragraphe.addEventListener( "mouseover",
    () => {
        paragraphe.style.color = "brown";
        paragraphe.style.backgroundColor = "yellow";
        paragraphe.style.borderRadius = "20px";
        paragraphe.style.fontSize = "2rem";
    }
    , false)
</script>
</body>
</html>

L'événement mouseover sur le paragraphe d'identifiant flash déclenche une fonction permettant de modifier des propriétés de style css.

Après le déclenchement de l'événement, les propriétés css modifiées restent modifiées.

Votre mission: utiliser l'événement mouseout pour que les propriétés css reviennent à leurs valeurs initiales lorsque la souris quitte le paragraphe.

Indication

Copier-coller l'ajout d'écouteur en utilisant l'événement mouseout à la place de l'événement mouseover. Pour connaître les valeurs initiales des propriétés css, il suffit de lire le code dans les balises <style></style> de l'entête.

Une solution
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
        }
        p{
            font-size: 0.8rem;
            color: black;
            background-color: lavender;
            text-align: center;
            height: 5rem;
            line-height: 5rem;
            border-radius: 0;
        }
    </style>

</head>

<body>

<p id="flash">Je flashe lorsqu'on me survole.</p>

<script>
    /*déclaration d'une variable ciblant un élément html: */
    let paragraphe = document.querySelector("#flash");
    /*Un écouteur sur l'événement mouseover: */
    paragraphe.addEventListener( "mouseover",
    () => {
        paragraphe.style.color = "brown";
        paragraphe.style.backgroundColor = "yellow";
        paragraphe.style.borderRadius = "20px";
        paragraphe.style.fontSize = "2rem";
    }
    , false)
    /*Un écouteur sur l'événement mouseout: */
    paragraphe.addEventListener( "mouseout",
    () => {
        paragraphe.style.color = "black";
        paragraphe.style.backgroundColor = "lavender";
        paragraphe.style.borderRadius = "0px";
        paragraphe.style.fontSize = "0.8rem";
    }
    , false)
</script>
</body>
</html>

fichier html

Exercice☘

Ci-dessous, le code d'une page html. Cette page utilise un élément html <details></details> dont vous trouverez un descriptif sur cette page.

le code
<!DOCTYPE html>


<html lang="fr">


<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
            text-align: center;
        }
        details{
            border: 8px ridge yellow;
            color: orange;
        }

    </style>

</head>

<body>


<h1>Exercices</h1>

<h2>Exercice 1</h2>



<div id="enonce"> 

    <p>Comprendre ce qu'il se passe quand vous consultez le paragraphe Aide ci-dessous.</p>
    <p>Ajoutez au script un événement qui permette de faire réapparaître l'aide en survolant l'énoncé
    de l'exercice.</p>

</div>



<details>
      <summary>Aide</summary>
      <p>
        Lire sur 
        <a href='https://www.w3schools.com/jsref/event_ontoggle.asp'>cette page</a>  
        un descriptif de l'événement toggle.
    </p>    
</details> 

<script>
/*déclaration d'une variable ciblant un élément html: */
let aide = document.querySelector("details");
/*Un écouteur sur l'événement toggle sur l'aide: */
aide.addEventListener( "toggle",
() => {
    aide.innerHTML = "Attention, ne vous précipitez pas sur les aides. Commencez par réfléchir!";
}
, false)
</script>
</body>
</html>

Copiez et collez ce code dans une page html. Comprendre ce que déclenche l'événement.

Votre mission est ensuite de faire en sorte qu'un survol de l'énoncé par la souris remette en place le texte de l'aide.

Un code possible
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
            text-align: center;
        }
        details{
            border: 8px ridge yellow;
            color: orange;
        }

    </style>
</head>

<body>
<h1>Exercices</h1>

<h2>Exercice 1</h2>

<div id="enonce"> 

    <p>Comprendre ce qu'il se passe quand vous consultez le paragraphe Aide ci-dessous.</p>
    <p>Ajoutez au script un événement qui permette de faire réapparaître l'aide en survolant l'énoncé
    de l'exercice.</p>

</div>



<details>
      <summary>Aide</summary>
      <p>
        Lire sur 
        <a href='https://www.w3schools.com/jsref/event_ontoggle.asp'>cette page</a>  
        un descriptif de l'événement toggle.
    </p>    
</details> 

<script>
/*déclaration d'une variable ciblant un élément html: */
let aide = document.querySelector("details");
/*Un écouteur sur l'événement toggle sur l'aide: */
aide.addEventListener( "toggle",
() => {
    aide.innerHTML = "Attention, ne vous précipitez pas sur les aides. Commencez par réfléchir!";
}
, false)
/*Un écouteur sur l'événement mouseover sur l'énoncé: */
let enonce = document.querySelector("#enonce");
enonce.addEventListener( "mouseover",
() => {
    aide.innerHTML = "<summary>Aide</summary><p>Lire sur <a href='https://www.w3schools.com/jsref/event_ontoggle.asp'>cette page</a> un descriptif de l'événement toggle.</p>"
}
, false)
</script>
</body>
</html>

fichier html

Exercice☘

Testez le code ci-dessous:

code
<!DOCTYPE html>
<html lang="fr">



<head>
    <meta charset="utf-8">
    <title> changement de couleur </title>
    <style>

        body{
            width: 300px;
            height:300px;
            border: 1px solid #aaa;
        }

        #rouge{ 
            /* style pour afficher le paragraphe
            d'identifiant="rouge"
            sous forme
            d'un carré rouge */
            top : 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background-color: red;
            margin:0;}
        }

    </style>
</head>





<body>

    <p id="rouge"></p>
    <p id="message">Cliquez sur le carré rouge.</p>



    <script>
    let carre = document.getElementById("rouge");
    let message = document.getElementById("message");/* on a nommé la variable js de la même façon
    que l'identifiant de l'élément html, ce n'est pas une obligation mais c'est souvent plus facile 
    à lire ensuite. */

    carre.addEventListener( 
        'click',  
        () => { 
            if(carre.style.backgroundColor == 'blue')
            {
                carre.style.backgroundColor = 'yellow' ;
                message.textContent = "Cliquez sur le carré jaune.";
            }
            else
            {
                carre.style.backgroundColor = 'blue' ;
                message.textContent = "Cliquez sur le carré bleu.";
            }
        }
    );
    </script>

</body>
</html>

Votre mission: modifier le code pour que la couleur du carré passe par plus de variantes (du vert, du violet...), le message devra bien sûr être modifié en conséquence.

Un code
<!DOCTYPE html>
<html lang="fr">



<head>
    <meta charset="utf-8">
    <title> changement de couleur </title>
    <style>

        body{
            width: 300px;
            height:300px;
            border: 1px solid #aaa;
        }

        #rouge{ 
            /* style pour afficher le paragraphe
            d'identifiant="rouge"
            sous forme
            d'un carré rouge */
            top : 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background-color: red;
            margin:0;}
        }

    </style>
</head>





<body>

    <p id="rouge"></p>
    <p id="message">Cliquez sur le carré rouge.</p>



    <script>
    let carre = document.getElementById("rouge");
    let message = document.getElementById("message");/* on a nommé la variable js de la même façon
    que l'identifiant de l'élément html, ce n'est pas une obligation mais c'est souvent plus facile 
    à lire ensuite. */

    carre.addEventListener( 
        'click',  
        () => { 
            if(carre.style.backgroundColor == 'blue')
            {
                carre.style.backgroundColor = 'yellow' ;
                message.textContent = "Cliquez sur le carré jaune.";
            }
            else if(carre.style.backgroundColor == 'yellow') 
            {
                carre.style.backgroundColor = 'pink' ;
                message.textContent = "Cliquez sur le carré rose.";
            }
            else if(carre.style.backgroundColor == 'pink') 
            {
                carre.style.backgroundColor = 'purple' ;
                message.textContent = "Cliquez sur le carré violet.";
            }
            else if(carre.style.backgroundColor == 'purple') 
            {
                carre.style.backgroundColor = 'brown' ;
                message.textContent = "Cliquez sur le carré brun.";
            }
            else  
            {
                carre.style.backgroundColor = 'blue' ;
                message.textContent = "Cliquez sur le carré bleu.";
            }
        }
    );
    </script>

</body>
</html>

fichier html

Exercice☘

Testez le code ci-dessous:

code
<!DOCTYPE html>
<html lang="fr">



<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
    div{
        border: 1px solid red; 
        margin:1em; 
        padding:1em;
    }
    #texte{
        display:none; // permet de ne pas afficher l'élément
    }
</style>
</head>




<body>

<div>
<h2 id="titre">Le théorème de Pythagore</h2>

<p id="texte"> 
    Pour tout triangle ABC, si ABC est rectangle en A alors AB<sup>2</sup>+AC<sup>2</sup>=BC<sup>2</sup>.
</p>
</div>


<script>
    let texte = document.getElementById("texte");
    let titre = document.getElementById("titre"); 

    titre.addEventListener( 
        'click',  
        ()=>{ 
            texte.style.display = "block";
        }
    );
</script>

</body>    
</html>

On considère maintenant le code suivant:

code
<!DOCTYPE html>
<html lang="fr">



<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
    section{
        border: 1px solid red; 
        margin:1em; 
        padding:1em;
    }
    article{ 
        border: 2px dotted black;
        margin: 1em;
        text-align: center;
    }
    #texte{display:none;}
    #demonstration{display:none;}
</style>
</head>




<body>

<section>
    <h2 id="titre">Une identité remarquable</h2>

    <article id="texte"> 
        Pour tous réels a et b, on a a<sup>2</sup> - b<sup>2</sup> = (a-b)(a+b).
    </article>

    <div id="demonstration">
        Il suffit de développer le membre de droite!
    </div>
</section>


</body>    
</html>

Votre mission est d'ajouter un script à ce code en vous inspirant du script précédent de façon à ce que:

  • Un clic sur le titre du théorème
    • montre le texte du théorème (mais pas la démonstration) si ce texte est caché,
    • et cache le texte du théorème (et la démonstration) si le texte est visible.
  • Si le texte du théorème est visible, un clic sur le texte du théorème cache ou montre la démonstration suivant qu'elle est visible ou non.
Un code possible
<!DOCTYPE html>
<html lang="fr">



<head>
<meta charset="utf-8">
<title>  montrer </title>
<style>
    section{
        border: 1px solid red; 
        margin:1em; 
        padding:1em;
    }
    article{ 
        border: 2px dotted black;
        margin: 1em;
        text-align: center;
    }
    #texte{display:none;}
    #demonstration{display:none;}
</style>
</head>




<body>

<section>
    <h2 id="titre">Une identité remarquable</h2>

    <article id="texte"> 
        Pour tous réels a et b, on a a<sup>2</sup> - b<sup>2</sup> = (a-b)(a+b).
    </article>

    <div id="demonstration">
        Preuve. 
        <br>Il suffit de développer le membre de droite!
    </div>
</section>


<script>
let texte = document.getElementById("texte");
let titre = document.getElementById("titre"); 
let demo = document.getElementById("demonstration"); 

titre.addEventListener(
    'click',  
    () => { 
        if(texte.style.display == "block")
        {
            texte.style.display = "none";
            demo.style.display = "none";
        }
        else
        {
            texte.style.display = "block";
        }
    }
);




texte.addEventListener(
    'click',  
    () => { 
        if(demo.style.display == "block")
        {
            demo.style.display = "none";
        }
        else
        {
            demo.style.display = "block";
        }
    }
);
</script>

</body>    
</html>

fichier html