Tests des programmes du cours

Tester et bien comprendre les programmes des 3 pages du cours sur les événements en JavaScript.

Mettons en place un trio HTML / CSS / JS

Dans votre répertoire de travail, créez 3 fichiers : index.html, styles.css et script.js

Dans le fichier HTML, copier ce code HTML :

Dans le fichier CSS, copier ce code CSS :

Dans le fichier JS, copier ce code :

Jouons avec les styles...

Copier-coller le dossier précédent pour en faire une copie. Nommez-le style_js/ par exemple.

Dans le code de la page HTML, modifier la ligne du paragraphe 'Voici une page web qui ne fait pas grand chose' en lui attribuant un identifiant unique "MonPara"
Dans le code JS, dans la fonction, supprimer l'alerte et remplacer par cette instruction :
document.getElementById("MonPara").style.color="red";
Constater le résultat.

À l'aide du cours et des lignes ci-dessus, faites en sorte que le titre 'Le trio : HTML, CSS et JavaScript' soit également mis en évidence avec un fond jaune.

Pour finir, rajouter le texte "mais quand même..." au paragraphe.

MouseOver...

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

<!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>

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.

La balise details

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

<!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>

<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>

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 (qui est visible dans le code source).

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>

Jouer avec les couleurs...

Tester le code ci-dessous :

<!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>

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...).

Un code possible...

                        <!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>

Caché / Pas caché !

Tester le code suivant :

On considère maintenant le code suivant :

Votre mission est d'ajouter un script à ce dernier 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 est visible, un clic sur le texte cache ou montre la démonstration suivant qu'elle est visible ou non.

Ne pas hésiter à faire des tests de valeur dans la console : console.log()

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>

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>