Aller au contenu

Travaux Pratiques - Formulaires☘

Dans ce TP, les différentes parties sont indépendantes.
Enregistrez chaque fichier dans le répertoire [D05_Formulaire].

TP D05.51☘

  1. Téléchargez chacun des trois fichiers ci-dessous et sauvegardez-les dans le répertoire de travail.

    • Fichier HTML tp_D05.51.html.

      Contenu du fichier HTM
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Formulaire sur les entiers  </title>

    <!-- Lien vers le CSS -->
    <link href="tp_D05.51.css" rel="stylesheet" type="text/css" />

    <!-- Lien vers le Javascript -->
    <script src="tp_D05.51.js" charset="utf-8" defer="defer"></script>        
</head>

<body>
    <form>
        <label for="entier">Entrez un entier:</label>
        <input type="number"   id="entier"  step="1"/>
    </form>


    <div id="reponse"> 
        Ici la réponse Javascript lors d'une modification de la valeur dans le champ input.
    </div>
</body>
</html>

    • Fichier CSS tp_D05.51.css.

      Contenu du fichier CSS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
      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;
}

    • Fichier JavaScript tp_D05.51.js.

      Contenu du fichier JS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
      /* 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%2 == 0) {
            //on modifie le contenu html du div en conséquence:
            reponse.innerHTML = `L'entier ${entier} est pair.`
        }
        else {
            //on modifie le contenu html du div en conséquence:
            reponse.innerHTML = `L'entier ${entier} est impair.`
        }
    }
, false);

  2. Ouvrez le fichier HTML avec un navigateur comme Firefox puis testez le formulaire.

    Affichages à observer

    Page d'origine :

    On entre l'entier 5 et on clique en-dehors du formulaire :

    Et pour l'entier 6 :

  3. Modifiez le code JavaScript 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 mutiple ni de 3, ni de 4".
    Une solution possible
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    /* 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);

TP D05.52☘

  1. Téléchargez chacun des trois fichiers ci-dessous et sauvegardez-les dans le répertoire de travail.

    • Fichier HTML tp_D05.52.html.

      Contenu du fichier HTML
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Formulaire sur les textes </title>

    <!-- Lien vers le CSS -->
    <link href="tp_D05.52.css" rel="stylesheet" type="text/css" />

    <!-- Lien vers le Javascript -->
    <script src="tp_D05.52.js" charset="utf-8" defer="defer"></script>        
</head>

<body>
    <form>
        <label for="mot">Entrez un mot:</label>
        <input type="text"   id="mot"  minlength="1" value="a"/>
    </form>


    <div id="reponse"> 
        Ici la réponse Javascript lors d'une modification de la valeur dans le champ input.
    </div>
</body>
</html>

    • Fichier CSS tp_D05.52.css.

      Contenu du fichier CSS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
      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;
}

    • Fichier JavaScript tp_D05.52.js.

      Contenu du fichier JS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
      let entree = document.querySelector("#mot");

let reponse = document.querySelector("#reponse");

entree.addEventListener("change",
    () => {
        // on récupère le mot entré par l'utilisateur:
        let mot = entree.value;
        // on compte le nombre de lettres e du mot:
        let compteur = 0;
        for (let lettre of mot){
            if (lettre == 'e' || lettre == 'é' || lettre == 'è' || lettre == 'ê'){
                compteur += 1;
            }
        } 
        reponse.innerHTML = `Le nombre de lettres e est égal ${compteur}.`;
    }
    ,false);

  2. Ouvrez le fichier HTML avec un navigateur comme Firefox puis testez le formulaire en saisissant un mot puis en cliquant ailleurs sur la page.

    Affichages à observer

    On entre le mot « abc » :

    On entre le mot « exemple » :

    Appelez l'enseignant et indiquez-lui le rôle du script JavaScript ?

  3. 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'.

    Une solution possible
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    let entree = document.querySelector("#mot");

let reponse = document.querySelector("#reponse");

entree.addEventListener("change",
    () => {
        // on récupère le mot entré par l'utilisateur:
        let mot = entree.value;
        // on compte le nombre de lettres e du mot:
        let compteur = 0;
        let compteVoyelle = 0;
        for(let lettre of mot){
            if(lettre == 'e' || lettre == 'é' || lettre == 'è' || lettre == 'ê'){
                compteur += 1;
            }
            if(lettre == 'e' || lettre == 'a' || lettre == 'o' || lettre == 'i' || lettre == 'u' || lettre == 'y'){
                compteVoyelle += 1;
            }
        } 

        reponse.innerHTML = `Le nombre de lettres e (avec ou sans accent) est égal ${compteur}.<br> 
        Et le nombre de voyelles (non accentuées) est égal à ${compteVoyelle}.`;
    }
    ,false);

TP D05.53*☘

  1. Téléchargez chacun des trois fichiers ci-dessous et sauvegardez-les dans le répertoire de travail.

    • Fichier HTML tp_D05.53.html.

      Contenu du fichier HTML
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
      <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Formulaire d'affichage </title>

    <!-- Lien vers le CSS -->
    <link href="tp_D05.53.css" rel="stylesheet" type="text/css" />

    <!-- Lien vers le Javascript -->
    <script src="tp_D05.53.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>
    </form>


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

    • Fichier CSS tp_D05.53.css.

      Contenu du fichier CSS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
      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;
}

    • Fichier JavaScript tp_D05.53.js.

      Contenu du fichier JS
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
      let figure = document.querySelector("#fig");

// on définit un écouteur sur l'élément input de type submit, 
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);

  2. Ouvrez le fichier HTML avec un navigateur comme Firefox puis testez le formulaire en cliquant à l'endroit indiqué.

    Affichage à obtenir

    Carrés décroissants

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

    Affichage à obtenir

    Disques croissants

    Une piste

    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.

    Une solution - Fichier HTML
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> Formulaire d'affichage </title>

    <!-- Lien vers le CSS -->
    <link href="tp_D05.53.css" rel="stylesheet" type="text/css" />

    <!-- Lien vers le Javascript -->
    <script src="tp_D05.53.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>
    Une solution - Fichier CSS
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    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%;
}
    Une solution - Fichier JavaScript
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    let figure = document.querySelector("#fig");

// on définit un écouteur sur l'élément input de type submit, 
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);