Trucsweb.com

Javascript

Boîtes de dialogue en Javascript

RDFFav

Boîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT

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...boîtes dialogue javascript méthodes alert confirm prompt messages dialog box confirmation choix saisie entrée dynamique tester script chaîne caractères erreur questions oui non demander mot de passe symbole saut ligne Caractères spéciaux apostrophes
  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

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!"
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Il y a une erreur de code en 3. Escaping A la place de : NChaine = allo + le monde d’\ici! Il faut mettre : NChaine = allo + le monde d\’ici! Vous l'expliquez vous-même avant d'afficher la ligne de code...
    64x64
    Pit

    2015-02-04 14:53:41

    • bien
      64x64
      adnane

      2015-05-28 13:6:13

      • Impeccable ! Vraiment j'ai bien trouvé les réponses pour mes questions ! Merci infiniment !
        64x64
        Latrach AbdelBasset

        2015-10-29 22:1:42

               Visites : 37474 - Pages vues : 84291
        X

        Trucsweb.com Connexion

        Connexion

        X

        Trucsweb.com Mot de passe perdu

        Connexion

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte

        Créer un compte

        .
        @