Vous savez créer un formulaire en HTML. Maintenant, vous allez créer vos fichiers HTML avec du code JavaScript. Un fichier HTML par script où document.getElementById() sera utilisé dans chaque script.

Fichiers modèles

Commencez par créer un dossier pour vos exercices dans lequel vous créerez deux fichiers (un fichier HTML et un fichier CSS) dont le code-source correspond aux codes ci-dessous.

Code du fichier HTML :

<!DOCTYPE html>
<html lang="fr-BE">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet"  href="" />
    <title>Ex ...</title>
  </head>
  <body>

    <h1>
      Exercice n° ...
    </h1>

    <form onsubmit="aaa();return false;">

      <p>
        <label for="xxx">yyy : </label>
        <input type="text" id="xxx" />
      </p>

      <p>
        <input type="submit" value="zzz" />
      </p>

    </form>

    <script>
function aaa(){

  var bbb = document.getElementById("xxx").value;
  alert(bbb);



}
    </script>
  </body>
</html>

Code du fichier CSS :

body{
    font-family: Verdana, Arial, Helvetica;
    background-color: gray;
    color: black;
    }

form {
    border : double;
    padding : 10px;
    margin : 10px;
    }

.red { /* for required */
    color: red;
    }

.fondGris { /* for readonly */
    background-color: lightgray;
    }

Pour voir le résultat, cliquez ici.
Vous pouvez personnaliser ces fichiers.

Exercices

Dans le dossier que vous avez créé, recopiez votre fichier HTML modèle sous différents noms. Par exemple, exercice1.htm, exercice2.htm, ... Pour chaque exercice, utilisez un fichier HTML différent.

Indiquez le bon numéro de l'exercice dans le code source des fichiers HTML, lors de chaque exercice, au niveau des balises : <title> et <h1>.

Si votre code ne fonctionne pas du premier coup, c'est normal puisque vous débutez ...
L'important est de trouver les erreurs et les corriger.
NB : Si des caractères spéciaux s'affichent, vérifiez que le fichier que vous avez modifié est bien enregistré sous l'encodage " UTF-8 sans BOM "

Votre premier exercice consiste à récupérer ce qui écrit dans un champ et de l'afficher dans une boîte de dialogue.

L'exercice est très facile. Vous n'avez aucun code à ajouter.
Ouvrez votre fichier "exercice1.htm" dans le navigateur, remplissez le champ et cliquez sur le bouton "zzz". S'affiche alors dans la boîte de dialogue ce que vous avez tapé dans le champ.
Dans le fichier "exercice2.htm", modifiez le code pour donner des noms "normaux" à la variable, à la fonction, à l'id du champ, au bouton et à l'étiquette.

Par exemple, remplacer "zzz" par "Testez !", "aaa" par "afficher", ...

Rappelez-vous, les noms de variables, de fonctions et de valeurs d'un id doivent respecter des règles.

Ensuite, ouvrez votre fichier "exercice2.htm" dans le navigateur, remplissez le champ et cliquez sur le bouton. Doit s'afficher dans la boîte de dialogue ce que vous avez tapé dans le champ.
Modifiez le fichier "exercice3.htm" de telle sorte que le champ soit obligatoire.

<input id="nom" type="text" required="required" /> <span class="red">*</span>
Modifiez le fichier "exercice4.htm" de telle sorte que le champ soit obligatoire et ne puisse contenir qu'un nombre entier. Modifiez aussi les noms en conséquence.

<input id="nombre" type="number" required="required" /> ...

Remarquez que les nombres avec virgules ne s'affichent pas, mais bien les nombres entiers négatifs
Modifiez le fichier "exercice5.htm" de telle sorte que le champ soit obligatoire et ne puisse contenir qu'un nombre entier, compris entre 10 et 100. Modifiez aussi les noms en conséquence.

<type="number" id="nombre" required="required" min="10" max="100" /> ...
Modifiez le fichier "exercice6.htm" de telle sorte que le champ soit obligatoire et ne puisse contenir qu'un nombre entier, compris entre 0 et 1000. Affichez le nombre tapé augmenté de 10. Modifiez aussi les noms en conséquence.

var nombre = document.getElementById("nombre").value; nombre=parseInt(nombre); nombre=nombre+10; alert(nombre);
Modifiez le fichier "exercice7.htm" de telle sorte que deux champs soient obligatoires et ne puissent contenir qu'un nombre entier. Le premier champ représente la longueur d'un rectangle comprise entre 50 et 100 et le second sa largeur comprise entre 10 et 30. Calculez et affichez la surface du rectangle. Modifiez aussi les noms en conséquence.

var longueur = document.getElementById("longueur").value; var largeur = ... longueur = parseInt(longueur); largeur = ... var surface = longueur * largeur; alert(surface);
Modifiez le fichier "exercice8.htm" de telle sorte que, par rapport au fichier "exercice7.htm", l'unité de mesure soit indiquée (m). Utilisez l'attribut title des champs pour indiquer les limites admises et affichez le résultat dans une phrase.

L'attribut title permet d'afficher un court message lorsque la souris reste immobilisée un court instant sur une balise.

<input type="number" ... min="50" max="100" title="comprise entre 50 m et 100 m inclus" /> alert("La surface du rectangle vaut : " + surface + " m²");
Modifiez le fichier "exercice9.htm" de telle sorte que, par rapport au fichier "exercice8.htm", le message soit affiché dans un champ non modifiable ( et non plus dans une boite de dialogue )

<input type="text" id="resultat" readonly="readonly" size="80" class="fondGris" /> var message = "La surface du rectangle vaut : " + surface + " m²"; document.getElementById("resultat").value = message;
Modifiez le fichier "exercice10.htm" de telle sorte que, par rapport au fichier "exercice9.htm", les limites soient indiquées dans le champ ( et non plus dans l'attribut title ) et qu'un bouton permette d'effacer les champs.

<input type="number" ... placeholder="entre 50 m et 100 m inclus" /> <input type="reset" value="Effacer" />

Si vous avez réussi ces 10 exercices, alors : Félicitations !
Vous êtes maintenant capable d'afficher le résultat de calculs simples, comme présenté au début du cours

Sinon, vous regardez le code-source des fichiers suivants :

Ne regardez la solution qu'après avoir insisté.