web基礎03-JavaScript

一、JavaScript基礎

1.變量

2.輸出

3.變量提升

4.區塊

5.JavaScript數據類型

6.查看數值類型

7.undefined和null

8.布爾值

9.===和==的區別

10.算數/三元/比較/邏輯/賦值運算符

11.特殊字符

12.字符串

（1）獲取字符串長度

（2）字符串連接

（3）不可變性

13.條件語句

14.循環語句

15.標簽

16.函數

17.作用域

18.變量生命周期

19.彈窗

（1）Alert 警告框

（2）prompt提示框

（3）confirm確認框

20.對象

21.數組

（1）創建

（2）訪問

（3）內置屬性

（4）內置方法

①添加

②刪除

③連接數組

④遍歷

⑤查找

⑥切片

⑦關聯數組

22.常用對象

（1）String

（2）Window對象

（3）JSON

（4）Math 對象

（5）Date 對象

（6）DOM

①元素選擇

②改變屬性

③添加/移除/替換元素

23.動畫

24.事件

（1）事件監聽

一、JavaScript基礎

詳細內容網上搜吧

JavaScript區分大小寫

1.變量

聲明變量

var 變量名；

如果沒有在 var 聲明語句中給變量指定初始值，在變量存入一個值之前，其初始值為 undefined。

給變量賦值

使用賦值運算符 ‘=’

變量名命名規則

由字母、數字、下劃線、$符號組成，不能以數字開頭

不能是關鍵字和保留字，例如：for,while,this,name

區分大小寫

不能是算數運算符
不允許使用連字符（-），它被保留用于減法。

保留字：

變量名命名規范

變量名必須有意義
遵守駝峰命名法
不建議使用$作為變量名

2.輸出

JavaScript 沒有任何打印或者輸出的函數。

JavaScript 可以通過以下幾種方式來輸出數據：

使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 window.alert() 彈出警告框。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。

可以使用HTML標簽來格式化JavaScript中的文本。

如：

<script>document.write("test");document.write("<h1>test</h1>");
</script>

3.變量提升

JavaScript 引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）。

console.log(a);
???????var a = 1;

上面代碼首先使用console.log方法，在控制臺（console）顯示變量a的值。這時變量a還沒有聲明和賦值，所以這是一種錯誤的做法，但是實際上不會報錯。因為存在變量提升，真正運行的是下面的代碼。

var a;console.log(a);
a = 1;

最后的結果是顯示undefined，表示變量a已聲明，但還未賦值。

4.區塊

JavaScript 使用大括號，將多個相關的語句組合在一起，稱為“區塊”（block）。

對于var命令來說，JavaScript 的區塊不構成單獨的作用域（scope）。

{  var a = 1;
}
a // 1

上面代碼在區塊內部，使用var命令聲明并賦值了變量a，然后在區塊外部，變量a依然有效，區塊對于var命令不構成單獨的作用域，與不使用區塊的情況沒有任何區別。在 JavaScript 語言中，單獨使用區塊并不常見，區塊往往用來構成其他更復雜的語法結構，比如for、if、while、function等

5.JavaScript數據類型

JavaScript 有五種基本數據類型：

字符串（string）：字符串可以是引號中的任意文本。您可以使用 單引號 或 雙引號
- 使用單引號括起來的字符串中，如果要包含單引號須使用反斜杠（\）轉義處理字符串中的單引號。
- 使用雙引號括起來的字符串中，如果要包含雙引號須使用反斜杠（\）轉義處理字符串中的雙引號。
- 可以使用索引位置來訪問字符串中的每個字符，索引從0開始
數字（number）：JavaScript 只有一種數值類型。
- 數值可以帶小數點，也可以不帶，
- 極大或極小的數字可以通過科學（指數）計數法來書寫：
布爾（boolean）：只有false和true兩個值
空（null）
未定義（undefined）
對象（object）：一種復雜數據類型：

JavaScript 中的變量是沒有類型的，只有值才有。變量可以隨時持有任何類型的值。

ES6還有個symbol的基本數據類型

6.查看數值類型

使用typeof 運算符

我們可以用 typeof 運算符來查看值得類型，它返回的是類型的字符串值。

typeof(123)

特殊：null類型

7.undefined和null

null與undefined都可以表示“沒有”，含義非常相似。將一個變量賦值為undefined或null，老實說，語法效果幾乎沒區別。

var a = undefined;
// 或者
var a = null;

上面代碼中，變量a分別被賦值為undefined和null，這兩種寫法的效果幾乎等價。

在if語句中，它們都會被自動轉為false，相等運算符（==）甚至直接報告兩者相等。

if (!undefined) { ?console.log('undefined is false');
}// undefined is false
if (!null) {  console.log('null is false');
}// null is false   
undefined == null// true

從上面代碼可見，兩者的行為是何等相似！谷歌公司開發的 JavaScript 語言的替代品 Dart 語言，就明確規定只有null，沒有undefined！

既然含義與用法都差不多，為什么要同時設置兩個這樣的值，這不是無端增加復雜度，令初學者困擾嗎？這與歷史原因有關。

1995年 JavaScript 誕生時，最初像 Java 一樣，只設置了null表示"無"。根據 C 語言的傳統，null可以自動轉為0。

Number(null) 
// 0
5 + null 
// 5

上面代碼中，null轉為數字時，自動變成0。

