Médiaforma

All posts tagged gestion événementielle

Définissez un formulaire contenant deux zones de texte pour saisir un prénom et un nom et un bouton de commande input de type button. Mettez en place le code nécessaire pour afficher Bonjour nom prénom au clic sur le bouton.

Vous pouvez mettre la vidéo sur Pause et saisir le code dans votre éditeur de code. Poursuivez la vidéo lorsque tout le code aura été entré.

Solution

Le formulaire de saisie est définie dans le corps du document, entre les lignes 15 et 21.

Pour améliorer l’aspect visuel du formulaire, nous utilisons un tableau, comme dans l’exercice précédent.

Le prénom est saisi dans un champ input de type text et d’identifiant prenom. Quant au nom, il est saisi dans un champ input de type text et d’identifiant nom.

Le bouton a pour libellé “Action”. Lorsqu’il est cliqué, la fonction JavaScript disBonjour() s’exécute.

Remarquez la balise span d’identifiant résultat. Elle sera utilisée par le code JavaScript pour dire bonjour à l’utilisateur.

 

Nous allons maintenant nous intéresser au code JavaScript

Le code correspondant sera saisi entre les balises head et /head, encadré par les balises script et /script.

Le prénom et le nom sont récupérés parf la fonction getElementById().value et stockés dans les variables prenom et nom. Il ne reste plus qu’à afficher la valeur de ces deux variables dans le span d’identifiant resultat

Voyons si ce code fonctionne. Le menu Exécution permet d’exécuter le code dans un navigateur Web. Ici par exemple dans Firefox. Nous saisissons un prénom et nom, puis nous appuyons sur le bouton action. Le message de bienvenue est immédiatement affiché dans le span.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function disBonjour() {
        var prenom = document.getElementById('prenom').value;
        var nom = document.getElementById('nom').value;
        document.getElementById('resultat').innerHTML = 'Bonjour ' + prenom + ' ' + nom;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire">
      <table>
        <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
        <tr><td><input type="button" value="Action" onclick="disBonjour(); return false;"></td></tr>
      </table>
    </form>
    <br><br><span id="resultat"></span>
  </body>
</html>

Il est possible de capturer plusieurs types d’événements (clics souris, chargement d’une page ou d’une image, passage du pointeur au-dessus d’un élément, etc.) et de les traiter avec du code JavaScript.

  • Pour capturer un événement, insérez l’attribut correspondant (onfocus, onblur, onclick, onresize, onload, onkeypress, etc.) dans l’élément cible et précisez le nom de la procédure JavaScript à exécuter. Lorsque l’événement se produit, le code JavaScript correspondant est exécuté.
  • Pour obtenir le contenu d’un élément en dehors d’un formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété innerHTML.
  • Pour obtenir la valeur d’un élément de formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété value.