Les boîtes de dialogue en Javascript

Les boîtes de dialogue en Javascript

  1. Objectifs

    • Savoir afficher du texte et des messages.
    • Savoir la notion d’une méthode.
  2. Définitions

    • Une boîte de dialogue est une fenêtre qui s’affiche au premier plan suite à un événement, et qui permet
      • Soit d’avertir l’utilisateur
      • Soit le confronter à un choix
      • Soit lui demander de compléter un champ pour récupérer une information
    • JavaScript propose des boîtes de dialogue par défaut qui permettent d’interagir avec l’utilisateur.
    • il en existe 3 types.
      • Les alert() qui permettent d’afficher un message.
      • Les confirm() qui permettent de récupérer une valeur booléenne.
      • Les prompt() qui permettent de récupérer une valeur textuelle.



  3. La méthode alert()

    • La boîte de dialogue alert() permet d’afficher un texte et un bouton « OK ».
    • alert() est une méthode de l’objet Window.
    • alert() est une instruction simple, appelée fonction, qui permet d’afficher une boîte de dialogue contenant un message.
    • Le message de cette méthode est placé entre apostrophes (“”), elles-mêmes placées entre les parenthèses de la fonction alert().
    • Exemple:

      <!DOCTYPE html >
      <html lang="fr">
      <head>
      <title>Exemple1</title>
      <meta ="UTF-8">
      <script language=”javascript”>
       function msg(){
       alert(“Attention!”);}
      </script>
      </head>
      <body>
      <center><b><u>La méthode Alert()</u></b></center><br>
      <form name= ”f1”>
      <input type=”button” value=”Cliquer ici !!! ” onclick=“msg()“ >
      </form>
      </body>
      </html> 
  4. La méthode Confirm()

    • La boîte de dialogue confirm() permet d’afficher un message et deux boutons : un bouton « OK » et un bouton « Annuler ». Cette fonction retourne une valeur booléenne qui vaut « true » si c’est le bouton OK qui est cliqué et retourne « false » si c’est le bouton « Annuler » qui est cliqué.
    • Lorsque l’utilisateur appuie sur “OK” la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire…Elle admet comme alert() un seul paramètre: une chaîne de caractères…
    • if ( confirm( "Message à afficher" ) ) {
          // Code à exécuter si le l'utilisateur clique sur "OK"
      } else {
          // Code à exécuter si l'utilisateur clique sur "Annuler" 
      }
  5. La méthode prompt()

    • La boîte de dialogue prompt() permet d’afficher un message, un champ à remplir (imput de type texte) et un bouton « OK ». Cette fonction retourne la valeur qui a été entré dans le champ par l’utilisateur.
    • Syntaxe

      String window.prompt(String message[, String defaut])

      Exemple:

      <script>
      var userName = prompt('Entrez votre prénom :');
      alert(userName); // Affiche le prénom entré par l'utilisateur
      </script>
      
    • On peut aussi se servir de la fonction prompt() pour un calcul :
    • <script>
      var first, second, result;
      first = prompt('Entrez le premier chiffre :');
      second = prompt('Entrez le second chiffre :');
      result = parseInt(first) + parseInt(second); /* la fonction parseInt()
      transforme la chaîne de caractères en nombre */
      alert(result);
      </script>



Abonnez vous à notre chaîne YouTube gratuitement