User interaction: alert, prompt and confirm

  1. alert
  2. prompt
  3. confirm
  4. Summary

The basic UI operations are alert, prompt and confirm.

alert

The syntax:

alert(message)

alert outputs a window with the message and stops execution until visitor presses “OK” button.

The message window is called a modal window. The word “modal” means that page interface is suspended until “OK” is clicked. A visitor can’t do anything until he clicks “OK”.

alert("Test me");

prompt

This method accepts two arguments:

result = prompt(text[, default]);

It outputs a modal window with the text, OK/CANCEL buttons and input field.

prompt returns either a string (maybe empty) or null.

The result depends on user’s action. There are three options:

  1. If user types something into field and presses OK, then user text is the result.
  2. If user types nothing, but presses OK, then the result is default.
  3. If user presses CANCEL (or keyboard Escape), then result is null.

As with alert, the window is modal, user can’t do anything until he presses one of two buttons (or Escape which is same as CANCEL).

var years = prompt('How old are you?', 100)
alert('You are ' + years + ' years old!')

Always set second argument

Always set the default value in prompt, otherwise IE will insert "undefined" into dialog:

Try this in IE:

prompt("Test")

confirm

The syntax:

result = confirm(message)

confirm outputs the message with two buttons: OK and CANCEL.

The result is true/false, for OK/CANCEL.

For example:

var result = confirm("Should I say hello?")

alert(result)

Note that you can’t style, decorate or change screen position of basic modal windows. That’s the main drawback of basic UI functions.

But all these functions are simple and require no additional code. That’s why people still use them.

Create a page which asks for a name and alerts it.

The page should work as following: tutorial/intro/basic.html.

Open solution
Solution

Open source code of the given example to see the solution or just go here: tutorial/intro/basic.html.

Summary

  • alert outputs a message.
  • prompt outputs a message and waits for user input, then returns the value or null if ESC is pressed.
  • confirm outputs a message and awaits until user presses ok or cancel. The returned value is true/false

Tutorial

Donate

Donate to this project