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')。
於 沒有留言: