Home > Developer > JavaScript
I. <script> element attributes
The main method for inserting JavaScript into the XHTML page is to use the <script> element, which has five attributes: charset, defer, language, src, and type, the type, src, and defer parameters are frequently used.
1. The value of the type attribute is generally text/javascript, which is mandatory and <script type = "text/javascript"/>.
2. The value of the src attribute is *. js external file. This attribute is optional. <script type = "text/javascript" src = "example. js"/>.
In this example, the external file example. js will be loaded to the current page. An external file only needs to contain the Javascript code that is usually placed between the starting <script> and ending </script>. Like parsing embedded Javascript code, page processing stops temporarily when parsing external Javascript files. It should be noted that after the src attribute is included, additional Javascript code should not be included between <script> and </script>.
3. The value of the defer attribute is "defer", indicating that the script can be executed after the document is completely parsed and displayed. This attribute is optional, <script type = "text/javascript" src = "example. js "defer =" defer "/>
Ii. Tag location
By convention, all <script> elements should be placed in the Copy codeThe Code is as follows:
<Html>
<Head>
<Title> </tilte>
<Script type = "text/javascript" src = "example. js"/>
</Head>
<Body>
</Body>
</Html>
Modern Web applications generally place all Javascript references in the <body> element. The purpose of putting the content behind the page is to make users feel that the page loading speed is faster, as shown below:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> </tilte>
</Head>
<Body>
<! -- Content -->
<Script type = "text/javascript" src = "example. js"/>
</Body>
</Html>
Iii. Delayed scripts
The defer attribute delay script is used to indicate that the script does not affect the Page Structure during execution. That is to say, the script will be delayed until the entire page is parsed and then running.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> </tilte>
<Script type = "text/javascript" src = "example. js" defer = "defer"/>
</Head>
<Body>
</Body>
</Html>
In this example, although we put the <script> element in the Iv. CDATA
In XHTML (XML), CData segments are a special area in the document, which can contain text in any format that does not need to be parsed. Therefore, any characters can be used in CData segments without causing syntax errors.
Copy codeThe Code is as follows:
<Script>
// <! [CDATA [
Function compare (a, B ){
If (a <B ){
Alert ("A is less than B ");
} Else if (a> B ){
Alert ("A is greater than B ");
} Else {
Alert ("A is equal to B ");
}
}
//]>
</Script>
Adding double-slash comments is used to solve the problem that the browser is not compatible with XHTML.
V. <noscript> Elements
When the browser does not support Javascript or the Javascript is disabled, the elements contained in <noscript> are displayed. Otherwise, although the page contains <noscript>, however, the content is not displayed.
As follows:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> </tilte>
<Script type = "text/javascript" src = "example. js" defer = "defer"/>
</Head>
<Body>
<Noscript>
<P> This page requires the browser to support (enable) Javascript. </P>
</Noscript>
</Body>
</Html>
This page displays a message to the user if the script is invalid. In a script-enabled browser, users will never see it-although it is part of the page.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Example HTML Page </title>
</Head>
<Body>
<Noscript>
<Center> <p style = "color: red; font-size: 26px;"> This page requires browser support (Enabled) JavaScript </p> </center>
</Noscript>
<! -- Content here -->
<Script type = "text/javascript">
Alert (1 );
</Script>
</Body>
</Html>
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Example HTML Page </title>
</Head>
<Body>
<Noscript>
<Center> <p style = "color: red; font-size: 26px;"> This page requires browser support (Enabled) JavaScript </p> </center>
</Noscript>
<! -- Content here -->
<Script type = "text/javascript">
Alert (1 );
</Script>
</Body>
</Html>
In the following two cases, the content in the <p> mark of the above Code is displayed:
• The browser does not support scripts.
• The browser supports scripts, but the scripts are disabled.
In addition, the content in the <noscript> tag is never visible in the browser.
Vi. Summary
To insert Javascript into XHTML, use the <script> element. This element can be used to embed Javascript into the XHTML page so that scripts and tags are mixed together. It can also contain external Javascript files. Note the following:
1. Both methods require that the value of the type attribute be set to text/javascript to indicate that the Javascript script language is used.
2. When an external Javascript file is contained, you must set the src attribute to the url of the corresponding file. This file can be a file on the same server as the page containing it, or a file in any other domain.
3. All <script> elements are parsed in the order they appear on the page. The next <script> code is parsed only after the previous <script> code is parsed.
4. the browser must parse the code in the <script> element before rendering the subsequent page content. Therefore, the <script> element is usually placed at the end of the page and before the </body> label after and after the page content.
5. In IE and Firefox, you can set the defer attribute so that the browser can execute the script after rendering the document. Other browsers do not support this attribute.
In addition, you can use the <noscript> element to specify the alternative content displayed in browsers that do not support scripts. However, when the script is enabled, the browser does not display any content in the <noscript> element.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
