Tutoriels Trucsweb
          

 

Niveau : DÉBUTANT (Consulté 49,831 fois)
Compatibilité : Tous les navigateurs

  Ajouter aux favoris  Envoyer à un ami  Version imprimable

Boîtes de dialogue en Javascript

Avec les méthodes ALERT, CONFIRM et PROMPT

   par Django (Oznog) Blais, Trucsweb (27 Mai 2001)


La plupart des langages de programmation utilisent les boîtes de messages du système et la programmation Web n'y échappe pas. Il y a 3 méthodes, l'alerte ou " Alert dialog box " qui permet d'afficher un simple message avec un bouton fermé, la confirmation ou " Confirm dialog box " qui retourne une valeur booléenne selon un choix " oui ou non " du visiteur et finalement la méthode " Prompt " qui permet la saisie et le retour d'une valeur entrée par le visiteur.

Noter que l'apparence des boîtes de dialogue change selon le système d'exploitation et le navigateur. Il n'est pas possible de changer le texte des boutons. Le texte sur les boutons sera affiché dans la langue du navigateur du visiteur.

ATTENTION de toujours utiliser des minuscules, l'erreur la plus fréquente…

 

" Alert dialog box "
Afficher un message dynamique dans une boîte de dialogue avec un bouton " fermer " est souvent utilisé pour souhaiter la bienvenue aux visiteurs ou encore indiquer une erreur dans la saisie d'un formulaire. L'interaction de cette méthode avec le visiteur à l'avantage d'être contextuelle, c'est-à-dire que son usage est spécifique à une action du visiteur. Un autre usage de l'alerte est l'affichage de valeurs ou variables quand on teste un script.

Syntaxe
alert("message") ou alert(variable)

Message : une chaîne de caractères ou encore une variable.

Exemples :

alert("erreur!")

ou

var temp = "Erreur!"
Alert(temp)

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  var temp = "Erreur!"
  alert(temp)
</script>

boite de dialogue

 

" Confirm dialog box "
Quand vous avez besoin d'une confirmation, la boîte de dialogue de confirmation vous permet de poser une question et de récupérer si le choix oui/non du visiteur par le biais de deux boutons. La valeur booléenne retournée sera " true ou false ".

Syntaxe
confirm("message") ou confirm(variable)

Message : une chaîne de caractères ou encore une variable.

Exemples :

if (confirm("Vous désirez vraiment quitter?")) {
  // Action à entreprendre.
  // Code ou appel de fonction
}

ou

var temp = "Vous désirez vraiment quitter?"
if (confirm(temp))
{
  // Action à entreprendre.
  // Code ou appel de fonction
}

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  if (confirm("Vous désirez vraiment quitter?")) {
    alert("oui")
  }
  else {
    alert("non")
  }
</script>

boite de dialogue  boite de dialogue

 

" Prompt dialog box "
Fréquemment utilisée pour demander le nom d'un visiteur ou encore un mot de passe, cette méthode à l'avantage d'être bien sûr contextuelle et événementielle mais aussi le pouvoir de demander des données avant l'affichage de la page, données qui pourront être utilisées pour créer une page dynamique adapté aux choix du visiteur.

Syntaxe
prompt("message", [valeurParDéfaut]) ou prompt(variable, [valeurParDéfaut])

Message : une chaîne de caractères ou encore une variable.
ValeurParDéfaut : Optionnelle, la valeur (caractère ou nombre) qui sera proposée par défaut au visiteur. Si vous n'indiquez pas de valeur par défaut, aucune donnée ne sera proposée dans la boîte de saisie et la valeur sera <undefined>. Si le visiteur annule " cancel " la saisie, la valeur retournée sera " null "

Exemples :

nVarNom = prompt("Quel est votre nom?")

ou

nVarNom = prompt("Quel est votre nom?", "Espion")

Exemple complet avec résultat

<script type="text/javascript" language="javascript">
  nVarNom = prompt("Quel est votre nom?", "Espion")
  alert(nVarNom)
</script>

boite de dialogue
boite de dialogue

 

