Dans votre répertoire de travail, créer un dossier exo_1_formulaire et créer dedans 3 fichiers : index.html, exo_1_form.css et exo_1_form.js dont les codes sont disponibles ci-desous :

Test

Tester ce programme

Modifications

Modifiez maintenant ce code pour qu'il affiche suivant les cas :

"L'entier est multiple de 3" ;
"L'entier est multiple de 4" ;
"L'entier est multiple de 3 et de 4" ;
"L'entier n'est ni multiple de 3, ni de 4".

Un code possible...

/* déclaration d'une variable ciblant un élément html */
let entree = document.querySelector("#entier");

/* variable lié à l'élément div */
let reponse = document.querySelector("#reponse");

/* On "écoute" l'événement change sur l'élément input */
/* L'action sera déclenchée lors d'une modification de la valeur dans le champ input */
entree.addEventListener("change",
    () => {
        // on récupère la valeur de l'entier entré par l'utilisateur :
        let entier = entree.value; 
        if(entier%3 == 0) {
            if(entier%4 == 0) {
                reponse.innerHTML = `L'entier ${entier} est multiple de 3 et de 4.`;
            }
            else {
                reponse.innerHTML = `L'entier ${entier} est multiple de 3 (mais pas de 4).`;
            }
        }
        else
        {
            if (entier%4 == 0)  {
                reponse.innerHTML = `L'entier ${entier} est multiple de 4 (mais pas de 3).`;
            }
            else {
                reponse.innerHTML = `L'entier ${entier} n'est multiple ni de 3, ni de 4.`;
            }
        }
    }
, false);

Dans votre répertoire de travail, créer un dossier exo_2_formulaire et créer dedans 3 fichiers : index.html, exo_2_form.css et exo_2_form.js dont les codes sont disponibles ci-desous :

Test

Tester ce programme et donner son utilité ?

Modifications

Apportez des modifications qui permettront d'afficher le nombre de voyelles (on omettra le cas des lettres accentuées pour simplifier) en-dessous de l'affichage du nombre de lettres 'e'. :

On utilisera une nouvelle variable CompteVoyelle

Un code possible...

Du visuel !

Dans votre répertoire de travail, créer un dossier exo_3_formulaire et créer dedans 3 fichiers : index.html, exo_3_form.css et exo_3_form.js dont les codes sont disponibles ci-desous :

Test

Tester ce programme et bien le comprendre.

Modifications

Modifiez les fichiers HTML, CSS et Javascript pour que soient affichés 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 doit également être demandée dans un champ input plutôt qu'imposée comme précédemment.

Un indice ?
Un code possible...

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.

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

<head>
    <meta charset="utf-8">
    <title> Boucle Tant que </title>

<link href="exo_3_form.css" rel="stylesheet" type="text/css" />

<script src="exo_3_form.js" charset="utf-8" defer="defer"></script>        
</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>
</body>
</html>

Composantes de couleurs...

Dans votre répertoire de travail, créer un dossier exo_4_formulaire et créer dedans 3 fichiers : index.html, exo_4_form.css et exo_4_form.js dont les codes sont disponibles ci-desous :

Test

Dans le fichier HTML, un formulaire a été défini. Un script récupère les modifications de la valeur du champ de type input (avec un écouteur d'événement change) pour modifier la composante rouge de la couleur de fond de l'élément d'identifiant cadreCouleur.

Tester ce programme et bien le comprendre.

Modifications

Ajoutez deux champs input qui demanderont de même les composantes de vert et de bleu et modifieront la couleur de fond du bloc div en conséquence.

Un code possible...

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

<head>
    <meta charset="utf-8">
    <title> couleurs </title>

<link href="exo_4_form.css" rel="stylesheet" type="text/css" />

<script src="exo_4_form.js" charset="utf-8" defer="defer"></script>        
</head>

<body>
    <form>
        <div>
            <label for="rouge">Entrez la composante rouge (entier entre 0 et 255) :</label>
            <input type="number"   id="rouge" min="0" max="255" step="20" value="200"/>
        </div>
        <div>
            <label for="vert">Entrez la composante rouge (entier entre 0 et 255) :</label>
            <input type="number"    id="vert" min="0" max="255" step="20" value="0"/>
        </div>
        <div>
            <label for="bleu">Entrez la composante rouge (entier entre 0 et 255) :</label>
            <input type="number"   id="bleu" min="0" max="255" step="20" value="0"/>
        </div>
    </form>

Pour le code JS, pas de grosse difficulté, si ce n'est qu'il faut s'inspirer du code du rouge pour les 2 autres couleurs...

Avez-vous bien cherché ?

let rouge =  document.querySelector("#rouge");
let vert =  document.querySelector("#vert");
let bleu =  document.querySelector("#bleu");
let visu = document.querySelector("#cadreCouleur");

rouge.addEventListener( "change",
    () => {
        let composanteRouge = parseInt(rouge.value, 10);
        let composanteVert = parseInt(vert.value, 10);
        let composanteBleu = parseInt(bleu.value, 10);
        visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
    }
    ,false);

vert.addEventListener( "change",
    () => {
        let composanteRouge = parseInt(rouge.value, 10);
        let composanteVert = parseInt(vert.value, 10);
        let composanteBleu = parseInt(bleu.value, 10);
        visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
    }
    ,false);

bleu.addEventListener( "change",
    () => {
        let composanteRouge = parseInt(rouge.value, 10);
        let composanteVert = parseInt(vert.value, 10);
        let composanteBleu = parseInt(bleu.value, 10);
        visu.style.backgroundColor = `rgb(${composanteRouge}, ${composanteVert}, ${composanteBleu})`;
    }
    ,false);

Jouons avec les lettres...

Dans votre répertoire de travail, créer un dossier exo_5_formulaire et créer dedans 3 fichiers : index.html, exo_5_form.css et exo_5_form.js dont les codes sont disponibles ci-desous :

Test

Tester ce programme et bien le comprendre.

Modifications

On demande, dans un formulaire, 2 lettres lettre1, lettre2 et un mot à l'utilisateur.
Après un clic sur une zone de votre choix, le mot entré s'affiche dans la page mais avec toutes les "lettre1" remplacées par les "lettre2".

Un code possible...