Apprendre les fonctions JavaScript pour les boîtes de dialogue

Je suis un développeur de logiciels avec un grand intérêt pour l’analyse de données et les statistiques.

Comment et quand utiliser les boîtes de dialogue Javascript

Dans le développement Web moderne, nous n’utilisons pas souvent les boîtes de dialogue. En effet, cliquer sur une boîte de dialogue peut devenir ennuyeux et nous ne contrôlons pas vraiment leur apparence.

Vous vous souvenez probablement encore qu’ils étaient utilisés partout, et si c’est le cas, vous savez également qu’ils étaient souvent utilisés sur des sites Web très spammés et ennuyeux.

De nos jours, les sites Web ont souvent l’air vraiment sympas et personnalisés, donc avoir des boîtes contextuelles qui ont l’air vieux et différent de la conception globale est un gros désagrément.

Ils peuvent toujours être utiles aux personnes novices en développement Web pour expérimenter l’interactivité. Ou lorsque nous voulons simplement tester quelque chose, obtenir des informations et tester un flux de contrôle. Par exemple, que se passe-t-il dans le code si un certain utilisateur appuie sur ceci ou saisit cela ? Bien sûr, nous avons de meilleures façons de tester le code, mais c’est là si nous voulons l’utiliser pour une petite expérience.

Dans cet article, nous aborderons ces fonctions de la boîte de dialogue du navigateur :

• fonction d’alerte
• fonction d’invite
• fonction de confirmation

Alerte JavaScript

La fonction d’alerte créera une boîte de dialogue d’alerte ou d’avertissement qui apparaîtra dans notre navigateur avec le texte que nous avons fourni. Dans le passé, cela pouvait être utilisé pour montrer un message à l’utilisateur. Il peut s’agir d’un avertissement de validation, d’erreurs ou simplement d’informations générales pour l’utilisateur. Si vous exécutez le code ci-dessous dans la console de votre navigateur, vous obtiendrez une boîte de dialogue contextuelle.

Faites défiler pour continuer

La fonction d’alerte prend un argument de chaîne, le message que vous voulez montrer à l’utilisateur. Nous pouvons choisir de ne pas donner cet argument (c’est facultatif), mais cela rendrait l’alerte inutile pour l’utilisateur. La boîte de dialogue d’alerte comporte un bouton sous le message. C’est juste le bouton ‘OK’, lorsque vous appuyez dessus, le message d’alerte disparaît.

alert("This is my message to you!");

Ceci est un exemple de page HTML avec un bouton. Créez un nouveau fichier HTML et le code source. Ouvrez le fichier .html avec votre navigateur. Lorsque vous appuyez sur le bouton, mon message apparaît.

Invite JavaScript

L’invite est utile pour obtenir l’entrée de l’utilisateur. Lorsque nous voulons que l’utilisateur nous donne un nom, une réponse à une question ou nous donne une commande au format chaîne. Nous pouvons lire cette entrée dans notre code et faire des choses avec.

Si l’utilisateur saisit des nombres, nous pourrions les analyser et faire des calculs. S’il a saisi un e-mail, nous pourrions le stocker et envoyer un e-mail plus tard. Si l’utilisateur saisit une commande, basée sur certaines options que nous avons données, nous pourrions prendre une décision en fonction de la réponse.

La fonction prompt prend deux arguments, le premier est la question ou le message à l’utilisateur. La deuxième chaîne facultative est l’espace réservé pour le champ dans lequel nous pouvons entrer notre réponse.

Il y a deux boutons dans la boîte de dialogue d’invite, ‘OK’ et ‘ANNULER’, ‘OK’ renverra le message que vous avez entré à la fonction. Si ce champ de message était vide, une chaîne vide «  » est renvoyée. ‘ANNULER’ fermera simplement la boîte de dialogue et renverra la valeur nulle à la fonction d’invite.

let age = prompt("Enter you age:", "enter your age in digits here");
console.log("You are " + age " years old.")

Confirmation

Nous pouvons utiliser la boîte de dialogue de confirmation pour la prise de décision. C’est le type de prise de décision binaire oui ou non. Voulez-vous décider oui, puis appuyez sur ‘OK’, sinon, appuyez sur ‘ANNULER’.

Si l’utilisateur appuie sur le bouton ‘OK’ true est renvoyé par la fonction de confirmation. Nous pouvons donner à la fonction un message de chaîne à montrer à l’utilisateur. Si l’utilisateur choisit ‘CANCEL’ alors false sera renvoyé. Avec ces booléens renvoyés, une logique supplémentaire peut être appliquée.

let response = confirm("Are you an alien?");
if (response)
    console.log("Welcome to earth!");
else
    console.log("Well guess it's only 1 in a thousand that are.");

Ce contenu est exact et fidèle au meilleur de la connaissance de l’auteur et ne vise pas à remplacer les conseils formels et individualisés d’un professionnel qualifié.

© 2021 Sam Shepards