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 déclencher et alerter, ou pour obtenir une confirmation sur toute 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 des 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>
Sortir
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 : D’ACCORD et Annuler.
Si l’utilisateur clique sur le bouton OK, la méthode de la fenêtre confirmer() renverra vrai. Si l’utilisateur clique sur le bouton Annuler, alors confirmer() renvoie faux. 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>
Sortir
Boîte de dialogue d’invite
La boîte de dialogue d’invite est très utile lorsque vous souhaitez faire apparaître une zone de texte pour obtenir l’entrée de l’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 rapide() 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 : D’ACCORD et Annuler. Si l’utilisateur clique sur le bouton OK, la méthode de la fenêtre rapide() renverra la valeur saisie à partir de la zone de texte. Si l’utilisateur clique sur le bouton Annuler, la méthode de la fenêtre rapide() Retour nul.
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>
Sortir
#JavaScript #Boîtes #dialogue