但是，JavaScript 的設計者 Brendan Eich，覺得這樣做還不夠。首先，第一版的 JavaScript 里面，null就像在 Java 里一樣，被當成一個對象，Brendan Eich 覺得表示“無”的值最好不是對象。其次，那時的 JavaScript 不包括錯誤處理機制，Brendan Eich 覺得，如果null自動轉為0，很不容易發現錯誤。

因此，他又設計了一個undefined。區別是這樣的：null是一個表示“空”的對象，轉為數值時為0；undefined是一個表示"此處無定義"的原始值，轉為數值時為NaN。

Number(undefined) 
// NaN
5 + undefined 
// NaN

用法和含義

對于null和undefined，大致可以像下面這樣理解。

null表示空值，即該處的值現在為空。調用函數時，某個參數未設置任何值，這時就可以傳入null，表示該參數為空。比如，某個函數接受引擎拋出的錯誤作為參數，如果運行過程中未出錯，那么這個參數就會傳入null，表示未發生錯誤。

undefined表示“未定義”，下面是返回undefined的典型場景。

// 變量聲明了，但沒有賦值var i;
i // undefined// 調用函數時，應該提供的參數沒有提供，該參數等于 undefinedfunction f(x) {  return x;
}
f() // undefined// 對象沒有賦值的屬性var  o = new Object();
o.p // undefined// 函數沒有返回值時，默認返回 undefinedfunction f() {}
f() // undefined

8.布爾值

布爾值代表“真”和“假”兩個狀態。“真”用關鍵字true表示，“假”用關鍵字false表示。布爾值只有這兩個值。

下列運算符會返回布爾值：

兩元邏輯運算符： && (And)，|| (Or)
前置邏輯運算符： ! (Not)
相等運算符：===，!==，==，!=
比較運算符：>，>=，<，<=

如果 JavaScript 預期某個位置應該是布爾值，會將該位置上現有的值自動轉為布爾值。轉換規則是除了下面六個值被轉為false，其他值都視為true。

undefined
null
false
0
NaN
""或''（空字符串）

布爾值往往用于程序流程的控制，請看一個例子。

if ('') { ?console.log('true');
}// 沒有任何輸出

上面代碼中，if命令后面的判斷條件，預期應該是一個布爾值，所以 JavaScript 自動將空字符串，轉為布爾值false，導致程序不會進入代碼塊，所以沒有任何輸出。

注意，空數組（[]）和空對象（{}）對應的布爾值，都是true。

if ([]) { ?console.log('true');
}// true
if ({}) {  console.log('true');
}// true

9.===和==的區別

==：非嚴格相等

如果操作數具有相同的類型，則按如下方式進行比較：
- 對象（Object）：僅當兩個操作數引用同一個對象時返回 true。
- 字符串（String）：只有當兩個操作數具有相同的字符且順序相同時才返回 true。
- 數值（Number）：如果兩個操作數的值相同，則返回 true。+0 和 -0 被視為相同的值。如果任何一個操作數是 NaN，返回 false；所以，NaN 永遠不等于 NaN。
- 布爾值（Boolean）：僅當操作數都為 true 或都為 false 時返回 true。
- 大整形（BigInt）：僅當兩個操作數值相同時返回 true。
- 符號（Symbol）：僅當兩個操作數引用相同的符號時返回 true。
如果其中一個操作數為 null 或 undefined，另一個操作數也必須為 null 或 undefined 以返回 true。否則返回 false。
如果其中一個操作數是對象，另一個是基本類型，按此順序使用對象的 @@toPrimitive()（以 "default" 作為提示），valueOf() 和 toString() 方法將對象轉換為基本類型。（這個基本類型轉換與相加中使用的轉換相同。）
在這一步，兩個操作數都被轉換為基本類型（String、Number、Boolean、Symbol 和 BigInt 中的一個）。其余的轉換是逐個進行的。
- 如果是相同的類型，使用步驟 1 進行比較。
- 如果其中一個操作數是 Symbol 而另一個不是，返回 false。
- 如果其中一個操作數是布爾型而另一個不是，則將布爾型轉換為數字：true 轉換為 1，false 轉換為 0。然后再次松散地比較兩個操作數。
- Number to String：使用與 Number() 構造函數相同的算法將字符串轉換為數字。轉換失敗將導致 NaN，這將保證相等是 false。
- Number to BigInt：按數值進行比較。如果數值為 ±∞ 或 NaN，返回 false。
- String to BigInt：使用與 BigInt() 構造函數相同的算法將字符串轉換為 BigInt。如果轉換失敗，返回 false。

寬松相等是對稱的：A == B 對于 A 和 B 的任何值總是具有與 B == A 相同的語義（應用轉換的順序除外）。

===：嚴格相等

如果操作數的類型不同，則返回 false。
如果兩個操作數都是對象，只有當它們指向同一個對象時才返回 true。
如果兩個操作數都為 null，或者兩個操作數都為 undefined，返回 true。
如果兩個操作數有任意一個為 NaN，返回 false。
否則，比較兩個操作數的值：
- 數字類型必須擁有相同的數值。+0 和 -0 會被認為是相同的值。
- 字符串類型必須擁有相同順序的相同字符。
- 布爾運算符必須同時為 true 或同時為 false。

10.算數/三元/比較/邏輯/賦值運算符

同Java

比較運算符：

賦值運算符：

11.特殊字符

代碼	輸出
'	單引號
"	雙引號
\	反斜杠
\n	換行
\r	回車
\t	tab(制表符)
\b	退格符
\f	換頁符

12.字符串

（1）獲取字符串長度

使用內置屬性 length 來計算字符串的長度

（2）字符串連接

