前端(三)-JavaScript

1、基本語法

1.1 引入JavaScript

1.1.1行內引入

<input type="button" value="輕輕點我一下" onclick="javascript:alert('正在學習Javascript!')">

1.1.2 內部引入

<script type="text/javascript">
    function testClickTwo(){
        alert("正在學習JavaScriptTwo")
    }
</script>

<input type="button" value="輕輕點我一下Two" onclick="testClickTwo()">

1.1.3 外部引入

<!-- 引入外部js腳本文件 -->
<script src="js/test.js" type="text/javascript"></script>

1.2 數據類型和變數

typeof

查看數據類型；

number 的註意點

• NaN; NaN表示Not a Number，當無法計算結果時用NaN表示 ;
• Infinity; Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就 表示為Infinity;

1.3 strict模式

JavaScript在設計之初，為了方便初學者學習，並不強制要求用 var 申明變數。這個設計錯誤帶來了 嚴重的後果：如果一個變數沒有通過 var 申明就被使用，那麼該變數就自動被申明為全局變數；

為了修補JavaScript這一嚴重設計缺陷，ECMA在後續規範中推出了strict模式，在strict模式下運行的 JavaScript代碼，強制通過 var 申明變數，未使用 var 申明變數就使用的，將導致運行錯誤。

<!--啟用strict模式的方法是在JavaScript代碼的第一行寫上：-->
<script>
    `use strict`;
    // 如果瀏覽器支持strict模式，下麵的代碼將報ReferenceError錯誤:
    abc = 'Hello, world';  //沒有使用var聲明變數
    console.log(abc);
</script>

1.4 字元串

1.4.1 多行字元串

由於多行字元串用 \n 寫起來比較費事，所以最新的ES6標準新增了一種多行字元串的表示方法，用反 引號 ``表示：

`這是一個
多行
字元串`;

1.4.2 模板字元串(註意模板字元的放多行字元串號``反引號裡面才可以)

ES6新增了一種模板字元串，表示方法和上面的多行 字元串一樣，但是它會自動替換字元串中的變數：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
alert(message);

1.4.3 常用方法

1.5 數組

JavaScript的 Array 可以包含任意數據類型，並通過索引來訪問每個元素。

1.5.1 初始化

//定義數組1：var 數組名 =new Array([長度]),長度可以省略
var varArray1 = new Array();
//訪問數組元素
varArray1[0] = "LPL";
varArray1[1] = "LCK";
varArray1[3] = "LEL";
console.log(varArray1);

//定義數組2,支持直接初始化
var varArray2 = new Array(10,20,30,40,50);
varArray2[5] = 60;
console.log(varArray2);

//定義數組3：直接支持使用中括弧
var varArray3 = [100,90,80];
console.log(varArray3);

1.5.2 常用方法

1.6 對象

JavaScript的對象是一種無序的集合數據類型，它由若幹鍵值對組成。

1.6.1 定義一個對象

var 對象名 = {
    key: 'value',
    key: 'value',
    key: 'value'
}

1.6.2 獲取對象的屬性

對象.屬性

1.6.3 由於JavaScript的對象是動態類型，你可以自由地給一個對象添加或刪除屬性：

var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一個age屬性
xiaoming.age; // 18
delete xiaoming.age; // 刪除age屬性
xiaoming.age; // undefined
delete xiaoming['name']; // 刪除name屬性
xiaoming.name; // undefined
delete xiaoming.school; // 刪除一個不存在的school屬性也不會報錯

如果我們要檢測對象是否擁有某一屬性，可以用 in 操作符：

var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不過要小心，如果用 in 判斷一個屬性存在，這個屬性不一定是 這個對象的，它可能是這個對象繼承得 到的：

1 'toString' in xiaoming; // true
//因為 toString 定義在 object 對象中，而所有對象最終都會在原型鏈上指向 object，所以xiaoming 也擁有 toString 屬性。

要判斷一個屬性是否是 xiaoming 自身擁有的，而不是繼承得到的，可以用 hasOwnProperty() 方法：

var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

1.7 流程式控制制

1.7.1 if

1.7.2 for

for ... in ， 它可以把一個對象的所有屬性依次迴圈出來：

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由於 **Array 也是對象**，而它的每個元素的**索引被視為對象的屬性**，所以**遍歷出來是下標**；

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}
//請註意，for... in 對 Array 的迴圈得到的是 String 而不是 Number 。

