This article takes you into the JS grammar (the most complete notes)

Table of contents

basic grammar

1. Introduction method

2. Notes

3. Input and output statements

4. Variables and constants

5. Primitive data types

6. Operators

7. Flow control statement

2. Operation of element objects

3. Attribute operations within elements

4. Text manipulation within elements

event

object oriented

1. The way to define the class

basic grammar

1. Introduction method

The first
```
<script>
    js code
</script>
```
the second
```
<script src="js file"></script>
```

2. Notes

single line comment

<script>
    //This is a single line comment
</script>

multiline comment

<script>
    /*
        This is a multiline comment
    */
</script>

3. Input and output statements

prompt(), example

prompt("Please enter:");
//This statement pops up an input box on the page with a prompt

alert(), example
```
alert("Prompt");
```
console.log(), example
```
console.log("console output");
```

document.write(), example

document.write("Output content to the page");

4. Variables and constants

JavaScript is a weakly typed language, and there is no need to distinguish specific data types when defining variables
define local variables

grammar:let 变量名 = 值;

example:
```
let name = "Zhang San";
let age = 23;
```
define global variables

grammar:变量名 = 值;

example:
```
school = "Tsinghua University";
```
define constant

grammar:const 常量名 = 值;

example:
```
const PI = 3.1415926;
```

5. Primitive data types

type	illustrate
boolean	Boolean type, true or false
undefined	Undefined, that is, no value is assigned when the variable is defined
null	declare null as variable value
number	integer or float
string	string
bigint	Large integers, such as bigint num = 10n; need to add n after the number

The method of judging the original data type:

use typeof()function

example:

let l1 = true;
document.write(typeof(l1)+"<br/>"); //输出boolean

let l2;
document.write(typeof(l2)+"<br/>"); //输出undefined

let l3 = null;
document.write(typeof(l3)+"<br/>"); // output Object, null is considered as object placeholder

let l4 = 123;
document.write(typeof(l4)+"<br/>"); //输出number

let l5 = "abc";
document.write(typeof(l5)+"<br/>"); //输出string

let l6 = 10n;
document.write(typeof(l6)+"<br/>"); //输出bigint

6. Operators

Operators in JavaScript are roughly the same as in Java
difference:
1. ==The number compares whether the values of the variables are the same, such as "10" of the string and 10 of the number return true
2. ===number compares the type and value, then the string "10" compares with the number 10 and returns false
3. Type conversion occurs when calculating numbers of string type

7. Flow control statement

Same as Java, but note that variable definition syntax in flow control statements is different

8. Array

JavaScript array length and type unlimited

The syntax for defining an array is:let 数组名 = [元素];

example:
```
let arr = [1,2,3];
```
Get the length of the array

Use function:数组名.length

example:
```
arr.length;
```

array copy

grammar:数组1 = [...数组2];

example:

let a = [1,2,3];
let b = [...a];//The content of array b is also 1,2,3

array merge

Syntax: 数组1 = [...数组2,数组3];Merge arrays 2 and 3 into 1

example:

let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b];//The content of array c is 1,2,3,4,5,6

string to array

grammar:数组 = [...字符串];

example:

let s = "lxq";
let a = [...s]; the content of a array is l, x, q

9. Function

Functions in JavaScript are similar to methods in Java
Ordinary function

grammar:
```
function method name (parameter) {
    method body;
    return return value;
}
```
Note: If you don’t need to return a value, you don’t need to write the return statement, and you don’t need to write the type of the parameter

variable parameter

grammar:

function method name(...parameters){
    method body;
    return return value;
}

anonymous function

grammar:

function(parameter){
    method body;
    return return value;
}

DOM

1 Overview

DOM refers to the document object model, that is, the document object model
Encapsulate the various components of the HTML document into objects, and with the help of these objects, the dynamic operation of adding, deleting, modifying and checking the HTML document can be performed
Related objects:
1. Document, representing the document object
2. Element, element object
3. Attribute, attribute object
4. Text, text object

2. Operation of element objects

Get the element object according to the document document object

method	illustrate
getElementById(id attribute value)	Get the element object according to the id attribute
getElementsByTagName(tag name)	Get the element object according to the tag name
getElementsByName(name attribute value)	Get the element object according to the name attribute
getElementsByClassName(class attribute value)	Get the element object according to the class attribute

Get the parent element object according to the current element object

子元素对象.parentElement
Create new element object from document object

document.createElement(标签名);
Add the specified child element object to the parent element

父元素对象.appendChild(子元素对象);
The parent element deletes the specified child element

父元素对象.removeChild(子元素对象);
Parent element replaces old child element with new child element

父元素对象.replace(新元素,旧元素);

3. Attribute operations within elements

Set attributes for elements

setAttribute(属性名,属性值);
Get attribute value based on attribute name

getAttribute(属性名);
Remove attributes by attribute name

removeAttribute(属性名);
Add styles to elements

method one:

元素对象.style.样式=值;

like:
```
let ele = document.getElementById("a");
ele.style.color = "red";
```
Method 2:

元素对象.className = "类选择器名";

4. Text manipulation within elements

Set text content, do not parse tags

元素对象.innerText="文本内容";

Note: Do not parse tags means that if the text content has HTML tags, it will not be parsed, it will only be treated as text
Set the text content, parse the label

元素对象.innerHTML="文本内容";

Note: the text content here will be parsed tags

event

Events are code that fires when certain components complete certain actions

