Javascript

（一）Javascript

（1）基本概念

• Javascript
  • 解釋性指令碼語言
  • 弱型別
  • 作用：完成表單的驗證
  • ECMA：Javascript的一個國際標準
  • BOM：Browser Object Model 瀏覽器物件模型
  • DOM：Document Object Model 文件物件模型
• Javascript和HTML的整合
  • 單獨.js檔案匯入
  • < script > < /script >

（2）基本型別

（1）變數

• 變數宣告
  • var 變數名=初始化值;（最好有分號）
  • 註釋使用//
• 原始型別（使用typeof可以判定）
  • undefined
  • boolean
  • number
  • string
  • object ：變數是引用型別（typeof運算子對null會返回object）
• 引用型別
  • Array
  • String
  • Boolean
  • Number
  • Date
  • Math
  • RegExp

（2）陣列

• 宣告陣列（JS中陣列的長度是可變的，類似於ArrayList）

new Array();
new Array(size);
new Array(element0, element0, ..., elementn);

• join()方法：列印時陣列插入分隔符
• shift()方法：刪除並返回陣列的第一個元素

（3）函式

• 因為Javascript是弱型別的
  • 所以函式宣告不需要返回值型別，引數也不需要型別

    //1th way to state a function
    function 函式名（引數）{ 
        函式體；
    }

    //2th way to state a function
    var 函式名=function(引數){
        函式體
    }

（4）事件

• 常見事件
  • onclick 滑鼠單擊（例如在input button 中將onclick和事件繫結，編寫函式）
  • onsubmit 表單提交
  • onload 頁面載入（例如放在body標籤內，當載入頁面時呼叫函式）
  • onchange事件（select表單選擇時觸發）
• 將事件和函式繫結
  • 通過標籤的屬性
  • 給元素派發事件

    <xxx onclick="函式名（引數）" ></xxx>
    <form ... onsubmit="return checkForm()">

• 焦點
  • onfocus 得到焦點
  • onblur 失去焦點

（5）表單校驗

• 利用Document物件可以對錶單提交的元素進行校驗（比如在註冊時檢查輸入是否為空）
• JS從頁面中獲取元素（利用document）：

    var obj = document.getElementById("id值");
    var value = obj.value;  //獲取value屬性值

• this作為引數傳入函式時指的是當前dom物件

（6）DOM

（1）DOM節點

• 節點分類
  • document 整個文件
  • element 比如head節點
  • attribute 比如href屬性
  • text 具體的文字

（2）Document物件

• 獲取物件
  • document.getElementById(“id”) //通過id獲取元素
  • document.getElementsByTagName(“tag”) //通過標籤獲取元素，返回的是陣列型別
  • document.getElementsByClassName(“class”)
  • document.getElementsByName(“name”)
• 修改屬性
  • dom物件.value = ; //修改值
  • dom物件.innerHTML = ; //設定標籤體
  • dom物件.style.屬性 = ; //設定dom物件的屬性

    var usernameObj = document.getElementById("username"); //根據元素ID獲取物件
    document.getElementById("span_1").innerHTML=usernameObj.value; //呼叫innerHTML方法給span標籤賦值

（7）BOM

（1）Browser五大物件

• Browser物件
  • Window
  • History
  • Location 定位
  • Navigator
  • Screen

（2）Window物件

• 通過Window物件可以獲取其他四個物件的只讀引用
  • window.location
• 常用方法
  • alert() 警告框
  • confirm() 確認提醒，返回值為ture | false
  • prompt() 獲取使用者的輸入
  • open(url) 開啟新頁面（廣告彈窗中常用）
  • close() 關閉當前頁面
• 使用BOM-Window構造定時器（window.setInterval可以簡寫為setInterval）
  • setInterval(function,ms)：週期執行函式
  • setTimeOut(function,ms) ：延遲ms之後，只執行一次
  • clear

//JS操縱HTML物件步驟：
//獲取物件
var Obj = document.getElementById("id"); 

//操縱物件屬性
obj.style.backgroundColor="#ff0";

（3）Location物件

• location
  • 獲取當前頁面URL
  • 設定當前頁面URL（完成網頁跳轉）

    var url = window.location.href; //獲取位址列URL
    window.location.href = "http://www.baidu.com"; //設定跳轉URL

（4）History物件

• go(int)方法

    function goBack(){ //後退一個網頁
        history.go(-1);
    }

（8）Demo練習

• 實現表單的隔行換色

（1）表單隔行換色

        <script>
            //當前頁面載入成功
            onload=function(){
                //1.獲取所有的tr
                var arr = document.getElementsByTagName("tr");
                //alert(arr);
                //alert(arr.length);
                //2.判斷奇偶數
                for(var i = 1; i < arr.length; i++){
                    if(i%2 == 0){
                        arr[i].style.backgroundColor = "aqua";
                    }else{
                        arr[i].style.backgroundColor = "coral";
                    }
                }
            }
        </script>

（2）複選框全選

• 由一個單選框決定其他所有複選框的狀態（比如購物車中常見的全選按鈕）

        <script>
            function checkAll(obj){
                //獲取當前框的狀態
                var flag = obj.checked;
                //獲取所有複選框
                var arr = document.getElementsByClassName("itemSelect");
                //改變所有複選框的狀態
                for(var i=0; i < arr.length; i++){
                    arr[i].checked = flag;
                }
            }
        </script>

（3）省市聯動

• 在複選框中選中省之後後面的選項中是對應的市區集合選擇（比如註冊或者購買火車票的時候）

        <script>
            function selCity(index){
                var cities = arr[index];
                var cityChoices = document.getElementsByName("city")[0]; //ByName返回的是陣列型別，獲取市的下拉選項：因為只有一個元素，所以取[0]，
                cityChoices.innerHTML = ("<option >-請選擇-</option>   ");
                for(var i=0; i < cities.length; i++){
                    cityChoices.innerHTML += ("<option>" + cities[i] + "</option>");
                }
            }
        </script>