這篇筆記紀錄：
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";
關於物件更深入的討論見Javascript 物件導向探討
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迴圈
foreach適用於取出JavaScript物件的屬性
若用在陣列之類的物件，可以看到連陣列的length等擴充屬性也會被取出
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值表示
true 表示選擇 capture，false 指定用 bubble
JavaScript 處理事件的過程中，事件會在DOM各個層次中都被讀取到
以 bubble 法舉例，底層的某個物件被觸發 onclick 事件
首先是該物件先觸發 onclick，接著是他的上層DOM被觸發 onclick 後再往上傳遞事件
最後是 document 物件也會被觸發 onclick
capture 則是該物件被點擊後，會先由最上層的 document 開始觸發 onclick 事件
直到最後才是該物件的 onclick 被觸發
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
將此過程包裝成 function
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener) {
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, eventHandler);
}
}
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";
關於物件更深入的討論見Javascript 物件導向探討
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迴圈
foreach適用於取出JavaScript物件的屬性
若用在陣列之類的物件，可以看到連陣列的length等擴充屬性也會被取出
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值表示
true 表示選擇 capture，false 指定用 bubble
JavaScript 處理事件的過程中，事件會在DOM各個層次中都被讀取到
以 bubble 法舉例，底層的某個物件被觸發 onclick 事件
首先是該物件先觸發 onclick，接著是他的上層DOM被觸發 onclick 後再往上傳遞事件
最後是 document 物件也會被觸發 onclick
capture 則是該物件被點擊後，會先由最上層的 document 開始觸發 onclick 事件
直到最後才是該物件的 onclick 被觸發
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
將此過程包裝成 function
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener) {
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent) {
el.attachEvent('on' + eventName, eventHandler);
}
}
留言
張貼留言