JS Note 01

sect1.

Types: Number, String, Boolean, Undefined, Null, Symbol, BigInt

js variable 无类型

// /**/

NaN： Not A Number

let: block scoped, const, var: function scoped

operator: calculate, + concatenate, typeof, +=, ++,

+可以直接加string 和number， number会自动转string

Template literals: `` ${} \n\

If(){}else if{}else{}

Type coercion, 运算符两侧不同类型时发生，when using plus, number->string， when using minus, string->number

Type conversion: Number(), String()

Falsy Values: 0, “”, undefined, null, NaN —>Boolean() —>False— >usually coercion

=:strict equal ! ==:type coercion, loose equal !=

prompt(“xxxxx”)

And:&& or:|| not: !

Switch(x){ Case x: Break; Case y: Break; Default: }

;结尾的一般是Statement:no value expression:value

conditional operator：exp ？ture-exe：false-exe —>expression

eg. let drink = age>18 ? Wine: water 可以只返值，也可以执行语句

sect2.

‘use strict’;

Function:

function func1(arg1,arg2){ return XXX;} //Function Declarations,can be called before defining.

const func2 = function (arg1,arg2){ return XXX;} //Function Expressions, can not be called before defining.

const func3 = (arg1, arg2)=>{ return XXX;} //arrow functions

Array：const A = [a,b,123]; const B = new Array(a,b,123);

A[0] A.length //property const定义的array可以改 array元素类型可以不同

methods：

A.push(x)//return newLength加后面 A.unshift(y)//return newLength加第一个

A.pop()//return the poped one去掉最后 A.shift()//return the removed one去掉第一

A.indexOf() A.includes()

Objects：

const A = {a:123, b:“xxx”};//property

A.a A[‘a’]

dot定义 ——— A.xxx= ——— A.xxx dot Member Access

​ | | |

​ A[‘xxx’]= A[‘xxx’] [string] Computed Member Access

methods：

const A={method1:func1(arg1){xxx}}

A.method1(arg);

this指call这个函数的object，可以用来取property也可以用来加property

this取的参数：不需要从外面输入的参数 不能用Arrow Function

Loop：

for(x=1;x<=10;x++){xxx continue; break;}

while(x<10){xxx}

Sect3. DOM

DOM：Document Object Model. Methods and Properties：WEB APIs

Each HTML element is one object.

event handler：event发生的时候执行的function.==event listener

数据可以存在Code里也可以存在DOM里.

document.querySelector().addEventListener(‘click’, func)

document.querySelectorAll()

改变元素的CSS属性一般拓展到类，然后增减类classes，style。

element.classList.remove()

element.classList.add()

element.classList.toggle()

ducument.addEventListener(‘keydown’, func(e){console.log(e)})

element.textContent

用🆔选择element：ducument.querySelector(‘#ID’) == document.getElementById(‘ID’)

Sec4.

sec5.