oujood.com

JavaScript - les boîtes de dialogue

Les boîtes de dialogue peuvent être utilisés pour sensibiliser, attirer l’attention et alerter, ou pour obtenir confirmation sur n'importe quelle
Dans ce tutoriel, nous allons apprendre à créer des boîtes de dialogue en JavaScript.

Boîtes de dialogue JavaScript: Création de boîtes de dialogue

En JavaScript, vous pouvez créer des boîtes de dialogue ou des fenêtres contextuelles pour interagir avec l'utilisateur. Vous pouvez les utiliser soit pour avertir l'utilisateur, soit pour recueillir ses commentaires avant de poursuivre.

Vous pouvez créer trois types différents de boîtes de dialogue : les boîtes d'alerte, de confirmation et d'invite.

L'apparence de ces boîtes de dialogue est déterminée par les paramètres du système d'exploitation et/ou du navigateur, ils ne peuvent pas être modifiés avec le CSS. En outre, les boîtes de dialogue sont des fenêtres modales ; lorsqu'une boîte de dialogue est affichée, l'exécution du code s'arrête, et ne reprend qu'après avoir quitté la boîte.

Dans la section suivante, nous examinerons en détail chacune de ces boîtes de dialogue.. 

Ces boîtes de dialogue peuvent être utilisés pour sensibiliser, attirer l’attention et alerter, ou pour obtenir confirmation sur n'importe quelle action de la part des utilisateurs  ou pour avoir  des informations que les utilisateurs peuvent fournir.

Ici nous allons voir chaqu'une de ces boîte de dialogue :

Création de boîtes de dialogue d'alerte

Une boîte de dialogue d'alerte est principalement utilisée pour donner un message d'avertissement aux utilisateurs. 

Cette boite d’alerte est générée par la méthode alert().

Par exemple si un champ d'entrée nécessite d'entrer du texte, mais l'utilisateur n'entre pas le texte dans ce champ ou le laisse vide  dans le cadre de la validation, vous pouvez utiliser la boîte alerte pour donner le message d'avertissement comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue d'alerte </title>
           <script">
  <!--
  function boiteAlerte() {
     alert("texte de votre message!");
  }
  //-->
  </script>
  </head>
  <body>
  <p>Cliquer le bouton "voir" pour voir le résultat: </p>
  <form>
  <input type="button" value="voir" onclick="boiteAlerte();" />
  </form>
  </body>
  </html>

 

Néanmoins, une boîte d'alerte peut toujours servir pour des messages plus conviviaux. 

La boîte d'alerte donne seulement le bouton « OK » pour fermer la boite et continuer.

Boîte de dialogue de confirmation

Une boîte de dialogue de confirmation est principalement utilisée pour prendre le consentement de l'utilisateur sur n'importe quelle action. Il affiche une boîte de dialogue avec deux boutons:OK et Annuler.

Si l'utilisateur clique sur le bouton OK, la méthode de fenêtre confirm() retourne true. Si l'utilisateur clique sur le bouton de Cancel confirm() retourne false. Vous pouvez utiliser la boîte de dialogue confirmation comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue de confirmation </title>
           <script">
  <!--
  function verifonfirmation(){
     var retVal = confirm("Voulez vous continuer?");
     if( retVal == true ){
     //ici vous pouvez mettre votre en cas de confirmation
     //moi j'affiche une boite d'alerte
        alert("L'utilisateur veut continuer!");
             return true;
     }else{
     //ici vous pouvez mettre votre en cas de refus
     //moi j'affiche une boite d'alerte
        alert("L'utilisateur ne veut pas continuer!");
             return false;
     }
  }
  //-->
  </script>
  </head>
  <body>
  <p>Cliquer sur le bouton "Voir" pour voir le résultat </p>
  <form>
  <input type="button" value="Voir" onclick="verifonfirmation();" />
  </form>
  </body>
  </html>

 

Boîte de dialogue d'invite

La boîte de dialogue d'invite est très utile quand vous voulez faire apparaître une zone de texte pour obtenir une information de l'utilisateur. Ainsi la boite de dialogue invite  vous permet d’interagir avec l’utilisateur. L’utilisateur doit renseigner le champ, puis cliquez sur OK.

Cette boîte de dialogue s’affiche à l’aide d’une méthode appelée prompt() qui prend deux paramètres

Le premier paramètre permet d’afficher une étiquette ui montre ce que l’utilisateur doit saisir

 Le second paramètre est le texte à afficher par defaut dans la zone de texte.

Cette boîte de dialogue a deux boutons : OK et Annuler. Si l’utilisateur clique sur le bouton OK, la méthode  prompt() retournera la valeur entrée dans la zone de texte. Si l’utilisateur clique sur le bouton Annuler la méthode de fenêtre prompt() retourne null.

Vous pouvez utiliser la boîte de dialogue d’invite comme suit :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title>Exemple Boîte de dialogue d'invite </title>
           <script">
  function getValue(){
     var Valeur = prompt("Raisissez votre nom : ", "votre nom ici");
     //ici vous pouvez mettre votre code
     //moi j'affiche une boite d'alerte
     alert("Vous aves entrer : " +  Valeur );
  }
  </script>
  </head>
  <body>
  <p>Cliquer sur le bouton "voir" pour voir le résultat: </p>
  <form>
  <input type="button" value="Voir" onclick="getValue();" />
  </form>
  </body>
  </html>

 

chapitre précédent

sommaire

chapitre suivant

Par carabde 30 mars 2014

Trafic Booster
hebergement web


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction strtolower, strtolower

Renvoie une chaîne en minuscules

Les boucles while javaScript

Les boucles while js : La boucle While exécute un bloc de code spécifié un nombre de fois , tant que la condition spécifié est vrais (true).

right

Définit le bord de la marge droite d'une boîte placée



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci