1. What is JavaScript

  • JavaScript is one of the most popular languages in the world. It is a scripting language that runs on the client side.

  • Scripting language: no compilation is required, the JS interpreter (JS engine) interprets and executes line by line during execution

  • Server-side programming is now also possible based on Node.js technology

2. What JavaScript does

  • Form dynamic validation (password strength detection) (the original purpose of JS creation)
  • Web page special effects
  • Server-side development (Node.js)
  • Desktop Program (Electron)
  • App(Cordova)
  • Control Hardware – Internet of Things (Ruff)
  • Game Development (Cocos2D-JS)

3. HTML/CSS/JS relationship

4. Introduction to browser JS execution

The browser is divided into two parts: rendering engine and JS engine

The browser itself does not execute JS code, but rather uses a built-in JavaScript engine (interpreter) to execute JS code. The JS engine interprets each line of source code line by line (translated into machine language) and then executes it by computer, so JavaScript is classified as a scripting language that interprets execution line by line.

5. Composition of JS

5.1. ECMAScript

ECMAScript is a programming language standardized by ECMA International (formerly the European Computer Manufacturers Association). The language is widely used on the World Wide Web. It is often referred to as JavaScript or JScript, but the latter two are actually implementations and extensions of ECMAScript.

ECMAScript: defines the javascript syntax and basic core knowledge. It is an industry standard for JAVASCRIPT syntax that all browser vendors comply with.

See MDN: MDN Manual for more information

5.2. DOM – Document object model

DocumentObject Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language. The DOM provides interfaces to manipulate various elements on the page (size, position, color, and so on)

5.3. BOM – Browser object model

The Browser Object Model (BOM) refers to the Browser Object Model, which provides a content-independent Object structure that can interact with the Browser window. The BOM allows you to operate browser Windows, such as pop-up boxes, control browser hops, and obtain resolution.

6. JS initial experience

JS has three writing positions: inline, inline, and external.

6.1. The inline type

<input type="button" value=" onclick="alert('Hello World')" />Copy the code
  • You can put a single line or a small amount of JS code in an EVENT attribute (an attribute starting with ON) of an HTML tag, such as onclick
  • Note the use of single and double quotation marks: we recommend double quotation marks in HTML and single quotation marks in JS
  • Poor readability, in HTML to write a large number of JS code, not easy to read;
  • Quotation marks are error-prone. When quotation marks are nested in multiple layers, they are easily confused.
  • For special use

6.2. Embedded

<script> alert('Hello World~! '); </script>Copy the code
  • Multiple lines of JS code can be written to a script tag
  • Embedded JS is a common way to learn

6.3. External JS files

<script src="my.js"></script>
Copy the code
  • It is conducive to HTML page code structure, and separates large sections of JS code from THE HTML page, which is both beautiful and convenient for file level reuse
  • No code can be written between script tags that reference external JS files
  • Suitable for large AMOUNT of JS code