Accueil    Javascript    Les boîtes de dialogue
 



Javascript : Les boîtes de dialogue  Javascript : Les boîtes de dialogue

Index Javascript


Lorsque l'on utilise des boîtes de dialogue, il est souvent nécessaire d'afficher le texte sur plusieurs ligne. Le retour à la ligne se fait en insérant " \n " à l'endroit voulu dans le message.



Boîte de dialogue alert()



La méthode alert permet d'afficher une boîte de dialogue de type avertissement, ne laissant à l'utilisateur que la possibilité d'appuyer sur un bouton Ok. Elle est utilisée réglièrement pour du débugage afin de tester la valeur de certaines variables. Cette méthode ne retourne pas de valeur.


Exemple d'utilisation de la méthode alert :

<input type="button" value="Boîte de dialogue Alert" onclick="ExempleAlert();" />
<script type="text/javascript">
function ExempleAlert(){
   alert("Vous venez de cliquer sur le bouton :\nBoîte de dialogue Alert");
}
</script>

Résultat :



Boîte de dialogue confirm()



La méthode confirm permet comme la méthode alert d'afficher un message, mais ajoute des options de réponse qui peuvent être adaptées pour effectuer des confirmations ou annulations.
Elle est utilisée pour avertir l'utilisateur lors de la validation d'une action afin qu'il puisse annuler et revenir à l'état précédent ou confirmer et poursuivre (un exemple classique est d'afficher un message de confirmation lors d'une suppression). Cette méthode retourne "true" si l'utilisateur click sur Ok et"false" s'il clique sur Annuler.


Exemple d'utilisation de la méthode confirm :

<input type="button" value="Boîte de dialogue Confirm" onclick="ExempleConfirm();" style="padding:4px 8px;" />
<div id="divAge"></div>
<script type="text/javascript">
function ExempleConfirm(){
   if (confirm("Avez-vous 21 ans ou plus ?")){
      document.getElementById("divAge").innerHTML = "Vous confirmez avoir au moins 21 ans";
   }
   else{
      document.getElementById("divAge").innerHTML = "Vous avez moins de 21 ans";
   }
}
</script>

Résultat :



Boîte de dialogue prompt()



La méthode prompt permet d'ouvrir une boîte de dialogue pour demander une saisie à l'utilisateur. Elle est composée d'un message (premier paramètre de la méthode)), d'une zone de saisie de type text et de deux boutons "Ok" et "Annuler".
Il est possible d'initialiser la valeur de saisie avec une valeur spécifique (Second paramètre de la méthode). Si la saisie est vide, la valeur retournée est "null"


Exemple d'utilisation de la méthode prompt :

<input type="button" value="Boîte de dialogue Prompt" onclick="ExemplePrompt();" style="padding:4px 8px;" />
<div id="divPrenom"></div>
<script type="text/javascript">
function ExemplePrompt(){
   if (prenom != null && prenom != ""){
      document.getElementById("divPrenom").innerHTML = "Bienvenue sur StartYourdev " + prenom + " !";
   }
   else{
      document.getElementById("divPrenom").innerHTML = "";
   }
}
</script>

Résultat :