Chapter II using JavaScript in Html-javascript advanced programming

Source: Internet
Author: User

first, <script> Elements

The main way to insert JavaScript into an HTML page is to use the <script> Element.

HTML 4.01 defines the following 6 properties for <script>.

(1) async: Optional. Indicates that the script should be downloaded immediately, but should not interfere with other actions on the page, such as downloading additional resources or waiting for other scripts to Load. Valid only for external script Files.
Async [?? s?? k] Asynchronous Non-synchronous

(2) charset: Optional. Represents the character set of the code specified by the SRC Attribute. Because most browsers ignore its value, this property is rarely used.
CharSet N. character set; word tuple

(3) defer: Optional. Indicates that the script can be deferred until the document is fully parsed and displayed before Execution. Valid only for external script Files. IE7 and earlier versions of this property are also supported for embedded scripting.
Defer [d? ' f??] Vi. postpone, postpone, Obey Vt. Make a postponement of; postpone.

(4) language: Obsolete. Originally used to represent scripting languages (such as javascript, JavaScript1.2, or vbscript) used to write Code. Most browsers ignore this property, so there's no need to use it anymore.

(5) src: Optional. Represents the external file that contains the code to Execute.

(6) type: Optional. Can be seen as an alternative attribute of language, a content type (also known as a mime Type) that represents the scripting language in which the code is Written. Although both Text/javascript and Text/ecmascript have not been recommended, people have been using text/javascript for a long time. 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. In addition, the following values can be used in Non-ie browsers: Application/javascript and Application/ecmascript. Given the conventional and maximum browser compatibility, the current value of the type attribute is still text/javascript. however, This property is not required, and if this property is not specified, its default value is still Text/javascript.

There are two ways to use the <script> element: embed JavaScript code directly in the page and include external JavaScript files.
When embedding JavaScript code with the <script> element, you only need to specify the Type property for <script>. then, put the JavaScript code directly inside the element as Follows:
<script type= "text/javascript" >
function Sayhi () {
Alert ("hi!");
}
</script>

The JavaScript code contained within the <script> element will be interpreted from top to bottom. Taking the previous example, the interpreter interprets the definition of a function and then saves the definition in its own environment. Until all code inside the <script> element is evaluated by the interpreter, the rest of the page will not be loaded or displayed by the Browser.

The SRC attribute is required if you want to include an external JavaScript file through the <script> Element. The value of this property is a link to an external JavaScript file, for example:
<script type= "text/javascript" src= "example.js" ></script>
In this example, the external file example.js will be loaded into the current Page. The external file must contain only those JavaScript code that is normally placed between the start <script> and end </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.

Including all JavaScript files in the

<! DOCTYPE html>
<title>example HTML page</title>
<body>
<!--content here--
<script type= "text/javascript" src= "example1.js" ></script>
<script type= "text/javascript" src= "example2.js" ></script>
</body>

1. Delay Script

The defer property of the <script> Tag. The purpose of this property is to indicate that the script executes without affecting the construction of the Page. In other words, the script is deferred until the entire page has been parsed and then Run. therefore, setting the Defer property in the <script> element is equivalent to telling the browser to download it immediately, but defer execution.

<script type= "text/javascript" defer= "defer" src= "example1.js" ></script>

The Defer property applies only to external script Files.

The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script executes before the second deferred Script.

In reality, deferred scripts are not necessarily executed in sequence.

2. Asynchronous Script

HTML5 defines the async attribute for the <script> Element. This property 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.

<script type= "text/javascript" Async src= "example1.js" ></script>

<script type= "text/javascript" Async src= "example2.js" ></script>

The second script file may be executed before the first script File.

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.

3. Usage in XHTML

Extensible Hypertext Markup language, XHTML (extensible Hypertext Markup Language), is a standard that is redefined as an application of HTML as Xml.

The rules for writing XHTML code are much stricter than writing HTML and directly affect the ability to use <script/> tags when embedding javascript code.

Chapter II using JavaScript in Html-javascript advanced programming

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.