文章配套視訊

• https://study.163.com/course/introduction/1005973001.htm

1.什麼是程式碼塊

簡介

程式是由一條一條語句構成的, 
語句是按照自上向下的順序一條一條執行的, 
在JS中可以使用{}來為語句進行分組
同一個{}中的語句我們稱為是一組語句，
它們要麼都執行，要麼都不執行。

使用
JS中的程式碼塊，
只具有分組的的作用，
沒有其他的用途,
程式碼塊裡面的內容，
在外部是完全可見的。

列如:

javascript
      {
      	var name = '撩課學院';	
      	console.log("itlike.com");
      	document.write("喜歡IT, 就上撩課!");
      }
javascript
 console.log("name = " + name);
 

2. 流程控制語句

基本概念
預設情況下，
程式的執行流程是這樣的：
執行程式後，
系統會按書寫從上至下順序
執行程式中的每一行程式碼,
但是這並不能滿足
我們所有的開發需求

如下圖:

實際開發中,
我們需要根據
不同的條件執行
不同的程式碼或者
重複執行某一段程式碼

為了方便我們控制程式的執行流程，
JavaScript提供3種流程結構，
不同的流程結構可以實現不同的執行流程。
這3種流程結構分別是
順序、選擇、迴圈:

三種基本控制結構構造.
順序結構
 預設的流程結構。按照書寫順序從上至下執行每一條語句
選擇結構
對給定的條件進行判斷，再根據判斷結果來決定執行哪一段程式碼
迴圈結構
在給定條件成立的情況下，反覆執行某一段程式碼
 

if語句
如果條件表示式為真,執行語句塊1,否則不執行
if(條件表示式) { 語句塊1 } 後續語句;

  if(age > 18)
  {
      console.log("可以上網");
  }
  ````

如果條件表示式為真,則執行語句塊1,否則執行語句塊2

  if(條件表示式)
  {
      語句塊1
  }else{
      語句塊2
  }

  if(age > 18)
  {
      console.log("可以上網");
  }else{
      console.log("你媽媽喊你吃飯");
  }

特點

