Day 01 mission

• I met JS
  • Markup languages and programming languages
  • Compiled and interpreted languages
  • Script language JS
  • Brief introduction to the history of the JS language
  • JS language structure
  • Browser components
  • Five major browser kernel engines
  • Basic understanding of grammar
    • JS writable location
    • Input-output language
    • annotation
    • A semicolon
    • Spaces and line feeds

I met JS

Markup languages and programming languages

Unlike HTML and CSS, JavaScript is a real programming language

Graph of TD ((markup language)) - A label - > B ((div)) ((div)) - B properties - > D ((class)) A ((markup language)) - label - > C ((img) C ((img)) - properties - > E ((SRC)) A(markup language)) -- tag --> F((A)) F((A)) -- attribute --> G(href)

Graph of TD (programming language) (A) - data - > B ([variable]) A ((programming language)) - operation - > C (+ - < br > * /) () A ((programming language)) - logic - > D ([if < br > else]) A ((programming language)) -- loop --> E([for<br>while])

• Markup language: a web page is organized by simple symbols such as tags (tags/elements) and tag attributes that represent different layout units.

• Programming language: with variables, logical judgments, loops and other programming statements must have syntax specifications.

Computer programming language

Language is a tool for communication, and human language is a tool for communication between people.

There are only binary ones and zeros in the linguistic world of computers. Just as there are only 0 to 9 digits in decimal, there are only 0 and 1 digits in binary. In decimal, there are 1 digits in ten. In binary, there are 1 digits in two. So you can’t have a number greater than 1 in binary.

JS belongs to the high-level programming language, low-level language such as assembly language. The higher the level, the closer it is to human-readable languages, and the lower it is to machine languages (binary languages).

There are two ways to convert a high-level language into a machine-readable binary language:

• Overall compilation: complete translation, generating binary files, just like reading the translated English articles directly.
• Line by line translation: requires an interpreter to translate in real time, as in simultaneous interpretation.

Compiled and interpreted languages

JS is an interpreted language. JS needs to be run in a browser (host environment/interpreter)

• Compilability: compile the code into a binary file that can be recognized by the computer before execution, such as C, C++, Golang will compile the.exe file first, and then run the binary file directly.

  • Advantages: Compiled and ready to use, no need to run the environment or interpreter

  • Disadvantages: Poor portability, because each platform (operating system) can understand the binary file may be different, need to compile (for example, Windows needs to compile to an. Exe file, Linux needs to compile to an. Erp file).

Graph TD A (binary <br>.erp) graph TD A (binary <br>.erp) graph TD A (binary <br>.erp) -- Run directly under Linux --> implement the function

• Interpretability: Code is not compiled before execution, but interpreted line by line as it is run, hence the need for an interpreter, such as a browser.

  • Advantages: Good portability, as long as each platform (operating system) with the language interpreter, such as JS, PHP, Python

  • Disadvantages: Slow speed, need to constantly switch between reading code and interpretation, switching process also needs to consume performance and time

Graph TD A[source file] -- Run --> B(Windows browser) -- Run --> D(Linux browser) -- Run --> Implement

It can be seen that when JS runs, there is a browser as the host environment for bearing, so that there is another layer between the language and the machine, which is why JS is called a high-level language

Script language JS

Early JS was just a form validation language for browser clients. The purpose is to improve the user experience.

Form validation without JS

SequenceDiagram Autonumber Participant A as Browser Participant B as Server A->>B: Request validation Note Left of A: form information Note over A, B: Note left of A: Verification failed, please fill in again! Note left of A: the registration is successful. Note left of A: The registration is successful. Note right of B: Validates form information

Form validation with JS

SequenceDiagram Autonumber Participant A as Browser Participant B as Server A->>A: Request validation Note Left of A: form information Note over A, B: Note left of A: Verify not pass, please fill in again! Note left of A: verify and register successfully. Note Right of A: Validates form information

Brief introduction to the history of the JS language

• ECMA: European Computer Manufacturers Association

• TC39: ECMA’s Technical Committee 39 (TC39) is responsible for developing the ECMAScript standard

• ECMAScript is a scripting language standard for ECMA-262 approved by the EXPERT Committee TC39 of the ECMA organization. Commonly known as JavaScript. ECMAScript can be understood as the standard specification for JavaScript syntax, so JavaScript is an implementation of the ECMAScript standard.

In July 1997, the ECMA organization released the first version of standard document 262 (ECMA-262). ECMAScript 1.0 was released.

ECMAScript 2.0 was released in June 1998.

ECMAScript 3.0 was released in December 1999.

In October 2007,ECMAScript 4.0The draft version was released, with serious disagreement over the aggressive goals of version 4.0.

In July 2008, ECMA met and decided to discontinue development of ECMAScript 4.0. Release a few of them as ECMAScript 3.1, involving improvements to existing functionality. Shortly after the meeting, ECMAScript 3.1 was renamed ECMAScript 5.

In December 2009, ECMAScript version 5.0 was released.

In June 2015, ECMAScript 6 was released and renamed “ECMAScript 2015”. Commonly known as: ES6

The TC39 committee plans to publish an annual version of ECMAScript under the name of the year, “ECMAScript 2016” in 2016, “ECMAScript 2017” in 2017, and so on.

JS language structure

graph TD
  subgraph id1 [  ]
    id((JavaScript)) --> ECMAScript
    id((JavaScript)) --> DOM
    id((JavaScript)) --> BOM
  end

• ECMAScript: Syntax, types, statements, keywords, reserved words, operators, global objects

• Document Object Model (DOM) : Turn a web page into a JavaScript object that can be scripted for various operations (such as adding and deleting content).

• Browser Object Model (BOM)

Browser components

Graph LR subgraph id1 [] A((browser)) --> B[shell interface] A((browser)) --> C[kernel] A((browser)) --> F[other] end subgraph id2 [] C(kernel)) --> D[rendering engine] C(kernel)) --> E[JS engine] end

Five major browser kernel engines

Basic understanding of grammar

JS writable location

• Embedded in HTML files with script tags
• Store it in a separate file with the suffix js

Input-output language

• Console. log: console output
• Document. write: Page output
• Alert: the browser is displayed
• Prompt: Receives input values

annotation

• Single-line comment: //
• Multi-line comments: /**/

A semicolon

• I can leave it out, but there are a few things to be careful about, and WE’ll talk about them later

Spaces and line feeds

• Spaces and newlines are not part of the syntax