Trucsweb.com

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 apostrophesBoîtes de dialogue en Javascript - Avec les méthodes ALERT, CONFIRM et PROMPT

  • · 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
    Date (GMT) : 2015-02-04 14:53:41 (UTC +0000)

    • bien
      64x64
      adnane
      Date (GMT) : 2015-05-28 13:6:13 (UTC +0000)

      • Impeccable ! Vraiment j'ai bien trouvé les réponses pour mes questions ! Merci infiniment !
        64x64
        Latrach AbdelBasset
        Date (GMT) : 2015-10-29 22:1:42 (UTC +0000)

        • ok
          64x64
          mmmm99
          Date (GMT) : 2017-04-28 17:18:20 (UTC +0000)

          • comment on fait pour avoir les icone dans les alerte?
            64x64
            GUEINGUE
            Date (GMT) : 2017-07-19 18:8:58 (UTC +0000)

            • Salut tout le monde, je n'ai pas un commentaire à ajouter, mais depreference une demande, je voulais avoir une boite de confirmation , oui et non, si oui de continuer faire des enregistrement tout engardant certains chmap, si non de sortir sur la page .. merci de me donner un coup de main.
              64x64
              Frantzy NICOLAS
              Date (GMT) : 2018-06-01 19:56:37 (UTC +0000)
              Date local : Fri Jun 01 2018 16:02:08 GMT-0500 (Eastern Standar
              • Salut, Je ne sais pas exactement ce que tu veux alors la solution n'est peut-être pas la meilleure façon. En passant par un formulaire, et l'action, peut-être que ce tutoriel t'aidera : « Validation de formulaire » ? http://www.trucsweb.com/tutoriels/asp/tw109/ Et ajouter lors du test la « confirmation » : 1. Ton formulaire <form onsubmit="return twValideformulaire(this);" action="lapageencasderefus.htm"> 2. Dans la fonction : <script> function twValideformulaire(oForm) { if (confirm("Poursuivre les enregistrements ?")) { // Modifier un champ et rester dans la page oForm.monchamp.value = "..."; return false; } else { // Changer de page pour lapageencasderefus.htm return true; } } </script> Un peu tordu l'affaire ! Si c'est un bouton quelconque : <button onclick="twTest()">Oui/Non</button> 2. Dans la fonction : <script> function twTest() { if (confirm("Poursuivre les enregistrements ?")) { // Modifier un champ et rester dans la page document.getElementById("monchamp").value = "..."; } else { location.href = "nouvellepage.com"; } } </script>
                64x64
                oznog
                Date (GMT) : 2018-06-01 20:40:36 (UTC +0000)
                Date local : Fri Jun 01 2018 16:43:22 GMT-0400


              • Bonjour, moi, je trouve vos pages très "ludiques", félicitation et merci. Eric (NOVICE, 68 ans retraité).
                64x64
                Grognon63
                Date (GMT) : 2019-10-15 03:57:58 (UTC +0000)
                Date local : Tue Oct 15 2019 06:01:22 GMT+0200 (heure d’été d’E

                • Salut tous le monde Je voudrais savoir s'il est possible de créer une boite de dialogue avec une liste déroulante via un script Merci d'avance.
                  64x64
                  naoufal
                  Date (GMT) : 2019-12-05 14:45:22 (UTC +0000)
                  Date local : Thu Dec 05 2019 15:46:41 GMT+0100 (UTC+01:00)
                  • Salut, Non, les boites de dialogue, bien que géré en JavaScript, sont des outils ergonomiques générées par le navigateur et le système d'exploitation. Le contenu HTML est limité voir restreint aux quelques boutons décrits plus haut. La bonne nouvelle, c'est qu'on utilise plus ce type de dialogue au profit de la fenêtre modale. Lire « Fenêtre « modal responsive » en pure CSS3 » (http://www.trucsweb.com/tutoriels/css/css-modal/). Le contenu HTML de cette fenêtre fait partie du DOM (document HTML) et peut donc être manipulé en JavaScript comme n'importe qu'elle composante d'une page Web. Exemple : <div id="MaFenetreModale"> ... </div> <script> document.getElementById("MaFenetreModale").innerHTML = "[Contenu HTML comme une liste déroulante]"; </script>
                    64x64
                    oznog
                    Date (GMT) : 2019-12-05 15:07:15 (UTC +0000)
                    Date local : Thu Dec 05 2019 10:10:56 GMT-0500 (heure normale d


                  Ajouter un commentaire
                  Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
                  Votre évaluation du tutoriel

                         Visites : 103431 - Pages vues : 152321
                  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

                  .
                  @