Note importante
La manipulation ou construction de la chaîne de caractères en Javascript a quelques détails qu'il faut savoir.

  1. Pour jumeler deux chaînes ensemble, utiliser le symbole " + "
    Exemple :
    NChaine = "allo" + "le monde! "

    ou

    nChaine = "allo"
    nChaine += "le monde"
  2. Caractères spéciaux. Pour changer de ligne, utiliser le symbole ou caractère spécial " \n "
    Exemple :
    NChaine = "allo" + "\nle monde! "

    Voir le tutoriel " Les caractères spéciaux en Javascript " pour plus d'information. "

  3. " Escaping " ATTENTION aux apostrophes, qui devront être précédées du symbole " \ "
    Exemple :
    NChaine = "allo" + "le monde d'\ici!"
 Début de la page


TrucswebTrucsweb


Fil d'info Trucsweb


 
sp

Hébergement de qualité!

partenaire
Rechercher un tutoriel!
 
recherche avancée
Abonnez-vous!

 

Save the Net

 
sp
 C O M M A N D I T E S 
sp






 
sp
 T U T O R I E L S 
sp
· ASP / VBscript
· C/C++
· CSS
· DHTML
· CGI / Perl
· HTML
· Java/JSP
· Javascript
· PHP
· SSI
· WAP/WML
· XML/XSL
· Infographie
· Flash et Shockwave
· Audiovisuel
· Images gratuites
· Hébergement
· Analyses de logiciels
· Internet et Protocoles
· Veille intégrée
· Référencement
· Sécurité
· Outils gratuits
 
sp
 F O R U M S 
sp
· Forum Javascript
· Forum HTML/CSS
· Forum ASP/VBScript
· Forum Flash
· Tous les forums
 
sp
 S E R V I C E S 
sp
Generateur Trucsweb
· Générateur
· Répertoire
· Logithèque
· Glossaire
· Forum
· Nouveautés Dev Zone
· Ajouter un site
· Ajouter un logiciel
· Ajouter un tutoriel
· Fil d'info sur votre site
· Tester votre site
 
sp
 A P P L I C A T I O N S 
sp
· twCompteur 1.0 Nouveau
· twCalende 1.0 Nouveau
· twLiMenu 1.0 Nouveau
· twValide 2.2 sp
· twAliste 1.0 sp
· twASPDate 2.0 sp
· twASPLivre 1.0 sp
 
sp
 R É F É R E N C E S 
sp
· W3C HTML 4.0
· W3C XHTML 1.0
· Web Design Group
· W3C SMIL 2.0
· W3C XML 1.0
· XML Cover Pages
· W3C CSS LEVEL 2
· Netscape Javascript 1.5
· Netscape Javascript 1.4
· Netscape Javascript 1.3
· Netscape DHTML
· Gecko DOM ref.
· IE DHTML
· VBScript Language Ref.
· JScript Language Ref.
· ASP Object Quick Ref.
· ADO API Reference
· Microsoft IIS5
· MSDN Library
· RFC Editor Site
· HTML 4.0 code de caractères
· Unicode fonts
· Manuel PHP
· Documentation Perl
· Perl 5 Reference Guide
· Flash actionscript FAST
· ActionScript dictionary
· MySQL Manual
· SQL Pro (F. Brouard)
· Java Language Spec.
· Java 2 SDK Doc. V1.3.1
· JavaServer Pages Ref.
· C/C++ Language Ref.
· Python Library Reference
· Les Navigateurs
· Terminologie d'Internet
· Traduction
· Traduction systran
· Traduction d'interface client
· Extensions de fichiers
· Virus Wildlist
· Virus Alerts
 
sp
 D O M A I N E S 
sp
iWeb

iWeb
 
sp
 C O P Y R I G H T  
sp

 

accueil | tutoriels | logithèque | répertoire | forum



© 1997-2006
Django (Oznog) Blais
Rivière-du-Loup, Québec
Ajouter à votre Sidebar  RSS 1.0
 
Conception Oznog co. Multimédia


Hit-Parade    Tout navigateurs   

8 visiteurs