2019年10月19日 星期六

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[  ]  )-->  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  ,  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};


                 






JS學習 javascript 的 bug (this)

4-37 13:00


1. 正常情況創造一個物件 ,this 會指向物件

   --->result

   --->運用this改變了a.name的值


2.但在函式裡輸入另一組函式,this 卻指向了全域物件

   --->result

   --->照理說第2個name: Carlos
13:55

 ---> changeName創造的新名字跑到了全域物件,
         代表執行changeName時,this指向了全域物件
 --->解決辦法

(1)增加一個變數 var self = this
(2)並將函式裡的this 都替代成self


   --->result

2019年10月17日 星期四

js學習 by value 、by reference

1. by value
    若設定一個純值 a=3, a=b
    a--->指向一個記憶體位置
    b--->創造一個新的記憶體位置,再填入3

    
    ---> 在 b=a 之後他們就沒有關係了,之後改變a值也不會對b造成影響
    --->result





2. by reference
    若是一個物件 a={}, a=b
    a--->指向一個記憶體位置
    b--->不會創造一個新的記憶體位置,而是跟a指向同一個記憶體位置


    --->因為指向同一個記憶體位置,改變a裡面的值,b也會跟著改變

    --->result

   -->若之後輸入b={};,則會創立一個新物件,就不再是by reference

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)Math.ceil(x)  ---> 取得一個大於or等於 x的整數中最小的一個

             Math.ceil(-1.5) ---->> -1

    (2)Math.random( ) ---> 取得一個大於等於 0 並且小於 1 的數   ( 0  <=  y  < 1 )

             Math.random( ) --->> 0.6849


2.函式 function

           function(   參數   ){   執行動作   };

   
      (1)定義一個匿名函式

    --->與(2)差別不大,只是用(2)一旦出錯,那個 stacktrace 會告訴你在哪個函式裡出錯。容易debug



      (2)直接宣告一個函式

    ---> 若console.log寫在return下方則不會顯示

   
      (3)參數 (ex: maxValue)

    ---> 能使code更有彈性

      (4) 執行函數裡可放另一組function

   -->result

   若用console.log
 
    --->result





3.可視範圍scope、執行環境excution  context、全域global


    結論: 當變數在執行環境找不到值時,便會往上一層找,直到找到為止

    (1)範例一

    --->在console.log中  who 在執行環境(function)找不到便往上一層(global)找到steph,
       n 在執行環境 (function)就找到了。
    --->結果:

    (2)範例2

    --->在console.log中  who 在執行環境(return function)找不到便往上一層,找到了Lebron,
          在執行環境 (return function)就找到了。
   ---結果:



    (3)範例三
       見https://www.youtube.com/watch?v=oSDyY8rItEE&list=PLhW1K7xGelxefHXPDTfmXtJdyjhwGiXzK&index=11
       13:11處


--->當Js看到宣告變數var, 他會在他的可視範圍內,將變數宣告var提到最上面,

      但宣告值留在原地


4. 函式裡的this

    *函式裡的this跟函式被呼叫的時候誰在焦點有關係
   *函式裡的this跟函式的定義位置無關

     (1)若完全沒有指定則會讀到全域

   ---> 使用"use strict"  嚴格模式,可避免此情形


    (2)呼叫特定函式的值



     1. 若想call出 myship 的值
                --->test.call(myship)
           --->myboat.Location.call(myship

        --->在函數前加 call ,並在參數中填入欲加入的物件 




    --->結果


5.call back練習


    --->當數到7時,執行callme這個函式
    --->同時callme這個參數填入為shout,印出"it's seven now"
    --->if是為了避免參數填入非函式時,錯誤執行

    --->結果

 6. 內建函式 setInterval、setTimeout     (  單位毫秒  )

        (1)setInterval  每幾秒做一次

                 setInterval(  執行函式  ,  間隔時間  )

        (2)setTimeout  幾秒後作那個動作

                 setTimeout(  執行函式  ,  間隔時間  )

js學習 hoisting

1. 匿名函式不會hoisting(提升)

--->result


若讓apple先執行

--->會出現 undifined is not a function
因為匿名函式不會被hoisting提升到記憶體,而var 會先被定義成undifined,


2019年10月15日 星期二

js學習 非同步callback

1.當執行堆處理完後,才會去執行件佇列



    --->最後才執行clickHandler
    --->結果

2 .強制型轉--->用來檢查a有沒有定義值

   if(  boolean  ){     };

若boolean值是:
    1. undefined 變成 false  
    2. Null 是 false.   
    3. 空字串 也是 false.
    4. a=0  也會是false  *注意:此時a有定義值卻是false 

   --->結果

   要解決a=0 會是false
   --->if(  a  ||  a === 0  )
--->

3. 強制型轉與運算子的互動


--->依邏輯來看應該是false,但less than 運算是    由左--->右


--->因此實際上是 console.log(  false  <  1  ),false會被強制型轉為0  (可用Number(false)檢驗)

* null 、 " "也會被強制型轉為0   3-25 ,8:00(強制型轉的危險)

-->解決: 使用  = = =

Js學習 JSON

JSON (js object notation)


1.與一般的JS不完全一樣,JSON格式較嚴格


2.兩者間的轉換

(1)物件轉JSON---> JSON.stringify(物件)


(2)JSON轉物件---> var 物件= JSON.parse(...JSON資料...)




















--->注意: 裡面的名稱要加  " "  ,外面加 '    '

--->結果


2019年8月26日 星期一

svg動畫 3種製作動畫的方式


1. 針對屬性作動畫
  • values="欲變化的數值;數值;數值"---->使用分號
  • repeatCount="次數"---->若欲無限,輸入indefinite
  • begin可以讓動畫延遲,秒數用負的表示0秒前就已開始動畫,解決會停頓的問題(參照#pic4)
  • 2. 位移動畫
  • 將欲位移的元素運用"group"包起來
  • type可填入scale、rotate等等
  • 3. CSS動畫
  • transform-origin控制動畫開始或消失的點
  • chrome讓動畫消失會以整個為基準,要輸入"transform-box: fill-box"讓動畫以該元素為基礎
  • 後寫的會蓋掉前面的,以#pic5的
          &:hover
             & .frame_outer....為例,
         若沒有輸入"transition-delay: 0s"那他會直接套用"transition-delay: 0.5s"
  • 2019年5月6日 星期一

    靜心冥想的練習2

            今日花了10分鐘練習靜心冥想,地點是在家裡的床上,當下外面還有施工的聲音,成效可能會有所打折。

            做在床上似乎不是個好選擇,床太軟了整個人會陷下去,以致背部挺直時,中背的部分有點緊繃與痠痛,靜坐的過程中一直聽到外頭的轟隆聲,但我還是盡力把思緒專注在呼吸上,10分鐘說快不快,到後來有點坐不住,很想知道時間到了沒有,幸好有走完全程。

            冥想完後睜開眼的一瞬間,會覺得看世界不一樣了,天花板的白色不再只是白色,每個物體都是獨特別具意義的存在,心中會充滿感恩,感謝爸媽讓我能住在那麼好的房子裡,感謝自己是那麼真實的活著,我是實實在在的、有血有肉。

            整個過程或許不夠盡善盡美,但這是個好的開始,我慢慢能體會到冥想的精神:慈愛、專注、寧靜。

    vue的筆記

     目錄 //mvvm //綁定 //資料綁定的方式 //修飾符 //按鍵修飾符 //縮寫 //class 動態切換 //computed //表單裡各元素的v-model綁定 //元件: 能夠獨立儲存自己的狀態 //vue 的生命週期 //切換className的各種寫法 //v...