[TOC] # 案例1：獲取頁面中的五個按鈕  ## 知識點：節點對象Element ``` Live Node = document.getElementById("id") Live Node List = document.getElementsByClassName("class") Live Node List = document.getElementsByName("name") Live Node List = document.getElementsByTagName("tagname") Static Node = document.querySelector("selector") Static Node List = document.querySelectorAll("selector") ``` # 案例2：實現網頁計算器  ## 知識點1：獲取/修改值和文本  > ele.innerHTML或ele.innerText = newText > ele.value = newValue ## 知識點2：函數調用及傳參 * 通過事件調用 * 通過鏈接調用 > 函數形參不需要var > 函數返回值需要return ## 知識點3：全局函數eval | 方法名 | 描述 | | --- | --- | | **isNaN(X)** | 判斷X是否為非數字 | | **eval(X)** | 計算X字符串（作為腳本代碼執行） | * [ ] 試一試  # 案例3：實現網頁開關燈  > `ele.style.XXX = newValue` > `ele.attr = newValue`  # 案例4：留言板  ## 知識點1：Array初始化  ## 知識點：Array常用方法  # 案例5：將URL中的參數提取為對象  ## 知識點1：String初始化及常用方法  1. 字符長度 `str.length` 2. 字符方法 ``` charAt(index) //獲取指定位置處字符 charCodeAt(index) //獲取指定位置處字符的ASCII碼 str[0] //HTML5，IE8+支持 和charAt(0)等效 ``` 3. 位置方法 ``` indexOf(char) //返回指定內容在元字符串中的位置 lastIndexOf() //從后往前找，只找第一個匹配的 ``` 4. 字符串操作方法 ``` concat() //拼接字符串，等效于+，+更常用 slice() //從start位置開始，截取到end（取不到） substring() //從start位置開始，截取到end（取不到） substr() //從start位置開始，截取length個字符 ``` 5. 其他 ``` trim() //只能去除字符串前后的空白 to(Locale)UpperCase() //轉換大寫 to(Locale)LowerCase() //轉換小寫 search() replace() split() 按照特定字符將字符串分割為數組 ``` ## 知識點2：對象的創建和訪問 ``` var x = {}; var car = {type:"Fiat", model:500, online:false}; var obj= { name1: "value1", name2 : function() { return this.name1 + " " + this.name2; } }; ``` ## 知識點3：創建對象并訪問 * [ ] 訪問對象屬性 ``` obj.name1; obj["name2"]; ``` * [ ] 訪問對象方法并執行 ```res = obj.funName();``` * [ ] 試一試  > 讀取了對象不存在的屬性，屬性值為undefined ## 知識點4：URL編碼解碼 | 方法名 | 描述 | | --- | --- | | **encodeURI(X)** | 將URI編譯為ASCII碼 | | **decodeURI(X)** | 解析編譯之后的ASCII碼 | # 案例6：使用Math隨機生成一種顏色  > 試一試：  # 案例7：顯示網頁時鐘  > 注意：日期不足兩位，前面補0 ## 知識點1：Date初始化  ## 知識點2：常用方法Date()  # 案例8：驗證用戶名 > 規則：字母開頭，包含字母、數字、下劃線長度為4-16位。  ## 知識點：正則表達式創建與驗證 ``` var reg = new RegExp(); reg.test(String); ``` > test 檢索字符串中指定的值。返回 true 或 false。 ## 知識點：其他正則表達式方法 > 1. search 檢索與正則表達式相匹配的值。 > 2. match 找到一個或多個正則表達式的匹配。 > 3. replace 替換與正則表達式匹配的子串。 > 4. split 把字符串分割為字符串數組。 ``` var string = new String(); string.search(reg); ``` ## 試一試：驗證手機號 > 規則：以數字1開頭的11位數字。  > 規則：以0開頭的3-4位區號+7-8位座機號碼  ## 試一試：驗證銀行金額 1. 整數部分不超過15位； 2. 數字不能以0開頭，除非整數部分就是0； 2. 可以有小數也可以沒有小數； 3. 小數部分最多兩位。 ## 試一試：金額轉換  ## 總結： undefined出現的情況