“This is the 14th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Learning JavaScript for the first time

3.1. What is JavaScript

JavaScript is one of the most popular languages in the world. It is aScript language that runs on the client side (Script means Script). Script language does not need to be compiled, but is interpreted and executed line by line by JS interpreter (JS engine) during the running process. Server-side programming is now also possible based on Node.js technology.

3.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.3, HTML/CSS/JS relationship

3.4. The browser executes JS

The browser is split into two parts:

1. Rendering engine: Used to parse HTML and CSS, commonly known as the kernel, such as Chrome blink.

2. JS engine: Also known as the JS interpreter, it reads JavaScript code from a web page, processes it and runs it, such as Chrome’s V8.

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.

3.5. Composition of JS

3.5.1 track of 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 programming syntax and basic core knowledge of JS. It is an industry standard of JS syntax that all browser manufacturers comply with.

3.5.2, DOM

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)

3.5.3, BOM

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.

3.6. Introduction of JavaScript

There are three ways to import JavaScript: inline, inline, and external.

3.6.1 inline

<input type="button" value="Click on me and try." onclick="alert('Hello World')" />
Copy the code

You can write a single line or a small amount of JavaScript code inside the event attributes of an HTML tag (attributes that start with on), such as onclick(). Note the use of single and double quotes, which is recommended in HTML, and single quotes, which is recommended in JavaScript. The downside of this inline expression is obvious, and we use it only in special cases:

1. Poor readability, in HTML to write a large number of JS code, not easy to read.
2. Quotation marks are error-prone. When quotation marks are nested in multiple layers, they are easily confused.

3.6.2. Inline

Multiple lines of JS code can be written into script tags. Embedded JS is a common way to learn.

<script>
    alert('Hello  World~!');
</script>
Copy the code

3.6.3. External JS files

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 in the middle of a script tag referencing an external JS file. This applies to situations where there is a large amount of JS code.

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

3.7. JavaScript comments

To improve code readability, JS, like CSS, also provides comments. There are two main types of comments in JavaScript:

1. Single-line comments
2. Multiline comment

3.7.1. Single-line comments

Single-line comments are commented as follows:

// I am a line of text, do not want to be executed by the JS engine, so comment it up
Copy the code

3.7.2 Multi-line comments

Multi-line comments can be commented as follows:

/* Get the user's age and name and display it in the prompt box */
Copy the code

3.8. JavaScript INPUT and output statements

In order to facilitate the input and output of information, JS provides some input and output statements, which are commonly used in three ways, among which the first two are the most common:

Alert () is mainly used to display messages to the user, and nsole.log() is used to show the programmer himself runtime messages.