JS-網站互動設計程式進化之道-Decisions & Loops

發表於

The primary mirror of NASA's James Webb Space Telescope.

JavaScript&JQuery-網站互動設計程式進化之道-Decisions & Loops

學習筆記(3)

成立之難如登天，覆敗之易如燎毛 - 李綠園

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

四、決策(Decisions) & 迴圈(Loops)

決策條件(Decisions)

  • 比較運算子
1
2
=== //嚴格等於：確認資料型別和值均相同
!== //嚴格不等於：確認資料型別和值均不相同
  • 邏輯運算子
1
2
3
4
5
6
7
&& //AND 多個條件是否成立
|| //OR 至少一個條件成立
!  //NOT 將布林值轉換為相反值

// 捷徑運算：第一個條件已達成，則不需要再評估後面的條件
false && anything //必為false
true || anything  //必為true
  • switch 條件判斷句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var msg;        // Message
var level = 2;  // Level

// Determine message based on level
switch (level) {
case 1:
    msg = 'Good luck on the first test';
    break;

case 2:
    msg = 'Second of three - keep going!';
    break;

case 3:
    msg = 'Final round, almost there!';
    break;

default:
    msg = 'Good luck!';
    break;
}

資料型別

  • 型別轉換：Javascript是弱型別，會試著將運算合理化
1
2
3
4
5
6
7
8
//假值(falsy)會被視為false
var highScore = false;        //傳統布林值false
var highScore = 0;            //數字0
var highScore = '';           //空白值
var highScore = 10/'score';   //NaN(視為數值但不是一個數字)
var highScore;                //未被指定值的變數

//幾乎除了以上例子，其他均於真值(truthy)
  • 檢測相等性和存在性
1
2
3
4
5
6
7
8
9
10
//存在性
if (document.getElementById('header')){
    //元件存在，執行一些工作任務
}　else {
    //元件不存在，執行另外的工作任務
}

//相等性
if (document.getElementById('header') == true)
//document.getElementById('header')會回傳一個物件，物件會被視為真值，但並不等同於布林值true
  • 捷徑值：邏輯運算取得真值，將停止運算並回傳結果值
1
2
3
4
5
6
7
// artist非空字串是真值，故回傳結果值Rembrandt，artistA的值會與artist相同
var artist = 'Rembrandt';
var artistA = (artist || {});

// artist為空字串是假值，artistA會成為一個空物件
var artist = '';
var artistA = (artist || {});

迴圈(Loops)

  • while 迴圈：符合條件便持續執行區塊程式碼
1
2
3
4
5
6
7
8
var i = 1;       // Set counter to 1
var msg = '';    // Message

// Store 5 times table in a variable
while (i < 10) {
  msg += i + ' x 5 = ' + (i * 5) + '<br />';
    i++;
}
  • do while 迴圈：區塊中的程式碼至少執行一次
1
2
3
4
5
6
7
8
9
var i = 1;       // Set counter to 1
var msg = '';    // Message

// Store 5 times table in a variable
do {
  msg += i + ' x 5 = ' + (i * 5) + '<br />';
    i++;
} while (i < 1);
// Note how this is already 1 and it still runs