ES6 - Boîtes de dialogue

JavaScript prend en charge trois types importants de boîtes de dialogue. Ces boîtes de dialogue peuvent être utilisées pour déclencher et alerter, ou pour obtenir une confirmation sur n'importe quelle entrée ou pour avoir une sorte d'entrée des utilisateurs. Ici, nous allons discuter de chaque boîte de dialogue une par une.

Boîte de dialogue d'alerte

Une boîte de dialogue d'alerte est principalement utilisée pour envoyer un message d'avertissement aux utilisateurs. Par exemple, si un champ de saisie nécessite de saisir du texte mais que l'utilisateur ne fournit aucune entrée, dans le cadre de la validation, vous pouvez utiliser une boîte d'alerte pour envoyer un message d'avertissement.

Néanmoins, une boîte d'alerte peut toujours être utilisée pour les messages plus conviviaux. La boîte d'alerte ne fournit qu'un seul bouton «OK» pour sélectionner et continuer.

Exemple

<html> 
   <head> 
      <script type = "text/javascript"> 
         function Warn() {  
            alert ("This is a warning message!");  
            document.write ("This is a warning message!");  
         } 
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "Warn();" /> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Boîte de dialogue de confirmation

Une boîte de dialogue de confirmation est principalement utilisée pour obtenir le consentement de l'utilisateur sur n'importe quelle option. 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 la fenêtre confirm()retournera vrai. Si l'utilisateur clique sur le bouton Annuler, alors confirm () renvoie false. Vous pouvez utiliser une boîte de dialogue de confirmation comme suit.

Exemple

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getConfirmation(){  
            var retVal = confirm("Do you want to continue ?");  
            
            if( retVal == true ){  
               document.write ("User wants to continue!");  
               return true;  
            } else {  
               Document.write ("User does not want to continue!");  
               return false;  
            }  
         }  
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" /> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Boîte de dialogue d'invite

La boîte de dialogue d'invite est très utile lorsque vous souhaitez afficher une zone de texte pour obtenir une entrée utilisateur. Ainsi, il vous permet d'interagir avec l'utilisateur. L'utilisateur doit remplir le champ, puis cliquer sur OK.

Cette boîte de dialogue s'affiche à l'aide d'une méthode appelée prompt() qui prend deux paramètres: (i) une étiquette que vous souhaitez afficher dans la zone de texte et (ii) une chaîne par défaut à afficher dans la zone de texte.

Cette boîte de dialogue comporte deux boutons: OK et Annuler. Si l'utilisateur clique sur le bouton OK, l'invite de méthode de fenêtre () renverra la valeur saisie à partir de la zone de texte. Si l'utilisateur clique sur le bouton Annuler, la méthode de fenêtre prompt () renvoie null.

Exemple

<html> 
   <head> 
      <script type = "text/javascript"> 
         function getValue(){  
            var retVal = prompt("Enter your name : ", "your name here");  
            document.write("You have entered : " + retVal);  
         }  
      </script> 
   </head> 

   <body> 
      <p>Click the following button to see the result: </p> 
      <form> 
         <input type = "button" value = "Click Me" onclick = "getValue();" /> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.