3.11 條件式(Conditional)

在 javascript/practice 資料夾下，建立 condition.html 檔案，以便練習。

if 條件式

基本語法

if(這裡是條件式，可以 1 個以上的條件){
  // 條件式如果是 true，就執行這裡大括號的程式
}

如果大括號裡的程式只有一行，那大括號可以省略：

if(這裡是條件式，可以 1 個以上的條件)
  console.log("hello");

或

if(這裡是條件式，可以 1 個以上的條件) console.log("hello");

養成習慣，都還是有大括號。 只是網路上會看到很多省略大括號的，那也要能看得懂，就表示 if 大括號裡就只有一行程式。

if

如果 score 大於等於 60 的話，執行大括號裡的程式：

var score = 60;
if(score >= 60){
  alert("分數大於等於 60");
}

if else

如果 score 大於等於 60 的話，執行大括號裡的程式；反之，則執行 else 大括號裡的程式：

var score = 60;
if(score >= 60){
  alert("分數大於等於 60");
}else{
  alert("分數小於 60");
}

if else if

如果 score 大於等於 80 的話，執行大括號裡的程式；如果 score 小於 80、大於等於 60，就執行 else if 對應的大括號裡的程式：

var score = 80; // 改成 70 試試看
if(score >= 80){
  alert("分數大於等於 80");
}else if(score >= 60){
  alert("分數大於等於 60");
}

以下這個程式，會執行哪一個 alert？

var score = 80;
if(score >= 60){
  alert("分數大於等於 60");
}else if(score >= 80){
  alert("分數大於等於 80");
}

擇一執行，只要先遇到 true，就執行對應大括號裡的程式，其它就不會再執行。

可以使用多個 else if：

var score = 60;
if(score >= 80){
  alert("分數大於等於 80");
}else if(score >= 70){
  alert("分數大於等於 70");
}else if(score >= 60){
  alert("分數大於等於 60")
}

if else if else

var score = 59;
if(score >= 80){
  alert("分數大於等於 80");
}else if(score >= 70){
  alert("分數大於等於 70");
}else if(score >= 60){
  alert("分數大於等於 60")
}else{
  alert("分數低於 60"); // 這裡執行
}

且、或、布靈值反轉

且(&&)：

var score = 81;
if(score >= 60 && score <= 80){
  alert("60 ~ 80 之間");
}else if(score >= 81 && score <= 100){
  alert("81 ~ 100 之間"); // 會執行這裡
}else{
  alert("其它情況");
}

或(||)：

var score = 81;
if(score >= 60 || score <= 80){
  alert("60 ~ 80 之間"); // 會執行這裡
}else if(score >= 81 || score <= 100){
  alert("81 ~ 100 之間");
}else{
  alert("其它情況");
}

布靈反轉(!)：

var score = 81;
if(!(score >= 80)){
  alert("分數小於80");
}else{
  alert("其它情況"); // 會執行這裡
}

switch 條件式

基本形式

執行以下程式：

var my_number = 1;
switch(my_number){
  case 1:
    // code
    console.log("情況一");
    break;
  case 2:
    // code
    console.log("情況二");
    break;
  case 3:
    // code
    console.log("情況三");
    break;
  default:
    // code
    console.log("預設情況");
}

將第一行 var my_number = 1; 改成 var my_number = "1";，再執行看看。

再執行以下程式：

var my_string = "def";
switch(my_string){
  case "abc":
    // code
    console.log("情況一");
    break;
  case "def":
    // code
    console.log("情況二");
    break;
  default:
    // code
    console.log("預設情況");
}

將第一行 var my_string = "def"; 改成 var my_string = "other";，再執行看看。

結論：

• case：依指 switch 裡的變數，給定不同的情況所要執行的程式。

• break：用來跳出 switch。

• default：case 的情況都不符合的時候，就執行 default 裡的程式。

關於 break

執行以下程式：

var my_number = 1;
switch(my_number){
  case 1:
    // code
    console.log("情況一");
  case 2:
    // code
    console.log("情況二");
    break;
  case 3:
    // code
    console.log("情況三");
    break;
  default:
    // code
    console.log("預設情況");
}

case 1 的部份，少了 break;，那就表示不會跳出 switch 條件式。所以 case 1 執行完程式之後，繼續執行 case 2 裡的程式，然後 case 2 執行完遇到 break;，就跳出 switch 條件式。

可再改寫成以下，執行看看：

var my_number = 1;
switch(my_number){
  case 1:
  case 2:
    // code
    console.log("情況一");
    console.log("情況二");
    break;
  case 3:
    // code
    console.log("情況三");
    break;
  default:
    // code
    console.log("預設情況");
}

意思是 my_number 的值如果是 1 或 2，都執行相同的程式。

關於 default

執行以下程式：

var my_string = "other";
switch(my_string){
  case "abc":
    // code
    console.log("情況一");
    break;
  case "def":
    // code
    console.log("情況二");
    break;
  default:
    // code
    console.log("預設情況");
}

此例會執行 default 裡的程式，因為沒有任何 case 情況符合。

如果將 default 區域的程式都移除，如下：

var my_string = "other";
switch(my_string){
  case "abc":
    // code
    console.log("情況一");
    break;
  case "def":
    // code
    console.log("情況二");
    break;
}

此例，因為沒有任何 case 情況符合，也沒有 default 相關的程式，所以就直接結束 switch 條件式了。另外，此例的最後一個 break; 也可以省略不寫了。

練習

直接寫在 condition.html 檔案即可。

一個店家，有兩個資訊：店家名稱(store_name)、店家星等(store_star)，宣告如下：

var store_name = "A 店家";
var store_star = 1;

關於星等，如果：

• 星等是 -1(含) 以下，就在 console 中顯示「A 店家星等是負的」。

• 是 0 顆星，就在 console 中顯示「A 店家無獲得星等」。

• 是 1 顆星，就在 console 中顯示「A 店家星等 1 顆星」。

• 是 2 顆星，就在 console 中顯示「A 店家星等 2 顆星」。

• 超過 2 顆星，就在 console 中顯示「A 店家星等超過 2 顆星」。

請使用 if 條件式或 switch 條件式相關語法，印出相關文字。

參考作法：