8-1 If…Else, Switch 條件陳述式與 Block 區塊概念

Original: https://course.andys.pro/Javascript-Intro/08-1-ifelse-switch-condition-statement-and-block-concept/

講義

1. 區塊陳述式 (Block Statement)

在 JavaScript 中，我們使用大括號 { } 將多行程式碼組合在一起，這稱為一個「區塊」。在大括號內的程式碼會被視為一個整體，常用於條件判斷或迴圈中。

2. if…else 判斷式

• 單一條件：

  if (1 == 1) {
      console.log("真"); // 條件成立才會執行
  }

• 兩者取其一 (else)：

  if (x % 2 == 1) {
      console.log("奇數");
  } else {
      console.log("偶數");
  }

• 多重條件 (else if)：

  if (x % 3 == 0) {
      console.log("被 3 整除");
  } else if (x % 3 == 1) {
      console.log("餘 1");
  } else {
      console.log("餘 2");
  }

• 注意：JavaScript 會將 false, 0, "" (空字串), null, undefined, NaN 視為 false。

3. Switch 陳述式

當你有一個變數需要與多個「固定值」進行比對時，使用 switch 語法會比多個 else if 更加簡潔。

• 關鍵字：
  • case: 定義比對的值。
  • break: 重要！ 執行完該分路的動作後必須跳出，否則會繼續執行下一個 case。
  • default: 當所有條件都不符合時執行的預設動作。
• 範例：

  switch (fruit) {
      case "Apple":
          console.log("$10");
          break;
      case "Banana":
          console.log("$20");
          break;
      default:
          console.log("查無此水果");
  }

影片逐字稿 (AI 生成)