使用‘’+‘’來連接

（3）不可變性

在 JavaScript 中，字符串的值是不可變的，這意味著一旦字符串被創建就不能被改變。

13.條件語句

同Java

14.循環語句

同java

15.標簽

JavaScript 語言允許，語句的前面有標簽（label），相當于定位符，用于跳轉到程序的任意位置，標簽的格式如下。

label:語句

標簽可以是任意的標識符，但不能是保留字，語句部分可以是任意語句。

標簽通常與break語句和continue語句配合使用，跳出特定的循環。

top: ?
for (var i = 0; i < 3; i++){ ? ?for (var j = 0; j < 3; j++){ ? ? ? if (i === 1 && j === 1) break top; ? ? ? ? console.log('i=' + i + ', j=' + j);}
}// i=0, j=0// i=0, j=1// i=0, j=2// i=1, j=0

上面代碼為一個雙重循環區塊，break命令后面加上了top標簽（注意，top不用加引號），滿足條件時，直接跳出雙層循環。如果break語句后面不使用標簽，則只能跳出內層循環，進入下一次的外層循環。

標簽也可以用于跳出代碼塊。

foo: { ?console.log(1); ?break foo;console.log('本行不會輸出');
}
console.log(2);// 1// 2

上面代碼執行到break foo，就會跳出區塊。

continue語句也可以與標簽配合使用。

top: ?
for (var i = 0; i < 3; i++){ ? ?for (var j = 0; j < 3; j++){ ? ? ?if (i === 1 && j === 1) continue top; ? ? ?console.log('i=' + i + ', j=' + j);}
}// i=0, j=0// i=0, j=1// i=0, j=2// i=1, j=0// i=2, j=0// i=2, j=1// i=2, j=2

上面代碼中，continue命令后面有一個標簽名，滿足條件時，會跳過當前循環，直接進入下一輪外層循環。如果continue語句后面不使用標簽，則只能進入下一輪的內層循環。

16.函數

JavaScript函數是用于執行特定任務的代碼塊。

主要作用：代碼重用，使用不同的參數多次使用相同的代碼，以產生不同的結果。

與Java方法類似，參數不需要對類型進行聲明。

要執行函數，您需要調用它。

要調用函數，從函數的名稱開始，然后使用括號中的參數。

根據需求決定調用次數

function fName(param01,param02) {return param01+param02;
}
fName(123,154);

顯式參數和隱式參數：

函數顯式參數在函數定義時列出。

函數隱式參數(arguments)是函數調用時傳遞給函數真正的值。

function sum(){return arguments[0]+arguments[1];
}
sum(1, 2);//3

函數參數規則：

JavaScript 函數定義時參數沒有指定數據類型。
JavaScript 函數對隱藏參數(arguments)沒有進行檢測。
JavaScript 函數對隱藏參數(arguments)的個數沒有進行檢測。

注意：

分號是用來分隔可執行JavaScript語句。
由于函數聲明不是一個可執行語句，所以不以分號結束。
如果使用缺少參數（少于聲明數）調用函數，則將缺少的值為undefined，這表示未為變量賦值。

return：

return 語句在函數中是可選的。它用于從函數返回值。

當JavaScript執行完 return 語句時，該函數停止執行。

如果沒有從函數返回任何東西，它將返回 undefined 。

17.作用域

作用域是可訪問變量的集合。

在 JavaScript 中, 對象和函數同樣也是變量。

在 JavaScript 中, 作用域為可訪問變量，對象，函數的集合。

JavaScript 函數作用域: 作用域在函數內修改。

JavaScript 局部作用域

變量在函數內聲明，變量為局部作用域。

局部變量：只能在函數內部訪問。

// 此處不能調用 carName 變量
function myFunction() {var carName = "大眾";// 函數內可調用 carName 變量
}

因為局部變量只作用于函數內，所以不同的函數可以使用相同名稱的變量。

局部變量在函數開始執行時創建，函數執行完后局部變量會自動銷毀。

局部變量的優先級高于同名的全局變量。

// 聲明 全局carName
var carName = '奔馳';
function myFunction() {var carName = "大眾";document.write(carName); // carName 值為 大眾
}

變量在函數外定義，即為全局變量。

全局變量有全局作用域: 網頁中所有腳本和函數均可使用。

如果變量在函數內沒有聲明（沒有使用 var 關鍵字），該變量為全局變量。

注意：

沒有使用var關鍵字定義的變量，會被自動創建在全局作用域中，變成全局變量。當在代碼其他地方無意間定義了一個變量，剛好變量名與全局變量相同，這時候會產生意想不到的后果，可能導致你的代碼出現BUG。最好使用 var 關鍵字來聲明變量。

18.變量生命周期

JavaScript 變量生命周期在它聲明時初始化。

局部變量在函數執行完畢后銷毀。

全局變量在頁面關閉后銷毀。

函數參數只在函數內起作用，是局部變量。

19.彈窗

JavaScript提供三種類型的彈出框，Alert, Prompt, 和 Confirm。

（1）Alert 警告框

當彈出警報框時，用戶必須單擊“確定”繼續。

警報功能采用單個參數，即彈出框中顯示的文本。

使用 alert 彈出框,將阻塞整個頁面的運行,點擊確定后才繼續運行.

（2）prompt提示框

通常使用提示框來讓用戶輸入一個值。

當彈出提示框時，輸入輸入值后，用戶將不得不單擊“確定”或“取消”繼續。

如果用戶單擊確定，該框將返回輸入值。如果用戶單擊取消，該框將返回null。

