Home > Developer > Web Develop
Three pop-up dialog boxes in JavaScript and three types of javascript
If you have learned js, you will find that the alert () method, prompt () method, and prompt () method are used in some instances. They all bring up a dialog box on the screen, in addition, the content in the brackets is displayed. This method makes the page interaction more exciting. In fact, we often make this type of Dialog Box Simple during Webpage Browsing, A dialog box is frequently used for two-way communication between users and applications. The three dialogs of avascript are obtained by calling the three methods alert (), confirm (), and prompt () of the window object. These dialogs can be used to complete js input and output, implement js code that can interact with users. Today, I will briefly introduce the three pop-up dialog boxes in Javascript. I will explain these methods in detail and then compare them, start our js journey '(* pipeline _ Pipeline *)′......
First: alert () method
The alert () method is the easiest way to use in these three dialogs. It can be used to display the text information in the alert () brackets in the dialog box in a simple and clear way, we call it an alert dialog box. The information to be displayed is placed in brackets. The dialog box contains a "OK" button. After you read the displayed information, you can click this button to close the dialog box. The following is an example of using the alert () method. The Code is as follows:
<Html> Execute the small example above. In the dialog box displayed on the page, the following message is displayed: "Uplink: Down the rock and rock:Then, click the "OK" button, and then the second dialog box is displayed, showing "the beautiful girl in the white water spring !", The effect is as follows;
On the page, a dialog box is displayed, showing a sentence "Uplink: The ancient tree and wood are dry under the rock and rock". Click the "OK" button, and then the 2nd dialog box is displayed, showing "the beautiful girl in the white water spring !" Let's analyze this small example:
A. Call the alert () method twice in the <script> script block;
B. A piece of text information is added to each alert () bracket to run the page shown in. When you click "OK" on the page, the second page appears. Click "OK" to close the dialog box on the page. Note: The two dialogs are displayed separately, instead of overwriting the other. This is because the first alert () the second alert () is executed only after you click "OK. Alert () is a js window object method. It can be written as window during calling. alert () can also be written as alert (). All functions generate a dialog box with a confirmation button. The information in the brackets is displayed above,
Method 2: confirm ()
The confirm () method is similar to the alert () method. The difference is that the dialog box contains a "confirm" button and a "cancel" button, this dialog box is called a confirmation dialog box. You can also leave the window parameter empty when calling the confirm () method of the window object and the prompt () method described later. The following is a small example of confirm (). The Code is as follows:
<Html> The display effect is as follows: Analyze this small example:
A. Add the confirm () method to the <script> script block,
B. A text message is added to confirm () brackets. The running effect is shown in. If you click "OK", the confirm () method returns true, if you click the "cancel" button, the confirm () method returns false. No matter which button you select, the dialog box is closed and the javascript code continues to be executed. Clicking the "OK" or "cancel" button is to close the dialog box, and there seems to be no difference. In fact, whether you click the "OK" or "cancel" button, a Boolean value is returned, in this way, some js code can be used to play the role of a button. Let's take a look at the following example and try to use confirm () to return a Boolean value. The Code is as follows:
<Html> Let's analyze this small example:
A. Declare a variable con in the <script> script block.
B. The con = confirm () Statement assigns the Boolean value returned by the confirm () method to con.
C. Use the if statement to use the con value and execute different statements respectively. The execution result is as follows:
If you click the "OK" button in the confirmation box on the page, the page shown in appears:
If you click the cancel button, the page shown in is displayed:
Method 3: prompt ()
The use of the alert () method and the confirm () method is very similar. They only display the existing information, but users cannot enter their own information, but prompt () can do this, she not only displays information, but also provides a text box that requires users to enter their own information on the keyboard, and also contains the "Confirm" or "cancel" buttons, if you click "OK", the prompt () method returns the content (string type) or initial value (if the user has not entered the information) entered in the text box ); if the user clicks the "cancel" button, the prompt () method returns null. We call this dialog box a prompt box. Among the three dialogs, the user has the best interaction. Let's take a look at the following small example: the prompt dialog box appears twice on the page, enabling users to enter the relevant information. The Code is as follows:
<Html>Run the above program and the effect is as follows:
Click OK to have such a surprise, nie:
Click OK again:
Click OK again:
Analyze this small example
A. Two prompt () methods are added to the <script> script block.
B. added text information in the first prompt () bracket.
C. name = prompt () is to assign the information entered by the user in the text box to the variable name.
Differences and connections between alert (), confirm (), and prompt:
Warning box alert ()
Alert is a warning box with only one button "OK" and no return value. It is often used to ensure that users can obtain certain information. When a warning box appears, you must click OK to continue the operation. Syntax: alert ("text ").
Confirmation box confirm ()
Confirm is the confirmation box, two buttons, OK or cancel, return true or false. The confirmation box enables users to verify or accept certain information. After the confirmation box appears, you must click OK or cancel to continue the operation. If you click OK, the return value is true. If you click Cancel, the returned value is false. Syntax: confirm ("text ")
Prompt box prompt ()
The prompt is a prompt box that returns the entered message or its default prompt box is often used to prompt the user to enter a value before entering the page. When the prompt box appears, you need to enter a value and click "OK" or "cancel" to continue the operation. If you click OK, the returned value is the input value. If you click Cancel, the return value is null. Syntax: prompt ("text", "default ")Small message: In this blog, the editor mainly introduces three pop-up dialog boxes in javascript, namely the alert () method, confirm () method, and prompt () method, the editor first gives a detailed description of these methods, and then compares them. In addition to the three pop-up dialog boxes, we can also use document. write () directly displays the message on the page, BS learning, To be continued ......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
