顯示具有 JavaScript特性測試 標籤的文章。 顯示所有文章
顯示具有 JavaScript特性測試 標籤的文章。 顯示所有文章

2014年4月20日 星期日

JavaScript toString( ) and valueOf


  • toString() , valueOf()  與 Java 、 ActionScript3 基本原理相似。


 (function(){

     Object.prototype.valueOf = function(){
        return 6;
    }
    
    Object.prototype.toString = function(){
        return 10;
    }
    var val2 = {
        x:2 ,
        y:3
    };    
    
    alert(val2);     //10
    alert(val2 * 2 );//12 遇到算數運算會隱含調用Object的valueOf()
    
    var val3 = {
        x:5 ,
        y:6 ,
        toString:function( ){
            return '龍虎門';
        }
   };
   
   alert(val3);     //龍虎門 調用toString()
         
 })();    
張貼者： 於 沒有留言:
標籤： ,

2012年10月9日 星期二

JavaScript For 與 For in

For 與 For In
  • for 功用是迭代陣列，用於陣列或類似陣列的物件。
  • for in 功用是列舉非陣列的物件，就是一一列舉出非陣列物件的屬性。
Note：

  　技術上for in也可以用於Array，因為在JavaScript環境中，Array也是物件，但是不要這麼做，因為fon in不像for會確保迭代的順序，另外若是物件有客製化擴充功能，可能會導致邏輯上的錯誤發生。
在使用for in列舉物件時可以使用hasOwnProperty()來過濾掉來自原型鏈(prototype chain)上的屬性。


<script>
(function(window, undefined){    
    var car = {
        name:'Golf',
        color:"Black" 
    };
    
    //假設在程式的其他地方有人對Object原生物件增加了一個方法
    if(typeof Object.prototype.printName === 'undefined'){
        Object.prototype.printHaHa = function(){
            console.log('ha ha');
        }
    }
    
    
    //使用fon in 列舉屬性時    
    for(var attribute in car){
        console.log(attribute,':',car[attribute]);
    }   
    
    console.log('-------------------------------');
    
    //使用hasOwnProperty來過濾    
    for(var attribute in car){
        if(car.hasOwnProperty(attribute)){
            console.log(attribute,':',car[attribute]);
        }
    }
})(window);
</script>

chrome上的輸出：
name : Golf filter_pototype_attribute.html:25
color : Black filter_pototype_attribute.html:25
printHaHa : function (){ console.log('ha ha'); } filter_pototype_attribute.html:25
------------------------------- filter_pototype_attribute.html:28
name : Golf filter_pototype_attribute.html:33
color : Black



我們可以看到，虛線分隔之後的輸出，不會列舉出printHaHa項目。
張貼者： 於 沒有留言:
標籤： ,

2012年8月29日 星期三

JavaScript特性測試(二) switch

JavaScript特性測試(二)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function(){

var values = [ , undefined, 'undefined', 0, '0', false, 'false', '', new String(), null];
var texts  = ['', 'undefined', "'undefined'" , '0' , "'0'" , 'false' , "'false'" , "''" , 'new String()' , 'null']

for(var i=0 , length=values.length; i < length ; i++){
switch( values[i] ){
case undefined:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case undefined:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case 'undefined':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'undefined':」 , 結果是:「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case 0:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 0:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case '0': 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '0':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case false: 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case false:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case 'false': 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'false':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case '': 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case new String(): 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case new String():」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case values[8]: 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case values[8]:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};


switch( values[i] ){ 
case null: 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case null:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};
}
//由輸出結果可以知道switch使用了===來做比對
//在實務上要注意，input 取得的value 會是字串型式，若你在前端有宣告狀態數值(0 ,1 ,2 , 3),若你在switch上使用就要注意 '0'與0是不同的東西。 
}
</script>
</head>
<body>
values = [  , undefined , 'undefined' , 0 , '0' , false , 'false' , '' ,  new String() , null];
<br>
</body>
</html>


結果:

values = [ , undefined , 'undefined' , 0 , '0' , false , 'false' , '' , new String() , null];
數值是:「」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「undefined」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「'undefined'」 , 比對是:「case 'undefined':」 , 結果是:「is Run」
數值是:「0」 , 比對是:「case 0:」 , 結果是 :「is Run」
數值是:「'0'」 , 比對是:「case '0':」 , 結果是 :「is Run」
數值是:「false」 , 比對是:「case false:」 , 結果是 :「is Run」
數值是:「'false'」 , 比對是:「case 'false':」 , 結果是 :「is Run」
數值是:「''」 , 比對是:「case '':」 , 結果是 :「is Run」
數值是:「new String()」 , 比對是:「case values[8]:」 , 結果是 :「is Run」
數值是:「null」 , 比對是:「case null:」 , 結果是 :「is Run」
張貼者： 於 沒有留言:
標籤： ,

JavaScript 特性測試(一) , 三元運算式

JavaScript 特性測試一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javaScript特性測試一</title>
<style>
table {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: collapse;
background-color: white;
}
table td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
height: 30px;
}
</style>
<script>
window.onload = function(){
var values = [ , undefined, 'undefined', 0, '0', false, 'false', '', new String(), null];
var texts  = ['', 'undefined', "'undefined'" , '0' , "'0'" , 'false' , "'false'" , "''" , 'new String()' , 'null'];

var table = document.getElementById('myTable');

var createField=function(width){
//用js產生一個td elements
var td = document.createElement('td');
td.style.width = width;
return td;
};

for(var i=0 , length=values.length ; i < length ; i++){
//用js產生一個tr elements
var row = document.createElement('tr');
var field1 = createField('100px');
var field2 = createField('300px');
//將td放到tr裡面
row.appendChild(field1);
row.appendChild(field2);

//將texts[i]的文字，放到td的內容
field1.appendChild(document.createTextNode(texts[i]));
//判斷式,看看數值會執行true或false
var isRunTrue = (values[i])? 'true' : 'false' ;
//將判斷式結果放到td裡顯示出來 
field2.appendChild(document.createTextNode((isRunTrue)));
//將tr放到table裡
table.appendChild(row);
}
}
</script>
</head>
<body>
判斷式：
<span style="font-family: Courier New, Courier, monospace;">
(values[i]) ? 'true' : 'false' ;
</span>
<br />
<br />
<table id="myTable">
<tr>
<td>數值內容</td>
<td>使用三元運算子測試結果  (Run True or False)</td>
</tr>
</table>
</div>
</body>
</html>

輸出結果：
判斷式： (values[i]) ? 'true' : 'false' ; 

數值內容使用三元運算子測試結果 (Run True or False)
false
undefinedfalse
'undefined'true
0false
'0'true
falsefalse
'false'true
''false
new String()true
nullfalse



  • 因為'undefined'是一個字串，會執行true部分所以使用typeof判斷時就要注意這點的使用。
  • 第二個要注意的是0,因為0對於判斷式來說是else。
  • 第三要記得input取回的value都會是字串,所以要特別注意string與number在判斷上的不同,有必要時須要將string轉成number，可以這樣轉換Number('0')。
張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)