JavaScript - 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 élever 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 donner 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 donne 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>Production
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 Cancel.
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, alorsconfirm()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>Production
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 Cancel. Si l'utilisateur clique sur le bouton OK, la méthode de la fenêtreprompt()renverra la valeur saisie dans la zone de texte. Si l'utilisateur clique sur le bouton Annuler, la méthode de la fenêtreprompt() Retour null.
Exemple
L'exemple suivant montre comment utiliser une boîte de dialogue d'invite -
<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>