JavaScript alert, prompt et confirm
Apprenez les fonctions interactives de JavaScript : alert() pour afficher un message, prompt() pour saisir du texte (retourne une string ou null) et confirm() pour une décision oui/non (retourne un boolean).
Introduction aux fonctions interactives de JavaScript
Ce chapitre présente les trois fonctions intégrées que le navigateur met à votre disposition pour communiquer directement avec un utilisateur — alert, prompt et confirm — ainsi que console.log pour la journalisation pendant le développement. Si vous débutez, ce sont les moyens les plus simples de rendre une page réactive aux actions de l'utilisateur, ce qui explique pourquoi presque toutes les introductions à JavaScript commencent par alert.
Ces trois fonctions sont des méthodes de l'objet global window, donc window.alert(...) et alert(...) sont équivalents. Deux propriétés essentielles à comprendre avant de les utiliser :
- Elles sont modales. Chacune ouvre une petite boîte de dialogue du navigateur qui s'affiche au-dessus de la page. L'utilisateur ne peut interagir avec rien d'autre sur la page tant qu'il ne l'a pas fermée.
- Elles sont synchrones et bloquantes. La ligne de code qui les appelle ne se termine pas tant que l'utilisateur n'a pas répondu. Tout le thread JavaScript est mis en pause — aucune minuterie ne se déclenche, aucun rendu ne s'effectue, rien ne s'exécute en arrière-plan. C'est pourquoi elles sont idéales pour l'apprentissage rapide et les démonstrations, mais peu adaptées aux applications de production soignées.
Le navigateur étant responsable du rendu de ces boîtes de dialogue, il est impossible de les styliser, de les positionner ou de modifier leurs étiquettes de boutons. Pour de véritables interfaces produit, vous les remplacerez éventuellement par des composants modaux personnalisés (voir la conclusion), mais pour apprendre le langage, elles sont parfaites.
JavaScript Alert : gérer les notifications utilisateur
Le rôle de alert()
La fonction alert() affiche une boîte de dialogue simple avec un message et un unique bouton OK. Elle retourne undefined — son seul rôle est d'afficher le message, sans vous retourner de valeur.
Syntaxe et utilisation
La syntaxe est simplement alert(message). Le message est converti en string, vous pouvez donc passer des nombres, des booléens, voire des objets (les objets s'affichent sous la forme [object Object], ce qui est rarement ce que vous souhaitez).
L'utilisateur doit cliquer sur OK (ou appuyer sur Entrée / Échap) pour continuer. Dans l'intervalle, la page est figée, ce qui fait de alert() un bon choix pour afficher un message unique et important que l'utilisateur doit reconnaître.
Bien qu'utile, la boîte d'alerte doit être utilisée avec parcimonie. En abuser peut nuire à l'expérience utilisateur, car elle bloque toute interaction avec le reste de la page jusqu'à ce qu'elle soit fermée.
JavaScript Prompt : solliciter la saisie de l'utilisateur
Comprendre prompt()
La méthode prompt() affiche une boîte de dialogue avec un message, un champ de saisie texte et des boutons OK / Annuler. Utilisez-la lorsque vous avez besoin d'un seul texte de la part de l'utilisateur avant de continuer.
Syntaxe et utilisation
prompt(message, default) prend deux arguments :
message— le texte affiché au-dessus du champ de saisie.default— facultatif. Le texte qui pré-remplit le champ de saisie. Passez une string vide""si vous voulez que le champ soit vide au départ ; si vous l'omettez entièrement, certains navigateurs affichent le mot littéralundefineddans le champ, il est donc toujours préférable de fournir une valeur par défaut explicite.
Gérer les réponses de l'utilisateur
La valeur de retour de prompt() est l'élément essentiel à maîtriser :
- Si l'utilisateur clique sur OK, vous obtenez le texte du champ de saisie sous forme de string (une string vide
""s'il a effacé le contenu et cliqué sur OK). - Si l'utilisateur clique sur Annuler ou appuie sur Échap, vous obtenez
null.
Comme le résultat peut être une string ou null, vérifiez toujours avant de l'utiliser. C'est l'endroit idéal pour les opérateurs conditionnels que vous avez appris :
prompt() retourne toujours une string, jamais un nombre. Si vous demandez un nombre, la valeur "7" reste du texte — "7" + 1 produit "71", pas 8. Convertissez-la d'abord avec Number(value) ou parseInt(value, 10) avant d'effectuer des calculs.
JavaScript Confirm : prendre des décisions
La méthode confirm()
confirm() affiche une boîte de dialogue avec un message et deux boutons, OK et Annuler. Utilisez-la pour poser une simple question oui/non.
Syntaxe et utilisation
confirm(message) prend un argument et retourne un boolean : true si l'utilisateur clique sur OK, et false s'il clique sur Annuler ou appuie sur Échap. Le résultat étant déjà un boolean, vous pouvez l'utiliser directement dans une instruction if.
Considérations sur les cas d'utilisation
Notez la différence avec prompt() : il n'y a pas d'état « manquant ». confirm() ne peut retourner que true ou false — Annuler et Échap correspondent tous deux à false. Comme alert(), elle bloque le reste de la page jusqu'à ce que l'utilisateur réponde ; réservez-la donc aux véritables décisions (« Supprimer cet élément ? ») plutôt qu'aux confirmations de routine.
JavaScript Console.log : débogage et journalisation
Explorer console.log()
console.log() est un outil fondamental en JavaScript pour le débogage et la journalisation d'informations dans la console du navigateur.
Syntaxe et exemples
Cette méthode peut afficher des strings, des nombres, des objets et bien plus, ce qui la rend indispensable à des fins de test et de débogage.
console.log() est un moyen non intrusif de vérifier l'état de votre code, sans affecter l'expérience de l'utilisateur sur la page web. C'est un outil essentiel pour tout développeur JavaScript.
Conclusion : améliorer l'interactivité web avec JavaScript
Ces quatre fonctions sont le moyen le plus simple de rendre une page interactive pendant l'apprentissage. Voici un récapitulatif de leurs valeurs de retour — le détail sur lequel les débutants trébuchent le plus :
| Fonction | Affiche | Retourne |
|---|---|---|
alert(message) | Un message + OK | undefined |
prompt(message, default) | Un message, un champ de saisie, OK/Annuler | la string saisie, ou null en cas d'annulation |
confirm(message) | Un message + OK/Annuler | un boolean (true/false) |
Les trois bloquant le thread principal et ne pouvant être stylisées, les applications réelles les remplacent par des composants modaux personnalisés construits en HTML et CSS. Mais pour expérimenter avec le langage, elles sont idéales. Une prochaine étape naturelle consiste à encapsuler ce type d'interaction dans vos propres fonctions JavaScript réutilisables et à brancher sur la réponse de l'utilisateur avec les opérateurs conditionnels.