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 input de type submit, 
//cet écouteur déclenchera une action lors d'un clic sur ce bouton:
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, il suffit d'utiliser la propriété css border-radius sur les paragraphes affichés. Faites une petite recherche web pour trouver comment règler cette propriété pour obtenir des disques.

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 input de type submit, 
//cet écouteur déclenchera une action lors d'un clic sur ce bouton:
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>