大家好 我們現在開始進入第八章 流程控制那這一張其實是很重要的一張喔就是其實就是程式邏輯非常重要的一個部分好 我們要學習的目標是選擇敘述就是我們要知道說我們程式開始可以像國中的時候的數學有在討論就是有在討論就是如果怎麼樣的狀況我們得到什麼解那如果又另外一個狀況的話我們得到另外一個解就是有選擇的敘述那再來八之二我們會開始講回圈有的事情我們不想要一直打比如說像剛才的Cure Selector All假如說我們今天選到的東西有五個那還可以 我們就0 1 2 3 4我們可以把一行一行的把Style去改比如說每次都改Color Red然後一直改一直改 改五次可是當我選了100個這樣的元素的時候那你不是要一直複製貼上到天昏地牢嗎對不對所以用回圈你就可以讓電腦幫你寫一行讓他幫你做100次好再來我們學會了回圈了以後呢我們在八之三我們要學著控制回圈我可以控制他我什麼時候跑跑跑比如說比如說我跑100次的回圈然後我可以設定條件當第八十次的時候我要跳出來或是當第七十九次的時候我想要繼續我後面的不要跑那這時候我們就可以去控制回圈的一些流程好的那這邊當然是可以配合課本一起看因為課本有流程圖我記得課本有流程圖大家可以去看一下是第四章的部分好我們現在開始八之一選擇敘述那這邊有提到區塊陳述式就是block的部分然後還有條件陳述式就是if else還有switch好我們看一下好這邊我們提到block我們這邊來寫一下block好就是我們昨天所提到的大瓜湖就是在大瓜湖裡面呢我們可以把程式也是一條一條的把它寫進去那在這個裡面呢它是隔出一個鍵隔出來就是這個我們稱作一個blockOK這樣子一個大瓜湖裡面算一個block好我們看if else好if的做法就是如果邏輯判斷我們前面有交到邏輯運算值那所以邏輯判斷為真我們就跑這個乘數式如果是for的話我們就跑else好那如果是第一個if做完然後我們發現為非可是它可能有另外一個條件你可以做多個條件那沒關係我們現在就開始一步一步的來做好我們開一個code pen欸不用開code pen不好意思好首先我們寫一個if然後if true然後我們console.loghi所以我們這邊可以驗證當條件為真它console.log就會跑出來當條件為false它就不會跑任何東西出來這個ondefine大家要先不要砍它因為它這個是沒有回傳任何東西所以我們不用理它可是你看如果當條件為真的時候它會跟我講hi可是當條件沒有為非的時候它會沒有任何東西再配合上昨天所學的邏輯運算值比如說1等於等於1這是對的1等於等於2這是錯的就不會跑出來對的時候就會印出這個block裡面的東西那如果是錯的時候就是對的時候會印出這裡面的東西如果是錯的時候它連進去這個if這個block都不會進去它就等於喔這邊我沒看到錯的我就不會跑if好這是一個最基本的if判斷式好的可是有時候呢我們會希望說就是if比如說像基數偶數嘛對不對那我們可以簡單來做一個基數偶數的判斷式那我們怎麼做比如說我們先有一個varx等於3好那我們想要寫一個判斷式來判斷說到底3是基數還是偶數那我們可以做if那我們可以做ifx還記得昨天我教一個那個呃取余數余數%2等於等於1的情況下我們會說它是什麼xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx當我的x 比如說我的x是等於2然後我們再把剛剛那個code叫出來這時候他就會跟我講說是數所以我們最前面這邊是首先我們先學的就是if為條件為四就跑中間這裡那我們再更複雜一點就是有else 就是這個是對的時候跑這裡這個是錯的時候跑這裡為真跑前面 為非跑後面那我們再來跑一個更複雜的就是我們剛剛前面提到的else這邊else 的部分那這邊我用一個很簡單的例子就是我們今天是par2那我可不可以那個par3可以嗎那我們今天來做就是我們把這個我們剛剛的code我們把它改他我們可以等於等於0的情況下再來我們說我們說背3整除然後我們在這邊oh sorryelse然後我們把這個邏輯我們說等於等於1這邊跟大家講一下就是這邊如果你要換好的話要ctrl entershift entershift entershift enter在這邊可以換好然後tab可以變縮牌這樣好然後console點log然後這邊講說是除3與1是不是除3與1是不是除1對除1對對對對除13對好這個時候比如說像我有一個數字進來我取余數如果是0如果是0的話那他被3整除那如果他余1那這時候他還有兩個條件對不對他的條件就是我刪完了以後是不是還有可能余1和余2的兩個情況所以我再過來到後面我再去檢查他是不是余1如果是余1的話就是除以3余1那是不是就就只剩下一個剩下一個是余2的這個狀況所以可以這樣來做那當然以後大家的設計的邏輯肯定會更複雜我們現在用比較簡單的邏輯來看這件事情除以3余2因為他本身就是2嘛那我們現在可以改動我們的x6那如果是6的話倍3整除那如果是我們要舉一個10的話除以3余1好 那我們把這些call我會把它放在我們現在把它放過去10分1211212122122212212212這邊就有範例以下這些字會不會看成false就是false, undefine, null, 0, not a number,還有空字串那這邊的範例大家可以試做一下我這邊就先不試做了因為我剛剛已經有用我自己的範例接下來我們來看switch那switch的做法呢就是說它比如說現在是fruit type它是banana然後它在裡面呢它會去查如果是蘋果的話它就印出蘋果多少錢然後再來是如果是bananas它會印出bananas多少錢再來是如果是papayas它就會印出papayas多少錢那請注意到這邊這邊的outbreak好那當然如果都不是這三個狀況的話它就default的狀況就是它default的話它就說噢我們找不到這種水果OK那所以switch的做法是它會一個一個去查比對條件然後這邊是它查不到的狀況那可是當你查到的時候呢你要跳記得要跳出來要break要break我們在後面的8-3會提到然後把這份code我們來做做看吧我覺得我現在這邊寫好然後switch這樣這樣Full type然後我們看 veil那這邊 knit我們怎麼辦不要緊描我們可以你把它當做的是要去你不要緊揶你不要緊描我們有著我們可以我可以走一起走那這邊我打他的蘋果價錢我就直打那個apples好趕快跑到看這段扣等一下不能跑我忘記把他關起來這邊要把switch關起來我這樣子的輸出其實不太好因為他就是說沒有還可以FruitType今天是bananas的時候他是不是查到是bananas然後他就console.log把bananas印出來OK那我們今天假如說我們今天是apples他就會印出apples可如果我們今天想要找的是oranges他就會跟你講sorry we are out of orangesOK因為他都不是在這三個條件內都沒有所以他就會說我們找不到這種水果OK那為什麼會印出oranges因為這個fruitType我們把這些字串的加減那他這邊很好是他後面還要補一個據點OK好這是switch那例子我放在這邊了OK好的Lab1的話就要請各位同學就是坐過看這個條件那當然你可以你的字串可以是中文然後你可以去說檢查是不是鉛筆是不是橡皮撒是不是原字筆好的這是八之一

