JavaScript 筆記(3)

這篇筆記紀錄：
1.JavaScript的物件導向寫法與型別判斷
2.陣列的排序法
3.以for迴圈及foreach迴圈取出物件的差別
4.String物件的常用方法
5.Math 物件的常用方法
6.addEventListener 與 attachEvent 函式說明

1.JavaScript的物件導向寫法與型別判斷

   JavaScript本身就是個以物件為主體的script語言
   連函式本身也是物件，或者說JavaScript的function類似其他語言的class

   除了數值、字串、boolean、null、undefined，其他的所有值都是物件

   typeof運算子在判斷特性的型別有很大的幫助
   typeof obj.num         // 'number'
   typeof obj.arrival      // 'object'

   // 要小心有可能是涵式的值，因為原型鍊上的特性都可以產生值
   typeof obj.toString            // 'function'
   typeof obj.constructor      // 'function'

   hasOwnProperty() 在物件有指定屬性時回傳true，這個方法不會檢索原型鍊
   可以用來避免上述風險
   obj.hasOwnProperty('number')        //true
   obj.hasOwnProperty('constructor')  //false

   當需要自訂物件時，必須寫好物件的建構式，並使用new關鍵字來產生物件
   而JavaScript的類別成員不需要先宣告也不用處理型別，直接用this關鍵字來取得值
   範例：
    function ObjDemo(param1, param2){      //建構式必須首字大寫
        this.param1 = param1;
        this.param2 = param2;

        this.output = function(){
          return param1 + " " + param2;
        }
        ObjDemo.prototype.output2 = function(){
          return "This is a test ";

        }
    }

    var test = new ObjDemo("word1", "word2");
    test.output();
    test.output2();

    範例的程式碼可看出有兩種類別方法的寫法
    第一種用 this 關鍵字的方法會將方法指派給單一實例
    每建立一個物件時，物件內都會有方法的複本，處理方式像類別成員
    建立多個物件就會產生等同物件數量的方法複本
    第二種寫法使用了物件裡以特性的形式存在的prototype物件
    如此可建立類別所擁有的方法，所有建立的物件都會使用同一個方法    
    這樣可以改進資源的使用效率

    JavaScript實際上並不完全支援類別，但用prototype物件來模擬類別
    利用它也可以做到將類別成員給予物件類別共用
    ObjDemo.prototype.param3 = "This effect is like static member of other languages";


2.陣列的排序法

   範例：
    var tarray = [11, 35, 12, 9, 29];
    tarray.sort();

    sort() 方法預設依照升冪順序排列
   如果希望的排列規則不同，或是陣列裡存放的物件不是基本型別的話(也就是自訂物件)
   則依下列範例的形式修改：
    function compare(x, y){      //傳入物件x、y
      return x.value - y.value;     //回傳值<0，x排在y前；相同時則不排列；>0，y排在x前
    }
    tarray.sort(compare);

   又因為通常排序的函式只會用於sort() method
   所以寫成 tarray.sort( function(x, y){return x.value - y.value;} );  也行
   這樣也不需要為函式命名

3.以for迴圈及foreach迴圈取出物件的差別

   for ... in ... 敘述為JavaScript中for each的語法，但是為隨意排序取出資料；
   若想確保資料有一致的順序還是要乖乖用for迴圈

4.String物件的常用方法

    indexOf() 尋找字串是否包含特定子字串，找不到特定子字串則回傳 -1   
    charAt() 尋找特定字元在字串裡的位置
    toLowerCase()、toUpperCase()則是轉換字串大小寫的方法
    length 成員變數則提供字串裡的字元數量的訊息

    字串雖然看起來很像陣列物件，但沒辦法用 [index] 的形式去讀取它

5.Math 物件的常用方法

    Math 物件提供了常用的數學方法
    random() 產生介於0和1之間的亂數
    round() 將浮點數四捨五入為整數
    floor() 將浮點數無條件捨去為整數
    ceil() 將浮點數無條件進位為整數
    abs() 回傳絕對值
    PI 是Math物件提供的常數，值為3.14

6.addEventListener 與 attachEvent 函式說明

   addEventListener 是DOM的標準功能之一，能為某一事件附加其它的處理事件
   一般常見到的指定事件的處理函式的寫法如：
   window.onload = method1;       //指定處理的函式是method1()

   或是用匿名函式來處理：
   window.onload = function(){ method1(); }

   第一種方法的缺點在於一個事件只能定義一種處理，如：

   document.getElementById("btn").onclick = method1;
   document.getElementById("btn").onclick = method2;
   document.getElementById("btn").onclick = method3;    //只有最後定義的method3()會被執行

   addEventListener 是為了解決這個問題存在的
   函式為 addEventListener(event,function,capture/bubble)
   第一個參數是參數接收事件名稱(名稱不含on，如："load" or "click")
   第二個參數是要執行的函式
   第三個參數設定 capture 或 bubble 的事件讀取方式，以bool值表示
   簡單來說 capture 從讀取完document後再執行事件
   而bubble則是先尋找指定的網頁元件位置再執行事件
   true 表示選擇 capture，false 指定用 bubble，一般指定 false 即可

   IE不支援 addEventListener，要改用 attachEvent 這個IE特有的函式
   傳入的參數大致上相同，只是第一個參數要改成完整事件名稱(如："onclick")
   而因為IE的事件的傳遞讀取方式預設用 bubble，所以第三個參數可以省略不輸入

   完整範例：
    var bt = document.getElementById("bt");

    if(window.addEventListener){
       bt.addEventListener("click",method1,false);
       bt.addEventListener("click",method2,false);
       bt.addEventListener("click",method3,false);
    }else if(window.attachEvent){
       bt.attachEvent("onclick",method1);
       bt.attachEvent("onclick",method2);
       bt.attachEvent("onclick",method3);
   }

   執行順序為method1->method2->method3