First, <script> element properties
The main way to insert JavaScript into an XHTML page is to use the <script> element, which has 5 properties, CharSet, defer, language, SRC, type, often using type, SRC, Defer these three.
1, the value of type attribute is generally text/javascript, this attribute is necessary, <script type= "Text/javascript"/>.
2, the SRC attribute value is *.js external file, this property is optional, <script type= "Text/javascript" src= "Example.js"/>.
In this example, the external file example.js will be loaded into the current page. The external file simply contains the JavaScript code that usually has to be placed between the start <script> and end </script>. As with parsing embedded JavaScript code, when parsing an external JavaScript file, the processing of the page is temporarily stopped. It should be noted that the SRC attribute should not include additional JavaScript code between <script> and </script>.
3. The value of the defer property is "defer", which means that the script can be deferred until the document is completely parsed and displayed, and the property is optional, <script type= "Text/javascript" src= "Example.js" Defer "/>
Second, the label position
By convention, all <script> elements should be placed in the
Copy Code code as follows:
<title></tilte>
<script type= "Text/javascript" src= "Example.js"/>
<body>
</body>
Modern web applications generally put all JavaScript references in the <body> element, behind the content of the page to make the user feel the page load faster, as follows:
Copy Code code as follows:
<title></tilte>
<body>
<!--content-->
<script type= "Text/javascript" src= "Example.js"/>
</body>
third, delay script
Using the Defer property delay script, the purpose of this property is to indicate that the script does not affect the construction of the page when it is executed. That is, the script is deferred until the entire page is resolved and is running.
Copy Code code as follows:
<title></tilte>
<script type= "Text/javascript" src= "example.js" defer= "defer"/>
<body>
</body>
In this example, although we put the <script> element in the
Four, CDATA
In XHTML (XML), a CDATA fragment is a special area in a document that can contain text content in any format that does not need to be parsed. As a result, you can use any character in a CDATA fragment without causing a syntax error.
Copy Code code 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>
The double slash annotation is added to resolve the problem that the browser is not compatible with XHTML.
Five, <noscript> elements
Elements contained in <noscript> are displayed when the browser does not support JavaScript or JavaScript is disabled, otherwise the content is not displayed if the page contains <noscript>.
As shown below:
Copy Code code as follows:
<title></tilte>
<script type= "Text/javascript" src= "example.js" defer= "defer"/>
<body>
<noscript>
<p> This page requires browser support (enabled) Javascript. </p>
</noscript>
</body>
This page displays a message to the user if the script is invalid. In a script-enabled browser, the user will never see it-although it is part of the page.
Copy Code code as follows:
<title>example HTML page</title>
<body>
<noscript>
<center><p style= "color:red; font-size:26px; " > This page requires browser support (enabled) javascript</p></center>
</noscript>
<!--put content here-->
<script type= "Text/javascript" >
Alert (1);
</script>
</body>
Copy Code code as follows:
<title>example HTML page</title>
<body>
<noscript>
<center><p style= "color:red; font-size:26px; " > This page requires browser support (enabled) javascript</p></center>
</noscript>
<!--put content here-->
<script type= "Text/javascript" >
Alert (1);
</script>
</body>
In the following two cases, the contents of the above code <p> tags are displayed:
• Browsers do not support scripts
• Browsers support scripts, but scripts are disabled.
In addition, users will never see the contents of the <noscript> tag in the browser.
Vi. Summary
Insert JavaScript into XHTML to use the <script> element. Use this element to embed JavaScript in an XHTML page, to mix scripts with tags, or to include external JavaScript files. And what we need to be aware of:
1. The value of the type attribute is set to Text/javascript to indicate that the JavaScript scripting language is being used.
2. When you include an external JavaScript file, you must set the Src property to the URL that points to the corresponding file. This file can be a file that is located on the same server as the page containing it, or it can be a file in any other domain.
3. All <script> elements will be parsed in the order in which they appear in the page. The next <script> code is resolved only after parsing the previous <script> code.
4, the browser before rendering the page content, you must first parse the previous <script> elements in the code. To do this, the <script> element is generally placed at the end of the page, before the page content and the end of the </body> tag.
5. In IE and Firefox, you can set the Defer property to allow the browser to execute the script after rendering the document. This property is not supported by other browsers.
In addition, use the <noscript> element to specify alternative content to be displayed in browsers that do not support scripting. However, when scripting is enabled, the browser does not display any content in the <noscript> element.
