Chapter 1 introduction to JavaScript

JavaScript is a scripting language designed for interacting with web pages.

A, ECMAScript

Ecma-262 is a standard that defines the ECMAScript language, which is the language description for implementing the standard. The host environment of ECMAScript includes Web browser, Node, etc. The host environment not only provides basic ECMAScript implementation, but also provides the extension of the language (DOM and BOM), so that the language can interact with the environment and provide more functions.

Ecma-262 specifies the components of the language:

  • grammar
  • type
  • statements
  • The keyword
  • Reserved words
  • The operator
  • object

Second, the DOM

The Document Object Model is the application programming interface for HTML, and DOM maps the entire page to a multi-tier node structure. With the API provided by the DOM, you can remove, add, replace, or modify any node.

Third, BOM

The Browser Object Model is used to access and manipulate the Browser window.

  • The ability to pop up a new browser window
  • The ability to move, zoom, and close browser Windows;
  • Provides browser detailsnavigatorObject;
  • Provides details about the page loaded by the browserlocationObject;
  • Provides detailed information about the resolution of the user’s displayscreenObject;
  • Support for cookies;
  • likeXMLHttpRequestAnd IEActiveXObjectSuch a custom object.

Chapter 2: Using JavaScript in HTML<script>

HTML 5 is<script>The following attributes are defined:

  • 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 additional scripts to load. This applies only to external script files.
  • defer: optional. Indicates that the script can be deferred until the document is fully parsed and displayed. This applies only to external script files.
  • src: optional. Represents an external file that contains the code to execute.
  • type: will choose. Represents the content type (also known as MIME type) of the scripting language in which the code was written. Although the currenttypeThe value of the property is still the sametext/javascript. However, this property is not required, and if it is not specified, the default value is stilltext/javascript.

Second, the use of<script>There are two types of elements:

  • Embed JavaScript code directly in the page: include in<script>The JavaScript code inside the element will be interpreted from top to bottom in the interpreter pair<script>The rest of the page is not loaded or displayed by the browser until the element is interpreted internally.
<script type="text/javascript"> 
function sayHi(){ 
    alert("Hi!"); 
} 
</script>
Copy the code
  • Contains external JavaScript files:srcThe value of the property is a link to an external JavaScript file, which, like embedded JavaScript code, temporarily stops processing of the page while the external JavaScript file is being parsed, including downloading it. As long as it doesn’t existdeferandasyncProperty, the browser will follow<script>Elements are parsed in the order in which they appear on the page.
<script type="text/javascript" src="example.js"></script>
Copy the code

Three,<script>Label Position

If

Defer and async (external script files only)

  • Defer: The script is deferred until the page has been parsed, telling the browser to download now, but deferred execution. The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script is executed before the second.
<head> <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> </head>Copy the code
  • Async: The script is deferred until the page has been parsed, which tells the browser to download immediately but delays execution. There is no guarantee that they will be executed in the order specified.
<head>
    <title>Example HTML Page</title>
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
  </head>
Copy the code

5. Document mode

  • Promiscuous mode: If no document type declaration is found at the beginning of the document, promiscuous mode is enabled by default in all browsers, which varies greatly.
  • Standard mode:
<! DOCTYPEhtml>
Copy the code