1.1 JS的調(diào)用方式與執(zhí)行順序

使用方式
HTML頁(yè)面中的任意位置加上<script type="module"></script>標(biāo)簽即可。

常見(jiàn)使用方式有以下幾種：

直接在<script type="module"></script>標(biāo)簽內(nèi)寫(xiě)JS代碼。script type="module"限制變量的作用域
直接引入文件：<script type="module" src="/static/js/index.js"></script>。
將所需的代碼通過(guò)import關(guān)鍵字引入到當(dāng)前作用域。
例如：

/static/js/index.js文件中的內(nèi)容為：

let name = "mainkeys";function print() {console.log("Hello World!");
}export {name,print
}

<script type="module"></script>中的內(nèi)容為：

<script type="module">import { name, print } from "/static/js/index.js";console.log(name);print();
</script>

執(zhí)行順序
類(lèi)似于HTML與CSS，按從上到下的順序執(zhí)行；
事件驅(qū)動(dòng)執(zhí)行
HTML, CSS, JavaScript三者之間的關(guān)系
CSS控制HTML
JavaScript控制HTML與CSS
為了方便開(kāi)發(fā)與維護(hù)，盡量按照上述順序?qū)懘a。例如：不要在HTML中調(diào)用JavaScript中的函數(shù)。

---

1.2 變量與運(yùn)算符

let與const
用來(lái)聲明變量，作用范圍為當(dāng)前作用域。

• let用來(lái)定義變量；
• const用來(lái)定義常量；
  例如：

let s = "mainkeys", x = 5;let d = {name: "yxc",age: 18,
}const n = 100;

變量類(lèi)型
number：數(shù)值變量，例如1, 2.5
string：字符串，例如"acwing", ‘yxc’，單引號(hào)與雙引號(hào)均可。字符串中的每個(gè)字符為只讀類(lèi)型。
boolean：布爾值，例如true, false
object：對(duì)象，類(lèi)似于C++中的指針，例如[1, 2, 3]，{name: "dy", age: 21}，null
undefined：未定義的變量
類(lèi)似于Python，JavaScript中的變量類(lèi)型可以動(dòng)態(tài)變化。

運(yùn)算符
與C++、Python、Java類(lèi)似，不同點(diǎn)：

**表示乘方
等于與不等于用===和!==

---

1.3 輸入與輸出

輸入
從HTML與用戶(hù)的交互中輸入信息，例如通過(guò)input、textarea等標(biāo)簽獲取用戶(hù)的鍵盤(pán)輸入，通過(guò)click、hover等事件獲取用戶(hù)的鼠標(biāo)輸入。
通過(guò)Ajax與WebSocket從服務(wù)器端獲取輸入
輸出
調(diào)試用console.log，會(huì)將信息輸出到瀏覽器控制臺(tái)
改變當(dāng)前頁(yè)面的HTML與CSS
通過(guò)Ajax與WebSocket將結(jié)果返回到服務(wù)器
格式化字符串

• 字符串中填入數(shù)值：
  let name = ‘dy’, age = 21;
  let s = My name is ${name}, I'm ${age} years old.;
• 定義多行字符串：

let s = 
`<div><h2>標(biāo)題</h2><p>段落</p>
/div>`

保留兩位小數(shù)如何輸出

let x = 1.234567;
let s = `${x.toFixed(2)}`;

---

1.4 判斷語(yǔ)句

JavaScript中的if-else語(yǔ)句與C++、Python、Java中類(lèi)似。

例如：

let score = 90;
if (score >= 85) {console.log("A");
} else if (score >= 70) {console.log("B");
} else if (score >= 60) {console.log("C");
} else {console.log("D");
}

JavaScript中的邏輯運(yùn)算符也與C++、Java中類(lèi)似：

&&表示與
||表示或
!表示非

---

1.5 循環(huán)語(yǔ)句

JavaScript中的循環(huán)語(yǔ)句與C++中類(lèi)似，也包含for、while、do while循環(huán)。

for循環(huán)

for (let i = 0; i < 10; i++) {console.log(i);
}

枚舉對(duì)象或數(shù)組時(shí)可以使用：

for-in循環(huán)，可以枚舉數(shù)組中的下標(biāo)，以及對(duì)象中的key
for-of循環(huán)，可以枚舉數(shù)組中的值，以及對(duì)象中的value
while循環(huán)

let i = 0;
while (i < 10) {console.log(i);i++;
}

do while循環(huán)
do while語(yǔ)句與while語(yǔ)句非常相似。唯一的區(qū)別是，do while語(yǔ)句限制性循環(huán)體后檢查條件。不管條件的值如何，我們都要至少執(zhí)行一次循環(huán)。

let i = 0;
do {console.log(i);i++;
} while (i < 10);

---

1.6對(duì)象

英文名稱(chēng)：Object。
類(lèi)似于C++中的map，由key:value對(duì)構(gòu)成。

value可以是變量、數(shù)組、對(duì)象、函數(shù)等。
函數(shù)定義中的this用來(lái)引用該函數(shù)的“擁有者”。
例如：

let person = {name: "yxc",age: 18,money: 0,add_money: function (x) {this.money += x;}
}

對(duì)象屬性與函數(shù)的調(diào)用方式：

person.name、person.add_money()
person["name"]、person["add_money"]()

---

1.7數(shù)組

數(shù)組是一種特殊的對(duì)象。
類(lèi)似于C++中的數(shù)組，但是數(shù)組中的元素類(lèi)型可以不同。

數(shù)組中的元素可以是變量、數(shù)組、對(duì)象、函數(shù)。
例如：

