User interaction: alert, prompt, confirm

Lecture




  1. alert
  2. prompt
  3. confirm
  4. Features built-in features
  5. Summary

In this section, we will look at the basic UI operations: alert , prompt and confirm , which allow you to work with data received from the user.

alert

Syntax:

alert(сообщение)

alert displays a message window and pauses the script until the user clicks OK.

1 alert( "Привет" );

The message box that is displayed is a modal window . The word “modal” means that the visitor cannot interact with the page, press other buttons, etc., until he has dealt with the window. In this case, until it clicks on “OK”.

prompt

The prompt function takes two arguments:

result = prompt(title, default );

It displays a modal window with the title title , a text field filled with the default string and OK / CANCEL buttons.

The user must either enter something and click OK, or cancel the input by clicking on CANCEL or pressing ESC on the keyboard.

The prompt call returns what the visitor entered is a string or a special null value if the input is canceled.

As in the case of alert , the prompt window is modal.

1 var years = prompt( 'Сколько вам лет?' , 100);
2
3 alert( 'Вам ' + years + ' лет!' )

Always specify default

In general, the second default may be missing. However, IE will insert the default value "undefined" into the dialog.

Run this code in IE to understand what it’s about:

1 var test = prompt( "Тест" );
Therefore, it is recommended to always specify the second argument:
1 var test = prompt( "Тест" , '' ); // <-- так лучше

confirm

Syntax:

result = confirm(question);

confirm displays a window with a question with two buttons: OK and CANCEL.

The result will be true when you click OK and false when CANCEL (Esc).

For example:

1 var isAdmin = confirm( "Вы - администратор?" );
2
3 alert(isAdmin);

Features built-in features

The place where the modal window is displayed with the question, and the appearance of the window is chosen by the browser. The developer cannot influence this.

On the one hand, this is a disadvantage, since You cannot display a window in your design.

On the other hand, the advantage of these functions in comparison with other, more complex methods of interaction, which we will study in the future, is that they are very simple.

This is the easiest way to display a message or get information from a visitor. Therefore, they are used in cases where simplicity is important, and all sorts of "beauty" does not play a special role.

Importance: 4

Create a page that asks for the name and displays it.

Should work like this: tutorial / intro / basic.html.

Decision

Solution: tutorial / intro / basic.html.

[Open task in new window]

Summary

  • alert displays a message.
  • prompt displays a message and waits for the user to enter text, and then returns the entered value or null if input is canceled (CANCEL / Esc).
  • confirm displays a message and waits until the user clicks “OK” or “CANCEL” and returns true/false .
created: 2014-10-07
updated: 2021-03-13
132539



Rating 9 of 10. count vote: 2
Are you satisfied?:



Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone