一、資料
二、簡介
1、完整的 JavaScript 實(shí)現(xiàn)是由以下 3 個不同部分組成的：
ECMAScript 描述了該語言的語法和基本對象；
DOM （文檔對象模型）描述了處理網(wǎng)頁內(nèi)容的方法和接口；
BOM （瀏覽器對象模型）描述了與瀏覽器進(jìn)行交互的方法和接口。
三、使用
1、HTML 中的腳本必須位于 <script> 與 </script> 標(biāo)簽之間
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>
2、腳本可被放置在 HTML 頁面的 <body> 或 <head> 部分中，但是把腳本置于 <body> 元素的底部，可改善顯示速度，因?yàn)槟_本編譯會拖慢顯示
3、腳本也可放置于外部文件中，便于相同的腳本被不同的網(wǎng)頁使用
<script src="myScript.js"></script>
4、JavaScript 對大小寫敏感
5、JavaScript 一般使用以小寫字母開頭的駝峰大小寫：
6、輸出語句
// 操作 HTML 元素內(nèi)容
innerHTML
// 彈出警告
window.alert()
// 寫入到瀏覽器的控制臺
console.log()
// 將內(nèi)容寫到 HTML 文檔中
document.write()
四、語法
1、var
1、變量提升：JavaScript 引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運(yùn)行。這造成的結(jié)果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）。
2、作用域：對于var命令來說，JavaScript 的區(qū)塊不構(gòu)成單獨(dú)的作用域（scope）。
四、數(shù)據(jù)類型
1、簡介
原始類型（primitive type）： Undefined、Null、Boolean、Number 和 String。
請注意：
1、數(shù)組的數(shù)據(jù)類型是對象
2、日期的數(shù)據(jù)類型是對象
2、typeof運(yùn)算符
JavaScript 有三種方法，可以確定一個值到底是什么類型：
typeof運(yùn)算符
instanceof運(yùn)算符
Object.prototype.toString方法
// undefined
typeof undefined
// "undefined"
typeof v
// "undefined"
// null
typeof null // "object"
// boolean
typeof false // "boolean"
// number
typeof 123 // "number"
typeof NaN // 'number'
// string
typeof '123' // "string"
// 對象類型
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
// 函數(shù)
function f() {}
typeof f
// "function"
3、Undefined
1、undefined是一個表示"此處無定義"的原始值，轉(zhuǎn)為數(shù)值時為NaN。
2、未定義變量的數(shù)據(jù)類型是 undefined，尚未賦值的變量的數(shù)據(jù)類型也是 undefined。
// 變量聲明了，但沒有賦值
var i;
i // undefined
// 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于 undefined
function f(x) {
return x;
}
f() // undefined
// 對象沒有賦值的屬性
var o = new Object();
o.p // undefined
// 函數(shù)沒有返回值時，默認(rèn)返回 undefined
function f() {}
f() // undefined
4、Null
1、null是一個表示“空”的對象，轉(zhuǎn)為數(shù)值時為0。
2、null的數(shù)據(jù)類型是object，這是由于歷史原因造成的。1995年的 JavaScript 語言第一版，只設(shè)計了五種數(shù)據(jù)類型（對象、整數(shù)、浮點(diǎn)數(shù)、字符串和布爾值），沒考慮null，只把它當(dāng)作object的一種特殊值。后來null獨(dú)立出來，作為一種單獨(dú)的數(shù)據(jù)類型，為了兼容以前的代碼，typeof null返回object就沒法改變了。
5、布爾值
如果 JavaScript 預(yù)期某個位置應(yīng)該是布爾值，會將該位置上現(xiàn)有的值自動轉(zhuǎn)為布爾值。轉(zhuǎn)換規(guī)則是除了下面六個值被轉(zhuǎn)為false，其他值都視為true。
undefined
null
false
0
NaN
""或''（空字符串）
6、數(shù)值
1、JavaScript 內(nèi)部，所有數(shù)字都是以64位浮點(diǎn)數(shù)形式儲存，即使整數(shù)也是如此。所以，1與1.0是相同的，是同一個數(shù)。由于浮點(diǎn)數(shù)不是精確的值，所以涉及小數(shù)的比較和運(yùn)算要特別小心。
1 === 1.0 // true
0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false
2、JavaScript 提供Number對象的MAX_VALUE和MIN_VALUE屬性，返回可以表示的具體的最大值和最小值。
Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324
3、NaN是 JavaScript 的特殊值，表示“非數(shù)字”（Not a Number），主要出現(xiàn)在將字符串解析成數(shù)字出錯的場合。需要注意的是，NaN不是獨(dú)立的數(shù)據(jù)類型，而是一個特殊數(shù)值，它的數(shù)據(jù)類型依然屬于Number，使用typeof運(yùn)算符可以看得很清楚。NaN不等于任何值，包括它本身。
5 - 'x' // NaN
0 / 0 // NaN
typeof NaN // 'number'
NaN === NaN // false
4、Infinity表示“無窮”，用來表示兩種場景。一種是一個正的數(shù)值太大，或一個負(fù)的數(shù)值太小，無法表示；另一種是非0數(shù)值除以0，得到Infinity。Infinity與NaN比較，總是返回false。
Math.pow(2, 1024) // Infinity
0 / 0 // NaN
1 / 0 // Infinity
5、與數(shù)值相關(guān)的全局方法
// parseInt方法用于將字符串轉(zhuǎn)為整數(shù)
parseInt('123') // 123
// parseInt方法還可以接受第二個參數(shù)（2到36之間），表示被解析的值的進(jìn)制，返回該值對應(yīng)的十進(jìn)制數(shù)
parseInt('1000') // 1000
parseInt('1000', 10) // 1000
parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512
// parseFloat方法用于將一個字符串轉(zhuǎn)為浮點(diǎn)數(shù)
parseFloat('3.14') // 3.14
// isNaN方法可以用來判斷一個值是否為NaN
isNaN(NaN) // true
isNaN(123) // false
// isNaN只對數(shù)值有效，如果傳入其他值，會被先轉(zhuǎn)成數(shù)值。比如，傳入字符串的時候，字符串會被先轉(zhuǎn)成NaN，所以最后返回true，這一點(diǎn)要特別引起注意。也就是說，isNaN為true的值，有可能不是NaN，而是一個字符串，因此，使用isNaN之前，最好判斷一下數(shù)據(jù)類型。
isNaN('Hello') // true
// 相當(dāng)于
isNaN(Number('Hello')) // true
function myIsNaN(value) {
return typeof value === 'number' && isNaN(value);
}
// isFinite方法返回一個布爾值，表示某個值是否為正常的數(shù)值，除了Infinity、-Infinity、NaN和undefined這幾個值會返回false，isFinite對于其他的數(shù)值都會返回true
isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true
7、字符串
5.1、字符串就是零個或多個排在一起的字符，放在單引號或雙引號之中。
5.2、不要把字符串創(chuàng)建為對象，它會拖慢執(zhí)行速度。
5.3、字符串是不可變的：字符串不能更改，只能替換。所有字符串方法都會返回新字符串。它們不會修改原始字符串。
5.4、字符串可以被視為字符數(shù)組，因此可以使用數(shù)組的方括號運(yùn)算符，用來返回某個位置的字符，但是字符串內(nèi)部的單個字符無法改變和增刪，這些操作會默默地失敗。
// length屬性返回字符串的長度
length
// 把字符串轉(zhuǎn)換為大寫，返回新字符串
toUpperCase()
// 把字符串轉(zhuǎn)換為小寫，返回新字符串
toLowerCase()
// 返回字符串中指定文本首次出現(xiàn)的索引，如果未找到文本，返回 -1
indexOf()
// 返回指定文本在字符串中最后一次出現(xiàn)的索引，如果未找到文本，返回 -1
// 與search() 方法相比，可以設(shè)置第二個開始位置參數(shù)
lastIndexOf()
// 搜索特定值的字符串，并返回匹配的位置，可設(shè)置正則表達(dá)式
// 與indexOf() 方法相比，可以設(shè)置更強(qiáng)大的搜索值（正則表達(dá)式）
search()
// 提取字符串的某個部分并在新字符串中返回被提取的部分
slice()
// 類似于 slice() ，不同之處在于 substring() 無法接受負(fù)的索引
substring()
// 類似于 slice()，不同之處在于第二個參數(shù)規(guī)定被提取部分的長度
substr()
// 用另一個值替換在字符串中指定的值
// 只替換首個匹配
// 不會改變調(diào)用它的字符串，它返回的是新字符串
// 可使用正則表達(dá)式作參數(shù)
replace()
// 連接兩個或多個字符串，可用于代替加運(yùn)算符
concat()
// 刪除字符串兩端的空白符
trim()
// 返回字符串中指定下標(biāo)（位置）的字符串
charAt()
// 返回字符串中指定索引的字符 unicode 編碼
charCodeAt()
// 將字符串轉(zhuǎn)換為數(shù)組
split()
8、對象
1、對象就是一組“鍵值對”（key-value）的集合，是一種無序的復(fù)合數(shù)據(jù)集合。
var obj = {
foo: 'Hello',
bar: 'World'
};
2、對象的每一個鍵名又稱為“屬性”（property），它的“鍵值”可以是任何數(shù)據(jù)類型。如果一個屬性的值為函數(shù)，通常把這個屬性稱為“方法”，它可以像函數(shù)那樣調(diào)用。
var obj = {
p: function (x) {
return 2 * x;
}
};
obj.p(1) // 2
3、
// 查看一個對象本身的所有屬性，可以使用Object.keys和Object.getOwnPropertyNames
var obj = {
key1: 1,
key2: 2
};
Object.keys(obj); // ['key1', 'key2']
Object.getOwnPropertyNames(obj) // ['key1', 'key2']
// in運(yùn)算符用于檢查對象是否包含某個屬性
// in運(yùn)算符不能識別哪些屬性是對象自身的，哪些屬性是繼承的
var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
// hasOwnProperty方法判斷是否為對象自身的屬性
var obj = {};
if ('toString' in obj) {
console.log(obj.hasOwnProperty('toString')) // false
}
// for...in循環(huán)用來遍歷一個對象的全部屬性，不僅遍歷對象自身的屬性，還遍歷繼承的屬性
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
console.log('鍵名：', i);
console.log('鍵值：', obj[i]);
}
var person = { name: '老張' };
for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
9、數(shù)組
1、數(shù)組屬于一種特殊的對象，在 JavaScript 中對數(shù)組使用 typeof 運(yùn)算符會返回 "object"。
2、數(shù)組使用數(shù)字索引，對象使用命名索引。數(shù)組是特殊類型的對象，具有數(shù)字索引。
3、數(shù)組是一種動態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以隨時增減數(shù)組的成員。
4、沒有必要使用 JavaScript 的內(nèi)建數(shù)組構(gòu)造器 new Array()，請使用[] 取而代之！
// typeof運(yùn)算符會返回數(shù)組的類型是object。
typeof [1, 2, 3] // "object"
// length屬性返回數(shù)組的長度（數(shù)組元素的數(shù)目）
// length屬性是可寫的。如果人為設(shè)置一個小于當(dāng)前成員個數(shù)的值，該數(shù)組的成員數(shù)量會自動減少到length設(shè)置的值。清空數(shù)組的一個有效方法，就是將length屬性設(shè)為0。
var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
arr // []
// 向數(shù)組末尾添加新元素，返回新數(shù)組的長度
push()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");
// x 的值是 5 ， fruits 的值是 Banana,Orange,Apple,Mango,Kiwi
// 從數(shù)組中刪除最后一個元素
pop()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();
// x 的值是 "Mango" ， fruits 的值是 Banana,Orange,Apple
// 刪除首個數(shù)組元素，并把所有其他元素“位移”到更低的索引，返回被“位移出”的元素
shift()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();
// x 的值是 "Banana" ， fruits 的值是 Orange,Apple, Mango
// 在開頭向數(shù)組添加新元素，并“反向位移”舊元素，返回新數(shù)組的長度
unshift()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.unshift("Lemon");
// x 的值是 5 ， fruits 的值是 Lemon,Banana,Orange,Apple,Mango
// 刪除元素，不過使用 delete 會在數(shù)組留下未定義的空洞，請使用 pop() 或 shift() 取而代之
delete()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
// 把 fruits 中的首個元素改為 undefined
// 向數(shù)組添加新項(xiàng)，第一個參數(shù)定義了應(yīng)添加新元素的位置，第二個參數(shù)定義應(yīng)刪除多少元素，其余參數(shù)定義要添加的新元素
// 返回一個包含已刪除項(xiàng)的數(shù)組
splice()
// 用數(shù)組的某個片段切出新數(shù)組。創(chuàng)建新數(shù)組，不從源數(shù)組中刪除任何元素
// 可接受兩個參數(shù)，該方法會從開始參數(shù)選取元素，直到結(jié)束參數(shù)（不包括）為止
slice()
// 合并現(xiàn)有數(shù)組來創(chuàng)建一個新數(shù)組，不會更改現(xiàn)有數(shù)組，返回一個新數(shù)組
concat()
// 判斷是否是數(shù)組
isArray()
// 把數(shù)組轉(zhuǎn)換為數(shù)組值（逗號分隔）的字符串
toString()
eg
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString(); // Banana,Orange,Apple,Mango
// 將所有數(shù)組元素結(jié)合為一個字符串還可以規(guī)定分隔符
join()
eg
var fruits = ["Banana", "Orange","Apple", "Mango"];
fruits.join(" * "); // Banana * Orange * Apple * Mango
// 以字母順序?qū)?shù)組進(jìn)行排序
sort()
// 反轉(zhuǎn)數(shù)組中的元素
reverse()
// 查找數(shù)組中的最高值
Math.max.apply
// 查找數(shù)組中的最低值
Math.min.apply
// 為每個數(shù)組元素調(diào)用一次函數(shù)
forEach()
// 對每個數(shù)組元素執(zhí)行函數(shù)來創(chuàng)建新數(shù)組
map()
// 創(chuàng)建一個包含通過測試的數(shù)組元素的新數(shù)組
filter()
// 檢查所有數(shù)組值是否通過測試
every()
10、函數(shù)
1、函數(shù)是一段可以反復(fù)調(diào)用的代碼塊。函數(shù)還能接受輸入的參數(shù)，不同的參數(shù)可以返回不同的值。
2、函數(shù)可以調(diào)用自身，就是遞歸（recursion）
3、作用域（scope）指的是變量存在的范圍。在 ES5 的規(guī)范中，JavaScript 只有兩種作用域：一種是全局作用域，變量在整個程序中一直存在，所有地方都可以讀取；另一種是函數(shù)作用域，變量只在函數(shù)內(nèi)部存在。
4、函數(shù)外部聲明的變量就是全局變量（global variable），它可以在函數(shù)內(nèi)部讀取。在函數(shù)內(nèi)部定義的變量，外部無法讀取，稱為“局部變量”（local variable）。對于var命令來說，局部變量只能在函數(shù)內(nèi)部聲明，在其他區(qū)塊中聲明，一律都是全局變量。
5、函數(shù)執(zhí)行時所在的作用域，是定義時的作用域，而不是調(diào)用時所在的作用域。
6、函數(shù)參數(shù)如果是原始類型的值（數(shù)值、字符串、布爾值），傳遞方式是傳值傳遞（passes by value），在函數(shù)體內(nèi)修改參數(shù)值，不會影響到函數(shù)外部。函數(shù)參數(shù)是復(fù)合類型的值（數(shù)組、對象、其他函數(shù)），傳遞方式是傳址傳遞（pass by reference），傳入函數(shù)的原始值的地址，因此在函數(shù)內(nèi)部修改參數(shù)，將會影響到原始值。注意，如果函數(shù)內(nèi)部修改的，不是參數(shù)對象的某個屬性，而是替換掉整個參數(shù)，這時不會影響到原始值。
五、DOM
1、DOM屬性
// 獲取或修改元素內(nèi)容
element.innerHTML
// 改變圖像來源
element.src
// 改變元素的樣式
element.style.property
// 隱藏元素
element.style.display="none"（block）
2、DOM方法
// 寫到HTML文檔中
document.write()
// 通過id訪問元素
document.getElementById()
document.getElementsByTagName()
document.createElement()
document.createTextNode()
appendChild()
removeChild()
3、DOM事件
// 瀏覽器已完成頁面的加載
onload
onunload
// 用戶點(diǎn)擊 HTML 元素
onclick
// HTML 元素改變
onchange
// 用戶在一個HTML元素上移動鼠標(biāo)
onmouseover
// 用戶從一個HTML元素上移開鼠標(biāo)
onmouseout
onmousedown
onmouseup
onfocus