prompt() 方法有兩個參數

- 第一個是要在文本框中顯示的標簽。

- 第二個是在文本框中顯示的默認字符串（可選）。

（3）confirm確認框

經常使用 confirm 讓用戶驗證或接受某些內容。

當彈出確認框時，用戶必須單擊“確定”或“取消”繼續。

如果用戶單擊確定，該框將返回 true。如果用戶單擊取消，該框將返回 false。

20.對象

JavaScript 對象是擁有屬性和方法的數據。

JavaScript 中一切皆對象：字符串、數值、數組、函數...

JavaScript 也允許自定義對象。

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。對象只是帶有屬性和方法的特殊數據類型。

布爾型可以是一個對象。
數字型可以是一個對象。
字符串也可以是一個對象
日期是一個對象
數學和正則表達式也是對象
數組是一個對象
甚至函數也可以是對象

你可以使用字符來定義和創建 JavaScript 對象:

var person = {name: "John", age: 31, favColor: "green", height: 183
};

定義 JavaScript 對象可以跨越多行，空格跟換行不是必須的。

訪問對象屬性：

您可以通過兩種方式訪問對象屬性。

objectName.propertyName
//或者
objectName['propertyName']

這個例子使用了兩種方式訪問 person 的年齡

var person = {name: "John", age: 31, favColor: "green", height: 183
};
var x = person.age;
var y = person['age'];

JavaScript的內置長度屬性用于計算屬性或字符串中的字符數。

var course = {name: "JS", lessons: 54};
document.write(course.name.length);
// -> 2

兩種方式訪問對象屬性的區別：

點方法后面跟的必須是一個指定的屬性名稱，而中括號方法里面可以是變量。例如

var haha = "name";
console.log(obj.haha); // undefined
console.log(obj[haha]); // cedric

中括號方法里面的屬性名可以是數字，而點方法后面的屬性名不可以是數字

當動態為對象添加屬性時，必須使用中括號[]，不可用點方法

當你創建了一個對象后，你可以用.或[]來更新對象的屬性。

var ourDog = {"name": "Camper","legs": 4,"tails": 1,"friends": ["everything!"]};
ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";

你也可以像更改屬性一樣給對象添加屬性。

刪除屬性：

var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};
?
var c1 = ourDog['tails']; // c1 等于 1
// 刪除 tails 屬性
delete ourDog['tails']; // 等價于 delete ourDog.tails
var c2 = ourDog['tails']; // c2 等于 undefined

對象方法

對象方法是一個包含函數定義的屬性。

您可以通過以下語法來調用方法：

對象名.方法名()

這個例子使用了 String 對象的 toUpperCase() 方法來將文本轉換為大寫：

var message = "Hello world!";
var x = message.toUpperCase();

在以上代碼執行后，x 的值將是：

HELLO WORLD!

提示: 方法是作為對象屬性存儲的函數。

使用 [] 讀取對象屬性

var myObj = {
"name": "Loen",
"age": "28",
"eat": function(){return "I'm eating";
}
};
?
myObj["name"]; // Loen
?
var a = 'age';
myObj[a]; // 還可以用變量訪問對象屬性, 這里返回 28
?
myObj['eat'](); // 返回 I'm eating

對象構造器

使用函數來構造對象：

function person(firstname, lastname, age, eyecolor){this.firstname = firstname;this.lastname = lastname;this.age = age;this.eyecolor = eyecolor;
}

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是指向該函數所屬的對象（運行時）

一旦有了對象構造器，就可以創建新的對象實例，同Java

初始化

使用英文大括號{}創建單個對象：var John = {name: "John", age: 25};

方法：

方法是存儲在對象屬性中的函數。

使用以下方式創建對象函數:

methodName : function() { code lines }

使用以下方式訪問對象函數:

objectName.methodName()

this 關鍵詞是當前對象的引用，這意味著您可以使用 this 來訪問對象屬性和方法。

在構造函數中定義方法:

function person(name, age) {this.name = name; ?this.age = age;this.changeName = function (name) {this.name = name;}
}
?
var p = new person("Loen", 28);
p.changeName("John");

在上面的示例中，我們定義了一個名為 changeName 的方法，該方法是一個函數，它接受參數名稱并將其分配給對象的 name 屬性。

你也可以在構造函數外部定義一個函數，通過函數名關聯到對象的屬性上:

function person(name, age) {this.name= name; ?this.age = age;this.yearOfBirth = bornYear; // 關聯 bornYear 函數
}
function bornYear() {return new Date().getFullYear() - this.age; 
}

以上代碼中 new Date().getFullYear() 是獲取今年完整的年份時間如:2017 , 如您所見，我們已將對象的 yearOfBirth 屬性賦予 bornYear 函數。當通過對象調用 bornYear 函數時, bornYear 函數中 this 指向這個對象。

將函數關聯到對象屬性時不需要寫括號。

方法的調用

function person(name, age) {this.name= name; ?this.age = age;this.yearOfBirth = bornYear;
}
function bornYear() {return new Date().getFullYear() - this.age;
}
?
var p = new person("Loen", 29);
document.write(p.yearOfBirth());

21.數組

（1）創建

var mycars = new Array("Saab","Volvo","BMW");

動態創建

JavaScript數組是動態的，所以你可以聲明一個數組，不給 Array() 構造函數傳遞任何參數。然后可以動態添加元素。

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
mycars[3] = "Lincoln";

字面量創建（常用）：

為了更大的簡單性，可讀性和執行速度，您還可以使用數組字面量語法來聲明數組。

var mycars = ["Saab", "Volvo", "BMW"];

聲明方式和使用 new Array() 方式創建的數組相同.

（2）訪問

通過指定數組名以及索引號碼，你可以訪問某個特定的元素。

嘗試訪問數組以外的索引，返回值 undefined 。

索引從0開始

（3）內置屬性

數組的 length 屬性返回它的元素的數量。

數組為空則length屬性的值為0

（4）內置方法

①添加

push() 方法

在數組末尾增加一個或多個元素:

在數組尾部壓入一個元素與給數組 a[a.length]賦值是一樣的.

unshift() 方法

你不僅可以 shift（移出）數組中的第一個元素，你也可以 unshift（移入）一個元素到數組的頭部。

.unshift() 方法用起來就像 .push() 方法一樣, 但不是在數組的末尾添加元素，而是在數組的頭部添加元素。

②刪除

pop() 方法

改變數組中數據的另一種方法是用 .pop() 方法。

.pop() 方法用來刪除（“拋出”）一個數組末尾的值。

我們可以把這個刪除（“拋出”）的值賦給一個變量存儲起來。

數組中任何類型的數據條目（數值，字符串，甚至是數組）可以被“拋出來” 。

shift() 方法

.pop() 方法用來移出數組中最后一個元素。如果想要移出數組第一個元素要怎么辦呢？

.shift() 就是專門用來處理這類型需求的。它的工作原理類似 .pop()，但它移除的是第一個元素，而不是最后一個。

③連接數組

concat() 方法

JavaScript的 concat() 方法允許您連接數組并創建一個全新的數組。

concat 操作不會影響原數組 - 它會將所產生的連接作為新數組返回。

④遍歷

forEach() 方法

forEach() 方法用于調用數組的每個元素，并將元素傳遞給回調函數。

對于空數組是不會執行回調函數的。

var numbers = [64, 45, 72, 11, 49];
function getNumsAndIndex(num,index) {console.log(index+":\t"+num);
}
numbers.forEach(getNumsAndIndex);

⑤查找

indexOf() 方法

indexOf() 方法可返回數組中某個指定的元素位置。

該方法將從頭到尾地檢索數組，看它是否含有對應的元素。

返回第一次出現該元素的位置。

如果在數組中沒找到指定元素則返回 -1。

⑥切片

slice() 方法

slice() 方法可從已有的數組中返回選定的元素。

slice() 方法可提取字符串的某個部分，并以新的字符串返回被提取的部分。

注意：

slice() 方法不會改變原始數組。

語法

array.slice(start, end)

返回值

⑦關聯數組

雖然許多編程語言支持具有命名索引的數組（文本而不是數字），稱為關聯數組，但JavaScript不支持。

但是，您仍然可以使用命名數組語法，這將產生一個對象。例如:

var person = []; // 空數組
person["name"] = "Loen";
person["age"] = 28;
document.write(person["age"]);
// -> "28"

現在，person 被視為一個對象，而不是一個數組。

命名索引“name”和“age”成為person對象的屬性。

在關聯數組中，索引號被替換為字符串

注意：

當 person 數組被視為對象時，標準數組方法和屬性將產生不正確的結果。例如，現在person.length將返回0。

JavaScript不支持使用名稱索引數組。

在JavaScript中，數組總是使用數字編號的索引。

當您希望索引為字符串（文本）時，最好使用對象。

當您希望索引為數字時使用數組。

22.常用對象

JavaScript對象_w3cschool

（1）String

String 對象用于處理文本（字符串）。

String 對象創建方法： new String()。

注意：

indexOf() 方法區分大小寫

replace()在字符替換的情況下，只會替換一次，替換第一個匹配到的。

使用正則替換，最好只替換字母、數字和漢字，替換特色字符會有問題

正則表達式：

JavaScript正則在線測試工具 - 正則表達式工具 - W3Cschool

正則表達式語法速查|正則教程 (stackoverflow.org.cn)

substring() 方法

substring() 方法用于提取字符串中介于兩個指定下標之間的字符。

substring() 方法返回的子串包括開始處的字符，但不包括結束處的字符。

語法

string.substring(from, to)

參數	描述
from	必需。一個非負的整數，規定要提取的子串的第一個字符在 string Object 中的位置。
to	可選。一個非負的整數，比要提取的子串的最后一個字符在 string Object 中的位置多 1。如果省略該參數，那么返回的子串會一直到字符串的結尾。

substring() 提取從 indexStart 到 indexEnd（不包括）之間的字符。特別地：

如果 indexStart 等于 indexEnd，substring 返回一個空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一參數小于 0 或為 NaN，則被當作 0。
如果任一參數大于 stringName.length，則被當作 stringName.length。
如果 indexStart 大于 indexEnd，則 substring 的執行效果就像兩個參數調換了一樣。

（2）Window對象

Window 對象表示瀏覽器中打開的窗口。

如果文檔包含框架（< frame> 或 < iframe> 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，并為每個框架創建一個額外的 window 對象。

window作為全局變量，代表了腳本正在運行的窗口，暴露給Javascript代碼。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
<p>文檔顯示區的高度:<span id="winInnerHeight"></span></p>
<p>文檔顯示區的寬度:<span id="winInnerWidth"></span></p>
<br>
<p>返回窗口的外部寬度，包含工具條與滾動條:<span id="winOuterWidth"></span></p>
<p>返回窗口的外部高度，包含工具條與滾動條:<span id="winOuterHeight"></span></p>
?
<br>
<p>相對于屏幕窗口的x坐標:<span id="winScreenLeft"></span></p>
<p>相對于屏幕窗口的y坐標:<span id="winScreenTop"></span></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
var winInnerHeight = window.innerHeight; //返回窗口的文檔顯示區的高度。
var winInnerWidth = window.innerWidth; //返回窗口的文檔顯示區的寬度。
?
var winOuterWidth = window.outerWidth; // 返回窗口的外部寬度，包含工具條與滾動條。
var winOuterHeight = window.outerHeight; // 返回窗口的外部高度，包含工具條與滾動條。
?
var winScreenLeft = window.screenLeft; // 返回相對于屏幕窗口的x坐標
var winScreenTop = window.screenTop; // 返回相對于屏幕窗口的y坐標
?
document.getElementById('winInnerHeight').innerHTML = winInnerHeight;
document.getElementById('winInnerWidth').innerHTML = winInnerWidth;
?
document.getElementById('winOuterWidth').innerHTML = winOuterWidth;
document.getElementById('winOuterHeight').innerHTML = winOuterHeight;
?
document.getElementById('winScreenLeft').innerHTML = winScreenLeft;
document.getElementById('winScreenTop').innerHTML = winScreenTop;
</script>
?
</body>
</html>

窗口對象方法

我們之前有使用過的alert（）就是window對象的方法，調用window對象方法可以不需要指定window對象：

alert("hello world");
// 等價于
window.alert('hello world');

窗口對象方法

open() 方法

open() 方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口。

語法

window.open(URL,name,specs,replace)

實例:在新瀏覽器窗口中打開網址

function open_win() {window.open("http://www.w3cschool.cn");
}

實例:下面的示例在一個新的瀏覽器打開一個window空白頁：

function openWin(){myWindow=window.open('','','width=200,height=100');myWindow.document.write("<p>這是'我的窗口'</p>");myWindow.focus();
}

setTimeout() 方法

setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。

如果你只想重復執行可以使用 setInterval() 方法。使用 clearInterval() 方法來阻止函數的執行
使用 clearTimeout() 方法來阻止函數的執行。

setTimeout(function(){ alert("Hello"); }, 3000);

實例: 打開一個新窗口，3 秒后將該窗口關閉

var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>這是一個新窗口'</p>");
setTimeout(function(){ myWindow.close() }, 3000);

實例: 使用 clearTimeout() 來阻止函數的執行

var myVar;function myFunction() {myVar = setTimeout(function(){ alert("Hello") }, 3000);
}function myStopFunction() {clearTimeout(myVar);
}

（3）JSON

JSON (英文全稱 JavaScript Object Notation) 是用于存儲和傳輸數據的格式。

JSON 通常用于服務端向網頁傳遞數據。

JSON 是一種輕量級的數據交換格式。

JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。
文本可以被任何編程語言讀取及作為數據格式傳遞。

JSON 語法規則

數據為鍵/值對。
數據由逗號分隔。
大括號保存對象
方括號保存數組

JSON 數據 - 一個名稱對應一個值

JSON 數據格式為鍵/值對，就像 JavaScript 對象屬性。

鍵/值對包括字段名稱（在雙引號中），后面一個冒號，然后是值：

"name":"W3Cschool"

JSON 對象

JSON 對象保存在大括號內。

就像在 JavaScript 中, 對象可以保存多個鍵/值對：

{"name":"W3Cschool", "url":"www.w3cschool.cn"}

JSON 數組

JSON 數組保存在中括號內。

就像在 JavaScript 中, 數組可以包含對象：

{"sites":[{"name":"W3Cschool", "url":"www.w3cschool.cn"}, {"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}
]}

在以上實例中，對象 "sites" 是一個數組，包含了三個對象。

每個對象為站點的信息（網站名和網站地址）。

（1）內置方法

JSON.parse() 方法用于將一個 JSON 字符串轉換為對象。

JSON.parse(text, reviver)

text: 必需，一個有效的 JSON 字符串。
reviver: 可選，一個轉換結果的函數，將為對象的每個成員調用此函數。

如果指定了 reviver 函數，則解析出的 JavaScript 值（解析值）會經過一次轉換后才將被最終返回（返回值）。更具體點講就是：解析值本身以及它所包含的所有屬性，會按照一定的順序（從最最里層的屬性開始，一級級往外，最終到達頂層，也就是解析值本身）分別的去調用 reviver 函數，在調用過程中，當前屬性所屬的對象會作為 this 值，當前屬性名和屬性值會分別作為第一個和第二個參數傳入 reviver 中。如果 reviver 返回 undefined，則當前屬性會從所屬對象中刪除，如果返回了其他值，則返回的值會成為當前屬性新的屬性值。

當遍歷到最頂層的值（解析值）時，傳入 reviver 函數的參數會是空字符串 ""（因為此時已經沒有真正的屬性）和當前的解析值（有可能已經被修改過了），當前的 this 值會是 {"": 修改過的解析值}，在編寫 reviver 函數時，要注意到這個特例。（這個函數的遍歷順序依照：從最內層開始，按照層級順序，依次向外遍歷）

JSON.parse('{"p": 5}', function (k, v) {if (k === "") return v; // 如果到了最頂層，則直接返回屬性值，return v * 2; // 否則將屬性值變為原來的 2 倍。
}); // { p: 10 }
?
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {console.log(k); // 輸出當前的屬性名，從而得知遍歷順序是從內向外的，// 最后一個屬性名會是個空字符串。return v; // 返回原始屬性值，相當于沒有傳遞 reviver 參數。
});