1.7.3 while

1.8 Map 和Set

1.8.1 Map

Map 是一組鍵值對的結構，具有極快的查找速度。

1.8.1.1初始化

//初始化 Map 需要一個二維數組，或者直接初始化一個空 Map;
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

//由於一個key只能對應一個value，所以，多次對一個key放入value，後面的值會把前面的值衝掉：

1.8.2 Set

Set 和 Map 類似，也是一組key的集合，但不存儲value。由於key不能重覆，所以，在 Set 中， 沒有重覆的key;

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3,3,'3']); // 含1, 2, 3,'3'
//重覆元素在 Set 中自動被過濾：3
//通過 delete(key) 方法可以刪除元素：

1.9 Iterable

遍歷 Array 可以採用下標迴圈，遍歷Map 和 Set 就無法使用下標。 為了統一集合類型，ES6標準引入了新的 iterable 類型，Array，Map，Set 屬於； 具有 iterable 類型的集合可以通過新的 for ... of 迴圈來遍歷。

更好的方式是直接使用 iterable 內置的 forEach 方法，它接收一個函數，每次迭代就自動回調該 函數。

1.9.1 Array

var a = new Array(元素...);
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象本身
    console.log(element + ', index = ' + index);
})

1.9.2 Map

Map 的回調函數參數依次為 value 、 key 和 map 本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
	console.log(value);
});

1.9.3 set

Set 沒有索引，因此回調函數的前兩個參數都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
	console.log(element);
});

2、交互彈窗

3、函數

3.1 常用系統函數

3.2 自定義函數

3.2.1定義函數

方式1

function abs(x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
}
//一旦執行到 return 時，函數就執行完畢，並將結果返回。
//如果沒有 return 語句，函數執行完畢後也會返回結果，只是結果為 undefined 。

方式2

var abs = function (x) {
    if (x >= 0) {
    	return x;
    } else {
    	return -x;
    }
};
//在這種方式下， function (x) { ... } 是一個匿名函數，它沒有函數名。但是，這個匿名函數賦值給了變數 abs ，所以，通過變數 abs 就可以調用該函數。
//上述兩種定義完全等價，註意第二種方式按照完整語法需要在函數體末尾加一個 ; ，表示賦值語句結束。

3.3兩個重要點

3.3.1arguments 關鍵字

JavaScript還有一個免費贈送的關鍵字 arguments ，它只在函數內部起作用，並且永遠指向當前函數 的調用者傳入的所有參數。

function foo(x) {
console.log('x = ' + x); // 10
for (var i=0; i<arguments.length; i++) {
console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
}
}
foo(10, 20, 30)

3.3.2 rest 參數

function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 結果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 結果:
// a = 1
// b = undefined
// Array []

rest參數只能寫在最後，前面用 ... 標識，從運行結果可知，傳入的參數先綁定 a 、 b ，多餘的 參數以數組形式交給變數 rest ;

3.4 變數的作用域

3.4.1 兩個關鍵字

3.4.2 全局對象

實際上，JavaScript預設有一個全局對象 window ，全 局作用域的變數實際上被綁定到 window 的一個屬性：

4、事件

5、BOM

5.1 windows

5.2 history

5.3 location

5.4 document

5.5 innerHTML 與 innerText

toFixed(number) 保留指定位數

5.6 Date

6.7 定時函數與清除函數(時鐘特效)

定時函數

清除函數

6、DOM

6.1 層次關係訪問節點

層次訪問節點1，包含text，註釋等其他內容；

層次訪問節點2，只包含標簽元素節點

6.2 操作節點

6.2.1操作節點屬性

6.2.2創建和插入節點

cloneNode(deep)的深拷貝和淺拷貝

6.2.3 刪除和替換節點

註意只有父節點才可以刪除子節點或者替換子節點；

6.3 操作節點樣式

6.3.1 事件

修改樣式主要與事件一起使用；

6.3.2 通過節點的style屬性

元素節點.style.樣式屬性=”樣式值“；

//舉例
document.getElementById("cart").style.backgroundColor="#fff";

6.3.3 className屬性

//carOut類屬性時在CSS外部樣式中已經存在的
document.getElementById("cart").className = "cartOut";