Interaction: Alert, prompt, and confirm

This part of the tutorial uses native JavaScript, and you don’t need to adjust it for a specific environment.

But we will still use the browser as the presentation environment. So we should know at least a few user interface functions. In this section, familiarize yourself with the use of the alert, prompt, and confirm functions in the browser.

alert

Grammar:

alert(message);
Copy the code

Running this line of code, the browser pops up a message window and pauses the script until the user clicks OK.

Here’s an example:

alert("Hello");
Copy the code

This little window that pops up with information is called a modal window. Modal “means that a user cannot interact with other parts of the page (such as clicking other buttons, etc.) until they have processed the window. In the case of the example above — until the user clicks ok.

prompt

The prompt function takes two arguments:

result = prompt(title, [default]);
Copy the code

The browser displays a modal window with a text message, an input box, and a OK/cancel button.

Title: Text displayed to the user

Default: Optional second parameter, specifying the initial value of the input box.

The user can type something in the Input box of the Prompt dialog and then click OK. Or they can cancel typing by pressing the “cancel” button or by pressing key:Esc on the keyboard.

Prompt returns the text entered by the user in the input box, or null if the user cancels the input.

Here’s an example:

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

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

The Default value is provided by Internet Explorer

The second argument is optional. But if we don’t, Internet Explorer inserts “undefined” into prompt.

To see the effect, run the following line in Internet Explorer:

let test = prompt("Test");
Copy the code

So, in order for prompt to work well in IE, we recommend always providing a second parameter:

let test = prompt("Test".' '); // <-- for IE
Copy the code

confirm

Grammar:

result = confirm(question);
Copy the code

The Confirm function displays a modal window with Question and the OK and cancel buttons.

Clicking OK returns true, and clicking Cancel returns False.

Such as:

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

alert( isBoss ); // If the OK button is pressed, true is displayed
Copy the code

conclusion

We learned about the three browser-specific functions that interact with the user:

Alert: Displays information.

Prompt: Displays information that asks the user to enter text. Click OK to return text, click Cancel or press Key :Esc to return NULL.

Confirm: Displays information for the user to click OK or cancel. Clicking OK returns true, clicking Cancel or pressing Key :Esc returns False.

These methods are modal: they suspend the execution of the script and do not allow the user to interact with the rest of the page until the window is relieved.

All of the above methods have two limitations:

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

That’s the price of simplicity. There are other ways to display prettier Windows and interact more richly with the user, but if “bells and whistles” aren’t very important, these are fine.

Homework assignments

Do the questions yourself and then look at the answers.

Create a simple page

Major: ⭐️⭐️ disk ⭐ ⭐

Create a Web page that asks the user to enter name and outputs what you type through a browser window.

The answer:

Reply 1-2-9 in the background of wechat public account “Technology Chat” to obtain the answer to this question.

Modern JavaScript Tutorials: Open source modern JavaScript tutorials from beginner to advanced quality. React provides a JavaScript tutorial for MDN learners.

Read for free online: zh.javascript.info

Scan the QR code below and follow the wechat public account “Technology Chat” to subscribe for more exciting content.