Home > Developer > JavaScript
I. Use of <script> elements
1, the <script> element defines 6 attributes:
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.
Charset: Optional. Represents the character set of the code specified by the SRC Attribute. Very few people use it.
Defer: Optional. Indicates that the script can be deferred until the document is fully parsed and displayed before Execution. Valid only for external files.
Language: Deprecated.
Src: Optional. Represents the external file that contains the code to Execute.
Type: Optional. Represents the content type "mime type" of the scripting language in which the code is Written. For Example: text/javascript, Text/ecmascript. In fact, the MIME type used by the server when transmitting JavaScript files is usually application/x-javascript. For compatibility and conventions, however, The value of the type attribute is still text/javascript.
2. Use of <script> elements
There are two ways to use the <script> element: Direct Introduction to the page and the introduction of external js.
1) when the page directly introduces js, only the type attribute must be specified for <script>. For example:
<SCRITPT type="text/javascript"> function sayhi () { alert (' hi,world! ' ); } </script>Note : a, The direct introduction of the JS parsing is from top to Bottom.
B. when using <script> embedding JavaScript code, remember not to have the "</script>" string anywhere in your Code. For example, the browser will generate an error when loading the following code:
<script type="text/javascript"> function sayscript () { alert ( ' </script> ' );} </script>Because in accordance with the rules of parsing embedded code, when the browser encounters the string "</script>", it is considered to be the end of the </script> Tag. But by splitting this string into two parts, you can solve this problem, for example:
<script type="text/javascript"> function sayscript () { Alert ('<\/script>');} </script>2) External Introduction of the JS,SRC attribute is required, and the value of this property is a link to an external JavaScript file, for example:
<script type='text/javascript' src='example.js'>< /script>
Special Tips :
1), the src attribute of the <script> element can also contain javascript from the external domain. This makes it controversial even if the <script> element is more powerful than it is. At this point, the,<script> is very similar to the element, that is, its src attribute can be a URL to a domain outside the domain of the current HTML page, for example:
<script type='text/javascript' src="http://www.joyplus.com/ Example.js"></script>
however, be careful when accessing JavaScript files on servers that you cannot Control.
2), regardless of containing the code, as long as there is no defer and Ansync attributes, the browser will follow the <script> elements in the order in which they appear in the page to parse them sequentially.
3. Position of the <script> element tag
By convention, all <script> elements should be placed in the page
<!doctype html>"en"> "UTF-8"> <title>Demo</title> <script type='Text/javascript'Src='Example1.js'></script> <script type='Text/javascript'Src='Example2.js'></script>The purpose of this approach is to place references to all external files (including CSS files and JavaScript files) in the same places. however, including all JavaScript files in the
<!doctype html>"en"> "UTF-8"> <title>Demo</title> 'Text/javascript'Src='Example1.js'></script> <script type='Text/javascript'Src='Example2.js'></script>This speeds up the time users see the Page.
4, <script> delay Script "attribute defer"
Both the defer property and the Async attribute can be used to download a JS file that is not introduced by the
Defer properties:
<!doctype html>"en"> "UTF-8"> <title>Demo</title> <script type='Text/javascript'Defer='defer'Src='Example1.js'></script> <script type='Text/javascript'Defer='defer'Src='Example2.js'></script>The external script file is deferred until the browser encounters the
Because not all browsers support the defer attribute, it is still the best option to put the deferred script at the bottom of the Page.
5. Async Script "property async"
Async property: applies only to external scripts and tells the browser to download the file Immediately. But the sequence of execution of JS scripts is not Guaranteed. therefore, the scripts that use the Async attribute are guaranteed not to depend on each other.
Async Property: The goal is to not allow the page to wait for two scripts to download and execute, thus asynchronously loading the page for additional Content. For this reason, it is recommended that asynchronous scripts do not modify the DOM during Loading.
<!doctype html>"en"> "UTF-8"> <title>Demo</title> <script type='Text/javascript' Async='Async'Src='Example1.js'></script> <script type='Text/javascript' Async='Async'Src='Example2.js'></script>
6. The use of <script> elements in XHTML
XHTML is a standard that is redefined as an application of HTML as Xml. To extend the Hypertext markup Language.
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. The following code: valid in html, but not valid in Xhtml.
<script type='Text/javascript'>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 equals to b!"); } }</script>The reason for invalidation in XHTML is:
The Less-than sign (<) in the comparison statement A<b is interpreted as starting a new label in Xhtml. however, as a label, the less-than-sign cannot be followed by a space, resulting in a syntax error.
There are two ways to avoid a similar syntax error in xhtml:
The first is to replace all the Less-than numbers in the (<) code with the corresponding HTML entities, such as:
<script type='Text/javascript'>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 equals to b!"); } }</script>This method is poorly understood by the Code. therefore, we can use another method.
The second is to use CDATA fragments to contain the JS Code. You can use any character in a CDATA fragment without causing a syntax Error. The specific code is as Follows:
<script type='Text/javascript'>//<! [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 equals to b!"); } } //]]></script>But since not all browsers are compatible with Xhtml's syntax for CDATA snippets, It is possible to annotate a CDATA tag with a JS Comment.
Ii. embedded script and external script
JS embed code and external files, It is best practice to use external files including JS code whenever Possible. The advantages Are:
Maintainability is strong: separate JS into a file, easy to maintain, and become also Convenient.
Cacheable: when more than one HTML is used for a JS file, then the JS file needs to be downloaded only once. Speeds up page loading.
Adapting to the Future: external files do not need to use XHTML or annotation hack. HTML and XHTML contain the same syntax as external files. "comment Hack:cdata fragment"third, Consider the scenario "<noscript> element" that disables JavaScript
<noscript> elements are displayed only in the following cases:
1) The browser does not support scripts;
2) browsers support scripts, but scripts are Disabled.
If any of these conditions are met, the browser will display the contents of <noscript>. In addition to the request, the browser will not render the content in <noscript>.<!doctype html>"en"> "UTF-8"> <title>Demo</title> <script type='Text/javascript'Defer='defer'Src='Example1.js'></script> <script type='Text/javascript'Defer='defer'Src='Example2.js'></script>This page displays a message to the user in case the script is Invalid. In a script-enabled browser, the user will never see it.
JavaScript advanced Programming (ii): using JavaScript in HTML
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
