Chapter 1 What is JavaScript

Historical review

JS was originally intended to handle input validation in place of a server-side language.

In the initial stage of the network, form verification needed to be communicated back and forth through the server. In that era, the network speed was slow and the server performance was poor. In order to improve the user experience, the local end (browser) verification had to be adopted.

The realization of the JavaScript

JS is divided into three main contents:

  • ECMAScript core syntax specification
  • DOM document object model
  • BOM Browser object model

ECMAScript

ECMAScript is an internationalized standard JS language, and Web browsers are just one hosting environment in which ECMAScript can be implemented. The host environment provides a baseline implementation of ECMAScript and extensions required by the environment’s own interactions. Extensions such as the DOM API use ECMAScript core types and syntax and can provide additional functionality such as hosting environments and server-side JavaScript platform Nodejs.

ECMAScript describes the following:

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

DOM

The DOM (Document Object Model) is an application programming interface (browser-provided API) that abstracts the entire page into a set of layered nodes

<html>
   <head>
     <title>I am heading</title>
   </head>
   <body>
     <p>I am content</p>
   </body>
</html>
Copy the code

The above deconstruction can be expressed in DOM in the following formDOM allows developers to control the content and deconstruction of the page by creating a tree that represents the document. Using the API provided by DOM, it is easy to add, delete, change and review the page.

From the beginning, every major browser came out with its own browser, and the DOM was different. If this continued, it was likely that programmers would want to program for the browser, and a DOM standard was created.

DOM is not only accessible in JS and is implemented in many other languages, but for browsers it is implemented in ECMAJavascript and DOM is now a big part of JS.

DOM main modules are as follows:

  • Mapping document deconstruction
  • The DOM view describes the interface for tracking different views of a document (such as a document before and after CSS styles are applied)
  • DOM events describe events and interfaces for event handling
  • DOM styles describe the interface that handles CSS styles for elements
  • DOM traversal and scope describe the interface for traversing and manipulating the DOM tree
  • other

BOM BOM is the browser object model. It is used to access and operate the browser window. Everything except the unexpected part of the page is the area of the BOM.

Unlike DOM, BOM has no standard, but with the advent of HTML5 pages, this version covers as many BOM features as possible in formal form.

BOM is primarily for browser Windows and child Windows, as well as browser-specific extensions.

The BOM extension is as follows:

  • The ability to pop up new browsers
  • The ability to move, zoom, and close browser Windows
  • A navigator object that provides detailed content about the browser
  • Location object that provides detailed information about the page the browser loaded
  • Screen object that provides detailed information about the user’s screen resolution
  • Performance object that provides detailed information about browser memory usage, navigation behavior, and time statistics
  • Support for cookies
  • Other objects, like XMLHttpRequest.

summary

JavaScript, the language used to interact with web pages, consists of the following three parts

  • ECMAScript, is the JS defined by the internationalization standard and provides core functionality
  • The DOCUMENT object model, DOM, provides methods and interfaces for interacting with web content
  • BOM, the browser object model, provides methods and interfaces for interacting with the browser

The second chapter

Script element

Insert JS into HTML through the

  • Async indicates asynchronous loading scripts. It is not recommended because the order cannot be controlled
  • Defer means that JS will wait for the document to be fully parsed before starting execution
  • SRC contains the address of the external file to be executed. You must add this property to import the external JS file. If you add this property, you can no longer put code in<script>Inside the tag, will be ignored
  • Type Indicates the language type

Typically, browsers will interpret scripts in the order they appear on the page, provided they don’t use defer and async properties.

The label position

In general, the script is placed at the end of the body element

<body> here is the content <script SRC ='xxxx.js'></script>
</body>
Copy the code

In this way, the page will be rendered before loading JS, and the user will feel that the page will refresh faster

Deferring script execution

Can I say I don’t want to put it on the body, I want to put it on the head? Yes, add the defer attribute

The defer attribute means to defer the execution of the JS code. By adding this attribute, our script tags can be placed on the head. In theory, adding this attribute will also cause different JS files to be loaded in tag order, but not necessarily in practice. So if you want to use it, make sure that there is only one external imported JS file

In addition, this product is not very compatible, which belongs to the later attribute, so it is better to put it on the body

Dynamically loading scripts

The DOM API allows you to dynamically add script elements to the DOM and load specific scripts.

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

Since this method is performed asynchronously, it is similar to adding async property. In addition to compatibility issues, it may not be possible to control the loading order, so it is best to change async property to false. This is synchronous loading, executed in order.

Inline files and external files

The best practice is not to put JS code in script, but to create a separate JS file and import it externally.

Reason:

1. Maintainability. Keeping JS files in a directory is easier to maintain

2. Caching. Browsers cache all imported files by default, and if two pages use the same file at the same time, it will load faster

3. Adapt to the future.

Noscript elements

This tag is an old one. Some early browsers did not support JavaScript, so this tag was created to gracefully degrade the content inside the NoScript tag. In the following two cases, the browser will render the content inside the NoScript tag

  • Browsers don’t support scripts (now almost impossible)
  • Browsers support scripting but the functionality is turned off
</noscript> </noscript>Copy the code

summary

JavaScript is inserted into an HTML page through script tags, either inline or externally

  • External references add the SRC attribute
  • scriptThe element is not addedasyncanddeferIs parsed by the browser in order
  • The browser will parse in order, and to ensure the user’s experience, it is best to put thescriptPut the tag at the end of the content</body>In front of the
  • deferProperties allow you toscriptIn theheadIt also does not affect the rendered page, but its order is not guaranteed, although it is theoretically ordered.

* The async property allows scripts to load asynchronously without affecting rendering, but order is not guaranteed

  • noscriptThe tag can be used to specify the content to be displayed when javascript support is disabled or disabled, or not rendered if the browser supports it

conclusion

From Chapter 1, we have an overview of the STRUCTURE of JS: core functions, DOM, BOM.

In Chapter 2, we learned that JS is inserted into THE HTML page by using script tags, and multiple script tags are parsed in order by default. Then we learned about the attributes of script elements, among which the SRC, async and defer attributes are more important. Of course, how to introduce depends on the people, the way of dynamic loading can also be introduced.

When using these methods, it is good to be aware of the disadvantages it brings. For example, async has the advantage that parsing JS does not block the rendering page, but causes the order of parsing JS to be out of control. The defer attribute lets us place the script tag on the head and wait until the page is rendered to start parsing the JS, but the order is still out of control. Beware of the drawbacks of these attributes; by far the best practice is to put the script tag at the bottom of the content.