Ce tuto JavaScript pour débutant vous explique comment interagir avec l’utilisateur. Nous verrons comment afficher des boîtes de dialogue pour afficher des messages, demander des informations auprès de l’utilisateur ou encore pour confirmer ou annuler une action.
Bienvenue dans ce tutoriel JavaScript dans lequel nous allons apprendre comment interagir avec l’utilisateur à travers de petites boîtes de dialogue que nous pouvons créer en JavaScript. Nous allons commencer par une boîte de dialogue que vous connaissez déjà si vous avez suivi nos vidéos précédentes : la fonction alert.
La Boîte de Dialogue « alert »
Afficher un Message
La fonction alert permet d’afficher un message à l’utilisateur. Pour cela, nous utilisons une chaîne de caractères entre guillemets.
alert("Bienvenue dans le cours de JavaScript");Lorsque nous exécutons ce code, une boîte de dialogue s’affiche avec le message « Bienvenue dans le cours de JavaScript ».
Utiliser une Variable
Au lieu de mettre directement une chaîne de caractères dans la fonction alert, nous pouvons également utiliser une variable. Par exemple :
let message = "Bienvenue dans le cours de JavaScript";
alert(message);En exécutant ce code, nous obtenons le même résultat : la boîte de dialogue affiche « Bienvenue dans le cours de JavaScript ». Nous pouvons également utiliser des nombres ou tout autre type de variable dans alert.
La Boîte de Dialogue « prompt »
Demander une Entrée Utilisateur
La boîte de dialogue prompt permet de demander une information à l’utilisateur. Par exemple, pour demander le prénom de l’utilisateur :
prompt("Saisissez votre prénom");Lorsque ce code est exécuté, une boîte de dialogue s’affiche, demandant à l’utilisateur de saisir son prénom et de valider ou annuler l’action.
Récupérer et Afficher l’Entrée
Pour récupérer la valeur saisie par l’utilisateur, nous déclarons une variable et affectons la réponse de l’utilisateur à cette variable :
let prenom = prompt("Saisissez votre prénom");
console.log(prenom);Si l’utilisateur clique sur « Annuler », la variable prenom sera null. Sinon, elle contiendra le prénom saisi.
La Boîte de Dialogue « confirm »
Demander une Confirmation
La boîte de dialogue confirm permet de demander à l’utilisateur de confirmer une action, comme par exemple la suppression d’un fichier :
confirm("Souhaitez-vous supprimer le fichier ?");Cette boîte de dialogue affiche deux boutons : OK et Annuler.
Récupérer et Afficher la Confirmation
Nous pouvons déclarer une variable pour récupérer la réponse de l’utilisateur (true pour OK, false pour Annuler) et afficher cette réponse dans la console :
let validation = confirm("Souhaitez-vous supprimer le fichier ?");
console.log(validation);En fonction de la réponse de l’utilisateur, nous pouvons effectuer différentes actions dans notre code.
Conclusion
Voilà, nous avons vu trois types de boîtes de dialogue en JavaScript : alert, prompt et confirm. Ces boîtes de dialogue sont des outils simples mais puissants pour interagir avec l’utilisateur, que ce soit pour afficher un message, demander une information ou confirmer une action. J’espère que cette vidéo vous a aidé à mieux comprendre leur utilisation. À très bientôt pour une prochaine vidéo !
