Analyse une chaîne l'aide d'un format
Les boîtes de dialogue peuvent être utilisés pour sensibiliser, attirer l’attention et alerter, ou pour obtenir confirmation sur n'importe quelle
Dans ce tutoriel, nous allons apprendre à créer des boîtes de dialogue en JavaScript.
En JavaScript, vous pouvez créer des boîtes de dialogue ou des fenêtres contextuelles pour interagir avec l'utilisateur. Vous pouvez les utiliser soit pour avertir l'utilisateur, soit pour recueillir ses commentaires avant de poursuivre.
Vous pouvez créer trois types différents de boîtes de dialogue : les boîtes d'alerte, de confirmation et d'invite.
L'apparence de ces boîtes de dialogue est déterminée par les paramètres du système d'exploitation et/ou du navigateur, ils ne peuvent pas être modifiés avec le CSS. En outre, les boîtes de dialogue sont des fenêtres modales ; lorsqu'une boîte de dialogue est affichée, l'exécution du code s'arrête, et ne reprend qu'après avoir quitté la boîte.
Dans la section suivante, nous examinerons en détail chacune de ces 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 chaqu'une de ces boîte de dialogue :
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 :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Boîte de dialogue d'alerte </title>
<script">
<!--
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.
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 :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Boîte de dialogue de confirmation </title>
<script">
<!--
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>
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 :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Boîte de dialogue d'invite </title>
<script">
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