js學習

課程解析:    https://github.com/chyeh727/tut-snippet/blob/master/examples.js


課程網址:https://www.youtube.com/watch?v=gLX-KVq-6Kc&list=PLhW1K7xGelxefHXPDTfmXtJdyjhwGiXzK&index=9




1. 字串相加

     (1)   "hello"+"world"--->"helloworld"

     (2)   若想在中間保留   "---->"hello\"world"--->"hello"world"

2. 字串與數字相加

     (1)   "abc"+123--->"abc123"  JS會自動將數字變成字串

   --->結果

3. 變數
    (1)指定變數   =
             var b="hello";   --->console.log(b)-->"hello"
    (2)var a=1;
               a=a+1 ---> 將a這個數加1，再回傳給a  -->console.log(a)--> 2
    (3)a++ --->  a=a+1回傳給舊a值    (見line55)
         ++a ---> a=a+1回傳給新a值

4. 布林值boolean
    (1)var t = true,    t1=true;
         var f = false,  f1=false;
    (2)!  相反的意思
         !t --->f
         !f --->t


5. and 與 or
    (1)and: && --->當所有條件成立時才成立
          t&&t1 ---> true
          t&&f   --->false

    (2)or: | | -->只要有一個條件成立就成立
          t | | t1 --->true
          t | | f   --->true

6. = = 與 = = =差別    (見line87~97)
    (1)= = 會做資料型態的轉換
    (2)= = =不會做資料型態的轉換
          var m=20;
          m= =20 --->true
          m!= =20 --->false

          m= ="20" --->true
          m!= ="20" --->false

          //較嚴格的比較

          m   = = = 20 --->true
          m      != =20 --->false

          m   = = ="20" --->false (因為var m=一個數字，又= = =不會做資料型態轉換，此行數字不
                                                  等於字串，故得false)
          m     != ="20" --->true

7. if 、 else 、 else if  的使用
    (1)if(  條件成立的話  ){  執行某動作  }     如果
    (2)else if(   ){   } --->連續使用if時用          不然如果
    (3)else{  }                                                      不然

    --->"QQ"
       
8. 循環while、for
    (1)while(  條件成立  ){  執行動作   }

    (2)for(    a.定義變數   ;   b.條件   ;   c.動作    ){  d.執行動作  }
                  ---->執行順序(a-->b-->d-->c) 呈現結果會與while相同，只是邏輯不同

    (3)中間可使用
        1.break 斷點
        2.continue  跳過後續的指令，回頭檢驗while條件是否成立，成立就繼續後續指令
 

                 
    --->第7圈會跳過，跑到第10圈就不跑了，停在9

    --->阿賢跑到20圈，break、continue同理

9. 陣列array

            var data1= [ 0, 1 ,2 ];            

            var data2= [ 3, 4, 5, 6 ];            

            var data3= [ 7 ,8 ,9 ];

    (1)取得特定位置的值，運用索引(index)

                 console.log (  data2[  0  ]  )-->  3  ---> data2這個陣列的第0個數是3
 
    (2)長度(length)

                 console.log (  data3.length  )-->  3  --->data3這個陣列的長度是3

    (3)從頭新增項目(unshift)

                data2.unshift(20)  --->data2陣列變成 [ 20 , 3  , 4  , 5  , 6 ]

    (4)從頭抽取項目(shift)

                data2.shift()  --->  data2陣列變成陣列變成  [ 4 , 5  ,6 ]

    (5)從尾巴新增項目(push)

               data2.push(10) ---> data2陣列變成陣列變成  [ 3 , 4  , 5 , 6 ,10 ]

    (6)從尾巴抽取項目(pop)
             
                data2.pop() ---> data2陣列變成陣列變成  [ 3 , 4  , 5 ]

    (7)接合(splice)

               陣列.splice(   從第幾個數開始工作 ,  抽掉幾個數  ,  加入的數  ,  加入的數  )

               data2.splice(  0  ,  3  ,  1  ,  2  ,  3  ) ---> data2陣列變成陣列變成  [ 1,  2 , 3 , 6 ]
 
    (8)求特定值的位置(indexOf)

                console.log(   data2.indexOf( 3 )   ) --> 0 --->   3是在data2陣列中的 0 的位置

                 若JS找不到值會給 -1

    (9)逐個讀出(for)

    --->中間多加一個   len=data2.length 可增加軟體效能

    (10)讀出函式，array可以輸入數值、boolean、物件、函式

    --->" hello austin "

10. 物件
    (1)如何定義

             var  data = { 
                    age:  18  ,
                    style:  "moden" , 
                    color:  "red"  ,                    
                             };
    (2)如何取得某物件內，某屬性的值

                console.log(data.age) ----> 18

    (3)改屬性值

             data.age =  20 ;
         data.color = "blue" ; 
     
         ---> console.log(data) ---> {  age:  20  ,  style:  "moden"  ,  color:  "blue"};   

    (4)新增屬性

              data.year = 2019;

           ---> console.log(data)--->  {  age:  20  ,  style:  "moden"  ,  color:  "blue" , year:  2019};