Study Notes on JavaScript advanced programming (7): javascript in the browser

Source: Internet
Author: User
Tags cdata

With JavaScript and users' requirements for experience, Web browsers have developed considerably. This chapter discusses Javascript in browsers.

1. <SCRIPT> labels in various languages

(1). As the earliest JavaScript-supported language, the <SCRIPT> tag in HTML is defined as follows:

Introduce external files:
<Script language = "JavaScript" src = "../test. js"> </SCRIPT>

Embedded:
<Script language = "JavaScript">
VaR I = 0;
</SCRIPT>

Earlier, for some old browsers that do not support JS, developers created the following method to block JavascriptCode:
<Script language = "JavaScript"> <! -- Hidden from older browsers
Function Test (){
Alert ("test ");
}
// -->
</SCRIPT>

This method uses HTML comments and JavaScript comments, so that JS Code is ignored by browsers that do not support JS, while JavaScript browsers execute code.
You can now see the code for these features from many web sites. Today it is no longer necessary, because basically there is no browser that does not support JS, even if
A browser does not support JavaScript code.

(2) Later, the XHTML (Extensible html), <SCRIPT> tag evolved into this:

Introduce external files:
<SCRIPT type = "text/JavaScript" src = "../test. js"> </SCRIPT>

Embedded:
<Script language = "JavaScript">
VaR I = 0;
</SCRIPT>

Most developers today use the type method to declare JavaScript to better support XHTML. Language is omitted without any problems.

(3) JavaScript in SVG:

Introduce external files:
<SCRIPT type = "text/JavaScript" xlink: href = "../test. js"> </SCRIPT>

Embedded:
<SCRIPT type = "text/JavaScript"> <! [CDATA [
VaR I = 0;
]> </SCRIPT>

Note: The Type feature is required, and the language feature is invalid. Use xlink: href to replace the SRC feature. CDATA segments must be used for embedded code segments.


2. Windows objects

(According to the author: Because the positioning is "advanced ",ProgramDesign ", top, parent, self, and so on are not described in detail. Here we only record some advanced or easy-to-Forget knowledge points. .)

Window operation:
MoveBy (dx, Dy), movtto (x, y), resizeBy (DW, DH), resizeTo (W, H );
IE provides window. screenleft, window. screentop, document. Body. offsetwidth, and document. Body. offsetheight to determine the position and size of the window (there is no way to determine the size of the window)
Mozilla, opera, and Safari provide windows. screenx, window. screeeny, window. innerwidth, window. innerheight, window. outerwidth, window. outerheight is used to determine the position, size, and size of a window.

Difference between confirm () and prompt:
In addition to the OK and cancel buttons, the prompt also has a text box to obtain some data entered by the user.

VaR itimeoutid = setTimeout (method, millisecond); // The number of milliseconds to wait for the method to be executed from the time of triggering
Cleartimeout (itimeoutid );

VaR iintervalid = setinterval (method, millisecond); // The number of milliseconds at which the method is executed and the cycle starts from the trigger.
Clearinterval (iintervalid );

3.doc ument object

Attributes such as alinkcolor, bgcolor, fgcolor, linkcolor, and vlinkcolor in the Document Object reference the old HTML features. We recommend that you do not use them later, instead of using the style sheet script instead.

The only difference between document. Write (string) and doucument. writeln (string) is that the latter adds a line break (\ n) to the end of the string ).

Remember: To insert page content attributes, you must call the write (string) or writeln (string) method before fully loading the page. Otherwise, they will erase the page content and only display the string of the content you write

Document. Write can be used to dynamically introduce JavaScript, but note the following:
<SCRIPT type = "text/JavaScript">
Document. Write ("<SCRIPT type = \" text/JavaScript \ "src = \" test. js \ ">"
+ "</Scr" + "ept> ");
</SCRIPT>

In the third row, the "</SCRIPT>" after the write string must be written separately, which is necessary. Because the browser will automatically close the <SCRIPT> tag, this will confuse the page tag and report an error.

4. Location object

Attributes include hash, host, hostname, href, pathname, port, protocal, and search.

Location. href = "http://punkchen.cnblogs.com" and location. Assign ("http://punkchen.cnblogs.com") have the same effect
Location. Replace ("http://punkchen.cnblogs.com") differs from them in that. The replace method deletes the original page on which you locate the new page in the browser history, so that you cannot use the browser
To access it
Location. Reload () method: Reload the page. Reload (true) indicates that the page is reloaded from the server. Reload () and reload (false) indicate that the page is reloaded from the cache.

Due to browser prompts (Do You Want To reload the page ?), Frequently Used page refresh methods by developers are:
Location. href = location. href;

5. navigator object

Provides browser information. However, the absence of standards hinders the development of Navigator objects. Different browsers vary greatly in their support. (How important is standardization !)
You can use the Navigator feature to determine which browser is used to browse the current page. There are many methods on the Internet.

 

 

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.