JavaScript Advanced Programming-Chapter II: Using JavaScript in HTML

Source: Internet
Author: User
Tags cdata

Chapter Two: Using JavaScript <script> elements in HTML

The main way to insert JavaScript into an HTML page is to use the <script> element,<script> element with six attributes:

  1. async: Optional. Indicates that the script should be downloaded immediately , but does not interfere with other actions on the page, such as downloading additional resources or waiting for other scripts to load, only valid for external scripts .
  2. defer: Optional. Indicates that the script can be deferred until the document is fully parsed and displayed before execution. valid only for external scripts.
  3. src: Optional. Represents the external file that contains the code to execute.
  4. type: Optional. Represents the scripting language content type used by the writing code. Default is text/javascript
  5. Language: Deprecated. Original indicates script language type
  6. CharSet: Optional. Represents the character set of the code specified by the SRC attribute. Most browsers are ignored.

There are two ways to use the <script> element, to embed JavaScript code directly in the page and to include external JavaScript.

   Just specify the type= "Text/javascript" property for the element below.

<script type= "Text/javascript" >    function  sayhay () {        alert ("Hello,world");       } </script>

Attention:

1, in the use of <script> embed code is not in the code to appear in the </script> string , the browser will be considered to be the end tag and produce an error.

2, when parsing external JavaScript files, the processing of the page will also be paused

3. The <script> element with the SRC attribute should not be between its <script> and </script> elements if the embed code is ignored, only the external script file is loaded .

4, according to the traditional practice <script> elements should be placed in the generally put all the JavaScript references in the &L Behind the t;body> element .

Delay script: Use only with external script files
<! DOCTYPE hrml><script type= "Text/javascript" defer= "defer" src= "src2.js" ></script>    

This example adds the Defer property, which contains the script to be executed after the browser encounters the

  Different browsers have different support for defer, so finally put the delay script at the bottom of the page.

Asynchronous Script: use only with external script files
<! DOCTYPE hrml><script type= "text/javascript" async src= "Src2.js" ></script>    

The asynchronous script tells the browser to download the file immediately, specifying that the async attribute is not to allow the page to wait for the script to download and execute, thus asynchronously loading, the browser does not guarantee that the script executes sequentially and does not modify the DOM while loading.

Usage in XHTML

Extensible Markup Language is a redefinition of HTML as an application of XML, and when code is embedded in XHTML,"<" errors occur and are parsed as a new label, typically with a CDATA fragment to contain JavaScript code,

Some text, such as JavaScript code, contains a large number of "<" or "&" characters. To avoid errors, you can define the script code as CDATA. all content in the CDATA section is ignored by the parser . CDATA part by "<![ cdata["Start, End with"]]>": Because some browsers are incompatible with XHTML, the CDATA tags are commented out using JavaScript annotations.

<script>//<! [cdata[function  matchwo (b) {    if (a < b && a < 0) then    { c7/>return 1;    }    
{ return 0; }} ]]></script>

PS: In the support XML document although the code with '//' commented out, but the XML document still recognizes the code that belongs to XML <! [cdata[and]]> not supported in XML documents, due to <! [Cdata[and]]> are XML code that is commented out directly.

Embedded code and external files
    1. Maintainability: Put all JavaScript code in a folder, easy to maintain.
    2. cacheable: The same file is downloaded only once.
<! DOCTYPE html>
Summary:
  1. You specify SRC when you include an external JS file.
  2. So <script> will be parsed in the order of the page, not using defer and async, only after parsing the <script> code after parsing the elements, generally put <script> elements to the end of the page,< Before body>.
  3. Defer documents are loaded after rendering, async documents are loaded asynchronously, and document rendering is not blocked.
  4. <noscript> can display alternative content when JavaScript is not supported or forbidden.

JavaScript Advanced Programming-Chapter II: Using JavaScript in HTML

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.