let a = [1, 2, "a", "yxc"];let b = [1,  // 變量"yxc",  // 變量['a', 'b', 3],  // 數(shù)組function () {  // 函數(shù)console.log("Hello World");},{ name: "yxc", age: 18 }  // 對(duì)象
];

訪(fǎng)問(wèn)數(shù)組中的元素
通過(guò)下標(biāo)。

例如：

a[0] = 1; // 訪(fǎng)問(wèn)數(shù)組a[]的第0個(gè)元素
console.log(a[0]);
數(shù)組的常用屬性和函數(shù)
屬性length：返回?cái)?shù)組長(zhǎng)度。注意length是屬性，不是函數(shù)，因此調(diào)用的時(shí)候不要加()
函數(shù)push()：向數(shù)組末尾添加元素
函數(shù)pop()：刪除數(shù)組末尾的元素
函數(shù)splice(a, b)：刪除從a開(kāi)始的b個(gè)元素
函數(shù)sort()：將整個(gè)數(shù)組從小到大排序
自定義比較函數(shù)：array.sort(cmp)，函數(shù)cmp輸入兩個(gè)需要比較的元素，返回一個(gè)實(shí)數(shù)，負(fù)數(shù)表示第一個(gè)參數(shù)小于第二個(gè)參數(shù)，0表示相等，正數(shù)表示大于。

---

1.8 函數(shù)

函數(shù)是用對(duì)象來(lái)實(shí)現(xiàn)的。
函數(shù)也C++中的函數(shù)類(lèi)似。

定義方式

function add(a, b) {return a + b;
}let add = function (a, b) {return a + b;
}let add = (a, b) => {return a + b;
}

返回值
如果未定義返回值，則返回undefined。

1.9 類(lèi)

與C++中的Class類(lèi)似。但是不存在私有成員。

this指向類(lèi)的實(shí)例。
定義

class Point {constructor(x, y) {  // 構(gòu)造函數(shù)this.x = x;  // 成員變量this.y = y;this.init();}init() {this.sum = this.x + this.y;  // 成員變量可以在任意的成員函數(shù)中定義}toString() {  // 成員函數(shù)return '(' + this.x + ', ' + this.y + ')';}
}let p = new Point(3, 4);
console.log(p.toString());

繼承

class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 這里的super表示父類(lèi)的構(gòu)造函數(shù)this.color = color;}toString() {return this.color + ' ' + super.toString(); // 調(diào)用父類(lèi)的toString()}
}

注意：
super這個(gè)關(guān)鍵字，既可以當(dāng)作函數(shù)使用，也可以當(dāng)作對(duì)象使用。
作為函數(shù)調(diào)用時(shí)，代表父類(lèi)的構(gòu)造函數(shù)，且只能用在子類(lèi)的構(gòu)造函數(shù)之中。
super作為對(duì)象時(shí)，指向父類(lèi)的原型對(duì)象。
在子類(lèi)的構(gòu)造函數(shù)中，只有調(diào)用super之后，才可以使用this關(guān)鍵字。
成員重名時(shí)，子類(lèi)的成員會(huì)覆蓋父類(lèi)的成員。類(lèi)似于C++中的多態(tài)。
靜態(tài)方法
在成員函數(shù)前添加static關(guān)鍵字即可。靜態(tài)方法不會(huì)被類(lèi)的實(shí)例繼承，只能通過(guò)類(lèi)來(lái)調(diào)用。例如：

class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}static print_class_name() {console.log("Point");}
}let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name();  // 會(huì)報(bào)錯(cuò)

靜態(tài)變量
在ES6中，只能通過(guò)class.propname定義和訪(fǎng)問(wèn)。例如：

class Point {constructor(x, y) {this.x = x;this.y = y;Point.cnt++;}toString() {return '(' + this.x + ', ' + this.y + ')';}
}Point.cnt = 0;let p = new Point(1, 2);
let q = new Point(3, 4);console.log(Point.cnt);

---

1.10 事件

JavaScript的代碼一般通過(guò)事件觸發(fā)。

可以通過(guò)addEventListener函數(shù)為元素綁定事件的觸發(fā)函數(shù)。

常見(jiàn)的觸發(fā)函數(shù)有：

鼠標(biāo)
click：鼠標(biāo)左鍵點(diǎn)擊
dblclick：鼠標(biāo)左鍵雙擊
contextmenu：鼠標(biāo)右鍵點(diǎn)擊
mousedown：鼠標(biāo)按下，包括左鍵、滾輪、右鍵
event.button：0表示左鍵，1表示中鍵，2表示右鍵
mouseup：鼠標(biāo)彈起，包括左鍵、滾輪、右鍵
event.button：0表示左鍵，1表示中鍵，2表示右鍵
鍵盤(pán)
keydown：某個(gè)鍵是否被按住，事件會(huì)連續(xù)觸發(fā)
event.code：返回按的是哪個(gè)鍵
event.altKey、event.ctrlKey、event.shiftKey分別表示是否同時(shí)按下了alt、ctrl、shift鍵。
keyup：某個(gè)按鍵是否被釋放
event常用屬性同上
keypress：緊跟在keydown事件后觸發(fā)，只有按下字符鍵時(shí)觸發(fā)。適用于判定用戶(hù)輸入的字符。
event常用屬性同上
keydown、keyup、keypress的關(guān)系類(lèi)似于鼠標(biāo)的mousedown、mouseup、click

表單

• focus：聚焦某個(gè)元素
• blur：取消聚焦某個(gè)元素
• change：某個(gè)元素的內(nèi)容發(fā)生了改變
  窗口
  需要作用到window元素上。

resize：當(dāng)窗口大小放生變化
scroll：滾動(dòng)指定的元素
load：當(dāng)元素被加載完成