注意：

JSON.parse() 不允許用逗號作為結尾

JSON.stringify() 方法

JSON.stringify() 方法用于將 JavaScript 值轉換為 JSON 字符串。

語法

JSON.stringify(value, replacer, space)

參數說明：

value: 必需，要轉換的 JavaScript 值（通常為對象或數組）。
replacer:可選。用于轉換結果的函數或數組。如果 replacer 為函數，則 JSON.stringify 將調用該函數，并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。
space: 可選，文本添加縮進、空格和換行符，如果 space 是一個數字，則返回值文本在每個級別縮進指定數目的空格，如果 space 大于 10，則文本縮進 10 個空格。space 也可以使用非數字，如：\t。

返回值：

返回包含 JSON 文本的字符串。

實例

var str = {"name":"W3Cschool", "site":"http://www.w3cschool.cn"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一個參數情況：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四個空格縮進
document.write( "使用參數情況：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化輸出

（4）Math 對象

Math（算數）對象的作用是：執行普通的算數任務。

Math 對象提供多種算數值類型和函數。無需在使用這個對象之前對它進行定義。

注意：

Math 沒有構造函數。沒有必要先創建一個Math對象。

Math 對象方法

Math對象包含許多用于計算的方法：

floor() 方法：

Math.floor(x) 返回小于或等于一個給定數字的最大整數。

Math.floor()向下取整。

random() 方法：

Math.random() 返回 [0，1) 之間的一個隨機數：

round 方法:

Math.round() 返回一個數字四舍五入后最接近的整數。

與很多其他語言中的round()函數不同，Math.round()并不總是舍入到遠離0的方向（尤其是在負數的小數部分恰好等于0.5的情況下）。

x = Math.round(20.49); ? //20
x = Math.round(20.5); ? ?//21
x = Math.round(-20.5); ? //-20
x = Math.round(-20.51); ?//-21

（5）Date 對象

日期對象用于處理日期和時間。

日期由 年，月，日，時，分，秒和毫秒組成。

使用 new Date() , 將創建一個存儲當前日期和時間的日期對象。

var d = new Date();
//d 存儲了當前的日期和時間

初始化日期的其他方法允許從指定的日期和時間創建新的日期對象。

new Date(milliseconds) // 毫秒
new Date(dateString) // 日期字符串
new Date(year, month, day, hours, minutes, seconds, milliseconds) //年，月，日，時，分，秒和毫秒

提示: JavaScript日期以1970年01月01日00:00:00世界時（UTC）計算。一天包含 86400000 毫秒。

//Fri Jan 02 1970 08:00:00 GMT+0800 (中國標準時間)
var d1 = new Date(86400000); 
?
//Thu Oct 19 2017 15:56:00 GMT+0800 (中國標準時間)
var d2 = new Date("October 19, 2017 15:56:00");
//Sat Jun 11 1988 11:42:00 GMT+0800 (中國標準時間)
var d3 = new Date(88,5,11,11,42,0,0);

提示: JavaScript計數從0到11的月份。1月是0，12月是11。 日期對象是靜態的，而不是動態的。計算機時間正在往前走，但是日期對象一旦創建，日期就不會改變。

Date 方法

當創建一個Date 對象時，有很多方法可以對它進行操作。

實時打印當前時間

function printTime() {var d = new Date();var hours = d.getHours();var mins = d.getMinutes();var secs = d.getSeconds();document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000); // setInterval 第二個參數單位是 毫秒

（6）DOM

HTML DOM

通過 HTML DOM，JavaScript 可訪問 HTML 文檔的所有元素。

HTML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹：

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

DOM 表示文檔為樹形結構。

HTML 元素成為樹中的相關節點。

樹中的所有節點之間都有某種關系。

節點可以有子節點。擁有同一父節點的節點稱為兄弟節點。

< html>有兩個子節點（< head>，< body>）;

< head>有一個子節點（< title>）和一個父節點（< html>）;

< title>有一個父節點（< head>），沒有子節點;

< body>有兩個子節點（< h1>和< a>）和一個父節點（< html>）;

document 對象

document對象是文檔的根節點，window.document屬性就指向這個對象。也就是說，只要瀏覽器開始載入HTML文檔，這個對象就開始存在了，可以直接調用。

JavaScript中有一個預定義的 document 對象，可用于訪問DOM上的所有元素。

換句話說，文檔對象是網頁中所有對象的所有者（或根）。

因此，如果要訪問HTML頁面中的對象，則始終訪問 document 對象。

①元素選擇

所有HTML元素都是對象。并且我們知道每個對象都有屬性和方法。

document 對象具有三種方法最常用于選擇HTML元素：

//通過 id 找元素
document.getElementById(id) 
?
//通過 類 找元素
document.getElementsByClassName(name) 
?
//通過 標簽 找元素
document.getElementsByTagName(name)

getElementsByClassName() 方法通過類名查找所有元素，并將其作為數組返回。

getElementsByTagName 方法返回指定標簽名稱的所有元素,作為數組返回。

DOM中的每個元素都有一組屬性和方法，它們提供有關它們在DOM中的關系的信息：

element.childNodes 返回一個元素的子節點的數組。

element.firstChild 返回元素的第一個子節點。

element.lastChild 返回元素的最后一個子節點。

element.hasChildNodes 如果元素有任何子節點，則返回 true，否則為 false 。

element.nextSibling 返回相同樹級別的下一個節點。

element.previousSibling 返回在同一樹級別的上一個節點。

element.parentNode 返回元素的父節點。

②改變屬性

選擇要使用的元素后，您可以更改其屬性。

可以使用JavaScript更改元素的所有屬性。

<img id="myimg" src="https://www.w3cschool.cn/attachments/cover/cover_php.jpg" alt="" />
<script>var el = document.getElementById("myimg"); // 通過id="myimg"獲取元素el.src = "https://www.w3cschool.cn/attachments/cover/cover_html.png";
</script><a href="http://www.baidu.com">百度</a>
<script>var el = document.getElementsByTagName("a");el[0].href = "https://www.w3cschool.cn";el[0].innerHTML = "W3Cschool";
</script>

使用元素的 style 對象來訪問所有樣式屬性。

<div id="demo" style="width:200px">一些文本</div>
<script>var x = document.getElementById("demo");x.style.color = "6600FF";x.style.width = "100px";
</script>

所有CSS屬性都可以使用JavaScript進行設置和修改。請記住，您不能在屬性名稱中使用破折號（ - ）：這些替換為駝峰寫法，其中復合詞以大寫字母開頭比如: background-color屬性應該被寫為 backgroundColor。

③添加/移除/替換元素

element.cloneNode() 克隆元素并返回結果節點。

document.createElement(element) 創建一個新的元素節點。

document.createTextNode(text) 創建一個新的文本節點。

var node = document.createTextNode("一些新的文本");

這將創建一個新的文本節點，但它將不會出現在文檔中，直到您使用以下方法之一將其附加到現有元素：

element.appendChild(newNode) 將一個新的子節點添加到元素作為最后一個子節點。

element.insertBefore(node1, node2) 在節點2之前插入node1作為子節點。

例如:

<div id ="demo">一些文本</div>
?
<script>//創建一個新的段落var p = document.createElement("p");var node = document.createTextNode("一些新的文本");//添加文本到段落p.appendChild(node);
?var div = document.getElementById("demo");//將段落添加到div中div.appendChild(p);
</script>

要刪除HTML元素，您必須選擇元素的父項并使用 removeChild(node) 方法。

例如:

<div id="demo"><p id="p1">這是一個段落.</p><p id="p2">這是另外一個段落.</p>
</div>
?
<script>
var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

實現相同結果的另一種方法是使用 parentNode 屬性來獲取要刪除的元素的父項

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

要替換HTML元素，使用 element.replaceChild(newNode,oldNode) 方法。

<div id="demo"><p id="p1">這是一個段落</p><p id="p2">這是另一個段落</p>
</div>
?
<script>
var p = document.createElement("p");
var node = document.createTextNode("這是新的文本");
p.appendChild(node);
?
var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
</script>

23.動畫

通過操作元素的屬性和樣式來實現動畫效果，具體的網上搜吧，不寫了~

24.事件

JavaScript使我們有能力創建動態頁面，網頁中的每一個元素都可以產生某些觸發JavaScript函數的事件。

我們可以認為事件是可以被JavaScript偵測到的一種行為。

您可以編寫事件觸發執行的Javascript代碼，例如用戶單擊HTML元素，移動鼠標或提交表單時。

當目標元素發生事件時，執行處理函數。

常見的HTML事件包括：

相應的事件可以添加到HTML元素作為屬性。

<p id="tip">這邊顯示提示</p>
?
<h2 id="tip">這邊顯示提示</h2>
?
<hr>
?
<p onclick="clickfn()">點擊我看看</p>
?
<br>
?
<input type="text" onfocus="focusfn()" onblur="blurfn()" ?value="獲得焦點" />
?
<br><br>
?
<div onmouseover="moverfn()" onmouseout="moutfn()" style="">
?鼠標移動進來看看
?
</div>
<button onclick="show()">點擊我</button>
<script>
function show() {alert("你好,我在這里!");
}
</script>

onchange 事件主要用于文本框。當文本框內的文本發生變化并且焦點從元素中丟失時，調用事件處理程序。

（1）事件監聽

可以給元素綁定事件監聽:

var x = document.getElementById("demo");
?
x.onclick = function () {document.getElementById("date").innerHTML = new Date();
}

addEventListener() 方法將事件處理程序附加到元素，而不會覆蓋現有的事件處理程序。您可以向一個元素添加許多事件處理程序。

您還可以將許多同一類型的事件處理程序添加到一個元素，即兩個“點擊”事件。

element.addEventListener(event, function , useCapture);

第一個參數是事件的類型（如“click”或“mouseover”）。

第二個參數是事件發生時要調用的函數。

第三個參數是一個布爾值，指定是否使用事件冒泡或事件捕獲。此參數是可選的,更具體教程的可自行搜索

在添加事件類型的時候沒有on, 用的是 click 而不是 onclick

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);
?
function myFunction() {alert("Hello W3Cschool");
}

刪除事件監聽

我們可以使用 removeEventListener 刪除事件監聽：

element.removeEventListener("mouseover", myFunction);

我們創建一個事件處理程序，在執行后會自動刪除：

<button id="demo">開始</button>
?
<script>
var btn = document.getElementById("demo");
btn.addEventListener("click", myFunction);
?
function myFunction() {alert(Math.random());btn.removeEventListener("click", myFunction);
}
</script>

Internet Explorer版本8及更低版本不支持 addEventListener() 和 removeEventListener() 方法。但是，您可以使用 document.attachEvent() 方法在Internet Explorer中附加事件處理程序。