JS elevation 2. Using JavaScript in HTML (1)

Source: Internet
Author: User
Tags script tag

1. Use the <script> element to insert JavaScript into the HTML page

The HTML4.01 <script> tag has 6 properties:

(1) Async: Optional. Indicates that the script is downloaded immediately without affecting the download of other resources on the page. Valid only for external script files.

(2) CharSet: Optional. Represents the character set of the code specified by the SCR property. (because most browsers ignore it, so few people use it)

(3) Defer: Optional. Indicates that the script is deferred until the document is fully parsed and displayed after it is executed. Valid only for external scripts. This property is also supported by IE7 and earlier embedded scripts.

(4) Language: obsolete. The original script language used to write code.

(5) SCR: Optional. Represents the external file that contains the code to execute.

(6) Type: Optional. Represents the content type of the scripting language in which the code is written (MIME type )

    MIME (Multipurpose Internet Mail Extensions) multi-purpose Internet Mail extension type. is the type of file that sets the extension of an application to be opened by an app , and when the extension file is accessed, the browser automatically opens with the specified application. Many are used to specify some client - defined file names , as well as some ways to open media files.

MIME (multipurpose Internet mail Extensions) is an Internet standard that describes the message content type.

Note: In fact, the MIME type used by the server when transmitting JavaScript files is usually application/x-javascript, but setting this value in type may cause the script to be ignored.

Also available in non-IE browsers: Application/javascript and Application/ecmascript.

Given the browser compatibility issue, the current type attribute is Text/javascript, but this property is not required, and its default value is still text/javascript when not specified.

2. Two ways to use the <script> element:

(1) Embed JavaScript code directly in the HTML page:

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Test</title>6<scripttype= "Text/javascript">7       functionSayhi () {8 Alert ("Hi!");9 }Ten </Script> One </Head> A <Body> -     <Buttontype= "button"onclick= "Sayhi ()">Try it</Button> - </Body> the </HTML>

The javascript contained within the <script> element will be interpreted from top to bottom, and the rest of the page will not be loaded or displayed by the browser until the interpreter evaluates all internal code inside the <script> element.

When you use <script> embed JavaScript code, the </script> string is no longer available anywhere in the code.

Eg:<script type= "Text/javascript" >
function Sayhi () {
alert ("</script>");
}
</script>

Cause of error: According to the rules of parsing embedded code, when the browser encounters the string "</script>", it is considered to be the end of the </script> tag. This problem can be solved by adding the escape character "\"

<script type= "Text/javascript" >
function Sayhi () {
alert ("<\/script>");
}
</script>

(2) referencing external files using SRC

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

 As with the parsing of embedded JavaScript code, the processing of the page is temporarily stopped when parsing an external JavaScript file, including downloading the file.

(in XHTML you can write <script type= "Text/javascript" src= "Example.js"/>)

  Note:

(1) The <script> element with the SRC attribute should not contain additional JavaScript code between its <script> and <script/> tags. If embedded code is included, only the external script file will be downloaded and executed, and the embedded code will be ignored.

(2) The SRC attribute of the<script> element can also contain JavaScript files from external domains.

eg

<Type= "Text/javascript" src= "http://www.some.com/li.js"></script> 

(3) In any case contains code, as long as there is no defer and async attributes, the browser will follow the <script> elements in the order in which they appear in the page to parse them sequentially.

3.<script> the location of the label

The traditional approach is to put the script tag inside head, which means that all JavaScript code must be downloaded, parsed, and executed before the content of the page is rendered, that is, the contents of the body tag, so when a lot of JavaScript code is needed, Causes a noticeable delay in browser page loading, which causes the browser window to be blank. To avoid this situation, modern Web applications typically place JavaScript references behind the page content in the BODY element.

eg

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Test</title>6 </Head>7 <Body>8     <!--here to put the content -9     <Scripttype= "Text/javascript"src= "Example1.js"></Script>Ten     <Scripttype= "Text/javascript"src= "Example2.js"></Script> One </Body> A </HTML>

    This way, the contents of the page are fully rendered in the browser before parsing the containing JavaScript code. Users will also feel the speed of opening the page because of the shortened time the browser displays blank pages.

JS elevation 2. Using JavaScript in HTML (1)

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.