Aller au contenu

while(){}☘

Syntaxe☘

Vous trouverez les éléments de syntaxe sur cette page.

Exercice☘

Testez le code ci-dessous.

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


<head>
    <meta charset="utf-8">
    <title> while </title>
    <style>
        html{
            font-size: 20px;
        }
        body{
            width: 80%;
            margin: 2rem auto;
        }
        form{
            margin: 1rem;
            padding: 1rem;
            border: 5px ridge purple;
            text-align: center;
        }
        div{
            margin: 1rem; 
        }

        p{
            display: inline-block;
            background-color: red;
            margin: 3px;
        }
    </style>
</head>

<body>


    <form>        
        <div>
        <label for="taillemin">Entrez une taille minimale:</label>
        <input type="number"   id="taillemin"  min="3" max="100" step="1" value="20" />
        </div>

        <div>
        <label for="taillemax">Entrez une taille maximale:</label>
        <input type="number"   id="taillemax"  min="5" max="200" step="1" value="90"/>
        </div>
    </form>


    <div id="fig"> 
         Cliquez ici.
    </div>


<script>
let figure = document.querySelector("#fig");
// on définit un écouteur sur l'élément d'identifiant "fig" 
//cet écouteur déclenchera une action lors d'un clic sur cet élément:
figure.addEventListener( "click",
        function() {
            // on récupère les tailles entrées par l'utilisateur:
            let tailleMin = parseInt(document.querySelector("#taillemin").value);
            let tailleMax = parseInt(document.querySelector("#taillemax").value);
            let taille = tailleMax;
            let chaine = ''; //chaîne vide
            while(taille >= tailleMin){
                chaine += `<p style="width:${taille}px; height:${taille}px;"></p>`;
                taille -= 10;
            }            
            figure.innerHTML =  chaine;
        },
        false);
</script>
</body>
</html>

Modifiez ensuite ce code afin qu'il affiche des disques verts plutôt que des carrés rouges et avec un diamètre qui augmente au lieu de diminuer.

La différence de taille entre deux disques sera également demandée dans un champ input plutôt qu'imposée comme précédemment.

Aide pour afficher des disques

Pour afficher des disques, il suffit de règler la propriété css border-radius à 50% sur les paragraphes affichés. Le css sur les éléments de type p pourra par exemple être le suivant:

p{
    display: inline-block;
    background-color: green;
    margin: 3px;
    border-radius: 50%;
}
Un code possible

fichier html

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


<head>
    <meta charset="utf-8">
    <title> while </title>
    <style>
        html{
            font-size: 20px;
        }
        body{
            width: 80%;
            margin: 2rem auto;
        }
        form{
            margin: 1rem;
            padding: 1rem;
            border: 5px ridge purple;
            text-align: center;
        }
        div{
            margin: 1rem; 
        }

        p{
            display: inline-block;
            background-color: green;
            margin: 3px;
            border-radius: 50%;
        }
    </style>
</head>

<body>


    <form>        
        <div>
        <label for="taillemin">Entrez une taille minimale:</label>
        <input type="number"   id="taillemin"  min="3" max="100" step="1" value="20" />
        </div>

        <div>
        <label for="taillemax">Entrez une taille maximale:</label>
        <input type="number"   id="taillemax"  min="5" max="200" step="1" value="90"/>
        </div>


        <div>
        <label for="delta">Entrez la différence de taille entre deux éléments p consécutifs:</label>
        <input type="number"   id="delta"  min="1" max="20" step="1" value="3"/>
        </div>
    </form>


    <div id="fig"> 
         Cliquez ici.
    </div>


<script>
let figure = document.querySelector("#fig");
// on définit un écouteur sur l'élément d'identifiant "fig", 
//cet écouteur déclenchera une action lors d'un clic sur cet élément:
figure.addEventListener( "click",
        function() {
            // on récupère les tailles entrées par l'utilisateur:
            let tailleMin = parseInt(document.querySelector("#taillemin").value);
            let tailleMax = parseInt(document.querySelector("#taillemax").value);
            let delta = parseInt(document.querySelector("#delta").value);
            let taille = tailleMin;
            let chaine = ''; //chaîne vide
            while(taille <= tailleMax){
                chaine += `<p style="width:${taille}px; height:${taille}px;"></p>`;
                taille += delta;
            }            
            figure.innerHTML =  chaine;
        },
        false);
</script>
</body>
</html>