common events

event	illustrate
onload	A page or image is loaded
onsubmit	when the form is submitted
onclick	mouse click event
ondblclick	mouse double click
onblur	element loses focus
onfocus	element gets focus
onchange	Used to change the content of the field

How to bind events

Binding through the event attribute in the tag

example:
```
<button οnclick="triggered action"></button>
```

Binding via DOM elements

let b = document.getElementById("btn");
b.οnclick=function(){//use anonymous method
    the triggered action;
}

object oriented

1. The way to define the class

way 1

grammar:

class class name {
    //Construction method
    constructor (variable list) {
        variable assignment;
    }
    // normal method
    method name (parameter list) {
        method body;
        return return value;
    }
}

usage:

let object name = new class name (actual variable value);
ObjectName.VariableName;
object name.method name();

way 2

grammar:

//The object has been created when the class is defined
let objectName = {
    variable name: variable value,
    variable name: variable value,
    
    Method name: function(parameter list){
        method body;
        return return value;
    },
    Method name: function(parameter list){
        method body;
        return return value;
    }
};

usage:

ObjectName.VariableName;
object name.method name();

2. Inheritance

The top-level parent class in JS is Object
Inheritance requires the use of the extends keyword

grammar:
```
class subclass extend parent class{}
```

Inheritance paradigm

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    show(){
        document.write(this.name+","+this.age+"<br/>");
    }
}

class Worker extends Person{
   constructor(name,age,salary){
       //Use super() to call the parent class constructor
        super(name,age);
        this.salary = salary;
   }

   show(){
        document.write(this.name+","+this.age+","+this.salary);
   }
}

let worker = new Worker("Zhang San",23,15000);
worker.show();

built-in object

1.Number object

parseFloat(s)Method to convert a string floating point number to a floating point number
parseInt(s)method to convert a string integer to an integer

2.Math object

ceil(x)method, round up
floor(x)method, round down
round(x)method, rounding
random()method, returns a random number between 0 and 1, excluding 1
pow(x,y)Method, x raised to the yth power

3.Data object

Construction method

method	illustrate
Date()	Create an object based on the current event
Date(value)	Create an object specifying milliseconds
Date(year,month[,day,hour,min,sec,mill])	Specify the field to create an object, the month is 0 to 11

common method

method	illustrate
getFullYear()	get year
getMonth()	get the month
getDate()	get days
getHours()	get hours
getMinutes()	get minutes
getSeconds()	get seconds
getTime()	Returns the number of milliseconds since the origin of the time
toLocalString()	Returns a string in local date format

4. String object

Construction method

method	illustrate
String(value)	Create an object based on the specified string
let s = "string"	direct assignment

common method

method	illustrate
length property	get string length
charAt(index)	Get the character at the specified index
indexOf(value)	获取指定字符串出现的索引位置，不存在返回-1
substring(start,end)	根据给出范围截取字符串，含头不含尾
split(value)	根据指定规则切割字符串，返回数组
replace(old,new)	使用新字符替换旧字符

5.RegExp对象

构造方法

方法	说明
RegExp(规则)	根据制定规则创建对象
let reg = /^规则$/	直接赋值

匹配方法：test(字符串)方法，用于查看字符串是否符合匹配规则

6.Array对象

常用方法

方法	说明
push(元素)	添加元素到数组末尾
pop()	删除数组末尾元素
shift()	删除数组最前面元素
includes(元素)	判断数组是否包含指定的元素
reverse()	反转数组中的元素
sort()	对数组元素排序

7.Set对象

元素唯一，存取顺序一致
构造方法：Set()

常用方法

方法	说明
add(元素)	添加元素
size属性	获取集合长度
keys()	获取迭代器对象
delete(元素)	删除指定元素

Set集合遍历范例

let set = new Set();
set.add("a");
set.add("b");
let st = set.keys();
for(let i = 0;i < set.size;i++){
    document.write(st.next().value);
}

8.Map对象

key唯一，存取顺序一致
构造方法：Map()

常用方法

方法	说明
set(key,value)	向集合添加元素
size属性	获取集合长度
get(key)	根据key获取value
entries()	获取迭代器对象
delete(key)	根据key删除键值对

Map集合遍历范例

let map = new Map();
map.set(1,"a");
map.set(2,"b");
let et = map.entries();
for(let i = 0;i < map.size;i++){
    document.write(et.next().value);
}

9.JSON对象

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率

常用方法

方法	说明
stringfy(对象)	将指定对象转换为json格式字符串
parse(字符串)	将指定json格式字符串解析成对象

范例

let weather = {
    city : "北京";
    date : "2022-08-08";
    temperature : "10~20";
};
let str = JSON.stringfy(weather);
let weather2 = JSON.parse(str);

BOM

BOM(Browser Object Model)，是指浏览器对象模型
将浏览器各个组成部分封装成不同的对象，方便进行操作
具体有如下的对象
1. Navigator，表示浏览器对象
2. Window，窗口对象
3. Location，地址栏对象
4. History，窗口历史对象
5. Screen，显示屏幕对象
Window窗口对象常用功能
- 定时器
  1. 唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识
  2. clearTimeout(标识);方法，根据标识取消一次性定时器
  3. 唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识
  4. clearInterval(标识);方法，根据标识取消循环定时器
- 加载事件：window.onload=触发的事件，用于页面加载完毕时触发的事件
Location地址栏对象常用功能
- 设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容