9.2： 使用 if 進行條件判斷
使用 if 進行邏輯判斷，主要的語法是這樣的：
if (邏輯判斷) {
// 當回答為 true 時的工作
...
}
但是，總有邏輯判斷總有真假吧？所以，如果真假兩件事分別依據邏輯判斷回應值而進行的話，就會變這樣：
if (邏輯判斷) {
// 當回答為 true 時的工作
程式碼...
} else {
// 當回答為 false 時的工作
程式碼...
}
那如果有多個選項呢？基本上可以透過多重邏輯判斷的，例如：
if (邏輯判斷-1) {
// 當邏輯判斷-1 回答為 true 時的工作
程式碼...
} else if (邏輯判斷-2) {
// 當邏輯判斷-2 回答為 true 時的工作
程式碼...
} else {
// 當邏輯判斷-1 與 邏輯判斷-2 回答都是 false 時的工作
程式碼...
}
例題 9-2-1：回答 BMI 數值的意義
- 建立 unit09-2-1.html 檔案。
- 使用 這個檔案 的內容貼上 unit09-2-1.html 當中。
- 如同檔案內的設定，建立 ansbmi 函數，並且同時判斷兩個同時成立的邏輯運算 (&&)，亦即 bmi >=18.5 與 bmi <=24 的情況：
- 若回傳為 true 時，顯示訊息 (可以設定一個變數處理) 為：『體重狀態很優良啊！』
- 若回傳為 false 時，顯示訊息為：『體重的狀態不是很好喔！』
若只有真與假，那使用 if () {} else {} 即可，但如果一個判斷裡面有多種狀態呢？例如上面 BMI 的案例中，如果有體重過輕 ( BMI < 18.5)、 體重優良 (18.5 ≤ BMI < 24)、體重稍重 (24 ≤ BMI < 28) 與肥胖 (28 ≤ BMI)等，那處理的方案就得要使用多重狀態， 亦即增上多個 else if 即可喔！
例題 9-2-2：回答 BMI 數值的意義
- 將 unit09-2-1.html 另存新檔成為 unit09-2-2.html，並且在index.html 裡面加上相關的超連結，target 指向 js 視窗。
- 透過 if ... else if 的功能，將回傳的訊息增加為 4 種狀態，亦即過輕、正常、稍重與肥胖。
使用 if 設計 UI 界面
假設我們需要計算面積，而且需要依據不同的形狀來提供使用者輸入的資訊，這該如何設計？最簡單，就是將所有需要出現的， 通通給它放上來即可。問題是，這樣對於使用者的提示來說，好像有點混亂。
所以，我們是否能夠依據使用者點選不同的面積時，才出現所需要的 input 資訊？然後提供計算的結果呢？ 似乎可以透過 if 的方式，當使用者點選相關的形狀後，再來使用 innerHTML 處理吧！設計看看：
例題 9-2-3：使用 if 設計簡單的 UI
- 建立 unit09-2-3.html 檔案。
- 使用 這個檔案 的內容貼上 unit09-2-3.html 當中，並且先查看應用一下該網頁。
- 先增加 label 的功能，讓使用者點選形狀的字體時，也能夠勾選單選項目。
- 將兩個數值的 input 取消，然後增加兩個 div，其 id 分別為 inp1 與 inp2 好了， 這兩個 div 是預計作為等等是否需要有兩個輸入框的預留環境
- 開始設計 myselect() 函數：
- 由於我們的 form 使用了 myform 為 id，因此先設定一個變數名稱為 myform ，並且用以取得 id 為 myform 的表單元素。
- 設計一個名為 myselect 的變數，內容為 myform.sel.value 這個單選資料 (請注意 form 大部分只對 input 有父、子關係！
- 分別設計兩變數，分別是 inp1, inp2，分別取得 inp1 與 inp2 這兩個 id 的元素資訊
- 判斷 myselect 是否為 1, 2, 3 等不同的數據，根據不同的數據來填寫 inp1.innerHTML 與 inp2.innerHTML， 就可以處理不同形狀的輸入框了。
- 設計完成之後，當你點選不同的形狀時，畫面應該會出現相對應的輸入框才對，如下所示：
- 開始設計 mycal() 函數：
- 一樣設計 myform 變數，取得 myform 頂層表單元素
- 一樣設計 myselect 變數，內容為 myform.sel.value 即可。
- 當 myselect == "1" 時，將 myform.num1.value 轉為數值後，使用 πr2 計算面積
- 當 myselect == "2" 時，將 myform.num{1|2}.value 轉為數值後，使用 (1/2底*高) 計算面積
- 當 myselect == "3" 時，將 myform.num{1|2}.value 轉為數值後，使用 (長*寬) 計算面積
- 將計算完畢的面積丟入 myform.ans.value 當中。
