Javascriptの Progressive Series for the "JavaScript Advanced Programming" Reading notes, recorded in the process of reading the focus of the place and some summary, for learning JavaScript lay a good foundation.
------------------------------------------------Split Line----------------------------------------------------------------
JavaScript in HTML
> Use <script> Tags
> The difference between inline and external references
How the > Document model affects JS
> What to do when the browser does not support JS
Above these four aspects unfold.
First, <script> label
The main way to use JS in an HTML page is through the <script> tag. The <script> tag has 6 properties:
1), async-Optional. Indicates that the script is downloaded immediately but does not block other behavior of the page, such as downloading resources or waiting for other scripts to load. This property is valid only for referencing external JS files.
2), charset-Optional. The character set used to specify the code, which is now rarely used.
3), defer-Optional. Indicates that the execution of the script can be safely deferred until the contents of the document are fully interpreted and presented. Valid only for referencing external JS files. IE7 and the following documents are also supported in the internal JS.
4), language-discard. Indicates the scripting language (such as "JavaScript", "JavaScript1.2", or "VBScript") used by blocks of code. Most browsers ignore this property and are not recommended.
5), src-Optional. The address that references the external JS file.
6), type-Optional. Replaces the language attribute, which indicates the content type (also called MIME type) of the scripting language used by the code block, which is generally "text/javascript" and Defaults to "Text/javascript" when omitted.
There are two uses for <script>: one is an inline script and the other is a script that references external.
Inline notation:
<script type= "Text/javascript" >
function Sayhi () {
Alert ("hi!");
}
</script>
JS is executed from top to bottom in turn. Note that "</script>" cannot be used freely in code when using inline JS, and the following code will error:
<script type= "Text/javascript" >
function Sayscript () {
Alert ("</script>");
}
</script>
The "</script>" in the code is interpreted as the end of the script tag, and the escape character is required to avoid this error:
<script type= "Text/javascript" >
function Sayscript () {
alert ("<\/script>");
}
</script>
referencing external JS:
<script type= "Text/javascript" src= "Example.js" ></script>
Note that the tag can not be written inside the code, if the write will be ignored by the browser and directly loaded external files.
References to external files can refer not only to local files, but also to files under other domains, such as:
<script type= "Text/javascript" src= "Http://www.somewhere.com/afile.js" ></script>
Note: It is safe to refer to files under other domains to avoid references to malicious files or unsafe domains under which files are tampered with.
Reference JS file should be placed under the end of the page, to avoid loading JS when the page to wait for the JS loading to perform rendering, if the reference JS a lot, the page loading speed will be very slow.
<! 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>
In this way, the page is rendered when the JS is loaded, reducing the waiting time of the page and thus enhancing the user experience.
Deferred Scripts
Deferred script: HTML4.01 defines the defer property, which does not change the structure of the page when it is executed. The script that sets the defer tells the browser: Downloading now can delay execution.
<! DOCTYPE html>
<title>example HTML page</title>
<script type= "Text/javascript" defer src= "Example1.js" ></script>
<script type= "Text/javascript" defer src= "Example2.js" ></script>
<body>
<!--content here--
</body>
Although the above JS is written in the head tag, it will not be executed until the
Asynchronous Scripts
Asynchronous script: HTML5 introduced the async attribute. Async and defer are similar to changing the way the script is processed, and async can only be used when referring to JS externally and tell the browser to download it right away. The difference is that asynchronous scripts are not guaranteed to execute in the order they are specified, for example:
<! DOCTYPE html>
<title>example HTML page</title>
<script type= "text/javascript" async src= "Example1.js" ></script>
<script type= "text/javascript" async src= "Example2.js" ></script>
<body>
<!--content here--
</body>
In the above code, example2 may be executed before example1, so the two scripts should not have dependencies. The purpose of the asynchronous script is to specify that the page does not have to wait for the script to load and execute before loading or wait for the other scripts to load and execute.
The difference between an inline script and an external script
Although you can write the JS script directly on the page, it is best to use an external script.
>---maintainability: The external script is better maintained, only need to change the script under the corresponding file, better to achieve the separation of structure and behavior.
>---cache: If two pages use the same JS file, then this file needs to be downloaded only once, without the need to write the same code on the page, speeding up the page loading time.
Document type
IE5.5 introduces the concept of a document model through the conversion of document types. The first two modes are the IE5 (some nonstandard features) and the standard mode that IE behaves more standardized. The main difference between the two modes is the rendering of CSS content, as well as the side effects of JS rendering. Because IE first proposed the concept of document type, and other browsers followed, so there is a third mode-near the standard mode, this mode has many characteristics of standard mode but not strict, The main difference between the standard mode and the near-standard pattern is the spacing around the picture (more noticeable when the image is used in the table layout).
When you omit the document type at the very beginning of the page, the weird mode of the document starts. The following standard modes are used:
<!--HTML 4.01 Strict--
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"Http://www.w3.org/TR/html4/strict.dtd" >
<!--XHTML 1.0 Strict--
<! DOCTYPE HTML Public
"-//w3c//dtd XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<!--HTML5--
<! DOCTYPE html>
The near-standard pattern will be based on the traditional and framework document types, as follows:
<!--HTML 4.01 Transitional--
<! DOCTYPE HTML Public
"-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<!--HTML 4.01 Frameset--
<! DOCTYPE HTML Public
"-//w3c//dtd HTML 4.01 frameset//en"
"Http://www.w3.org/TR/html4/frameset.dtd" >
<!--XHTML 1.0 Transitional--
<! DOCTYPE HTML Public
"-//w3c//dtd XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<!--XHTML 1.0 Frameset--
<! DOCTYPE HTML Public
"-//w3c//dtd XHTML 1.0 frameset//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >
Because most of the near-standard patterns and standard patterns are very similar, there is almost a small difference. The standard patterns that people often say may cover both, so they are broadly divided into weird patterns and standard patterns.
The <NOSCRIPT> ELEMENT
<noscript> Tags: Graceful demotion of pages when older browsers do not support JavaScript. <noscript> provides optional content for browsers that do not support JS. When the browser does not support scripts or scripts are disabled, the contents of the,<noscript> will be displayed, otherwise the contents will not be displayed.
<! DOCTYPE html>
<title>example HTML page</title>
<script type= "Text/javascript" defer= "defer" src= "Example1.js" ></script>
<script type= "Text/javascript" defer= "defer" src= "Example2.js" ></script>
<body>
<noscript>
<p>this page requires a javascript-enabled browser.</p>
</noscript>
</body>
In the example above, when the script is disabled or the browser does not support the script, the text inside P will be displayed, otherwise the text in P never appears.
Javascriptの Progressive (i)
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
