JavaScript variables and primitive data types

The composition of JavaScript:

①ECMAScript (ES for short): specifies the JavaScript syntax (there are multiple versions)
②DOM: page document object model, which operates on elements in the page (user interaction, dynamic operation of page elements)
③BOM: browser object model, browser Window operation (such as: url, refresh button, forward, back)

Important concept: ECMAScript
is a set of "standards", no matter what kind of JS engine it is, it must comply with this standard to implement

This article mainly learns ES, that is, JavaScript syntax

Know JavaScript

JavaScript (JS for short)
is a scripting language that runs through an interpreter; it mainly runs on the client (browser), and now it can also run on the server based on node.js

JavaScript running process

• The written code is saved in the file, that is, stored on the hard disk (external storage).
• Double-click the .html file, and the browser (application) will read the file and load the content of the file into memory (data flow direction: hard disk => memory)
• The browser will parse the code written by the user and translate the code into binary instructions that can be recognized by the computer (the work of the interpreter)
• The obtained binary instructions will be loaded and executed by the CPU (data flow direction: memory => CPU)

JS writing format

Inline

Embed directly inside the html element

<input type="button" value="Try it" οnclick="alert('Try it and try it')"> .
Note
: String constants in JS can be represented by single quotes or double quotes.
Double quotes are recommended in HTML, single quotes are recommended in JS

All html tags, as long as they start with on, are almost JS event attribute
events: when an event occurs during user interaction, the JS code bound to the event will be called

Embedded

write in the script tag

< script>
js code;
</script>
.

Example:

< script>
    alert("一朵花花");
< /script>

The script tag can be written inside the head tag, inside the body tag, or inside the Html tag outside the body tag (recommended)

External formula

< script src="hello.js">< /script>
.
Note : In this case, the code cannot be written in the middle of the script tag, it must be empty (the code will not be executed after writing). It
is suitable for the situation with many codes

Example:
1. First create a js file

alert("一朵花花...");

2. Import external files

<script src="外部引入的js文件.js"></script>

note

single-line comment//
multi-line comment/* */
Multi-line comments cannot be nested

①// Single-line comment
.
② /*
Multi-line comment
Multi-line comment
*/

input and output functions

input-prompt

pop up an input box

<input type="button" value=" prompt " οnclick=" prompt ('Please enter your name:')">

output

alert
pops up an alert dialog box, outputs the result, and prompts some information

<input type="button" value=" alert " οnclick=" alert ('pop-up content')">

console.log
prints a log on the console (for programmers to see), for developers to debug

<input type="button" value="console.log" οnclick="console.log('Please enter your name:')"> .
Note
: Enter "log" directly in VSCode and press the tab key to quickly enter console.log

You need to open the browser's developer tools (F12), Console (console) tab to see the results:

variable

basic usage

var variable name = value;
let variable name = value;
.
This value can be dynamically specified as the desired type (numeric type, string type, Boolean type...)
var and let just mean to define variables

Example:

<script>
    var name = prompt("请输入姓名:");
    var age = prompt("请输入年龄:");
    var score = prompt("请输入分数");
    alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
    score + "\n");
</script>

• The + sign means string splicing, that is, connecting two strings end to end into one string
• \n means newline

Understand dynamic typing

In Java, a variable cannot be changed after its type is determined; in JS, it can be changed,
that is: in JS, a variable can change from one type to another

1. Dynamically typed programming language: the type of the variable is determined at runtime (the type is determined when the = statement is run)

<script>
    var a = 10;     
    var b = "huahua";   
</script>

2. As the program runs, the type of the variable may change

<script>
    var a = 10;     // 数字
    a = "huahua";   // 字符串
</script>

C, C++, Java, Go and other languages ​​are statically typed languages: the type of a variable is determined when it is created and cannot be changed at runtime

basic data type

JS built-in data types:

• number : Number type, does not distinguish between integers and decimals (Integers and floating-point numbers are not distinguished in JS, and are all represented by "number type" uniformly)
• boolean : true for true, false for false.
• string : string type.
• undefined : There is only the unique value undefined, which means an undefined value.
• null : only the unique value null, representing an empty value

number Number type

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

One octal digit corresponds to three binary digits,
and one hexadecimal digit corresponds to four binary digits. (Two hexadecimal digits are one byte)

special numeric value

• Infinity : Infinity, greater than any number, means that the number has exceeded the range that JS can express.
• -Infinity : Negative infinity, less than any number, indicating that the number has exceeded the range that JS can represent.
• NaN : Indicates that the current result is not a number (using a value to perform an operation that cannot be calculated)

var max = Number.MAX_VALUE;
console.log(max * 2);     // 得到 Infinity
console.log(-max * 2);    // 得到 -Infinity
console.log('hehe' - 10); // 得到 NaN

Notice:

1. Negative infinity and infinitesimal are not the same thing, infinitesimal means infinitely approaching 0 , the value is 1 / Infinity
2. The result of 'hehe' + 10 is not NaN, but 'hehe10', which will implicitly convert the number into a string, and then concatenate the string.
   String + value will dynamically convert the value into a string at runtime , and then string splicing
3. You can use the isNaN function to determine whether it is a non-number

4. console.log(isNaN(10)); —— false
   console.log(isNaN(‘hehe’ - 10)); —— true

String string type

Basic rules:
String literals need to be enclosed in quotation marks, single quotation marks and double quotation marks are acceptable

var a = "haha";
var b = 'haha';

var c = hehe;     hehe需要先定义好该变量再使用，否则会报错；js报错，后边的代码就不再执行

Escape character:
If the string already contains quotation marks, use the escape character

var msg = "My name is "zhangsan""; —— 出错
var msg = "My name is \"zhangsan\"";  —— 正确, 使用转义字符. \" 来表示字符串内部的引号. 
var msg = "My name is 'zhangsan'";    ——  正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    —— 正确, 搭配使用单双引号

Within the string, you need to use single quotes/double quotes as part of the string, you can:

1. add \ escape
2. Inside and outside, use different quotes

Find the length of the string
Use the length property of String, ie . length

Example:

var v = "Java";
console.log(v.length);   //4

string concatenation

• Use + to splice

var p = "I am ";
var q = "huahua";
console.log(p + q);

• Numbers and strings can also be concatenated

var p = "My age is ";
var q = 18;
console.log(p + q);

boolean Boolean type

Indicates "true" and "false", as in Java

undefined undefined data type

1. If a variable has not been initialized, the result is undefined, which is of type undefined

Distinguish here: var e = null;
The e variable is defined and initialized, but the value is null

var d; 
console.log(d);

d变量定义了，但未初始化，此时 d=undefined，不会报错

2. Add undefined and a string, and the result is concatenated

var d; 
console.log(d + " Yeah");

3. Adding undefined to a number yields NaN

var d; 
console.log(d + 66);

null empty value type

null indicates that the current variable is a "null value"

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");

Notice:

• Both null and undefined indicate illegal values, but the emphasis is different
• null means that the current value is empty (equivalent to having an empty box)
• undefined means that the current variable is undefined (equivalent to not even having a box)