if和else後面的程式碼塊({})只有一個會被執行 
如果條件表示式1為真,則執行語句塊1,
否則判斷條件表示式2,
如果為真執行語句塊2,
否則再判斷條件表示式3,
如果真執行語句塊3, 
當表示式1、2、3都不滿足,會執行最後一個else語句
 

 程式碼如下:
      if(條件表示式1)
      {
          語句塊1
      }else if(條件表示式2){
          語句塊2
      }else if(條件表示式3){
          語句塊3
      }else{
          語句塊4



      if(age>40)
      {
          console.log("老年人");
      }else if(age>25){
          console.log("中年人");
      }else if(age>18){
          console.log("成年人");
      }else{
          console.log("未成年");
      }


 特點
     這麼多大括號中只有一個大括號中的內容會被執行
     當執行到後面條件的時候證明前面的條件不滿足
     else if可以只有一個, 也可以有多個, 但是都必須新增在if和else之間

 注意事項
   如果只有一條語句時if後面的大括號可以省略
      if(age > 18)
          console.log("成年人");

   注意:受到if管制的只有緊跟其後的那條語句
   開發中儘量不要省略大括號

        if(false)
            console.log("語句1");
        console.log("語句2"); // 語句2會被輸出

  分號“;”也是一條語句, 空語句
      if(4 > 6);
      {
          console.log("4 > 6");
      }
      // 輸出結果: 4 > 6, if管制的緊跟其後的那個分號
      // {}在JS中僅僅代表告訴系統裡面的語句是一個整體, 沒有別的用途,不會影響程式碼的執行

   if else是一個整體， else匹配if的時候匹配離它最近的一個if

         if(0)
              if(1)
                  console.log("A");
              else 
                  console.log("B");
          else 
              if (1)
                  console.log("C"); 
              else
                  console.log("D");

  對於非Boolean型別的值,會先轉換為Boolean型別後再判斷

       if (0) {
              console.log("itlike\n"); // 不會被執行
          }
      ```

   判斷變數與常量問題

   但凡遇到比較一個變數等於或者不等於某一個常量的時候，把常量寫在前面

        // if(a = 0)  // 錯誤寫法, 但不會報錯
            if (0 == a) {
                console.log("a的值是0\n");
            }else{
               console.log("a的值不是0\n");
            }

         /*
            本來是先判斷變數a儲存的值是否等於0,
            但是如果不小心寫成a=0,代表把0儲存到a中.
            為了避免這種問題判斷是否相等時把常量寫前面,
            因為等號左邊只能是變數, 所以如果少寫一個等號會報錯
        */


   if語句可以巢狀使用

       var num = 20;
          if (num >= 10)
          {
              if(num <= 30)
              {
                  console.log("一個10~30之間的數")
              }
          }

  習題訓練

  從鍵盤輸入一個整數，判斷其是否是偶數，如果是偶數就輸出YES，否則輸出NO

    //    1.定義一個變數儲存使用者輸入的整數
        var temp;
    //    2.利用window.prompt()接收使用者輸入資料
    //     window.prompt返回給我們的是一個字串, 需要轉換為Number
        temp = +(window.prompt("請輸入一個整數"));
    //    3.對使用者輸入的資料進行安全校驗
        if(isNaN(temp)){
            alert("你是SB嗎?");
        }else{
    //    3.判斷使用者輸入的資料是否是偶數, 然後根據判斷結果輸出YES/NO
            /*
            if(temp % 2 == 0){
                alert("YES");
            }else{
                alert("NO");
            }
            */
            (temp % 2 == 0) ? alert("YES") :  alert("NO");
        }
  接收使用者輸入的1～7的整數，根據使用者輸入的整數，輸出對應的星期幾?

    //    1.定義變數儲存使用者輸入的資料
        var day;
    //    2.利用window.prompt()接收使用者輸入資料
        day = +(window.prompt("輸入的1～7的整數"));
    //    3.判斷當前是星期幾
        if(day == 1){
            console.log("星期一");
        }else if(day == 2){
            console.log("星期二");
        }else if(day == 3){
            console.log("星三");
        }else if(day == 4){
            console.log("星期四");
        }else if(day == 5){
            console.log("星期五");
        }else if(day == 6){
            console.log("星期六");
        }else if(day == 7){
            console.log("星期日");
        }else{
            console.log("滾犢子");
        }.

  接收使用者輸入的一個整數month代表月份，根據月份輸出對應的季節?
  第一種:

      //    1.定義變數儲存使用者輸入的資料
          var month;
      //    2.利用window.prompt()接收使用者輸入資料
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.資料安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據輸入的資料判斷輸出對應的月份即可
              if(month >= 3 && month <= 5){
                  alert("春季 ");
              }else if(month >=6 && month <= 8){
                  alert("夏季");
              }else if(month >=9 && month <= 11){
                  alert("秋季");
              }else if(month == 12 || month == 1 || month == 2){
                  alert("冬季");
              }else{
                  alert("火星季節");
              }
        }
   第二種:
      //    1.定義變數儲存使用者輸入的資料
          var month;
      //    2.利用window.prompt()接收使用者輸入資料
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.資料安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據輸入的資料判斷輸出對應的月份即可
              if(month < 1 || month > 12){
                  alert("火星季節");
              }else if(month >= 3 && month <= 5){
                  alert("春季 ");
              }else if(month >=6 && month <= 8){
                  alert("夏季");
              }else if(month >=9 && month <= 11){
                  alert("秋季");
              }else{
                  alert("冬季");
              }
          }

  第三種:
      //    1.定義變數儲存使用者輸入的資料
          var month;
      //    2.利用window.prompt()接收使用者輸入資料
          month = +(window.prompt("請輸入一個1-12的月份"));
      //    3.資料安全校驗
          if(isNaN(month)){
              alert("火星SB?");
          }else{
      //    4.根據輸入的資料判斷輸出對應的月份即可
              if(month == 12 || month == 1 || month == 2){
                  alert("冬季");  // 沒有進入, 剩下的必然是3-11
              }else if(month >=9){ 
                  alert("秋季"); // 沒有進入, 剩下的必然 3-8
              }else if(month >=6){ 
                  alert("夏季"); // 沒有進入, 剩下的必然 3-5
              }else if(month >= 3){
                  alert("春季 ");
              }else{ // 12 1 2
                  alert("火星季節");
              }
          }
  從鍵盤輸入2個整數，判斷大小後輸出較大的那個數?
  
    //    1.定義變數儲存三個整數
        var a, b;
    //    2.利用window.prompt接收使用者輸入的資料
        a =  +(window.prompt("請輸入內容")); 
        b =  +(window.prompt("請輸入內容")); 
    //    3.利用if進行兩兩比較
        if(a > b){
            console.log(a);
        }else{
            console.log(b);
        }
        /*
        三元運算子好處：可以簡化if else程式碼
        弊端                  ：因為是一個運算子所以運算完必要要有一個結果。  
        簡單用三元 複雜用if(閱讀性好)
        */
        console.log(a > b? a: b);
  從鍵盤輸入3個整數，排序後輸出?
  常規寫法

      //    1.定義變數儲存三個整數
          var a, b, c;
      //    2.利用window.prompt接收使用者輸入的資料
          a =  +(window.prompt("請輸入內容"));
          b =  +(window.prompt("請輸入內容"));
          c =  +(window.prompt("請輸入內容"));
          //     方式1 寫出所有方式
          if (a >= b && b >=c) {
              console.log(a, b, c);
          }else if (a >= c && c >= b) {
              console.log(a, c, b);
          }else if (b >= a && a >= c) {
              console.log(b, a, c);
          }else if (b >= c && c >= a) {
              console.log(b, c, a);
          }else if (c >= a && a >= b) {
              console.log(c, a, b);
          }else if (c >= b && b >= a) {
              console.log(c, b, a);
          }

      選擇排序
        //    1.定義變數儲存三個整數
            var a, b, c;
        //    2.利用window.prompt接收使用者輸入的資料
            a =  +(window.prompt("請輸入內容"));
            b =  +(window.prompt("請輸入內容"));
            c =  +(window.prompt("請輸入內容"));
        //     方式2 選擇排序
            var temp;
            if (a > b) {
                temp = a;
                a = b;
                b = temp;
            }
            if (a > c) {
                temp = a;
                a = c;
                c = temp;
            }
            if ( b > c) {
                temp = b;
                b = c;
                c = temp;
            }
            console.log(a, b, c);
  氣泡排序

          //    1.定義變數儲存三個整數
              var a, b, c;
          //    2.利用window.prompt接收使用者輸入的資料
              a =  +(window.prompt("請輸入內容"));
              b =  +(window.prompt("請輸入內容"));
              c =  +(window.prompt("請輸入內容"));
          //     方式3 氣泡排序
              var temp;
              if (a > b) {
                  temp = a;
                  a = b;
                  b = temp;
              }
              if (b > c) {
                  temp = b;
                  b = c;
                  c = temp;
              }
              if ( a > b) {
                  temp = a;
                  a = b;
                  b = temp;
              }
              console.log(a, b, c);
    石頭剪子布實現?

    // 定義 0.剪刀 1.石頭 2.布
        // 1、定義變數 玩家和電腦
        var player,computer = 0;
        
        // 2、讓電腦先出拳
        var temp = Math.random() * 3;
        // 3、使用者出拳
        var player = window.prompt("請出拳:0.剪刀 1.石頭 2.布");
        // 資料合法性的校驗
        if (player<0||player>2) {
            window.prompt("請重新出拳:0.剪刀 1.石頭 2.布");
        }else{
            // 4、判斷比較 //先判斷使用者贏的情況
            if((player==0&&computer==2)||
                    (player==1&&computer==0)||
                    (player==2&&computer==1)){
                window.alert("我靠,你贏了!\n");
    
            }else if((computer==0&&player==2)||
                    (computer==1&&player==0)||
                    (computer==2&&player==1)){
                window.alert("很遺憾,你輸了!\n");
    
            }else{
                window.alert("平局\n");
            }
        }


3. 迴圈

迴圈結構是程式中一種很重要的結構。其特點是,在給定條件成立時,反覆執行某程式段, 直到條件不成立為止。

給定的條件稱為迴圈條件,反覆執行的程式段稱為迴圈體
迴圈結構簡單來說就是:一次又一次的執行相同的程式碼塊

現實生活中的循壞

JavaScript中的循壞

  while語句
  do-while語句
  for語句
  while迴圈

格式

 while ( 條件表示式 ) {
      語句1;
      語句2;
      ....
  }

執行流程

判斷條件表示式是否為真, 如果為真執行後面大括號中的內容

執行完畢再次判斷條件表示式是否還為真,如果為真執行後面大括號中的內容

 重複上述過程,直到條件不成立就結束while迴圈

  var num = 0;
  while (num < 10){
    console.log(num); 
    num++;
  }

構成迴圈結構的幾個條件

 迴圈控制條件(條件表示式)
 迴圈退出的主要依據,來控制迴圈到底什麼時候退出
 迴圈體(while後面的大括號{})
 迴圈的過程中重複執行的程式碼段
 迴圈結束語句(遞增,遞減,break等)
 能夠讓迴圈條件為假的依據,否則退出迴圈

while迴圈特點

如果while中的條件一開始就不成立,那麼迴圈體中的語句永遠不會被執行
  var num = 10;
  while (num < 10){
      alert(num); // 什麼都不彈
      num++;
  }

while循壞注意點

  死迴圈

  條件表示式永遠為真, 循壞永遠無法結束,我們稱之為死迴圈

     while (true){
            alert("itlike.com");
        }

任何值都有真假性

 對於非Boolean型別的值, 會先轉換為Boolean型別再判斷

 while (1){ // 先把1轉換為Boolean, 然後再判斷真假
            alert("itlike.com");
        }
 
 while 後如果只有一條語句它可以省略大括號

 如果省略大括號, while只會管制緊跟其後的那條語句

    while (0)
       alert("會執行我麼?"); // 不會執行
    alert("itlike.com");

分號問題

   分號(;)也是一條語句, 代表空語句

     while (0);
      {
          alert("123"); // 會被執行, 因為while管制的是分號(;)
      }

最簡單的死迴圈
開發中慎用死迴圈, 會導致程式阻塞

     while (1);

while循壞練習

    提示使用者輸入一個正整數n， 計算1 + 2 + 3 + ...n的和

      //    1.定義變數儲存上一次的和
          var sum = 0;
          //    2.定義變數儲存遞增的數
          var number = 1;
          while (number <= 5) {
              console.log("sum = "+ sum +" + number = "+ number);
              sum = sum + number;
              number++;
          }
          console.log("sum = " + sum);

    獲取1～100之間 7的倍數的個數並列印，並統計個數

      var count = 1;
          var num = 0;
          while (count <= 100) {
      
              if (count % 7 == 0) {
      
                  console.log("count = " + count);
                  num++;//計數器
              }
              count++;
          }
      
          console.log("number = "+ num);

break關鍵字

作用
跳出Switch語句

      var num = 1;
      switch(num){
          case 1:
              console.log("壹");// 輸出壹
              break; // 跳出switch語句, 後面程式碼不會執行
          case 2:
              console.log("貳"); 
              break;
          default:
              console.log("非法數字");
              break;
      }

跳出迴圈語句

      var num = 0;
      while(true){ 
          console.log(num);
          if(3 == num){
              break; // 當num等於3時跳出迴圈
          }
          num++
      }

注意點

      break關鍵字只能用於迴圈語句和switch語句, 在其它地方沒有意義

       
        break;  // 瀏覽器會報錯
        alert("我會輸出麼?");

        if(true){
            break; // 瀏覽器會報錯
            alert("我會輸出麼?");
        }
        ```

      在多層迴圈中,一個break語句只向外跳一層

       
        while (1){
            while (2){
                console.log("我是while2"); // 會被輸出多次
                break; // 跳出while2,但是不會跳出while1
            }
            console.log("我是while1");
        }
    

      break後面的語句永遠不會被執行

       
        while (1){
            break;
            alert("會彈出來麼?"); // 不會彈出
        }

continue關鍵字

  作用

  跳過當前迴圈體中剩餘的語句而繼續下一次

      var num = 0;
        while (num < 10){
            num++;
            if(num % 2 == 0){
                continue;
            }
            console.log(num); // 1, 3, 5, 7, 9
        }


注意點

只能用於迴圈結構, 在其它地方沒有意義

continue後面的語句永遠不會被執行

      while (1){
          continue;
          alert("會彈出來麼?"); // 不會彈出
      }

do-while迴圈

格式

   do {
       語句1;
       語句2;
       ....
   } while ( 條件 );


    執行流程

    首先會執行一次迴圈體中的語句
    接著判斷while中的條件表示式是否為真，如果為真再次執行迴圈體中的語句
    重複上述過程，直到條件不成立就結束while迴圈

  特點

    不管while中的條件是否成立，迴圈體中的語句至少會被執行一遍

  應用場景

    口令校驗

for迴圈

JavaScript中的for語句使用最為靈活,
不僅可以用於迴圈次數已經確定的情況,
而且可以用於迴圈次數不確定而只給出迴圈結束條件的情況,
它完全可以代替while語句。

格式

  
  for(①初始化表示式；②迴圈條件表示式；④迴圈後操作表示式)
  {
      ③執行語句；
  }

for迴圈執行流程

   for迴圈開始時，會先執行初始化表示式，而且在整個迴圈過程中只執行一次初始化表示式

    接著判斷迴圈條件表示式是否為真，如果條件為真，就會執行迴圈體中的語句

   迴圈體執行完畢後，接下來會執行迴圈後的操作表示式

    執行完迴圈後操作表示式, 然後再次判斷迴圈條件表示式是否為真，如果條件為真，就會執行迴圈體中的語句

    重複上述過程，直到條件不成立就結束for迴圈

        for(var i = 0; i < 10; i++){
            alert(i); // 輸出0-9
        }
       
        for迴圈和while迴圈如何選擇?

       一般情況下while和for可以互換, 但是如果迴圈執行完畢之後就不需要使用用於控制迴圈的增量, 那麼用for更好

     注意點

        for迴圈中初始化表示式,迴圈條件表示式,
        迴圈後操作表示式都可以不寫
        迴圈條件表示式預設為真
        for(; ;) 語句相當於while(1), 都是死迴圈
        其它注意點和while一樣

      迴圈巢狀練習

        列印好友列表

          好友列表1
          ​          好友1
          ​          好友2
          ​          好友3
             好友列表2
          ​          好友1
          ​          好友2
          ​          好友3

           
          for (var i = 1; i <= 2; i++) {
                  console.log("好友列表"+ i);
                  for (var j = 1; j <= 3; j++) {
                      console.log("    好友"+ j);
                  }
              }
        

       for迴圈巢狀實現:列印99乘法表

        
        <style>
        
                span{
                    display: inline-block;
                    border: 1px solid #000;
                    padding: 10px;
                }
        </style>
        <script>
            /*
              1.觀察發現有很多行很多列--》迴圈巢狀
              2.尖尖朝上，讓內迴圈條件表示式隨著外迴圈i改變
              3.輸出的結果等於 內迴圈的變數 * 外迴圈的變數
            */
            for (var i = 1; i <= 9; i++) {
                for (var j = 1; j <= i; j++) {
                    document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
                }
                window.document.write("<br/>");
            }
        </script>