The introduction

After more than two months of intermittent reading of JavaScript classic little Red Book – JavaScript Advanced Programming (4th edition)

After reading it in detail, I found that the whole book is full of knowledge, and at first glance, the details of each chapter are slightly vague.

So I urge myself to plan to write the focus of each chapter to deepen my impression and understanding, and record what I have learned, thought and understood. To facilitate their own use of the computer’s quick search keywords for rapid positioning and learning, but also hope to help students in need.

If you want to learn systematically and carefully, of course, or read the original book is better, I also strongly recommend oh! The content here is for personal review and summary only.

Hint: some of the chapters that are not personally important or popular will be cut

1. What is JavaScript

It was introduced in 1995 to enable some basic validations to be handled on the client side.

JavaScript has been recognized as the mainstream language for complex computations and interactions, including features such as closures, anonymous functions, and even metaprogramming.

From simple authentication scripts to powerful languages, this chapter is about really learning how to use JavaScript well to understand its nature, history, and limitations.

1.1 Brief historical review

In 1995, a Netscape engineer named Brendan Eich developed a scripting language called Mocha (later renamed LiveScript), called LiveWire on the server side.

Netscape renamed LiveScript to JavaScript (hitching a ride on Java at the time).

In 1996, due to the success of JavaScript1.0, IE developed JScript. So that there were two versions of JavaScript (JavaScript in Navigator and JScript in IE)

In 1997, the European Computer Manufacturers Association (Ecma) created ECMAScript, a new scripting language standard designed to standardize a common, cross-platform, vlock-specific script.

In 1998, ISO and IEC also adopted ECMAScript as a standard. Since then, all major browsers have adopted ECMAScript as the basis of their JavaScript implementation

1.2 JavaScript implementation

JavaScript including

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

1.2.1 ECMAScript

ECMAScript is the language defined by ECMA-262, and a Web browser is just one possible hosting environment for an ECMAScript implementation.

At a basic level, it describes the following parts of the language:

grammar
type
statements
The keyword
Reserved words
The operator
Global object

In general, ECMAScript is just a name for a language that implements all aspects of the specification description

1.2.2 DOM

** DOM (Document Object Model) ** is an application programming interface (API) for using extended XML in HTML. DOM abstracts the entire page as a set of hierarchical nodes. Each component of an HTML or XML page is a kind of node that contains different data.

Developers can use the DOM API to easily remove, add, replace, and modify nodes.

The 1.2.2.1 DOM is required

In keeping with the cross-platform nature of the Web, the World Wide Web Consortium (W3C) began developing DOM standards.

Note: DOM is not only accessible through JavaScript, but is implemented in many other languages. But for browsers, DOM is implemented using ECMAScript, so how has it become such a big part of the JavaScript language

DOM Level 1
- DOM Core: A way of mapping XML documents to facilitate access to and manipulation of any part of the document.
- DOM HTML: Extends the former with htML-specific objects and methods.
DOM Level 2
- DOM view: Describes the interface that tracks different views of a document, such as the document before and after CSS styles are applied.
- DOM events: Interfaces that describe events and their handling.
- DOM Styles: Describes the interface that handles CSS styles for elements.
- DOM traversal and scope: Describes the interface for traversing and manipulating the DOM tree.
DOM Level 3
- DOM Load and Save: A uniform way to Load and Save documents.
- DOM Validation: A method to validate a document.
- DOM Core extension: Supports all the features of XML 1.0, including XML Infoset, XPath, and XML Base.
DOM4: The W3C no longer maintains the DOM by Level, but by DOM Living Standard, a snapshot of which is called DOM4.
- Mutation Observers: alternative Mutation Events.

Note: There is no standard called DOM Level 0, this is just a reference point in DOM history. Can be seen as the original DHTML support in IE4 and Netscape Navigator 4.

1.2.3 BOM

**BOM (Browser object Model) ** Used to support access and manipulation of the browser window, developers can implement manipulation of the browser beyond the display page.

In general, the BOM is for browser Windows and frames, but browser-specific extensions are generally covered by the BOM.

Ability to pop up a new browser window.
The ability to move, zoom, and close browser Windows.
A navigator object that provides detailed information about the browser.
Location object that provides detailed information about the page the browser loaded.
Screen object that provides detailed information about the screen resolution of the copper pot.
Performance object that provides detailed information about browser memory usage, navigation behavior, and time statistics.
Support for cookies.
Other custom objects, such as XMLHttpRequest and IE’s ActiveXObject.

Because BOM has no standard for most of the time, each browser implements its own BOM that defines its own properties and methods. But now with HTML5, the BOM implementation details should become more consistent. About BOM, the following chapters and detailed instructions.

1.3 summarize

JavaScript is a scripting language for interacting with web pages. It has three parts.

ECMAScript: Defined by ECMA-262 and provides core functionality.
DOM (Document Object Model) : Provides methods and interfaces for interacting with web content.
BOM (Browser Object Model) : Provides methods and interfaces for interacting with the browser.

These three parts of JavaScript are supported to varying degrees by all five major Web browsers (IE, Firefox, Chrome, Safari, and Opera). The BOM included in HTML5 also varies from browser to browser.

2. JavaScript in HTML

To introduce JavaScript into web pages, we must first solve the relationship between JavaScript and HTML, the dominant language of web pages. That is, without causing the page to render in other browsers.

2.1 < script > element

The main early way to insert JavaScript into HTML was to use <script> elements. This element was created by Netscape and was first implemented in Netscape Navigator 2. Later, it was officially added to the HTML specification. <script> has the following eight attributes

