JavaScript Interaction Chapter

Source: Internet
Author: User

The previous article said is the introduction, I am through in the MU class net study, own some summary, as well as oneself to do some small examples to share with you.

Now talk about how to interact with the page, the simple is how to interact with the Web.

I. Output content (document.write)

在上一篇中的第一段代码中简单出现了一下,现在我们来正真的认识它。

document.write()Can be used to write content directly to the HTML output stream. The simple thing is to print the content directly in the Web page.

The first type: The output content is enclosed in "", directly Output "".

<script type= "Text/javascript" >  //content with "" "," "in the contents of the direct output. </script>

The second type: through variables, output content

<script type= "Text/javascript" >  var mystr= "Hello world!";  //Direct write variable name, output variable stored content. </script>

The third type: output multiple items, the content is connected with the + number.

<script type= "Text/javascript" >  var mystr= "Hello";  //multiple contents with + sign connection </script>

The fourth type: output HTML tags, and work, the label using "" enclosed.

<script type= "Text/javascript" >  var mystr= "Hello";d ocument.write (mystr+ "<br>");  After you output hello, output a newline character  document.write ("JavaScript");</script>

Detailed code:

two. Warning (Alert message dialog box)When visiting the website, sometimes suddenly pop up a small window, which is written with a text message. If you do not click "OK", you can not do anything to the Web page, this small window is the use of alert implementation.

Grammar:

Alert (string or variable);  

Look at the following code:

<script type= "Text/javascript" >   var mynum =;   Alert ("hello!");   Alert (mynum);</script>

Detailed code:


Note: Alert pops up the message dialog box (contains a OK button).

Result: Pop-up message box sequentially


Attention:

1. You cannot do anything else until you click the "OK" button in the dialog box.

2. Message dialogs are commonly used for debugging programs.

3. Alert output can be a string or variable, similar to document.write.

three. Confirmation (Confirm Message dialog box)The Confirm Message dialog box is often used to allow the user to make a selection action, such as: "Are you right?" such as A popup dialog box (including a OK button and a Cancel button).

Grammar:

Confirm (str);

Parameter description:

Str: text to display in the message dialog box  Boolean value

The code is as follows:


Results:

return value:

Returns True when the user taps the "OK" button, which returns False when the user taps the "Cancel" button

Note:

1. The return value can be used to determine what button the user clicked.

2. The message dialog box is exclusive, which means that the user cannot do anything else until the dialog button is clicked.


Four. Questions (Prompt message dialog box)promptA pop-up message dialog box is typically used to ask for information that needs to interact with the user. Pop-up message dialog box (contains a OK button, Cancel button and a text input box).

Grammar:

Prompt (str1, str2);

Parameter description:

STR1: The text to display in the message dialog box cannot be modified STR2: The contents of the text box can be modified

return value:

1. Click the OK button and the contents of the text box will return the value 2 as the function. Clicking the Cancel button will return null

Take a look at the following code:


Note: You cannot perform any other action until the user taps the button in the dialog box.

Five. Open a new window (window.open)

The open () method can look for an existing or new browser window .

Grammar:

window.open ([URL], [window name], [parameter string])

Parameter description:

URL:Optional parameter, in the window to display the Web page's URL or path. If this argument is omitted, or if its value is an empty string, then the window will not display any documents.window Name:optional parameter, the name of the window to be opened. 1. The name consists of letters, numbers, and underscore characters.       2. "_top", "_blank", "_selft" have a special meaning name. _blank: The target page is displayed in a new window _self: The target page is displayed in the current Window _top: Page 3 is displayed in the upper window in the frames webpage.A window of the same name can only create one, and the name cannot be the same if you want to create multiple windows. 4.name cannot contain spaces. parameter string:Optional parameters,Set the window parameters, separated by commas. 

Parameter table:

For example: Open http://www.baidu.com website, size 300px * 200px, no menu, no toolbar, no status bar, scroll bar window:

<script type= "Text/javascript" > window.open (' http://www.baidu.com ', ' _blank ', ' width=300,height=200,menubar= No,toolbar=no, Status=no,scrollbars=yes ') </script>

The detailed code is as follows:



Note: The running results consider browser compatibility issues.

Six. Close the window (window.close)

Close () Closes the window

Usage:

Window.close ();    //close this window

Or

< Window object >.close ();   //Close the specified window

For example, close the newly created window.

<script type= "Text/javascript" >   //The new Window object is stored in the variable Mywin   mywin.close ();</script>

Note: The code above opens a new window, closes the window, and does not see the window being opened.




JavaScript Interaction Chapter

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.