JavaScript Advanced Programming Notes (II)

Source: Internet
Author: User

<script> ElementsHow to use: 1. Embed directly on the page
<type= "Text/javascipt">       function() {            alert (  "hi! " );       } </ Script >

Until all code inside the <script> element is evaluated by the parser, the rest of the page will not be loaded or displayed by the browser. If </script> appears in the code, you need to precede the escape character "\".

2. Include external JavaScript files

< Script   type = "Text/javascript" src = "Example.js" ></ Script >

The SRC attribute is required.

If you are in an XHTML document, you can omit the </script> tags, such as:

<type= "Text/javascript"  src= "example1.js"/>


However, it cannot be used in HTML documents and cannot be interpreted correctly by some browsers, especially ie.

Note: The <script> element with the SRC attribute should not contain additional JavaScript code between its <script> and </script> tags, so that only the external script file will be downloaded and executed, and the embedded code will be ignored.

The location of the label

The traditional practice of including all JavaScript files in the

<!DOCTYPE HTML><HTML>    <Head>        <title>Example HTML page><title>        <Scripttype= "Text/javascipt"src= "Example1.js"></Script>        <Scripttype= "Text/javascipt"src= "Example2.js"></Script>   </Head>   <Body>         <!--here to put the content -   </Body></HTML>

Modern Web applications typically put all JavaScript references in the <body> element after the page content

<!DOCTYPE HTML><HTML>    <Head>        <title>Example HTML page><title>   </Head>   <Body>         <!--here to put the content -         <Scripttype= "Text/javascipt"src= "Example1.js"></Script>         <Scripttype= "Text/javascipt"src= "Example2.js"></Script>   </Body></HTML>

Delay script

Setting the Defer property in the <script> element is equivalent to telling the browser to download it now, but defer execution.

<!DOCTYPE HTML><HTML>    <Head>        <title>Example HTML page><title>        <Scripttype= "Text/javascipt"defer= "Defer"src= "Example1.js"></Script>        <Scripttype= "Text/javascipt"defer= "Defer"src= "Example2.js"></Script>   </Head>   <Body>         <!--here to put the content -   </Body></HTML>

In this case only, although we put the <script> element in so it is best to include only one deferred script .

Asynchronous script

HTML5 adds the async attribute to <script>, which is similar to the defer property, and is used to change the behavior of the processing script. Similarly to defer, Async applies only to external script files and tells the browser to download the file immediately. Unlike defer, however, scripts marked as Async are not guaranteed to be executed in the order in which they are specified.

The purpose of specifying the async attribute is to not allow the page to wait for two scripts to download and execute, thus loading the page's other content asynchronously. For this reason, it is recommended that asynchronous scripts do not modify the DOM during loading.

Asynchronous scripts must be executed before the Load event of the page, but may be executed before or after the domcontentloaded event is triggered.

Embed code with external files

Advantages of external files:

maintainability : JavaScript across different HTML pages can cause maintenance problems. But keeping all JavaScript files in one folder is much easier to maintain. And developers can therefore focus on the code without touching the HTML tags.

cacheable : Browsers can cache all external JavaScript files that are linked based on specific settings. That is, if you have two pages that use the same file, the file needs to be downloaded only once. As a result, the page loading speed can be accelerated.

adapting to the future: using external files to contain JavaScript requires no XHTML or annotation hack. The syntax for HTML and XHTML to contain external files is the same.

Document mode

If the document type declaration is not found at the beginning of the document, the browser turns on mixed mode, and different browsers behave significantly differently in this mode.

The quasi-standard mode is very close to the standard mode, and their differences are almost negligible. The non-standard place is mainly reflected in the processing of the picture gap (the problem is most obvious when using the picture in the table).

Standard mode has the following 3 kinds

HTML  4.01 Strict type <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > XHTML 1.0 Strict Type <! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > HTML  5<! DOCTYPE HTML >

Quasi-standard mode, which can be triggered by a transitional (transitional) or frameset (FRAMESET) document type.

HTML 4.01 Transition Type<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frame-set <!  DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "Http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 transition Type <!  DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">XHTML 1.0 framework-set <!  DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd " >            

JavaScript Advanced Programming Notes (II)

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.