- JavaScript概念
1. 運行在客戶端瀏覽器中的，每一個瀏覽器都有JavaScript的解析引擎
2. 是一門腳本語言，不需要編譯，直接就可以被瀏覽器解析執行的
3. 功能：
a. 可以增強用戶和html頁面的交互
b. 可以控制html元素，讓其有一些動態效果
c. 增強用戶體驗
4. 發展歷程：
ECMAScript爲混亂的Script制定了一套標準，使得各瀏覽器腳本遵循該標準
JavaScript = ECMAScript + JavaScript特有內容(BOM + DOM) -- 網景公司+Sun公司合作的腳本語言
JScript = ECMAScript + JScript特有內容 -- 微軟的IE瀏覽器的腳本語言
- ECMAScript：客戶端腳本語言的標準
1. 基本語法：
a. 與html結合方式
1. 內部JS：
在html頁面內部任意位置定義一個script標籤，在標籤內部書寫腳本代碼
例如：
<script>
</script>
2. 外部JS：
也是定義script標籤，通過src屬性引入外部的js文件
3. 註釋：
雖然可以任意放位置，但是還是會影響代碼執行的順序，script腳本前面的html代碼先執行
script標籤可以定義多個
b. 註釋
1. 單行：
2. 多行：
c. 數據類型：
1. 原始數據類型(基本數據類型)：
* number：數字 -- 整數/小數/NaN(not a number 一個不是數字的數字類型)
* string：字符串
* boolean：true和false
* null：一個對象爲空的佔位符
* undefined：未定義 -- 如果一個變量未初始化，則會被默認賦值爲undefined類型
2. 引用數據類型(對象)：
d. 變量
-- 變量其實是一塊存儲空間
-- java是強類型語言，JavaScript是弱類型語言。
-- 強類型在開闢變量存儲空間時需要定義將來存儲數據的數據類型
-- 弱類型則不需要定義具體類型，將來可以存儲任意類型數據
關鍵字var定義變量：
var 變量名 = 變量值;
注意：
1. typeof(xxx)：查看變量的數據類型
2. 使用typeof(null)得到數據類型爲Object
e. 運算符
* 一元運算符：
++ -- +(正號) -(負號)...
注意：
1. 在JS中，如果運算數不是運算符所要求的數據類型，則JS引擎會自動對類型進行轉換
2. string類型轉number類型：+(-)正負號的作用
如果string類型變量字面值爲數字，則在+(-)正負號的作用下會轉化爲相應的數值
如果string類型變量的字面值中有數字和非數字，則在+(-)正負號的作用下會變爲NaN的值
NaN和其他數字運算結果都是NaN
3. boolean類型轉number類型：+正號的作用
true在+(正號)作用下會轉爲1
false在+(正號)作用下會轉爲0
* 算數運算符：
+ - * \ % ...
* 邏輯運算符：
&& || ！
注意：
1. number類型轉boolean時，0或NaN爲false，其他數值爲true
2. string類型轉boolean時，空字符串("")爲false，其他都爲true
3. 所有對象都爲true
4. null和undefined類型都爲false
* 比較運算符：
> < >= <= == ===(全等於)
注意：
1. 類型相同時，直接比較
2. 類型不同時，先進行類型轉換，再比較。例如"123" == 123爲true
3. 全等於(===)比較前會先進行類型判斷，比較的兩者類型不一致直接返回false
* 賦值運算符：
=
* 三元運算符：
? :
f. js特殊語法：
* 語句的結束符爲分號;或者回車
* 如果使用var定義的變量，爲局部變量；不寫var關鍵字定義變量則表示全局變量
g. 流程控制語句：
* if...else...
* switch(變量)...
注意：JS中的switch可以接收的變量爲所有數據類型
* for...
* while...
* do...while...
2. 基本對象：
* Function：函數對象
a. 創建(三種形式)：
1. var fun = new Function(形式參數列表，方法體);
2. function 方法名稱(形式參數列表){
}
3. var 方法名 = function(形式參數列表){
}
b. 屬性：
length：參數的數量
c. 注意：
1. JS中方法定義的形式參數類型不用寫，返回值類型也不用寫，因爲都是var關鍵字定義變量，所以省略不寫
2. 方法名稱相同會覆蓋前面的方法定義
3. 在JS中方法的調用只與方法名稱有關，與形參列表無關
4. 在方法聲明中有一個隱藏的內置對象arguments(是一個數組)，封裝所有傳入方法的實際參數
例如：求任意個數字之和
function add(){
var sum = 0;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
此時，爲add方法傳入任意個參數，都會封裝爲一個數組
* Array：
a. 創建(三種形式)：
1. var arr = new Array(元素列表);
2. var arr = new Array(數組長度);
3. var arr = [元素列表];
b. 方法
* join(參數)：將數組中的元素按照指定的參數分隔符拼接爲字符串返回
* push(參數)：向數組末尾添加一個元素，並返回新數組的長度
c. 屬性
length：數組長度
d. 特點：
1. JS中元素類型是可以不一致的，且可以索引訪問
2. JS中數組長度是可變的，如果訪問時數組越界，則會擴容到越界的長度
* Boolean：布爾對象
* Date：日期對象
a. 創建：
1. var date = new Date();
b. 方法：
* toLocalString()：返回當前date對象對應的本地時間，並作爲字符串返回
* getTime()：返回當前時間距離標準0時的毫秒值
* Math：數學對象
a. 創建：該對象不需要創建，直接使用
b. 方法：直接使用(Math.方法名)調用即可
* PI：pi值
* random()：返回[0，1)之間的隨機數
* floor(x)：向下取整
* ceil(x)：向上取整
* round(x)：四捨五入取整
* Number：number的包裝類
* String：string的包裝類
* RegExp：正則表達式對象
a. 定義字符串組成的規則：
1. 單個字符：[]
例如：[a] -- 字符a；[ab] -- 字符a或字符b；[a-zA-Z0-9_] -- 單個單詞字符
* 特殊字符簡化書寫：
\d：表示單個數字字符 -- [0-9]
\w：表示單個單詞字符 -- [a-zA-Z0-9_]
2. 量詞符號：
* ：表示出現任意次
? ：表示出現0次或1次
+ ：表示出現一次以上
{m,b} ：表示出現次數在[m,n]中，{,n} -- 最多n次，{m,}--最少m次
3. 開始和結束：
^ ：表示開始字符
$ ：表示結束字符
例如：
var reg = /^\w{1,5}$/; -- 以單詞字符開頭，以單詞字符結束
b. 創建：
1. var reg = new RegExp("正則表達式");
2. var reg = /正則表達式/;
方法1定義的正則表達式注意反斜槓需要轉譯
方法2定義正則表達式不需要在雙引號
c. 方法：
* test(參數)：驗證給定的參數是否符合對象定義的正則表達式，符合true
* Global：全局對象
a. 創建
b. 方法：
* encodeURI(參數)：將參數轉化爲url編碼
* decodeURI(參數)：將參數url編碼解碼
* encodeURIComponent(參數)：將字符串編碼爲url組件
* decodeURIComponent(參數)：將url組件解碼
* parseInt()：將字符串轉爲數字
-- 逐一判斷字符串每個字符，當碰到一個非數字字符，將前面的數字字符轉爲數值
-- +(正號)在該種情況下就只會轉爲NaN
* isNaN()：判斷變量是否爲NaN
-- NaN參與正常==比較返回的永遠是false
-- 只能調用該方法來判斷一個變量是否爲NaN
* jscode(參數)：可以解析參數字符串並執行它
c. 特點：
該對象是全局對象，其中封裝的方法不需要創建對象就可以直接調用
3. 輸出：
document.write("xxx");
4. JavaScript中this表示當前元素自身的對象
-- 如果需要對某個元素操作自身(或者父子元素)，可以在操作函數的實際參數列表傳入this
- BOM：Browser Object Model – 瀏覽器對象模型
1. 瀏覽器對象(Navigator)：
a. 描述：
用於獲取瀏覽器的相關信息
2. 窗口對象(Window)：
a. 描述
Window 對象表示瀏覽器中打開的窗口
所有全局JavaScript對象，函數和變量自動成爲window對象的成員。
b. 屬性：
1. 可以通過屬性值獲取其他BOM對象
* history
* location
* Navigator
* Screen
2. 可以通過屬性獲取DOM對象
* document
c. 方法：
1. 彈出框相關：
* alert()：顯示一段消息和一個確定按鈕的警告框
* confirm()：顯示一段消息和確定/取消按鈕的對話框
-- 該方法返回值爲boolean類型，如果點擊確定按鈕，返回true，點擊取消按鈕，返回false
-- 用於區別執行後續代碼
* prompt()：顯示一段消息和一個輸入框的對話框
-- 該方法返回值爲用戶輸入的字符串
2. 打開關閉窗口相關：
* open()：打開一個新的窗口(標籤頁)
-- 即生成一個新的Window對象
-- 參數可以傳入新開窗口默認加載的url連接
-- 返回值就是新的Window對象
* close()：
-- 關閉調用該方法的window對象
3. 與定時器相關：
* setTimeout(參數1,參數2)：
-- 一次性的定時器
-- 返回值爲唯一標號，用於取消定時器
-- 參數1爲js代碼或者方法調用；參數2爲計時器毫秒值
* clearTimeout(定時器id)：
-- 傳入一次性定時器標識id，用於取消一次性定時器
* setInterval(參數1,參數2)：
-- 循環定時器，每隔若干時間執行一次
-- 返回值爲唯一標號，用於取消定時器
-- 參數1爲js代碼或者方法調用；參數2爲計時器毫秒值
* clearInterval(定時器id)：
-- 傳入循環定時器標識id，用於取消循環定時器
d. 特點：
1. Window對象不需要創建對象也可以直接使用，使用window.方法名()調用方法
2. window也可以省略，直接使用方法
3. 地址欄對象(Location)：
a. 創建：
通過window對象屬性獲取，由於window可以省略，即直接使用location即可
b. 屬性：
* herf：用於設置和獲取當前location對象的完整URL
c. 方法：
* reload()：重新加載當前文檔，刷新頁面
4. 歷史記錄對象(History)：
a. 描述：
用戶在當前窗口訪問過的歷史url
b. 創建
通過window對象屬性獲取
c. 屬性：
* length：屬性值表示當前窗口的歷史記錄列表長度
d. 方法：
* back()：加載history列表中的前一個url
* forward()：加載history列表中的下一個url
* go(參數)：加載history列表中指定的某個url
-- 參數如果爲正數，表示前進幾個歷史記錄
-- 參數如果爲負數，表示後退幾個歷史記錄
5. 顯示器屏幕對象(Screen)：
a. 描述：
每一Window對象的screen屬性都引用一個Screen對象，其中存放了有關顯示瀏覽器屏幕的信息
Screen對象不包含成員方法，僅含有屬性信息
6. 對象之間的關係：
瀏覽器對象可以包含多個窗口對象(標籤頁)
一個標籤頁包含一個地址欄對象和一個歷史記錄對象還有一個顯示器屏幕對象
顯示器屏幕對象中包含了DOM的Document對象
- DOM：Document Object Model 文檔對象模型。控制HTML文檔內容
1. 概念：
將標記語言的各個組成部分，封裝爲對象。可以使用該對象對html文檔進行CRUD動態操作
W3C DOM標準分爲3個部分：
核心DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對XML文檔的標準模型
HTML DOM - 針對XHTML文檔的標準模型
2. 核心DOM對象：
a. Document：文檔對象
b. Element：元素對象
c. Attribute：屬性對象
d. Text：文本對象
e. Comment：註釋對象
f. Node：節點對象，也是其他5類對象的父對象
3. 核心DOM
a. Document：
1. 創建(獲取)：
在html DOM模型中可以直接使用window對象來獲取
-- window.document 或者省略window document
2. 方法：
1. 獲取Element對象：
* getElementById()：依據id屬性值獲取元素對象。id屬性值一般唯一
* getElementByTagName()：根據元素名稱獲取元素對象。返回值是一個數組
* getElementByClassName()：根據class屬性值獲取元素對象。返回值是一個數組
* getElementByName()：根據name屬性值獲取元素對象。返回值是一個數組
-- 該方法對input標籤較多，因爲表單提交要求必須要有name屬性
2. 創建其他DOM對象：
* createAttribute()
* createElement()
* createComment()
* createTextNode()
b. Element：
1. 創建(獲取)：
通過document來獲取和創建
2. 方法：
* setAttribute(屬性名,屬性值)：設置元素的屬性值
* removeAttribute(屬性名)：移除元素的屬性
3. 操作Element對象：
1. 修改屬性值：
1. 首先明確獲取的對象是哪一種
2. 查看API文檔查看對象有哪些屬性可以更改
2. 修改標籤體內容：
1. 獲取標籤對象
-- document.getElementById("標籤名");
2. 查看API文檔，查看標籤對象有哪些屬性可以更改
c. Node：
1. 特點：
所有DOM對象都可以看作一個Node對象
2. 方法：
* appendChild(子對象)：爲節點添加一個子對象；注意Text對象不能有子對象
* removeChild(子對象)：爲節點刪除一個子對象
* replaceChild(新對象)：用新節點替換原節點
3. 屬性：
* parentNode：返回當前節點的父節點
4. HTML DOM
a. 標籤體的設置和獲取：
1. innerHTML屬性：
-- 屬性值即標籤體的內容：標籤體元素對象.innerHTML
-- 設置標籤體內容：
標籤體元素對象.innerHTML = "新的內容";
標籤體元素對象.innerHTML += "追加的內容";
-- 在對內容的設置中，可以直接在裏面寫html標籤代碼
標籤體元素對象.innerHTML = "<a href='javascript:void(0);'>innerHTML<a>";
-- 使用innerHTML屬性可以方便的操作標籤體，而不用頻繁的操作DOM樹(即創建/添加節點對象)
b. 控制元素樣式：
1. 每個元素都有style屬性，該屬性下有各種css的樣式屬性，爲這些屬性賦值同樣具有css樣式效果
例如：
var divs = document.getElementById("div");
divs.style.border = "1px solid red";
divs.style.fontSize = "20px";
2. 提前定義類選擇器的樣式，而後設置元素的className屬性爲類選擇器名稱，此時預定義的樣式就會生效
例如：
<style>
.div1{
border: 1px solid red;
font-size: 20px;
}
</style>
<script>
var divs = document.getElementById("div");
divs.className = "div1";
</script>
5. 事件監聽機制：
a. 概念：指的是組件由於某些操作觸發一些代碼執行
1. 事件：指的是某些操作。如：鼠標單擊，雙擊，鍵盤按動，鼠標懸停...
2. 事件源：組件。如：按鈕，文本輸入框...
3. 監聽器：代碼
4. 註冊監聽：將事件，事件源，監聽器綁定在一起。當事件源上發生了某個事件，則觸發某個監聽器的代碼
b. 常見事件：
1. 點擊事件：
* onclick：單擊事件
* ondbclick：雙擊事件
2. 焦點事件：
* onblur：元素失去焦點事件
* onfocus：元素獲取焦點事件
3. 加載事件：
* onload：一個頁面或者一張圖像加載完成事件
1. 一般給window加載完成事件，即，當頁面加載之後纔會觸發一些js代碼
4. 鼠標事件：
* onmousedown：鼠標按下事件
1. 定義方法時，定義一個形參，接收event對象
2. event對象的button屬性可以獲取鼠標哪個鍵被點擊了
3. event.button = 0表示左鍵，1表示滾輪，2表示右鍵
* onmouseup：鼠標鬆開事件
* onmousemove：鼠標移動了事件
* onmouseover：鼠標在元素上懸停事件
* onmouseout：鼠標從元素上移開事件
5. 鍵盤事件：
* onkeydown：某個鍵被按下事件
1. 定義方法時，定義一個形參，接收event對象
2. event對象的keyCode屬性可以獲取鍵盤哪個鍵被點擊了
3. event.keyCode = 65表示a，65表示b...以ASCII碼爲數值
4. 回車鍵的keyCode值爲13，可以用於判定提交表單等動作
* onkeyup：某個鍵被鬆開事件
* onkeypress：某個鍵被按下後鬆開事件(兩個動作)
6.選擇和改變：
* onchange：元素域內的內容被改變事件
1. 一般用於下拉框的select綁定onchange事件
* onselect：文本被選中事件
7. 表單事件：
* onsubmit：確認按鈕被點擊事件
1. onsubmit一般用於綁定表單，可以阻止表單提交
2. 用於校驗表單，當校驗不通過時，綁定的校驗函數返回false，則按下提交按鈕也不會提交
3. 注意：
* 使用document.getElementById("form").onsubmit = function(){
return false;
}可以阻止表單提交
* 當使用自定義的函數綁定給onclick事件時，如：
<input type="submit" value="提交" onclick="myFunction();">
並不會阻止表單提交，因爲綁定的onclick事件在底層表述爲：
function fun(){
myFunction();
}此時提交事件響應的是fun函數的返回值，而非自定義的myFunction的返回值
* 使用自定義的函數綁定給onclick事件時，需要return myFunction();纔會生效
<input type="submit" value="提交" onclick="return myFunction();">
* onreset：重置按鈕被點擊事件
c. 綁定事件：
1. 在標籤定義中，指定事件的屬性(即某些操作)，屬性值就是js代碼(即觸發的一些代碼)
例如：點擊圖片事件，觸發執行js代碼
<img src="xxx" onclick="js代碼">
一般將js代碼定義在script標籤中，標籤體的屬性值設爲方法名調用即可
但是仍然沒有將元素與操作分離
2. 通過js獲取元素對象，指定事件屬性的屬性值爲出發的代碼的函數對象
(函數對象是不許括號的，函數調用才需要)
例如：
var Xxx = documents.getElementById("img");
Xxx.onclick = function(){
}
