• 📢 hello everyone, I am Xiao Cheng, a student, recently in the brush little Red book, this is a study notes

  • 📢 wish you and I together in this wanton life big shine

Chapter 1: What is JavaScript

1. Implementation of JavaScript

The complete JavaScript implementation consists of the following parts:

  • Core (ECMAScript)
  • Document Object Model (DOM)
  • Browser Object Model (BOM)

1.1 ECMAScript

As defined by ECMA-262, ECMAScript has no dependency on Web browsers, which are just one of the possible hosting environments for ECMAScript implementations. Other hosting environments include the server-side JavaScript platform Node.js and the soon-to-be-obsolete Adobe Flash

At the basic level, it describes the syntax, types, statements, keywords, reserved words, operators, global objects of the language

ECMAScript is simply the name of a language that implements all aspects of this specification.

JavaScript implements ECMAScript

1.2 the DOM

DOM is an application programming interface (API) for XML but extended for HTML. DOM prints the entire page as a multi-layer node structure. Each component of an HTML or XHL page is a node of some type, and each node contains a different type of data.

DOM allows developers to control the content and structure of web pages by creating trees that represent documents. With the API provided by DOM, developers can easily complete CRUD operations on nodes

1.2.1 DOM levels

DOM Level 1:

It consists of two modules: DOM Core and DOM HTML. The primary goal is to map the structure of the document.

DOM Level 2:

A new module

  • DOM view: Defines an interface to track views of different document types
  • DOM Events: Defines the interface for events and event handling
  • DOM Styles: Defines an interface for applying styles to elements based on CSS
  • DOM traversal: Defines an interface for traversing and manipulating the document tree
DOM Level 3:

Introduced methods to load and save documents in a uniform manner, as well as methods to validate documents

1.2.2 other DOM

  • Scalable Vector Graphics (SVG)

  • MathML (Mathematical Markup Language)

  • Synchronized Multimedia Integration Language (SMIL)

1.3 BOM

Browser object model for accessing and manipulating browser Windows. With a BOM, developers can manipulate the parts of the browser that are not displayed on the page

2. Summary

JavaScript is a scripting language used to interact with web pages. It consists of three components.

  • ECMAScript: Defined by ECMA-262 and provides core functionality

  • Document Object Model (DOM) : Provides methods and interfaces for interacting with web content

  • Browser Object Model (BOM) : Provides methods and interfaces for interacting with the browser

Chapter 2: JavaScript in HTML

1. The < script > element

There are two main ways to insert JavaScript into an HTML page:

  1. Using
  2. External references to JavaScript scripts

In the latest specification, the <script> element has the following six attributes

attribute describe
async Sets or returns whether to execute the script asynchronously (once the script is available).
charset Sets or returns the value of the charset property of the script.
defer Sets or returns whether to execute the script when the page is parsed.
src Sets or returns the value of the SRC attribute of the script.
text Sets or returns the contents of all child text nodes of the script.
type Sets or returns the value of the type attribute of the script.

Embed JavaScript code internally

<script type = "text/javascript">
    function () {
        alert("Hello world!")}</script>
Copy the code

External references to JavaScript scripts

<script src="example.js"></script>
Copy the code

Note: with the SRC attribute

As shown below, the code inside the <script> tag is ignored and only the script file is executed

<script src="example.js">
    function () {
        alert("Hello world!")}</script>
Copy the code

1.1 Label Position

The traditional approach is to put all

To avoid this problem, place the JavaScript reference after the page content in the <body> element. When the page content is fully rendered in the browser, the JavaScript code is parsed so that the browser can display a blank page for less time

1.2 Delaying Script Execution

Take the defer property, which indicates that the script will execute without changing the structure of the page.

That is, the script is delayed until the entire page is parsed. Therefore, setting the defer attribute on the <script> element tells the browser to download it immediately, but defer execution.

 <script defer src="example1.js"></script>
Copy the code

== Only external scripts ==

When multiple scripts add the defer property, execute in order

1.3 Asynchronous Script Execution

Use the async property, which tells the browser that it doesn’t need to wait for the script to download and execute before loading the page.

<script async src="example2.js"></script>
Copy the code

== It is recommended that asynchronous scripts do not change DOM== during loading

1.4 Dynamically Loading scripts

Using the DOM API to operate, script elements are added to the DOM

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script);
Copy the code

Obtaining external resources in this way, which is not visible to the preloader, can seriously affect the priority of the resource acquisition queue. So if you want to let the preprocessor know that these files exist, you can declare them explicitly within the <head> tag

<link rel="preload" href="gibberish.js">
Copy the code

2. External code benefits

  1. Maintainability: Having all your JavaScript files in one folder makes it easier to maintain.
  2. Cacheable: Two pages use the same JavaScript file at the same time. This file only needs to be downloaded once and the browser loads the page faster.
  3. To adapt to the future

3. < noscript > tag

Displays alternative content in a browser that does not support JavaScript.

4. Summary

  1. Insert JavaScript into an HTML page using the
  2. When you include external JavaScript files, you must set the SRC attribute to the URL pointing to the corresponding file
  3. Without the attributes defer and async, all

This is the first day of reading advanced Programming in JavaScript (4th edition), which is 20/865