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')。
張貼者： 於 沒有留言:
標籤： ,

2012年8月28日 星期二

json2 library 介紹、載入

json2Library
瀏覽器因為版本問題，較新的版本支援JSON功能，較舊的版本沒有JSON功能，如果遇到沒有原生支援JSON序列化與解序列時就可以使用JSON2.js這個lib。

 JSON2.js官方下載點
使用的時候，可以寫一段程式碼判斷JSON物件是否存在，若不存在就動態載入json2.js的library。

 你若是ie8可以使用開發者工具，在瀏覽器模式中選擇ie7來模擬ie7環境來測試，因為ie7沒有原生的JSON物件。
example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>動態載入json2</title>
<script>
(function(window,undefined){
//如果mng不存在就將其初始化一個空物件
  (window.mng || (window.mng={}));
  var mng = window.mng;
  //執行loaderJson的次數計數
  var loaderCount = 0;
  //結束執行loaderJson條件的次數
var finishCount = 5;

var loaderJson = function(){
loaderCount++;
if(window.JSON){  
                        //stop
clearInterval(timer);
//alert('JSON2載入成功');
processStart();
return;
}
//如果執行了五次，300ms * 5 ，1.5秒還是無法載入成功，就停止載入
if(loaderCount === finishCount){
                        //stop
clearInterval(timer);
//alert('JSON2載入失敗');
}
};

//如果環境上沒有JSON這個物件，就動態載入JSON2.js這個library
if(!window.JSON){
var doc_head = document.getElementsByTagName('head')[0];
var doc_script = document.createElement('script');
                    doc_script.setAttribute('type', 'text/javascript');
    doc_script.setAttribute('src', "../jslib/json2.js");
      doc_head.appendChild(doc_script);
   /*每300ms呼叫一次loaderJson function，直到JSON建立，
              或是loaderCount達到finishCount的次數。   */
        var timer = setInterval(loaderJson, 300);
}else{
//代表程序中呼叫程序開始起使點
processStart();
}

function processStart(){
mng.cat = {name:'咕嘰',age:2};
                //JSON.stringify能將物件序列化成JSON字串格式
mng.strCat = JSON.stringify(mng.cat);
alert(mng.strCat);
                //JSON.parse(jsonStr),能夠將json字串反序列為對應的物件或數值。                
alert( JSON.parse(mng.strCat).name);
};

})(window);
</script>
</head>
<body>
</body>
</html>


張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)