JavaScript - les boîtes de dialogue

.....

....

JavaScript cours tutorial

JavaScript prend en charge trois types importants de boîtes de dialogue. 

Ces boîtes de dialogue peuvent être utilisés pour sensibiliser, attirer l’attention et alerter, ou pour obtenir confirmation sur n'importe quelle action de la part des utilisateurs  ou pour avoir  des informations que les utilisateurs peuvent fournir.

Ici nous allons voir chaque une de ces boîte de dialogue :

Boîte de dialogue d'alerte :

Une boîte de dialogue d'alerte est principalement utilisée pour donner un message d'avertissement aux utilisateurs. 

Cette boite d’alerte est générée par la méthode alert().

Par exemple si un champ d'entrée nécessite d'entrer du texte, mais l'utilisateur n'entre pas le texte dans ce champ ou le laisse vide  dans le cadre de la validation, vous pouvez utiliser la boîte alerte pour donner le message d'avertissement comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue d'alerte </title>
           <script type="text/javascript">
  <!--
  function boiteAlerte() {
     alert("texte de votre message!");
  }
  //-->
  </script>
  </head>
  <body>
  <p>Cliquer le bouton "voir" pour voir le résultat: </p>
  <form>
  <input type="button" value="voir" onclick="boiteAlerte();" />
  </form>
  </body>
  </html>

 

Néanmoins, une boîte d'alerte peut toujours servir pour des messages plus conviviaux. 

La boîte d'alerte donne seulement le bouton « OK » pour fermer la boite et continuer.

Boîte de dialogue de confirmation :

Une boîte de dialogue de confirmation est principalement utilisée pour prendre le consentement de l'utilisateur sur n'importe quelle action. Il affiche une boîte de dialogue avec deux boutons:OK et Annuler.

Si l'utilisateur clique sur le bouton OK, la méthode de fenêtre confirm() retourne true. Si l'utilisateur clique sur le bouton de Cancel confirm() retourne false. Vous pouvez utiliser la boîte de dialogue confirmation comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue de confirmation </title>
           <script type="text/javascript">
  <!--
  function verifonfirmation(){
     var retVal = confirm("Voulez vous continuer?");
     if( retVal == true ){
     //ici vous pouvez mettre votre en cas de confirmation
     //moi j'affiche une boite d'alerte
        alert("L'utilisateur veut continuer!");
             return true;
     }else{
     //ici vous pouvez mettre votre en cas de refus
     //moi j'affiche une boite d'alerte
        alert("L'utilisateur ne veut pas continuer!");
             return false;
     }
  }
  //-->
  </script>
  </head>
  <body>
  <p>Cliquer sur le bouton "Voir" pour voir le résultat </p>
  <form>
  <input type="button" value="Voir" onclick="verifonfirmation();" />
  </form>
  </body>
  </html>

 

Boîte de dialogue d'invite :

La boîte de dialogue d'invite est très utile quand vous voulez faire apparaître une zone de texte pour obtenir une information de l'utilisateur. Ainsi la boite de dialogue invite  vous permet d’interagir avec l’utilisateur. L’utilisateur doit renseigner le champ, puis cliquez sur OK.

Cette boîte de dialogue s’affiche à l’aide d’une méthode appelée prompt() qui prend deux paramètres

Le premier paramètre permet d’afficher une étiquette ui montre ce que l’utilisateur doit saisir

 Le second paramètre est le texte à afficher par defaut dans la zone de texte.

Cette boîte de dialogue a deux boutons : OK et Annuler. Si l’utilisateur clique sur le bouton OK, la méthode  prompt() retournera la valeur entrée dans la zone de texte. Si l’utilisateur clique sur le bouton Annuler la méthode de fenêtre prompt() retourne null.

Vous pouvez utiliser la boîte de dialogue d’invite comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue d'invite </title>
           <script type="text/javascript">
  function getValue(){
     var Valeur = prompt("Raisissez votre nom : ", "votre nom ici");
     //ici vous pouvez mettre votre code
     //moi j'affiche une boite d'alerte
     alert("Vous aves entrer : " +  Valeur );
  }
  </script>
  </head>
  <body>
  <p>Cliquer sur le bouton "voir" pour voir le résultat: </p>
  <form>
  <input type="button" value="Voir" onclick="getValue();" />
  </form>
  </body>
  </html>

 
Par carabde 30 mars 2014