Async: optional. Indicates that you should start downloading the script immediately, but you cannot block other web actions, such as downloading resources or waiting for other scripts to load. This applies only to external script files.
Charset: optional. The code character set specified with the SRC attribute.
Crossorigin: optional. Configure CORS (Cross-source resource sharing) Settings for related requests. This setting is not used by default.
Defer: optional. Indicates that scripts are executed after the document has been parsed and displayed. This is valid only for external scripts (in IE7 and earlier, inline scripts can also be specified).
Integrity: optional. Allows the docking of the received resource with the specified cryptographic signature to verify the integrity of the child resource. If the signature of the received resource does not match the signature specified by this attribute, an error is reported and the script is not executed. This property can be used to ensure that content delivery networks (CDN) do not provide malicious content.
SRC: optional. Represents an external file that contains the code to execute.
Type: optional. Instead of language, represents the content type (also known as MIME type) of the scripting language in the code block. Usually “application/x-javascript”. If this value is module, the code is treated as an ES6 module, and only then can the import and export keywords appear in the code.
Language: the abandoned.

There are two ways to use <script> :

Insert inline JavaScript code directly into the <script> element:

<script>
  function sayHi() {
    console.log('Hi! ');
  }
</script>
Copy the code

Import JavaScript files in external files
- ```
<script src="example.js"></script>
Copy the code
```
  - In XHTML documents, you can omit the closing tag, but not in HTML files

Avoid using both methods; if both are provided, the browser will simply download and execute the script file, ignoring the in-line code.

Whatever code is included, the browser will interpret <script> in the order they appear on the page, provided they don’t use the defer and async properties.

2.1.1 Label Position

In the past, all

2.1.2 Postponing script Execution

Setting the defer attribute on the <script> element tells the browser that downloading (synchronization) should begin immediately, but execution should be delayed, as in the following code block:

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

Although <script> elements are included in the page’s <head>, they are not executed until the browser parses to the end of the </ HTML > tag.

The defer attribute is only available for external script files, and the defer attribute for inline scripts is ignored in higher browser versions.

Scripts that will be deferred are better placed at the bottom of the page.

For XHTML documents, the defer attribute should be executed as defer=”defer”.

2.1.3 Executing the Script Asynchronously

The async property is similar to the defer property in that both only apply to external scripts and both tell the browser to start downloading immediately. However async is an asynchronous download (sequential execution is not guaranteed)

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

Async Asynchronous scripts are guaranteed to be executed before the page load event, but may be executed before or after DOMContentLoaded (see Chapter 17).

Using Async tells the page that you won’t use Document.write, but good Web development practice doesn’t recommend using this method at all.

For XHTML documents, the defer attribute should be written async=”async”.

2.1.4 Dynamically Loading Scripts

Adding a script element to the DOM dynamically through the DOM API can also load a specified script.

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

2.2 Lines of code and external files

Although it is possible to embed JavaScript code directly in HTML files, it is generally considered a best practice to place JavaScript code in external files whenever possible. Reasons for recommendation are as follows:

Maintainability. JavaScript files hold code uniformly and are easier to maintain, so developers can edit code independently of the HTML pages that use them.
The cache. The browser caches all externally linked JavaScript files based on specific Settings, which means that if the same file is used multiple times, it only needs to be loaded once.
Adapt to the future. By putting JavaScript in external files, you don’t have to worry about XHTML or annotation hacks to solve compatibility problems.

In SPDY/HTTP2, the cost of pre-requests has been significantly reduced, with the advantage of delivering scripts to clients in the form of lightweight, stand-alone JavaScript components.

The reason is that browsers cache lightweight, stand-alone JavaScript files that have been downloaded.

2.4 < noscript > element

The <noscript> element comes into play when sent in either of the following two cases. Otherwise the browser will not render the <noscript> element.
- Browsers do not support scripting.
- Browser support for scripts is turned off.

Here is the code 🌰 snippet

<body>
  <noscript>
  	<p>This page requires a JavaScript-enabled browser.</p>
  </noscript>
</body>
Copy the code

The user is prompted if the browser script is not available, otherwise the user will never see it.

2.5 summarize

To include an external JavaScript file, you must set the SRC property to the URL of the file. Files can be on the same server as web pages, or they can be in completely different domains.
Without the defer and async properties, all
For normal scripts, to improve user experience (to make the page render faster). The

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

– The Little Red Book

The introduction

1. What is JavaScript

1.1 Brief historical review

1.2 JavaScript implementation

1.2.1 ECMAScript

1.2.2 DOM

The 1.2.2.1 DOM is required

1.2.3 BOM

1.3 summarize

2. JavaScript in HTML

2.1 < script > element

2.1.1 Label Position

2.1.2 Postponing script Execution

2.1.3 Executing the Script Asynchronously

2.1.4 Dynamically Loading Scripts

2.2 Lines of code and external files

2.4 < noscript > element

2.5 summarize

– The Little Red Book

The introduction

1. What is JavaScript

1.1 Brief historical review

1.2 JavaScript implementation

1.2.1 ECMAScript

1.2.2 DOM

The 1.2.2.1 DOM is required

1.2.3 BOM

1.3 summarize

2. JavaScript in HTML

2.1 < script > element

2.1.1 Label Position

2.1.2 Postponing script Execution

2.1.3 Executing the Script Asynchronously

2.1.4 Dynamically Loading Scripts

2.2 Lines of code and external files

2.4 < noscript > element

2.5 summarize

Related Posts

A guide to contributing to the open source community from scratch

CSS animation in detail

WebAssembly to front-end engineering (part 2) – WebPack and WebAssembly