Javascript - les boîtes de dialogue

Août 2016

Qu'est-ce qu'une boîte de dialogue?

Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à

un événement, et qui permet

  • Soit d'avertir l'utilisateur
  • Soit le confronter à un choix
  • Soit lui demander de compléter un champ pour récupérer une information



Ce type de boîte est à utiliser avec parcimonie car elle oblige une action de la part de l'utilisateur,
et est à terme très énervante... Les boîtes de dialogues
sont toutefois un moyen simple de débugger (repérer les erreurs), en affichant à un point donné

une fenêtre contenant la valeur d'une variable.


Javascript en propose trois différentes dont l'utilisation se rapporte pour chacune à une de celles
décrites ci-dessus. Ce sont des méthodes de l'objet window.

Ces boîtes de dialogue ont une mention Javascript, par exemple "Javascript user prompt" pour permettre
de savoir à l'utilisateur qu'il s'agit d'une boîte d'invite de la page en cours. En effet certains webmasters peu scrupuleux
pourraient faire croire qu'il s'agit d'une boîte windows et récupérer le mot de passe
(Suite à une erreur du fournisseur d'accès veuillez entrer votre login et votre mot de passe)...

La méthode alert()

La méthode alert() permet d'afficher dans une boîte toute simple
composée d'une fenêtre et d'un bouton OK le texte qu'on lui
fournit en paramètre. Dès que cette boîte est affichée,
l'utilisateur n'a d'autre alternative que de cliquer sur le bouton OK.

Son unique paramètre est une chaîne de caractère, on peut
donc lui fournir directement cette chaîne de caractères entre guillemets,
lui fournir une variable dont il affichera le contenu, ou bien mêler les deux
en concaténant les chaines grâce à l'opérateur +.



Voici sa syntaxe :

alert(nom_de_la_variable);

alert('Chaîne de caractères');

alert('Chaîne de caractères' + nom_de_la_variable);


La chaîne de caractère peut (et doit dans certains cas) contenir
des caractères marqués d'un antislash (\).
Par exemple, si vous voulez écrire :

Message d'alerte :

Au feu!!

pour que le saut de ligne soit pris en compte Il faudra ajouter /n :

alert('Message d\'alerte \nAu feu!!');

La méthode confirm()

La méthode confirm() est similaire à la méthode alert(), si ce n'est
qu'elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK"
la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire...





Elle a un seul paramètre une chaîne de caractères corespondant au message.

Sa syntaxe est :


confirm('Chaîne de caractères');


on l’utilise généralement avec une condition

if (confirm("êtes vous d’accord")) { 
alert("vous êtes d'accord")
}
else{
alert("vous n'êtes pas d'accord")
}

La méthode prompt()

La méthode prompt est un peu plus évoluée que les deux précédentes
puisqu'elle fournit un moyen simple de récupérer une information provenant de
l'utilisateur, on parle alors de boîte d'invite. La méthode prompt() requiert
deux arguments :

  • le texte d'invite
  • la chaîne de caractères par défaut dans le champ de saisie</i>






Sa syntaxe est donc la suivante :

prompt('Posez ici votre question','chaîne par défaut');



Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur,
elle retourne la valeur null si jamais aucun texte n'est saisi...


A voir également :

Ce document intitulé «  Javascript - les boîtes de dialogue  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.