JavaScript 與 Java 是兩種完全不同的語(yǔ)言，無(wú)論在概念上還是設(shè)計(jì)上。
DOM(Document Object Model)：JavaScript操作網(wǎng)頁(yè)上的元素(標(biāo)簽)的API
BOM(Browser Object Model)：JavaScript操作瀏覽器的部分功能的API
2015 ECMAScript 6 添加類(lèi)和模塊
2016 ECMAScript 7 增加指數(shù)運(yùn)算符 (**)
增加 Array.prototype.includes
HTML 中的腳本必須位于 <script> 與 </script> 標(biāo)簽之間。
腳本可被放置在 HTML 頁(yè)面的 <body> 和 <head> 部分中。
把腳本保存到外部文件中。外部文件通常包含被多個(gè)網(wǎng)頁(yè)使用的代碼。
<script src="myScript.js"></script>
B-S架構(gòu)就是瀏覽器和服務(wù)器之間的通訊，服務(wù)器負(fù)責(zé)處理一個(gè)個(gè)的api，瀏覽器負(fù)責(zé)處理頁(yè)面的效果。前端一個(gè)項(xiàng)目，后端一個(gè)項(xiàng)目，兩個(gè)項(xiàng)目之間通過(guò)api通信。
this 指向問(wèn)題：
- 有對(duì)象就指向調(diào)用對(duì)象（obj）
- 沒(méi)調(diào)用對(duì)象就指向全局對(duì)象（window）
- 用new構(gòu)造就指向新對(duì)象
- 通過(guò) apply 或 call 或 bind 來(lái)改變 this 的所指。
JavaScript 代碼規(guī)范
變量名推薦使用駝峰法來(lái)命名(camelCase),三種變量命名規(guī)則：
var firstName='king';//小駝峰
var FirstName='queen';//大駝峰
var first_name='maizi';//下劃線法
- 變量和函數(shù)為駝峰法（ camelCase）
- 全局變量為大寫(xiě) (UPPERCASE )
- 常量 (如 PI) 為大寫(xiě) (UPPERCASE )
- 通常運(yùn)算符 ( = + - * / ) 前后需要添加空格.
- 通常使用 4 個(gè)空格符號(hào)來(lái)縮進(jìn)代碼塊.
- 一條語(yǔ)句通常以分號(hào)作為結(jié)束符。
- JavaScript 關(guān)鍵字必須以字母、下劃線（_）或美元符（$）開(kāi)始。
- JavaScript 對(duì)大小寫(xiě)是敏感的。常見(jiàn)的是駝峰法的命名規(guī)則。
對(duì)象定義的規(guī)則:
- 冒號(hào)與屬性值間有個(gè)空格。
- 字符串使用雙引號(hào)，數(shù)字不需要。
- 最后一個(gè)屬性-值對(duì)后面不要添加逗號(hào)。
- 將右花括號(hào)獨(dú)立放在一行，并以分號(hào)作為結(jié)束符號(hào)。
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
對(duì)象只是一種特殊的數(shù)據(jù)。對(duì)象擁有屬性和方法。
方法只不過(guò)是附加在對(duì)象上的函數(shù)。
單行注釋以 // 開(kāi)頭。 多行注釋以 /* 開(kāi)始，以 */ 結(jié)尾。
數(shù)組可以用一個(gè)變量名存儲(chǔ)所有的值，并且可以用變量名訪問(wèn)任何一個(gè)值。
數(shù)組中的每個(gè)元素都有自己的的ID，以便它可以很容易地被訪問(wèn)到。
http://www.runoob.com/js/js-obj-array.html 點(diǎn)擊查看數(shù)組實(shí)例常量使用方法： Math.PI Math.SQRT2
JavaScript 可以通過(guò)不同的方式來(lái)輸出數(shù)據(jù)：
- 使用 window.alert() 彈出警告框。 window.alert(5 + 6);
- 使用 document.write() 方法將內(nèi)容寫(xiě)到 HTML 文檔中。
document.write(Date()); - 使用 innerHTML 寫(xiě)入到 HTML 元素。
document.getElementById("demo").innerHTML = "段落已修改"; - 使用 console.log() 寫(xiě)入到瀏覽器的控制臺(tái)。
c = 5; console.log(c);
在編程語(yǔ)言中，一般固定值稱(chēng)為字面量，如 3.14。
var length = 16; // Number 通過(guò)數(shù)字字面量賦值
var points = x * 10; // Number 通過(guò)表達(dá)式字面量賦值
var lastName = "Johnson"; // String 通過(guò)字符串字面量賦值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通過(guò)數(shù)組字面量賦值
var person = {firstName:"John", lastName:"Doe"}; // Object 通過(guò)對(duì)象字面量賦值
JavaScript 變量
變量是用于存儲(chǔ)信息的"容器"。
一個(gè)好的編程習(xí)慣是，在代碼開(kāi)始處，統(tǒng)一對(duì)需要的變量進(jìn)行聲明。
未使用值來(lái)聲明的變量，其值實(shí)際上是 undefined。
JavaScript 數(shù)據(jù)類(lèi)型
字符串（String）、數(shù)字(Number)、布爾(Boolean)、
數(shù)組(Array)、對(duì)象(Object)、空（Null）、未定義（Undefined）
JavaScript 擁有動(dòng)態(tài)類(lèi)型。這意味著相同的變量可用作不同的類(lèi)型：
var x; // x 為 undefined
var x = 5; // 現(xiàn)在 x 為數(shù)字
var x = "John"; // 現(xiàn)在 x 為字符串
- 字符串是存儲(chǔ)字符（比如 "Bill Gates"）的變量。
- 字符串可以是引號(hào)中的任意文本。您可以使用單引號(hào)或雙引號(hào)：
- JavaScript 只有一種數(shù)字類(lèi)型。數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶
- 布爾（邏輯）只能有兩個(gè)值：true 或 false
- 對(duì)象由花括號(hào)分隔。在括號(hào)內(nèi)部，對(duì)象的屬性以名稱(chēng)和值對(duì)的形式 (name : value) 來(lái)定義。屬性由逗號(hào)分隔
- Undefined 這個(gè)值表示變量不含有值。
- 可以通過(guò)將變量的值設(shè)置為 null 來(lái)清空變量。
var arr2 = ['a', 'b',' 'c' ]; //同樣是在創(chuàng)建時(shí)初始化，但是這種創(chuàng)建更為邊界直觀- 對(duì)象的創(chuàng)建，一般推薦使用
var perple = {name : 'Tom', age : 21 , eat : function(){ } }
JavaScript 對(duì)象
JavaScript 對(duì)象是擁有屬性和方法的數(shù)據(jù)。
對(duì)象的方法定義了一個(gè)函數(shù)，并作為對(duì)象的屬性存儲(chǔ)。
對(duì)象方法通過(guò)添加 () 調(diào)用 (作為一個(gè)函數(shù))。
使用以下語(yǔ)法創(chuàng)建對(duì)象方法：
methodName : function() { code lines } 經(jīng)?？梢钥吹?/p>
JavaScript 函數(shù)
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。
關(guān)鍵詞 function 必須是小寫(xiě)的，并且必須以與函數(shù)名稱(chēng)相同的大小寫(xiě)來(lái)調(diào)用函數(shù)。
在使用 return 語(yǔ)句時(shí)，函數(shù)會(huì)停止執(zhí)行，并返回指定的值。
函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問(wèn)它。
函數(shù)外聲明的變量是全局變量，網(wǎng)頁(yè)上的所有腳本和函數(shù)都能訪問(wèn)它。
局部變量會(huì)在函數(shù)運(yùn)行以后被刪除。
全局變量會(huì)在頁(yè)面關(guān)閉后被刪除。
carname="Volvo"; 將聲明一個(gè)全局變量 carname，即使它在函數(shù)內(nèi)執(zhí)行。
JavaScript 作用域
在 JavaScript 中, 作用域?yàn)榭稍L問(wèn)變量，對(duì)象，函數(shù)的集合。
在 ES6 中，提供了 let 關(guān)鍵字和 const 關(guān)鍵字。
let 的聲明方式與 var 相同，用 let 來(lái)代替 var 來(lái)聲明變量，就可以把變量限制在當(dāng)前代碼塊中。使用 const 聲明的是常量，其值一旦被設(shè)定便不可被更改。
注意是指向的物理地址不可更改。
事件
HTML 事件是發(fā)生在 HTML 元素上的事情。
當(dāng)在 HTML 頁(yè)面中使用 JavaScript 時(shí)， JavaScript 可以觸發(fā)這些事件。
onchange HTML 元素改變
onclick 用戶(hù)點(diǎn)擊 HTML 元素
onmouseover 用戶(hù)在一個(gè)HTML元素上移動(dòng)鼠標(biāo)
onmouseout 用戶(hù)從一個(gè)HTML元素上移開(kāi)鼠標(biāo)
onkeydown 用戶(hù)按下鍵盤(pán)按鍵
onload 瀏覽器已完成頁(yè)面的加載
事件可以用于處理表單驗(yàn)證，用戶(hù)輸入，用戶(hù)行為及瀏覽器動(dòng)作
字符串的索引從 0 開(kāi)始，這意味著第一個(gè)字符索引值為 [0],第二個(gè)為 [1], 以此類(lèi)推。這樣我們就可以使用內(nèi)置屬性 length 來(lái)計(jì)算字符串的長(zhǎng)度。
=== 為絕對(duì)相等，即數(shù)據(jù)類(lèi)型與值都必須相等。
!= 為 == 的非運(yùn)算，!== 為 === 的非運(yùn)算
個(gè)人認(rèn)為常用的字符串方法：
- concat() 連接兩個(gè)或多個(gè)字符串，返回連接后的字符串
- indexOf() 返回字符串中檢索指定字符第一次出現(xiàn)的位置
- match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配
- replace() 替換與正則表達(dá)式匹配的子串
- slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分，即切片
- split() 把字符串分割為子字符串?dāng)?shù)組
- toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě)
- toString() 返回字符串對(duì)象值
- toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě)
- trim() 移除字符串首尾空白
首先設(shè)置表達(dá)式 n（通常是一個(gè)變量）。隨后表達(dá)式的值會(huì)與結(jié)構(gòu)中的每個(gè) case 的值做比較。如果存在匹配，則與該 case 關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行。請(qǐng)使用 break 來(lái)阻止代碼自動(dòng)地向下一個(gè) case 運(yùn)行。
switch(n)
{
case 1:
執(zhí)行代碼塊 1
break;
case 2:
執(zhí)行代碼塊 2
break;
default:
與 case 1 和 case 2 不同時(shí)執(zhí)行的代碼
}
default 關(guān)鍵詞來(lái)規(guī)定匹配不存在時(shí)做的事情
case 10:
case 11:alert("10或者11"); //number = 10 或者 = 11執(zhí)行相同的操作
for/in 語(yǔ)句循環(huán)遍歷對(duì)象的屬性
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 為屬性名
{
txt=txt + person[x];
}
// 還可以遍歷數(shù)組
var x;
var nums = [1, 3, 5];
for (x in nums)
{
document.write(x+ "<br />");
}
break 語(yǔ)句用于跳出循環(huán)。
continue 用于跳過(guò)循環(huán)中的一個(gè)迭代。會(huì)繼續(xù)執(zhí)行該循環(huán)之后的代碼.
數(shù)組是一種特殊的對(duì)象類(lèi)型。 因此 typeof [1,2,3,4] 返回 object。
null是一個(gè)只有一個(gè)值的特殊類(lèi)型。表示一個(gè)空對(duì)象引用。
你可以設(shè)置為 null 來(lái)清空對(duì)象:
null 和 undefined 的值相等，但類(lèi)型不等
null === undefined // false
null == undefined // true
NaN 的數(shù)據(jù)類(lèi)型是 number
數(shù)組(Array)的數(shù)據(jù)類(lèi)型是 object
日期(Date)的數(shù)據(jù)類(lèi)型為 object
null 的數(shù)據(jù)類(lèi)型是 object
未定義變量的數(shù)據(jù)類(lèi)型為 undefined
全局方法 String() 可以將數(shù)字轉(zhuǎn)換為字符串 String(123) 將數(shù)字 123 轉(zhuǎn)換為字符串并返回
toString() 也是有同樣的效果。 (123).toString()
日期
getFullYear() 從 Date 對(duì)象以四位數(shù)字返回年份。
getMonth() 從 Date 對(duì)象返回月份 (0 ~ 11)。 需要加一
getDate() 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
getHours() 返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
getMinutes() 返回 Date 對(duì)象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。
parseInt() 解析一個(gè)字符串，并返回一個(gè)整數(shù)。
JavaScript 正則表達(dá)式
正則表達(dá)式是由一個(gè)字符序列形成的搜索模式?？捎糜谒形谋舅阉骱臀谋咎鎿Q的操作。
語(yǔ)法：
/正則表達(dá)式主體/修飾符(可選)
i 執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。
g 執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止）。
m 執(zhí)行多行匹配。
[abc] 查找方括號(hào)之間的任何字符。
[0-9] 查找任何從 0 至 9 的數(shù)字。
(x|y) 查找任何以 | 分隔的選項(xiàng)。
n+ 匹配任何包含至少一個(gè) n 的字符串。
n* 匹配任何包含零個(gè)或多個(gè) n 的字符串。
n? 匹配任何包含零個(gè)或一個(gè) n 的字符串。
RegExp 對(duì)象是一個(gè)預(yù)定義了屬性和方法的正則表達(dá)式對(duì)象
test() 方法是一個(gè)正則表達(dá)式方法。用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false。
var patt = /e/;
patt.test("The best things in life are free!"); //true
exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。該函數(shù)返回一個(gè)數(shù)組，其中存放匹配的結(jié)果。如果未找到匹配，則返回值為 null.
/e/.exec("The best things in life are free!"); // e
http://www.runoob.com/js/js-regexp.html 頁(yè)面最底下的實(shí)例值得一看
JavaScript 錯(cuò)誤
try 語(yǔ)句測(cè)試代碼塊的錯(cuò)誤。
catch 語(yǔ)句處理錯(cuò)誤。
throw 語(yǔ)句創(chuàng)建自定義錯(cuò)誤。
try {
//在這里運(yùn)行代碼
} catch(err) {
//在這里處理錯(cuò)誤
}
JavaScript 中，函數(shù)及變量的聲明都將被提升到函數(shù)的最頂部。
JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。
JavaScript 嚴(yán)格模式(strict mode)不允許使用未聲明的變量。
嚴(yán)格模式通過(guò)在腳本或函數(shù)的頭部添加 "use strict"; 表達(dá)式來(lái)聲明。
嚴(yán)格模式下你不能使用未聲明的變量。
消除代碼運(yùn)行的一些不安全之處,提高編譯器效率，增加運(yùn)行速度；
典型的數(shù)據(jù)驗(yàn)證有：
必需字段是否有輸入?
用戶(hù)是否輸入了合法的數(shù)據(jù)?
在數(shù)字字段是否輸入了文本?
http://www.runoob.com/js/js-reserved.html Javascript保留關(guān)鍵字
JSON 是用于存儲(chǔ)和傳輸數(shù)據(jù)的格式。JSON 通常用于服務(wù)端向網(wǎng)頁(yè)傳遞數(shù)據(jù) 。
鍵/值對(duì)包括字段名稱(chēng)（在雙引號(hào)中），后面一個(gè)冒號(hào)，然后是值："name":"Runoob"
JSON 對(duì)象保存在大括號(hào)內(nèi)。對(duì)象可以保存多個(gè) 鍵/值 對(duì)
json對(duì)象和JavaScript對(duì)象的區(qū)別：
json中沒(méi)有變量的概念，不用聲明變量
json沒(méi)有末尾的分號(hào)
json中對(duì)象的屬性名任何時(shí)候都必須加雙引號(hào)。
JSON.parse() 用于將一個(gè) JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象。
JSON.stringify() 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。
json.stringify() 輸出的json字符串不包含任何空格字符或縮進(jìn)。
函數(shù)表達(dá)式
匿名函數(shù)：函數(shù)存儲(chǔ)在變量中，不需要函數(shù)名稱(chēng)，通常通過(guò)變量名來(lái)調(diào)用。
var x = function (a, b) {return a * b};
函數(shù)提升（Hoisting）函數(shù)可以在聲明之前調(diào)用
自調(diào)用表達(dá)式會(huì)自動(dòng)調(diào)用。如果表達(dá)式后面緊跟 () ，則會(huì)自動(dòng)調(diào)用。
(function () {
var x = "Hello!!"; // 我將調(diào)用自己
})();
toString() 方法將函數(shù)作為一個(gè)字符串返回:
一般而言，在Javascript中，this指向 函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象。
注意 this 是保留關(guān)鍵字，你不能修改 this 的值。
在 web 瀏覽器中全局對(duì)象是瀏覽器窗口（window 對(duì)象）。
- 在函數(shù)中只有return this; // 返回 window 對(duì)象
- 在對(duì)象方法中return this; // this 的值為 myObject 對(duì)象
如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。
- 構(gòu)造函數(shù)中 this 關(guān)鍵字沒(méi)有任何的值。
- call() 和 apply() 是預(yù)定義的函數(shù)方法。 兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。第二個(gè)參數(shù)call傳入的是參數(shù)列表，apply傳入的是數(shù)組。通過(guò) call() 或 apply() 方法你可以設(shè)置 this 的值, 且作為已存在對(duì)象的新方法調(diào)用。 http://www.runoob.com/js/js-function-invocation.html
JavaScript 閉包
JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問(wèn)上一層的函數(shù)變量。
該實(shí)例中，內(nèi)嵌函數(shù) plus() 可以訪問(wèn)父函數(shù)的 counter 變量：
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
// 函數(shù)自我調(diào)用也可以作為閉包的做法：
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add(); add(); add(); // 計(jì)數(shù)器為 3
閉包就是一個(gè)函數(shù)引用另一個(gè)函數(shù)的變量，因?yàn)樽兞勘灰弥圆粫?huì)被回收，因此可以用來(lái)封裝一個(gè)私有變量。這是優(yōu)點(diǎn)也是缺點(diǎn)，不必要的閉包只會(huì)增加內(nèi)存消耗?；蛘哒f(shuō)閉包就是子函數(shù)可以使用父函數(shù)的局部變量，還有父函數(shù)的參數(shù)。
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會(huì)覆蓋已存在的事件句柄。
第一個(gè)參數(shù)是事件的類(lèi)型 (如 "click" 或 "mousedown").
第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。
第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。
在 冒泡 中，內(nèi)部元素的事件會(huì)先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點(diǎn)擊事件先觸發(fā)，然后會(huì)觸發(fā) <div> 元素的點(diǎn)擊事件。
在 捕獲 中，外部元素的事件會(huì)先被觸發(fā)，然后才會(huì)觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點(diǎn)擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點(diǎn)擊事件。
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
window.open() - 打開(kāi)新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() - 移動(dòng)當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
CDN (Content Delivery Network) 解決了這個(gè)問(wèn)題。CDN 是包含可分享代碼庫(kù)的服務(wù)器網(wǎng)絡(luò)。 通過(guò)將內(nèi)容發(fā)布到靠近用戶(hù)的邊緣節(jié)點(diǎn)，使不同地域的用戶(hù)在訪問(wèn)相同網(wǎng)頁(yè)時(shí)可以就近獲取。不僅可以減輕服務(wù)器的負(fù)擔(dān)，也可以提高用戶(hù)的訪問(wèn)速度。
函數(shù)的名字僅僅是一個(gè)包涵指針的變量而已。
