JS basic knowledge (variables, data types)

Initial JavaScript

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: does not need to be compiled, and is interpreted and executed line by line by the js interpreter (js engine) during operation. It is also possible now Server-side programming based on Node.js technology)

The role of JavaScript

• Form dynamic verification (password strength detection, the original purpose of js generation)
• Webpage effects
• Server-side development (Node.js)
• Desktop program (Electron)
• App (Cordova)
• Control hardware (IoT Ruff)
• Game development (cocos2d-js)

HTML/CSS/JS relationship

• HTML determines page structure and content
• CSS determines how the web page is presented to users
• JS realizes business logic and page control

The browser executes two parts of JS

• Rendering engine: used to parse HTML and CSS, commonly known as the kernel
• JS engine: used to read the JavaScript code in the webpage, and run it after processing, also known as JS interpreter

JS composition

ECMAScript
ECMAScript is a programming language standardized by ECMA International. This language is widely used on the World Wide Web. It is often called JavaScript or JScript, but in fact the latter two are the implementation and extension of the ECMAScript language.
ECMAScript: specifies JS the programming syntax and basic core knowledge, all browser vendors to abide by a set of industry-standard grammar JS
DOM-- document Object model
document Object model (referred to as DOM), is a W3C-recommended treatment extensible Markup language standard programming interfaces . Through the interface provided by the DOM, various elements on the page can be operated (size, position, color, etc.).
BOM-Browser Object Model
Browser Object Model (BOM for short) refers to the browser object model, which provides independent The object structure of the content that can interact with the browser window. Through BOM, you can operate the browser window, such as pop-up box, control browser jump, obtain resolution, etc.

JS first experience

In-line expression

<input type="button" value="点我试试" onclick="alert('Hello World')" />

• You can write a single line or a small amount of JS code in the event attributes of HTML tags (attributes starting with on)
• Pay attention to the use of single and double quotes: in HTML we recommend using double quotes, in JS we recommend using single quotes
• Poor readability, inconvenient to read when writing large amounts of JS code in html
• Quotation marks are error-prone, and it is very easy to confuse quotation marks when multiple nesting matches
• Use in special circumstances

Inner fitting type

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

• You can write multiple lines of JS code into the script tag
• Embedded JS is a common way to learn

External JS file

<script src="my.js"></script>

• Conducive to the structuring of HTML page code, separate large sections of JS code outside of the HTML page, which is not only beautiful, but also convenient for file-level reuse
• No code can be written in the script tag referencing external JS files
• Suitable for situations where the amount of JS code is relatively large

JavaScript comments

• Number of copies occupied by flex sub-items
• align-self controls the arrangement of children themselves on the cross axis
• The order attribute defines the order of the children

Single line comment

// Used to comment a single line of text (shortcut ctrl + /)

Multi-line comments

/* */ Used to annotate multiple lines of text (default shortcut key alt + shift + a)

JavaScript input and output statements

• alert(msg) A warning box pops up in the browser
• console.log(msg) browser console print output information
• prompt(info) browser pop-up input box

variable

Variables are used to store data containers, get data and modify data through variable names

Storage of variables in memory

Essence: A variable is a piece of space that the program applies for in memory to store data

Use of variables

var age; // 声明一个 名称为age 的变量

• var is a JS keyword used to declare variables (variable means variable). After using this keyword to declare a variable, the computer will automatically allocate memory space for the variable, without the need for the programmer to manage
• age is the variable name defined by the programmer, we need to access the space allocated in the memory through the variable name

Assignment

age = 10; // 给 age 这个变量赋值为10

• = Is used to assign the value on the right to the variable space on the left. This represents the meaning of assignment
• The variable value is the value saved by the programmer into the variable space

Initialization of variables

var age  = 18;  // 声明变量同时赋值为 18 // 声明一个变量并赋值， 我们称之为变量的初始化

Variable syntax expansion

Update variable

After a variable is re-assigned, its original value will be overwritten, and the value of the variable will be subject to the value of the last assignment

var age = 18;
age = 81;  // 最后的结果就是81因为18 被覆盖掉了

Declare multiple variables at the same time

When declaring multiple variables at the same time, you only need to write one var. Use commas to separate multiple variable names

var age = 10,  name = 'zs', sex = 2;

type of data

The simple data types in JavaScript and their descriptions are as follows:

Number

JavaScript number types can store integers and decimals (floating point numbers)

var age = 21;    // 整数
var Age = 21.3747;  // 小数  

String type String

The string type can be any text in quotation marks, and its syntax is double quotation mark "" and single quotation mark ``

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';   // 使用单引号表示字符串  // 常见错误
var strMsg3 = 我爱大肘子;    // 报错，没使用引号，会被认为是js代码，但js没有这些语法

Boolean

• Boolean type has two values: true and false, where true means true (right) and false means false (false)

• When adding a boolean type and a number type, the value of true is 1 and the value of false is 0

  console.log(true + 1); // 2
  console.log(false + 1); // 1