Lesson 3: JavaScript Dialog

Learn how to create alert, confirm, and prompt dialogs with interactive examples and real-world applications.

❮ Previous Lesson Next Lesson: Variables ❯

3.1 Introduction to JavaScript Dialogs

JavaScript popup dialogs are used to communicate with users, request input, or confirm actions. There are three main types:

Alert Dialog

Displays a message to the user with an OK button. Used for informational messages.

Confirm Dialog

Asks user to confirm an action with OK and Cancel buttons. Returns true or false.

Result will appear here

Prompt Dialog

Requests input from the user with a text field. Returns the entered value or null.

Result will appear here
Important: Dialogs are modal - they pause JavaScript execution until the user responds. Overuse can disrupt user experience.

3.2 Alert Dialog

The window.alert() method displays a simple message dialog with an OK button. It's useful for showing important information that requires user acknowledgment.

Basic Syntax

window.alert(message);

Example 3.1: Simple Alert

<script>
window.alert("Welcome to JavaScript Tutorial");
</script>

Click the button to see the alert dialog:

Multi-line Alerts

You can create multi-line alerts using the \n newline character:

window.alert("Welcome to\nJavaScript\nTutorial");

Click the button to see a multi-line alert:

Note: Alert dialogs are synchronous and block further script execution until dismissed. Use them sparingly in production code.

3.3 Confirm Dialog

The window.confirm() method displays a dialog with a message, an OK button, and a Cancel button. It returns true if OK is clicked and false if Cancel is clicked.

Basic Syntax

let result = window.confirm(message);

Example 3.2: Basic Confirmation

<script>
let deleteConfirmed = window.confirm("Are you sure you want to delete this item?");
if (deleteConfirmed) {
    // Delete the item
    document.write("Item deleted!");
} else {
    // Cancel deletion
    document.write("Deletion canceled.");
}
</script>

Interactive Demo

Try the confirmation dialog:

Result will appear here after confirmation

Real-world Application

Confirm dialogs are commonly used for critical actions like:

  • Deleting items
  • Confirming purchases
  • Leaving a page with unsaved changes

3.4 Prompt Dialog

The window.prompt() method displays a dialog that prompts the user for input. It returns the entered text as a string or null if the user cancels.

Basic Syntax

let userInput = window.prompt(message, defaultText);

Example 3.3: Basic Prompt

<script>
let userName = window.prompt("Please enter your name:", "Guest");
if (userName !== null) {
    document.write("Hello, " + userName + "!");
} else {
    document.write("User canceled the prompt.");
}
</script>

Interactive Demo

Try the prompt dialog:

Result will appear here after input

Real-world Application

Prompt dialogs are useful for:

  • Collecting user information
  • Asking for preferences
  • Getting input for calculations
  • Requesting confirmation codes
Security Note: Avoid using prompt dialogs for sensitive information like passwords, as the input is visible and not secure.

3.5 Advanced Dialog Demos

Combine what you've learned with more complex examples.

User Greeting System

<script>
// Ask for user's name
let name = prompt("What's your name?", "Guest");

// Confirm if name is correct
if (name) {
    let confirmed = confirm("Is " + name + " your correct name?");
    
    if (confirmed) {
        // Get current hour
        let hour = new Date().getHours();
        let greeting;
        
        if (hour < 12) greeting = "Good morning";
        else if (hour < 18) greeting = "Good afternoon";
        else greeting = "Good evening";
        
        // Show final greeting
        alert(greeting + ", " + name + "! Welcome to our site.");
    } else {
        alert("Please refresh the page to enter your name again.");
    }
} else {
    alert("Welcome, Guest!");
}
</script>

Try the Greeting System

Simple Calculator

<script>
let num1 = parseFloat(prompt("Enter first number:", "0"));
let num2 = parseFloat(prompt("Enter second number:", "0"));
let operation = prompt("Choose operation (add, subtract, multiply, divide):", "add");

if (isNaN(num1) || isNaN(num2)) {
    alert("Please enter valid numbers!");
} else {
    let result;
    switch(operation.toLowerCase()) {
        case "add":
            result = num1 + num2;
            break;
        case "subtract":
            result = num1 - num2;
            break;
        case "multiply":
            result = num1 * num2;
            break;
        case "divide":
            if (num2 === 0) {
                result = "Cannot divide by zero!";
            } else {
                result = num1 / num2;
            }
            break;
        default:
            result = "Invalid operation!";
    }
    
    alert(`Result: ${result}`);
}
</script>

Try the Calculator

❮ Previous Lesson Next Lesson: Variables ❯