分類彙整：js

網頁 sticky 特效

sticky 特效簡單來說就是網頁滑動的時候，可以把某個物件原本滑動但滑到某個高度後就固定在一個位置，然後再滑動到某個高度的時候，又不固定了讓他滑走。可以看像這個網站，滑動的時候左右區塊固定，但滑到底的時候，又不會固定了就往上滑走了。

然後上網找到這個網頁
https://www.hongkiat.com/blog/sticky-elements-jquery-plugins/

但他提供的特效更多種，應該說都跟滑動有關。除了滑動後「黏住（sticky）釘住（pin）」的效果，還有滑動後可以出現動畫這類的，像是 ScrollMagic，應該很多滾動動畫可能就是用這類的套件吧。

然後因為我要的效果是被黏住的元件太長的話，要先滑到底，到底才黏住。然後到母元件結束的時候就不要黏住。所以後來是選擇 HC-Sticky 看起來最符合需求，套用上也不會太困難。

js線上課程筆記

陣列的操作
push 跟 pop
舉例
var books=[“書本1″,”書本2″,”書本3”]
如果
books.push(“書本4”)
那陣列內容就會實質變動變成
[“書本1″,”書本2″,”書本3″,”書本4”]

如果再用books.pop()
這會把最後一筆資料移出，那陣列內容會變回
[“書本1″,”書本2″,”書本3”]

這兩的動作可以視為對陣列內容塞入最後一筆資料跟取出最後一筆資料，
所以都會異動到對陣列本體

Slice(開始,結束)切割
舉例
var numbers=[1,2,3,5,6]
他們實際儲存的位置為0,1,2,3,4,5
要注意Slice(開始,結束)裡面的開始結束，指的就是實際儲存的位置
然後切割出來的陣列，包含開始的資料，但不包含結束的資料
例如 slice(1,10)，意思是從1開始，到10之前不包含10的資料。

所以如果是numbers.slice(0,2)
那取出的資料就是[1,2]，不包含3
numbers.slice(-3,-2)
負數是倒數。倒數-3的資料是3，然後到-2停止，但不包含-2的資料
那取出來的資料就是[3]
number.slice(3)
那就是3開頭，沒有結尾。
那就是取3之後的資料。
取出的結果就是[5,6]

可以用在顯示前50筆留言。
例如假設有個留言陣列有1000筆是
message=[“a”,”b”,”c”,”d”,”e”,….]
那如果用 message.slice(0,50)
就是切出 0~49 位子的資料出來

Reverse 反轉
message.reverse()
就可以把陣列排序反轉。常用在留言，例如用時間先後排序。

Concat 接續
可以把兩個陣列接起來變成一個陣列
例如
var books = books1.concat(books2)
意思就是把books1後面接上books2，把接起來結果指定存到books陣列。

*****************************************

目前聽到課程第22單元的 6:55分。筆記之後會繼續補在這，最近在學js，強烈推薦hahow的「動畫互動網頁特效入門（JS/CANVAS）」，老師很厲害，抽象概念用舉例解釋得很清楚。

學js一些零碎筆記

用 sublime 練習，不想用 codepan。看教學影片提到可以用 console.log把運算結果先顯示出來，但是不知道在 sublime 上要怎麼叫出來。發現查這些東西真的要懂得怎麼用英文關鍵字找….後來打 sublime console javascript 才找到

這篇算寫得最清楚有圖文的：How to Create a Javascript Console in Sublime Text

要注意到語法上要改用 debug() 取代 console.log()

然後要執行就是按 cmd+B，程式碼執行結果就會在底下 console 視窗顯示