---
# System prepended metadata

title: 邏輯運算與判斷式
tags: [NKFW 網頁設計入門]

---

# 邏輯運算與判斷式
###### tags: `NKFW 網頁設計入門`

## 簡介

:::info
我們常常需要寫一些程式碼，當滿足某些條件才會執行。

比方說：

* 登入網站的時候，輸入帳號跟正確的密碼才能夠成功登入；反之，則提醒你帳號不存在或是密碼錯誤。
* 在成績登記系統裡面，如果不及格的時候就要把那個欄位顯示成紅字。

我們用成績判斷作為例子，寫一段簡單的程式碼當作範例
:::

```javascript=
var score = 58;
if(score < 60){
    alert("不及格!下次再加油嘿");
}
```

先把這段程式碼拆成兩個部分來看：

##### `score < 60`
* `<`是一個比較的符號，它叫做`邏輯運算子`
* 而`score < 60`，這種式子叫做`條件判斷式`
* 如果`score < 60`成立，則會回傳`true`；反之，則會回傳`false`
    
##### `if(條件判斷式){要執行的程式碼}`
* 條件判斷式裡面的值如果是`true`，就執行底下的程式碼。
* 反之，則跳過。


## Compare Expression

用來進行邏輯運算的符號，通常會搭配條件判斷式來使用。


| ==   |   !=   |  >   |  <   |    >=    | &&  |     <=     | l l |
| ---- |:------:|:----:|:----:|:--------:| --- |:----------:| --- |
| 等於 | 不等於 | 大於 | 小於 | 大於等於 | 和  | 小過或等於 | 或  |

```javascript!
// 在console裡面直接輸入以下的程式觀察結果
var x = 10, y = 12

x == y

x != y 

x < y

x > y

x >= y

x <= y

x >= 10 && y >= 10

x < 5 || y < 20
```


## if
如果滿足if的條件，就會執行裡面的程式碼，如下圖

```javascript!
var x = 10;
if(x > 0){
    console.log("這個數字是正數");
}
```

## if-else

```javascript!
var x = 1;
if(x > 1){
    console.log("Hello");
}else{
    console.log("not hello");
}
```

:::info
Project 1： 
輸入一個成績，如果大於等於60，印出及格，小於60印出不及格
:::

## 多個條件：if...else-if

剛剛的程式，如果分數超過100或是小於0，是沒有辦法被偵測出來的。這時候我們可以用`if...else-if...else`的寫法來完成分數的檢查，如下圖

```javascript!
var score = 60;
if(score < 0 || score > 100){
    console.log("分數應該要介於0~100之間");
}else if(score >= 60){
    console.log("及格");
}else{
    console.log("不及格");
}
```



:::info
Project 2: 輸入一個月份，印出那個是哪個季節
(11月-1月=>冬、2月-4月=>春
、5月-7月=>夏、8月-10月=>秋)
:::










