JavaScript : Boîtes de dialogues

   alert : simple boite avec OK
   
confirm : la même chose, mais avec OK et ANNULER
   
prompt : Cette fois, l'utilisateur peut entrer du texte

Utilisation d'alert basique:

Cet exemple affiche une simple boîte de dialogue ave seulement la possibilité de presser OK :

<HTML>
<HEAD></HEAD>
<BODY>

<SCRIPT LANGUAGE = "JavaScript">
<!--
alert ("Bonjour !")
-->
</SCRIPT>


</BODY>
</HTML>

Utilisation de confirm :

Cet exemple affiche une boîte de dialogue avec OK et ANNULER :

confirm ("Etes-vous d'accord ?")

Evidemment, c'est un peu idiot comme ça... En fait, on peut constater le contenu de la réponse de l'utilisateur, puisque confirm est une fonction comme une autre. l'exemple suivant affichera true (vrai) ou false (faux), selon que l'utilisateur aura cliqué sur OK ou ANNULER. L'affichage ne se fera que quand le choix aura été fait évidemment ::

document.write ( confirm ("Bonjour !") )

L'intérêt de cette boîte devient évident quand on utilise un if :

if ( confirm ("Etes-vous d'accord ?") )
   document.write ("Vous êtes positif !")
else
   document.write ("mauvais caractère !")

On peut ajouter du code HTML avant et après ce script, mais attention, la suite du HTML ne sera affichée qu'après la réponse de l'utilisateur : L'exemple suivant affichera

début
(boîte de message Etes-vous d'accord)
Vous êtes positif OU mauvais caractère, c'est selon...
APRES que l'utilisateur aie choisi, affichage de :
Fin

<HTML>
<HEAD></HEAD>

<BODY>
début
<BR>

<SCRIPT LANGUAGE = "JavaScript">
   if ( confirm ("Etes-vous d'accord ?") )
      document.write ("Vous êtes positif !")
   else
      document.write ("mauvais caractère !")
</SCRIPT>

<BR>
Fin

</BODY>
</HTML>

Voici un autre exemple élégant :

var adult = confirm("Avez-vous plus de 18 ans ?")
  if (adult)
    alert ("Vous êtes un adulte")
  else
    alert ("Vous êtes un enfant")

Utilisation de prompt

Pour demander le nom de l'utilisateur par exemple, on utilise prompt, comme ceci :

prompt ("Votre nom ")

Ce code va vous demander votre nom, et vous proposer "undefined" comme nom par défaut... ce qui n'est pas très élégant. Il faut définit une valeur par défaut vide, comme ceci :

prompt ("Votre nom, "")

Cette valeur par défaut peut être utilisée quand c'est souvent la même réponse qui survient. Par exemple si presque tout le monde habitait Genève:

prompt ("Ou habitez-vous ?" , "Genève")

On pourrait stocker la réponse dans une variable, et ensuite l'afficher :

var LaVille
LaVille = prompt ("Ou habitez-vous ?", "Paris")
document.write (LaVille)

ATTENTION : Comme toujours, paris et Paris ne sont PAS la même ville

Vous avez constaté que l'on peut cliquer sur OK et annuler. Prenons l'exemple précédent : Si on exécute ce code, et qu'on efface la ville, et qu'on clique sur OK, le résultat sera rien "" du vide. Par contre, qu'on laisser Genève, ou qu'on l'efface, c'est pareil si on clique sur annuler, cette fois, LaVille contiendra Null. Rien et Null ne sont pas pareil...

Essayez ce bout de code :

var LaVille
LaVille = prompt ("Ou habitez-vous ?", "Genève")
document.write ("voici le contenu de LaVille : >>>")
document.write (LaVille)
document.write ("<<<")

Si vous écrivez Londres, et OK, voici le résultat :

voici le contenu de LaVille : >>>Londres<<<

Si vous effacez complètement la ville, et cliquez sur OK, voici le résultat :

voici le contenu de LaVille : >>><<<

Si vous écrivez n'importe quoi, mais que vous cliquez sur ANNULER, voici le résultat :

voici le contenu de LaVille : >>>null<<<

Il va maintenant falloir gérer avec des IF si :

- L'utiliateur a entré une ville et cliqué sur OK
- L'utilisateur n'a rien rentré, mais cliqué sur OK
- L'utilisateur a cliqué sur ANNULER

<SCRIPT LANGUAGE = "JavaScript">
  var LaVille
  LaVille = prompt ("Ou habitez-vous ?", "Genève")
  switch (LaVille)
    {
    case "Paris" : document.write ("Vous habitez Paris")
                   break
    case ""      : // Effacement de la zone et appui sur OK :
                  
document.write ("Vous avez précisé que vous n'abitez nulle part")
                   break
    case null    : // clic sur ANNULER :
                   document.write ("Vous avez cliqué sur ANNULER")
                   break
    default      : document.write ("Vous haitez quelque part, mais pas à Paris")
                   break
    }
</SCRIPT>