In the beginning of the advent of JavaScript, no one will think it will be applied so widely, but also far more complex than most people imagine, in the process of my own learning, there have been many shocks, but often not long, a lot of beautiful use is blurred again, I hope that through the JavaScript Advanced Programming (3rd Edition) of the topic of learning notes, can be more systematic to comb the basic knowledge, but also to their normal learning and work in the process of some of the wonderful use of the record down to facilitate their own learning, of course, Also hope to be able to give some friends in need of help.
Related terminology
Let's briefly mention some background terminology related to JavaScript, not to discuss the history of JavaScript in detail, the friends who want to know can refer to the original book.
- ECMA: European Computer Manufacturers Association (Standard Ecma-262european Computer Manufacturers Association).
- TC39:ECMA 39th Technical Committee (Technical committee#39), composed of programmers from a number of companies interested in scripting language development, is responsible for developing a generic, cross-platform, vendor-neutral scripting language.
- ECMAScript: A scripting language standard defined by ECMA in ECMA-262. ECMAScript is just a scripting language standard, you can do it in your own environment, this environment, called ECMAScript hosting environment, Web browsers can be said to be the most important hosting environment ECMAScript, and different Web browsers, Support for the ECMAScript standard is also different. In addition to Web browsers, Adobe ActionScript also implements ECMAScript. The general hosting environment, in addition to the implementation of ECMAScript standards, will also have their own expansion in order to better interact with the environment.
- The latest version of ES3, Es5:ecmascript, 5.1, was released in July 2011 and can be downloaded free of charge from its official website. The main two versions are the 3rd and 5th Editions, referred to as ES3 and ES5 respectively, and the current five major browsers (IE, Firefox, Chrome, Safari, Opera) have begun to support the various degrees of ES5, but currently in the Web browser compatibility best or 3rd version. In the context of backwards compatibility and security, the 5th edition provides both common and rigorous patterns, which are discussed later.
- LiveScript, JavaScript, and Jscript:livescript were the names of Netscape when it first developed JavaScript, and were temporarily modified to JavaScript in order to catch up with Java's fashion. JScript, however, is the name of Microsoft's scripting language to prevent copyright conflicts. For developers, they are just ECMAScript implementations. In general, in addition to implementing ECMAScript, JavaScript includes extensions for browsers (BOM: Browser object model) and extensions for xml/html APIs (DOM: Document Object model).
- DOM: Document Object Model, the DOM standard developed by the World Web Consortium, Web Consortium, which is responsible for developing web communications standards. Dom is not intended for JavaScript, and many other languages implement DOM as well. At present there are three levels of DOM standard (DOM1, DOM2, DOM3), and sometimes the DOM standard is called the DOM0 level, modern browsers almost all support the DOM2 level standards, but also partially support the DOM3 level standards.
- BOM: Browser object Model (Browser).
Using JavaScript
The main ways to use JavaScript in HTML are:
- Use the <script> tag element to introduce an external file (recommended) and write the code to an external file.
- Embed JavaScript code with <script> tag elements.
- Embed JavaScript code directly in HTML, such as an event handler in an HTML element.
<script> Label elements:
| Property |
is required |
Applicable scope |
Description |
| Async |
Optional |
External files |
Indicates that the script should be downloaded immediately, but should not interfere with other actions on the page, such as downloading resources or other script files |
| CharSet |
Optional |
External files |
The character set that represents the code specified through SRC |
| Defer |
Optional |
External files, ie4-7 also supports embedded code |
Indicates that the script can be deferred until full parsing and display of the document is performed |
| Language |
Optional (deprecated) |
|
The script language used to represent code writing |
| Src |
Optional, required options when using external files |
External files |
Represents an external file that contains the to be executed |
| Type |
Optional, default Text/javascript |
|
Can be viewed as an alternative attribute of language, representing the content type (also known as the MIME type) of the scripting language used by the code. |
Description
(1) External files
A, in XHTML documents, when importing external files, you can use shorthand <script/> but only <script></script> in HTML.
B, when importing external files, the SRC attribute is required, and the code embedded in <script></script>, if any, is ignored.
The C, src attribute can also specify JavaScript files from the external domain, which makes the <script> element extremely powerful and controversial, because it can cause malicious injection of the script.
D, external files only need to include the code in <script></script>, you do not need to include the <script> element itself; The external file general extension is. js, but this is not mandatory.
(2) When you embed code in a <script> element, you only need to specify the type attribute, but the </script> string cannot appear in your code, or you will parse an error. For example:
Copy Code code as follows:
<script type= "Text/javascript" >
Document.writeln (' </script> '), which resolves the </script> in the string as the preceding label Terminator, resulting in an exception
Document.writeln (' </scr ' + ' ipt> ');//By separating the </script>, thereby avoiding the end tag resolution as <script>
</script>
(3) With regard to type attributes, although Text/javascript and Java/ecmascript have not been recommended for use, they have always been used test/javascript, in fact, The MIME type used by the server to transfer JavaScript files is usually application/x-javascript, but setting this value in type may cause the script to be ignored, and in non-IE browsers you can use application/ JavaScript and Application/ecmascript. Type if not specified, the default value is Text/javascript.
(4) As long as the async and defer are not included, the browser will parse in the order in which the <script> appears in the page; When defer is set, the <script> element is immediately downloaded, but the execution is deferred, in the specification, Multiple scripts with defer properties are required and executed before the Domcontentloaded event, but they are not necessarily met in the implementation, and async properties are added to the HTML5, similar to defer, and only to external files, telling the browser to download the files immediately. But deferred execution, unlike multiple scripts with async, even if the order is not specified in the specification, the asynchronous script executes before the Load event, but may execute before or after domcontentloaded.
(5) When you read the code or use some of the IDE to generate the code, you can often see the following structure:
Copy Code code as follows:
<script type= "Text/javascript" >
<! [cdata[
First, here is the JavaScript annotation with//start
Then <! [cdata[...]] The > structure is a special area of XHTML (XML) where text does not need to be parsed to prevent XHTML from parsing the special symbol in code similar to the less-than sign "<" to the element label
If you do not use a CDATA structure, you need to escape to the corresponding entity, such as the less-than sign (<) needs to use (<)
For incompatible XHTML, it is possible to degrade smoothly due to the start//annotation
]]>
</script>
Some common HTML escapes:
| Show |
Description |
Entity Name |
Entity number |
|
Half a square big blank |
|
|
|
The whole square big blank |
|
|
|
The blank that keeps on line |
|
|
| < |
Less than |
< |
< |
| > |
Greater than |
> |
> |
| & |
& Symbols |
& |
& |
| " |
Double quotes |
" |
" |
Some browsers that do not support JavaScript can include JavaScript code in an HTML annotation (since all major browsers support JavaScript, it is no longer recommended):
Copy Code code as follows:
<script><!--
--></script>
For older browsers or browsers that have JavaScript disabled, you can also use the <noscript></noscript> element to render the relevant instructions.
Document Mode
Introducing the concept of a document pattern in IE5.5, which is implemented through the use of document type (DOCTYPE) switching, initially including promiscuous mode (quirks mode) and standard mode (standards mode), promiscuous mode allows IE to behave in the same way as the IE5 that includes non-standard features, The standard mode allows IE to behave more closely to the standard behavior. After IE introduced the document mode, other browsers have followed suit. After that, IE proposed a so-called quasi-standard model (almost standards mode), which has a lot of browser characteristics in line with the standard, but not necessarily. All browsers open promiscuous mode by default.
You can start standard mode in the following ways:
Copy Code code as follows:
<!--HTML 4.01 Strict type-->
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<!--XHTML 1.0 Strict Type-->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<!--HTML5-->
<! DOCTYPE html>
Trigger a quasi-standard pattern by bridging or frameset:
Copy Code code as follows:
<!--HTML 4.01 transition Type-->
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<!--HTML 4.01 framework set of-->
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "HTTP://WWW.W3.ORG/TR/HTML4/FRAMESET.DTD" >
<!--XHTML 1.0 Transition Type-->
<! 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" >
Reference books
[1] Professional JavaScript for WEB developers 3rd Edition:javascript Advanced Programming (3rd edition) [Mei]nicholas c.zakes The People's postal press, Li Song Cao Li.
