📘 Chapitre 8 – Interaction avec l’utilisateur

1. 🎯 Objectif pédagogique

Savoir interagir directement avec l’utilisateur à travers des messages, alertes et saisies, en utilisant les fonctions intégrées (alert, prompt, confirm) et la manipulation dynamique du DOM.

2. 📚 Concepts abordés

  • Boîtes de dialogue : alert, prompt, confirm
  • Récupération des données saisies par l’utilisateur
  • Utilisation des données pour modifier le DOM
  • Amélioration de l’interactivité avec des messages personnalisés

3. 🧠 Explication théorique

JavaScript fournit des boîtes de dialogue natives pour communiquer rapidement avec l’utilisateur :

  • alert("Message") : affiche un message d’information.
  • prompt("Texte") : demande une saisie à l’utilisateur et retourne la valeur entrée.
  • confirm("Question") : demande une validation (OK/Annuler) et retourne true ou false.

Exemple :

let nom = prompt("Quel est votre prénom ?");
alert("Bonjour, " + nom + " !");

4. 🛠 Tutoriel pratique

Résumé

Nous allons demander le nom de l’utilisateur et afficher un message de bienvenue dynamique dans la page.

Arborescence du projet 

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Interaction avec l'utilisateur</title>
</head>
<body>
  <h1 id="message">Bienvenue !</h1>
  <button id="btn-start">Personnaliser le message</button>

  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript 

let bouton = document.getElementById("btn-start");
let message = document.getElementById("message");

bouton.addEventListener("click", function() {
  let nom = prompt("Quel est votre prénom ?");
  if (nom) {
    message.innerText = "Bonjour, " + nom + " !";
  } else {
    alert("Aucun nom saisi !");
  }
});

Étape 3 : Test

Ouvre la page, clique sur le bouton et saisis un prénom. Le message de bienvenue sera mis à jour.

5. 🧾 Résumé et points-clés

  • alert, prompt et confirm sont des fonctions intégrées simples pour interagir rapidement avec l’utilisateur.
  • Les valeurs saisies peuvent être utilisées pour personnaliser le contenu de la page.
  • Les interactions directes améliorent l’expérience utilisateur.