JavaScript語言由三部分組成：
---核心(ECMAScript)
---文檔對象模型(DOM,Document Object Model)
----瀏覽器對象模型（BOM,Bdrowser Object Model)
JavaScript的用途
客戶端JavaScript | 服務器端JavaScript |
--客戶端數據計算 | ----分佈式計算 |
---表單輸入驗證 | -----實時服務器 |
---瀏覽器事件的觸發和處理 | ------窗口應用 |
---網頁特殊顯示效果製作 | -----網絡應用 |
----服務器的異步數據提交 |
瀏覽器內核主要由兩部分組成：
1 內容排版引擎----解析HTML/CSS
2 腳本解釋引擎----解析JavaScript
怎麼搭建JavaScript運行環境
方式一： 安裝獨立的JavaScript解釋器
例如：node.exe
(1) 可以一行一行的輸入要執行的腳本並執行
(2) 也可以把多行要執行的腳本寫在文本文件中，批量執行
方式二： 使用瀏覽器內核中嵌入的JavaScript解釋器
(1)直接在Console中輸入腳本並執行
(2) 將JS腳本嵌入在HTML頁面中執行
解釋型語言，若某行代碼錯誤，則解釋器終止此次執行；但是不會影響後續塊的執行，以及後續HTML元素的解析。
瀏覽器調試功能
IE
Firefox
Chrome
編寫JavaScript代碼
語句----會被JavaScript引擎解釋執行的代碼
-----由表達式，關鍵字，運算符組成；
-----大小寫敏感
-----使用分號或者換行結束；
大小寫敏感例如：
註釋
----單行註釋
-----多行註釋
換行與空格
變量的聲明
可以在一條語句中聲明多個變量，變量名使用”,”分隔
Var name1,name2,name3;
Var age1,age2=30;
注意不允許使用關鍵字和保留字作變量名
命名規範
---標識符命名規範
-------可以包含字母，數字，下劃線_, 美元符號$
--------不能以數字開頭
---------常用於表示函數，變量等的名稱
注意：未經初始化的變量
變量定義之後，在使用之前從未賦值過，值爲undefined
Var userName;
Console.log(userName);
變量未被定義過，而被直接使用，屬於語法錯誤
Console.log(userAge);
變量的操作必須與類型匹配！【理解】
JavaScript數據類型
----原始類型 number 數字； string 字符串； boolean 布爾；
----特殊類型 null 空； undefined 未定義
-----應用類型 Object 對象
Function 函數
Number 數字
String 字符串
Boolean 布爾
Data 日期
Error 錯誤
string類型
---收尾由一對單引號或雙引號括起
---特殊字符需要轉譯
number 類型
----既可以表示32位的整數，也可以表示64位的浮點數
boolean 類型
--- 僅有兩個值 true 和 false
隱式轉換
數字+字符串 ： 數字轉換爲字符串
數字+布爾值 ： true轉換爲1，false轉換爲0
字符串+布爾值 ： 布爾值轉換爲字符串true或false
布爾值+布爾值 ： 布爾值轉換爲數值1 或0
數據類型轉換函數
toString()
----所有數據類型均可轉換爲string類型
parseInt()
----如果沒有可以轉換的部分，則返回NaN
parseFloat()
-----解析出一個string的浮點數部分
-----如果沒有可以轉換的部分，則返回NaN
Number()
------把一個string解析爲number
-----如果包含非法字符，則返回NaN
isNaN函數
-----把NaN與任何值包括自身，相比得到的結果均是false.
----所以不能使用 == ==== 來判讀某個值是否是NaN
null
undefined
------語義 ：不存在該數據
-------聲明瞭變量但從未賦值或者對象屬性不存在
例如：
Var msg;
Console.log(msg);
Var emp = new Object();
Console.log(emp.isOnSale);
運算符
算術運算 + - * / % ++ --
關係運算 > <>= <= == === != !===
邏輯運算符 && || ！
賦值運算符 = +=
字符連接運算符 +
條目（三目）運算符 ?:
特殊運算符 typeof instanceof void delete
賦值運算符
在絕大數編程語言中，a+=3 由於運行時可以進行優化，執行效率都要優於a=a+3
條件（三目）運算符的嵌套
方法（函數，過程）
-----方法，實際上是功能完整的對象。
-------定義：function
作用域
------局部變量
------全局變量
與函數類似，函數也有全局函數和局部函數。
ECMAScript 中預定義了一組全局函數，可供用戶直接使用
decodeURI()
decoudeURIComponent()
encodeURI()
encodeURIComponent()
eval()
isFinite()
isNaN()
parseFloat()
parseInt()
語句：
switch-case語句
Try/catch
Try{
//此處是主業務功能代碼
//主業務功能代碼中可能產生並拋出錯誤
}catch(){
//此處是負責錯誤處理的代碼
}finally{
//此處是出口語句
}
數組：
數組定義：
Var arr1 = [];
Var arr2 = [97,85,79];
Var arr3 = new Array();
Var arr4 = new Array(“Tom”,”Mary”);
For.....in 遍歷數組元素
Var numbers = [10,30,50,40];
For(var i in numbers){
Console.log(i + “-” +numbers[i]);
}
獲取數組字符串
----valueOf()
----toString()
----toLocaleString
----join()
連接數組
-----concat() 拼接兩個或更多的數組，並返回結果
例如： arrObject.concat(arr1,arr2,arr3,...arn)
Slice() 獲取現有數組的一個子數組
Splice() 從數組中刪除一部分元素，並添加另一部分元素
Reverse() 顛倒數組中的元素的順序。
Sort()
Push() 入棧
Pop() 出棧
二維數組
轉義字符
字符串
大小寫轉換方法
---toLowerCase()
----toUpperCase()
獲取指定位置的字符
charAt(index) 方法用於獲取指定下標處的字符
charCodeAt(index)
檢索字符串
indexOf(value)
lastIndexOf(value)
截取字符串
slice(start,[end])
substring(start)
分隔字符串
split
鏈接字符串
concat
使用+
替換子字符串
---replace(substr/regexp,replacement)
Match(value/regexp)
查找
search(regexp)
正則表達式
----定義
------直接量字符
/pattern/attributes
Replace(substring/regexp,replacement)
例如：
Var regexp = /(red|blue|green)/ig;
Var data = ‘Flowers are red,blue,yellow,or green’;
Var result = data.replace(regexp,’<span style=”color:$1”>$1</span>’
Document.write(result);
match
search
split
創建正則表達式對象有兩種方法
直接量語法：
Var patt1 = /pattern/attributes;
調用RegExp構造方法：
Var patt2 = new RegExp(pattern,attributes);
RegExp對象具有如下方法
Compile()
Exec()
Test()
Math
----成員屬性
Math對象具有如下方法
Abs
Ceil
Exp
Log
Floor
Max
Min
Pow
Round
Sqrt
三角函數
Acos
Asin
Atan
Atan2
Cos
Sin
Tan
Random()
Date
獲取時間
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
修改時間
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
時間格式化
創建Number對象
Number對象具有如下靜態常量屬性
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
方法：
toExponential()
toFixed()
toPrecision()
toString()
Boolean對象
錯誤處理
ECMAScript定義了六中類型的錯誤，除此之外，可以使用Error構造方法創建自定義的
Error對象。
EvalError, RangeError, ReferenceError, SyntaxError, TypeError,URIError
Error 對象
成員屬性
Message
Name
Stack
Error對象成員方法
toString()
一個面向對象的語言需要向開發者提供四種基本能力
1， 封裝
2， 聚集
把一個對象存儲在另一個對象內的能力
3， 繼承
從其他對象爲當前對象獲得屬性和方法的能力
4， 多態
能以多種不同的形式運行函數或方法的能力
ECMAScript支持這些要求，因此可被看做面向對象的。
創建自定義對象方法總結：
（1）使用直接量語法
（2）使用new Object()
（3）使用 function 對象模板
（4）使用Object.create(proto)
定義屬性
--直接量方式聲明對象屬性
--使用new創建的對象聲明屬性
訪問屬性
使用 . 或者 [] 運算符訪問對象的屬性
屬性訪問錯誤
檢測屬性：
四種方法檢測對象中是否存在指定屬性
1. 使用 in關鍵字
Console.log(‘ename’ in emp1);
2. 使用對象的hasOwnProperty()方法
Console.log(emp1.hasOwnProperty(‘ename’));
3. 使用undefined判讀
Console.log(emp1.name === undefined);
4. 使用條件語句直接判斷
If(emp1.ename){
Console.log(‘ename屬性存在’)
}
類數組的對象
--有length 屬性
---可以使用[] 訪問成員
----除了使用下標，還可以是id, name
----可以使用for
注意：不能使用slice(), push(), pop() 等。
常見的類數組對象有：
Arguments, NodeList, styleSheetList, HTMLCollection,
HTMLFormControlsCollection, HTMLOptionsCollection,
HTMLAllCollection, DOMTokenList
JSON 格式：
使用eval()函數把一段JSON文本字符串解析爲一個JavaScript對象
方法二：
使用JSON.parse(string)方法來解析JSON字符
JSON.stringify(jsonObj)方法把JavaScript對象格式化爲JSON字符串：
主要：IE7--JS解釋器不支持這個兩個方法！！可以下載json2.js解決（github上）
Function
他的屬性 arguments ,類數組對象。
Arguments對象具有如下屬性：
---length
---callee: 返回當前函數的引用（匿名函數可以使用該屬性實現遞歸調用）
創建函數的兩種方式
1， 直接使用function關鍵字聲明新的函數
2， 使用Function對象構造方法創建新的函數
效率遠不如直接使用function
匿名函數
爲HTML元素的相關事件綁定一個處理函數有二種
1 直接在HTML代碼中綁定
Button onclick=”submit()”>確定</button>
2 使用JavaScript執行時間綁定
<script>
Bt.onclick = function(){}
</script>
綁定多個處理函數
---非IE
Var bt = document.getElementById(“btSubmit”);
bt.addEventListener(“click”,f1);
bt.addEventListener(“click”,function(){});
IE
Var bt = document.getElementById(“btSubmit”);
bt.attachEvent(“onclick”,f1);
bt.attachEvent(“onclick”,function(){});
常用的HTML時間
Onabort
Onblur
Onchange
Onclick
Ondbclick
Onerror
Onfocus
Onkeydown
Onkeypress
Onkeyup
Onload
Onmousedown
Onmousemove
Onmouseout
Onmouseover
Onmouseup
Onreset
Onresize
Onslect
Onsubmit
Onunload
利用模板定義對象
Prototype基本理解
利用Object.create()創建對象
-----ECMAScript5 提出的
例如：
Var emp = {ename:’Tom’,salary:3500};
Var coder = Object.create(emp);
Console.log(Object.getPrototypeOf(coder)); //emp
coder.skilledTool = ‘JavaScript’;
Console.log(coder.skilledTool); //JavaScript
Console.log(coder.ename); //Tom
Console.log(coder.salary); //3500
isPrototypeOf()
---用於判定一個prototype對象是否存在於另一個對象的原型鏈中。是 返回true，否則false
自有屬性與原型屬性
Var emp = {dept:”研發部“}；
Var coder = Object.create(emp);
Var accounting = Object.create(emp);
coder.skilledTool = ‘JavaScript’; //設置自有屬性
Accounting.level = ‘會計三級’; //設置自有屬性
//設置原型屬性
Object.getPrototypeOf(coder).dept = ‘開發部’;
Object.getPrototypeOf(coder).comm = 5000;
Console.log(coder.dept);
Console.log(accounting.dept);
Console.log(coder.comm);
Console.log(accounting.comm);
刪除自有屬性
Delete coder.skilledTool;
可以刪除原型屬性？
爲對象擴展方法
使用getter setter函數定義屬性
ECMASCript5中對象的屬性分爲兩種
1， 數據屬性 data property
2， 訪問器屬性 accessor property
例如：
Var circle = {
r: 10,
get size(){
Return Math.PI*this.r* this.r;
},
set size(){
Return Math.sqrt(value/Math.PI);
}
}
Console.log(circle.size);
Circle.size = 31400;
Console.log(circle.r);
ECMAScript5中對
數據屬性的四個特性：
---value, writable, enumerable , configurable
訪問器屬性的四個特性：
----get ,set , enumerable, configurable
怎麼定義呢？
使用Object.defineProperty(obj,property,attr)方法爲對象添加具備詳細特徵的屬性
例如：
Var e1= {};
Object.defineProperty(e1,”ename”,{
Value:’Tom’,
Writable:true,
Enumerable:true,
Configurable:true
});
內置對象（native object) 是指JavaScript語言本身預定義的對象，在ECMAScript標準定義，由所有的瀏覽器廠家來提供具體實現
--- String Boolean Number
Object Function
Array Date RegExp Math
Error EvalError RangeError ReferenceError
SyntaxError TypeError URIError
Global
宿主對象：指JavaScript運行環境（即瀏覽器提供的對象，有瀏覽器廠家自定義提供實現。
具體分爲如下兩類：
1 BOM對象
Window Navigator Screen History Location
2, DOM對象
Document Anchor Area Base Body Button Canvas Event Frame Frameset IFrame Image Link Meta Style Form ............