JavaScript - La saisie utilisateur

prompt() — demander une valeur

prompt() ouvre une petite boîte de dialogue avec un champ de saisie. Quand l'utilisateur valide, la fonction renvoie ce qu'il a tapé.

let nom = prompt("Quel est ton prénom ?");
console.log(`Bonjour ${nom}`);

On peut aussi proposer une valeur par défaut en deuxième argument :

let pseudo = prompt("Ton pseudo ?", "Anonyme");

Si l'utilisateur clique sur Annuler, prompt() renvoie null. On peut tester :

let nom = prompt("Ton prénom ?");

if (nom === null) {
    console.log("Saisie annulée");
} else if (nom === "") {
    console.log("Saisie vide");
} else {
    console.log(`Bonjour ${nom}`);
}

Le piège : prompt renvoie toujours un texte

C'est le bug qui surprend tout le monde au début.

let nombre = prompt("Donne un nombre :");
// L'utilisateur tape : 5

console.log(nombre + 3);
// Affiche : "53"  (et non 8)

Pourquoi ? Parce que nombre contient le texte "5", pas le nombre 5. Et avec l'opérateur +, JavaScript préfère concaténer quand au moins un côté est du texte : "5" + 3 donne "53".

Convertir en nombre

Trois outils, à choisir selon le contexte.

parseInt() — nombre entier

Lit le texte caractère par caractère jusqu'au premier qui n'est pas un chiffre. Idéal pour les âges, scores, quantités…

let age = parseInt(prompt("Ton âge ?"));
// "16"   → 16
// "16.7" → 16     (la partie décimale est ignorée)
// "16ab" → 16     (s'arrête au premier non-chiffre)
// "abc"  → NaN    (Not a Number)

parseFloat() — nombre décimal

Pareil mais accepte le point décimal.

let prix = parseFloat(prompt("Prix en euros ?"));
// "9.99"  → 9.99
// "9,99"  → 9        (la virgule arrête la lecture — attention !)
// "abc"   → NaN

Number() — strict

Plus exigeant : il faut que tout le texte soit un nombre, sinon NaN.

Number("16")      // 16
Number("16.7")    // 16.7
Number("16ab")    // NaN   (≠ parseInt, qui aurait renvoyé 16)
Number("")        // 0     (cas un peu surprenant)

Pour la plupart des cas pédagogiques, parseInt et parseFloat suffisent.

NaN — le résultat des conversions ratées

Quand on essaie de convertir un texte qui n'a rien de numérique, on obtient NaN (Not a Number). C'est techniquement un nombre, mais qui propage l'erreur dans tous les calculs.

let age = parseInt("salut");
console.log(age);          // NaN
console.log(age + 10);     // NaN
console.log(age * 2);      // NaN

On teste avec isNaN() :

let age = parseInt(prompt("Ton âge ?"));

if (isNaN(age)) {
    alert("Ce n'est pas un nombre valide.");
} else {
    alert(`Tu as ${age} ans.`);
}

Bonne pratique : toujours vérifier que la conversion a marché avant d'utiliser le résultat.

Pattern complet : saisie sécurisée

Le pattern classique combine prompt + conversion + validation :

let age = parseInt(prompt("Ton âge ?"));

if (isNaN(age) || age < 0 || age > 120) {
    alert("Âge invalide.");
} else {
    alert(`Tu as ${age} ans.`);
}

Si tu veux boucler tant que la saisie n'est pas valide, c'est typiquement le rôle d'un while :

let age;

do {
    age = parseInt(prompt("Ton âge ?"));
} while (isNaN(age) || age < 0 || age > 120);

alert(`Tu as ${age} ans.`);

Autres méthodes : alert et confirm

prompt a deux cousines plus simples.

alert() — afficher un message

alert("Bienvenue !");

Ne renvoie rien d'utile. Sert juste à afficher.

confirm() — demander oui/non

let veutContinuer = confirm("Veux-tu continuer ?");

if (veutContinuer) {
    console.log("OK, on continue");
} else {
    console.log("Abandon");
}

Renvoie true si OK, false si Annuler. Pratique pour les questions binaires.

Limites de prompt

prompt() est parfait pour apprendre, mais en pratique, on l'utilise rarement sur un vrai site :

• Apparence figée — impossible à styler avec du CSS.
• Bloquant — la page se gèle tant que l'utilisateur n'a pas répondu.
• Mauvais pour mobile — l'expérience est dégradée.

Sur un vrai site, on utilise des champs <input> dans un formulaire HTML. On lit leur valeur avec document.getElementById("monChamp").value. Mais ça, c'est l'étape suivante.

À retenir

• prompt("question") ouvre une boîte de saisie et renvoie ce que tape l'utilisateur.
• Le résultat est toujours un string, même "42" n'est pas le nombre 42.
• parseInt(texte) pour un entier, parseFloat(texte) pour un décimal.
• isNaN(valeur) vérifie si la conversion a échoué — toujours tester avant d'utiliser.
• alert("message") pour afficher, confirm("question") pour oui/non.
• prompt est un outil d'apprentissage. Sur un vrai site : des champs <input> HTML.