Lesson guide

Learning objectives

  • Explain the main purpose of Interaction: alert, prompt, confirm in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in JavaScript Fundamentals.

Real-world context

This lesson matters when you need to recognize where Interaction: alert, prompt, confirm fits into real JavaScript programs. As we’ll be using the browser as our demo environment, let’s see a couple of functions to interact with the user: , and .

Key ideas

  • Interaction: alert, prompt, confirm is part of the JavaScript Fundamentals chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Interaction: alert, prompt, confirm
  • Interaction
  • alert
  • prompt
  • confirm

As we’ll be using the browser as our demo environment, let’s see a couple of functions to interact with the user: alert, prompt and confirm.

alert

This one we’ve seen already. It shows a message and waits for the user to press “OK”.

For example:

javascript
alert("Hello");

The mini-window with the message is called a modal window. The word “modal” means that the visitor can’t interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case – until they press “OK”.

prompt

The function prompt accepts two arguments:

javascript
result = prompt(title, [default]);

It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel.

titleThe text to show the visitor.defaultAn optional second parameter, the initial value for the input field.

The square brackets in syntax [...]

The square brackets around default in the syntax above denote that the parameter is optional, not required.

The visitor can type something in the prompt input field and press OK. Then we get that text in the result. Or they can cancel the input by pressing Cancel or hitting the Esc key, then we get null as the result.

The call to prompt returns the text from the input field or null if the input was canceled.

For instance:

javascript
let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

In IE: always supply a default

The second parameter is optional, but if we don’t supply it, Internet Explorer will insert the text "undefined" into the prompt.

Run this code in Internet Explorer to see:

javascript
let test = prompt("Test");

So, for prompts to look good in IE, we recommend always providing the second argument:

javascript
let test = prompt("Test", ''); // <-- for IE

confirm

The syntax:

javascript
result = confirm(question);

The function confirm shows a modal window with a question and two buttons: OK and Cancel.

The result is true if OK is pressed and false otherwise.

For example:

javascript
let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

Common mistakes

  • Skipping the small examples and then missing the exact rule that Interaction: alert, prompt, confirm depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

We covered 3 browser-specific functions to interact with visitors:

alertshows a message.promptshows a message asking the user to input text. It returns the text or, if Cancel button or Esc is clicked, null.confirmshows a message and waits for the user to press “OK” or “Cancel”. It returns true for OK and false for Cancel/ Esc.

All these methods are modal: they pause script execution and don’t allow the visitor to interact with the rest of the page until the window has been dismissed.

There are two limitations shared by all the methods above:

  1. The exact location of the modal window is determined by the browser. Usually, it’s in the center.
  2. The exact look of the window also depends on the browser. We can’t modify it.

That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if “bells and whistles” do not matter much, these methods work just fine.

Predict

Before running this check, predict the three output lines. Focus on what each browser dialog gives back to the script: alert pauses without returning user input, prompt returns text or null, and confirm returns a boolean.

javascript
Reveal explanation

The output is typed: Ada, then canceled: null, then confirmed: false. This mirrors the real browser APIs without opening modal windows in the runner: a completed prompt gives the typed string, a canceled prompt gives null, and confirm gives true only for OK and false for Cancel or Esc. alert is different because it only shows a message and waits; it does not collect a value for later code.

Try it

Change readPrompt("", true) to readPrompt("Guest", false) and readConfirm(false) to readConfirm(true), then predict which two output lines change. This is the same decision tree you need when handling real visitor input.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Interaction: alert, prompt, confirm in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Type Conversions when you are ready for the next lesson.