影片逐字稿largev2

大家好,我們現在開始進入第八章,流程控制那這一章其實是很重要的一章喔就是其實就是程式邏輯非常重要的一個部分好,我們要學習的目標是選擇敘述就是我們要知道說我們程式開始可以像國中的時候的數學有在討論就是有在討論就是如果怎麼樣的狀況我們得到什麼解那如果又另外一個狀況的話我們得到另外一個解就是有選擇的敘述那再來八之二我們會開始講迴圈有的事情我們不想要一直打比如說像剛才的QA Selector假如說我們今天選到的東西有五個那還可以,我們就0、1、2、3、4我們可以把一行一行的把Style去改比如說每次都改Color Red然後一直改一直改,改五次可是當我選了一百個一樣的元素的時候那你不是要一直複製貼上到天昏地老嘛所以用迴圈你就可以讓電腦幫你寫一行讓他幫你做一百次好,再來我們學會了迴圈了以後呢我們在八之三我們要學著控制迴圈我可以控制它,我什麼時候跑比如說我跑一百次的迴圈然後可以設定條件當第八十次的時候我要跳出來或是當第七十九次的時候我想要繼續,我後面的不要跑那這時候我們就可以去控制迴圈的一些流程好的那這邊當然是可以配合課本一起看因為課本有流程圖嘛課本有流程圖大家可以去看一下這是第四章的部分好,我們現在開始八之一選擇敘述那這邊有提到區塊乘數式就是block的部分然後還有條件乘數式就是if else還有switch好,我們看一下好,這邊我們提到block我們這邊來寫一下block好,就是我們昨天所提到的大括弧就是在大括弧裡面呢我們可以把程式也是一條一條的把它寫進去那在這個裡面呢它是隔出一個間隔出來就是這個我們稱作一個block這樣子,一個大括弧裡面像一個block好我看if else好,if的做法就是如果邏輯判斷我們前面有教到邏輯運算子那所以邏輯判斷為真我們就跑這個乘數式如果是否的話我們就跑else好那如果是第一個if做完然後我們發現為非可是它可能有另外一個條件你可以做多個條件那沒關係,我們現在就開始來一步一步的來做我們開個copan欸,不用開copan好,首先我們寫一個if然後if true然後我們console.loghi所以我們這邊可以驗證當條件為真它console.log就會跑出來當條件為false它就不會跑任何東西出來這個onDefine大家要先不要看它因為它這個是沒有回傳任何東西所以我們不用理它可是你看,如果當條件為真的時候它會跟我講hi可是當條件為非的時候它會沒有任何東西再配合上昨天所學的邏輯運算子比如說1等於等於1這是對的1等於等於2這是錯的,就不會跑出來對的時候就會印出這個block裡面的東西那如果是錯的時候對的時候會印出這裡面的東西如果是錯的時候它連進去這個if這個block都不會進去這邊我沒看到錯的,我就不會跑if這是一個最基本的if判斷式可是有時候呢我們會希望說就是if比如說像奇數偶數嘛那我們可以簡單來做一個奇數偶數的判斷式那我們怎麼做比如說我們先有一個var x等於3好,那我們想要寫一個判斷式來判斷說到底3是奇數還是偶數那我們可以做ifx還記得昨天有教一個那個去余數余數%2等於等於1的情況下我們會說它是什麼GR的我打中了好,沒關係我們換一下錢可以用啊偶數奇數奇數奇數好那這樣我們就寫好一個邏輯就是當我的去余數是1的話它是奇數然後如果是0的話就是偶數我們看一下奇數這樣可以嗎那當我的x我的x可以改變嘛對不對當我的x比如說我的x是等於2然後我們再把剛剛那個code叫出來這時候它就會跟我講說是偶數OK所以我們最前面這邊是首先我們先學的就是if為條件為是就跑中間這裡那我們再更複雜一點就是有else這個是對的時候跑這裡這個是錯的時候跑這裡為真跑前面為非跑後面那我們再來跑一個更複雜的就是我們剛剛前面提到的else這邊else的部分那這邊我用一個很簡單的例子就我們今天是趴2那我可不可以趴3可以嗎那我們今天來做的就是我們把這個我們剛剛的code我們把它改它我們可以等於等於0的情況下我們說備3整除那我們在這邊喔sorryelse大家不要緊張我code會放在那個講義else然後我們把這個邏輯我們說等於等於1好這邊跟大家講一下就是這邊如果你要換好的話要ctrl entershift entershift enter在這邊可以換好tab可以點縮排的然後console點log然後這邊講說除3與1是不是除1除1對對對對除1與3與2好這個時候比如說像我有一個數字進來我取餘數如果是0如果是0的話那要備3整除嘛那如果它餘1那這時候它還有兩個條件嘛它的條件就是我3完了以後是不是還有可能餘1和餘2的兩個情況所以我再過來到後面我再去檢查它是不是餘1如果是餘1的話就是除以3餘1那是不是就就只剩下一個是餘2的狀況所以可以這樣來做那當然以後大家的設計的邏輯肯定會更複雜我們現在用比較簡單的邏輯來看這件事情除以3與2因為它本身就是2嘛那我們現在可以改動我們的X6那如果是6的話備3整除那如果是我們要取一個10的話除以3與1好 那我們把這些code我會把它放在我現在把它放過去OK好 這邊就有範例好 以下這些值會被看成FalseUndefinedNull0Not a number還有空字串OK那這邊的範例大家可以試做一下我這邊就先不試做了因為我剛剛已經有用我自己的範例了好 接下來我們來看Switch那Switch的做法呢就是說它比如說現在是Fruit Type它是Banana然後它在裡面呢它會去查如果是蘋果的話它就印出蘋果多少錢然後再來是如果是Bananas它會印出Bananas多少錢再來是如果是Papayas它就會印出Papayas多少錢那請注意到這邊這邊的Outbreak好那如果都不是這三個狀況的話它就Default的狀況就是它Default的話它就說我們找不到這種水果OK那所以Switch的做法是它會一個一個去查比對條件然後這邊是它查不到的狀況那可是當你查到的時候呢你要記得要跳出來喔要Break那Break我們在後面的8-3會提到那我把這份Code我們來做做看吧我覺得我先在這邊寫好了然後SwitchFull Type然後Full TypeConsole那這邊我打它的蘋果價錢我就知道那個ApplesOKOKOK好我們來跑跑看這段CodeOK等一下不能跑哪邊打錯Full Type我是不是忘記把它關起來了等一下這邊要把Switch關起來好然後我這樣子的輸出其實不太好因為它就是說Full Type今天是Bananas的時候它是不是查到的是Bananas然後它就Console.log把Bananas印出來那我們今天假如說我們說我們今天是Apples它就會印出Apples可是如果我們今天想要找的是Oranges它就會跟你講Sorry we are out of OrangesOK因為它都不是在這三個條件內嘛都沒有嘛所以它就會說我們找不到這種水果OK為什麼會印出Oranges因為這個Full Type我們把這些字串的加減那它這邊很好是它後面還要補一個句點OK這是Switch那例子我放在這邊了OK好的Lab1的話就要請各位同學就是做做看這個條件那當然你可以你的字串可以是中文啦然後你可以去說檢查是不是鉛筆是不是橡皮擦是不是原子筆這是8-1