Dialog boxes: Alert, confirm, prompt

📖 Theory

The page needs to ask and tell

FestConnect wants to tell a student 'Email is missing', ask 'Register for 2 events, are you sure?', and request 'Enter your coupon code'. Three different conversations: a notice, a yes/no, and a text request.

JavaScript has a built-in popup for each: alert, confirm, and prompt. They are quick to use, but the important thing is what each one gives back, because that return value is how your code knows what the user did.

📖 Theory

Notice, doorbell, guestbook

Three ways a shop talks to a visitor. A notice on the wall just informs ('closed on Sunday'): that is alert. A doorbell with yes/no ('shall I let them in?'): that is confirm, it comes back true or false. A guestbook where they write their name: that is prompt, it comes back with whatever they wrote, or nothing if they walk away.

📖 Theory

The three dialogs and their returns

• `alert(msg)`: shows a message and an OK button. Returns nothing (undefined). For notices and errors.
• `confirm(question)`: shows OK and Cancel. Returns `true` (OK) or `false` (Cancel). Test it in an if.
• `prompt(question, default)`: shows a text box. Returns the string typed, or `null` if the user cancels.

All three pause the page until the user responds. The return value is everything: it tells your code what happened.

⌨️ Practical

FestConnect asks and tells

// alert: just inform (no return used)
alert("Email is missing an @");

// confirm: returns true/false
let sure = confirm("Register for 2 events?");
if (sure) {
  console.log("proceeding...");
} else {
  console.log("cancelled");
}

// prompt: returns the string, or null if cancelled
let code = prompt("Enter coupon code (optional):", "");
if (code === null) {
  console.log("no coupon entered");
} else {
  console.log("coupon: " + code);
}

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

What comes back?

For each, say the return value: (a) the user clicks Cancel on a confirm; (b) the user clicks Cancel on a prompt; (c) the user clicks OK on an alert. Then say why testing a prompt's result with just if (code) can be risky.

🧩 Quiz

You write `if (confirm("Delete registration?")) deleteIt();`. When does deleteIt() run?

1. Only when the user clicks OK, because confirm returns true then
2. Every time, because confirm always returns true
3. Only when the user clicks Cancel
4. Never, because confirm cannot be used in an if

⚠️ Watch out

Dialog traps

1. confirm returns a boolean, prompt returns a string or null. Do not treat a prompt result as true/false, and always check === null before using it.

2. prompt of a number is still text: prompt('Age?') gives "20", a string. Convert with Number(...) before doing maths.

3. They block the page: everything pauses until dismissed, so avoid them in loops. Real products use custom modals, but exams test these three.

📖 Theory

These report validation results

In the next two lessons, when FestConnect validation finds a blank field or a bad email, it will alert the exact problem, and it might confirm before a final submit. Dialogs are the simplest way to surface a validation message while you learn. The return values you mastered here (true/false, string/null) are how the calling code reacts to the user's choice.

✅ Summary

Key takeaways

• alert(msg) shows a notice and returns nothing (undefined).
• confirm(question) shows OK/Cancel and returns true or false: test it in an if.
• prompt(question, default) shows a text box and returns the typed string, or null if cancelled.
• A cleared prompt returns "" (falsy), so check === null to detect cancel specifically.
• prompt values are strings; convert numbers with Number(). All three pause the page.
• Memory hook: notice (alert), doorbell yes/no (confirm), guestbook (prompt).