Lesson 13: Mastering JavaScript Prompt, Alert and confirm with challenges!

🧠 1. alert(message)

✅ What it is:

• A built-in browser method to display a modal message box.

• It halts the script execution until the user presses “OK”.

🔹 Syntax:

alert("Hello world!");

🔍 Behavior:

• Displays a dialog box with a message and an OK button.

• The function returns undefined.

• Prevents interaction with the rest of the page (modal behavior).

🔎 Use Cases:

• Quick debugging: alert(variable)

• Informing users: “Your data has been saved.”

• Teaching/learning tools

⚠️ Limitations:

• Blocks execution until dismissed — not ideal for UX.

• Cannot be styled or repositioned — browser-controlled UI.

---

🧠 2. prompt(title, [default])

✅ What it is:

• A built-in function to ask for user input via a modal dialog box.

🔹 Syntax:

let result = prompt("What is your name?", "John");

🔍 Behavior:

• Displays a text box with a message and input field.

• Returns:

  • the input string if OK is pressed,

  • null if Cancel is clicked or Esc is pressed.

🧪 Example:

let age = prompt("Enter your age", 18);
if (age !== null) {
  alert(`You entered: ${age}`);
} else {
  alert("Input was canceled.");
}

⚙️ Internals:

• Converts everything typed into a string. No auto-type conversion.

    typeof prompt(...) === "string"
  

📉 Edge Cases:

• Hitting Cancel returns null, not an empty string.

• Supplying undefined as the second argument in Internet Explorer inserts the string "undefined" in the input box.

  • Always use a fallback default:

      prompt("Enter something", "") // ✅ safer for IE
    

---

🧠 3. confirm(question)

✅ What it is:

• A built-in modal to ask a Yes/No (OK/Cancel) type question.

🔹 Syntax:

let isAdult = confirm("Are you 18 or older?");

🔍 Behavior:

• Shows OK and Cancel buttons.

• Returns:

  • true → if OK is clicked

  • false → if Cancel or Esc is clicked

🧪 Example:

if (confirm("Do you want to delete this file?")) {
  alert("Deleted");
} else {
  alert("Cancelled");
}

---

🧩 Important Traits of All Three:

---

🎯 Real-World Scenarios:

---

💡 Modal Nature: Why It Matters

When you use any of these methods, the JS engine pauses execution until the modal is closed. For example:

alert("Step 1");
alert("Step 2");

The second alert will not show until the user closes the first one.

---

🧨 Drawbacks (Why They’re Rarely Used in Production)

• Blocking UI = Bad user experience.

• Not stylable → inconsistent across browsers and OS.

• No async support → can't be used nicely with await.

✅ Instead, use:

• Custom modal dialogs (HTML/CSS/JS)

• UI libraries (e.g., SweetAlert2, Bootstrap Modals)

---

❓Interview Insight

Q: What's the difference between prompt() and confirm()? A:

• prompt() asks for text input, returns a string or null.

• confirm() asks for binary decision, returns a boolean.

Q: What does this return?

let x = prompt("Enter number") + 5;

A: If user enters 2, x is "25" because prompt() always returns a string. Need to cast:

let x = Number(prompt("Enter number")) + 5;

---

🧰 Pro Tips:

1. Always cast prompt input to number/string/boolean as needed.

2. Don’t rely on them for long-term UX — use real modals.

3. Never assume prompt won’t return null. Always guard against it:

    let input = prompt("Enter age");
    if (input !== null) {
      // process
    }