Anthony Chao

Pseudo Worker not allowed

JS30 day17 Sorting Band Names

JS30 day17 - Sorting Band Names 作業內容 今天內容頗簡單的，只是要把某陣列排序之後塞到 DOM node 裡面而已，反而是花很多時間在查 JS 的方法ＸＤ 可以看看這個CodePen 學到什麼 JS replace()裡面第一個參數可以放字串或者 regular expression，但要記得如果放字串他只會替換一次，如果是 regular expres......

Posted by Anthony Chao on 2019-11-16

Javascript

JS30 day16 Text Shadow Mouse Move Effect

JS30 day16 - JS30 day16 Text Shadow Mouse Move Effect 作業內容 今天教學的內容是根據滑鼠的移動來讓文字的陰影跟著移動，在這裡面我目前認為還有很難發現的雷 (this 跟 e.target 不同)，整體而言我覺得效果滿酷的！ 可以看看這個CodePen 學到什麼 JS ES6 語法糖： 1234const width = hero.......

Posted by Anthony Chao on 2019-11-16

Javascript

JS30 day15 Local Storage and Event delegation

JS30 day15 - JS30 day15 Local Storage and Event delegation 作業內容 今天的內容在講說如何使用 Local Storage 還有如果要指定監聽的對象是動態變化的應該怎麼處理，網頁的部分是透過一個菜單來實作 學到什麼 JS preventDefault() 參考資料：https://ithelp.ithome.com.tw/art......

Posted by Anthony Chao on 2019-11-15

Javascript

JS30 day14 Reference vs Copy

JS30 day14 - Reference vs Copy 作業內容 今天主要是在釐清 JS 裡面的基本型別 pass by value 跟 pass by reference 還有怎麼應對 學到什麼 JS JS 裡面的數字 / 布林值 / 字串是 pass by value，但陣列跟 Object 是 pass by reference 12345678910111213// 數......

Posted by Anthony Chao on 2019-11-14

Javascript

JS30 day13 Slide In on Scroll

JS30 day13 - Slide In on Scroll 作業內容 本日作業是要做出文繞圖的頁面，但圖片會在看到的當下滑進畫面 可以參考這份 CodePen 學到什麼 JS 在這次的教學中， debounce 這個 function 的作用是限制事件最多在某段時間內只能觸發一次 function window.addEventListener('scroll', debounc......

Posted by Anthony Chao on 2019-11-13

Javascript

JS30 day12 Key Sequence Detection

JS30 day12 - Key Sequence Detection 作業內容 今天的也是有點無聊，在這個網頁中只要打出某串密碼就會在畫面中跑出獨角獸＠＠ 學到什麼 JS splice 的使用補充 splice 的參數如果是負值的話也可以，比方說我今天想要砍掉倒數第七個項目： 123const arr = 'abcdefghijklmnopqrstuvwxyz'.split('');......

Posted by Anthony Chao on 2019-11-12

Javascript

JS30 day11 Custom HTML5 Video Player

JS30 day11 - Custom HTML5 Video Player 作業內容 今天要做出客制化的 video player，包括播放鍵 / 可以拉動影片進度條等等… 學到什麼 CSS .player:fullscreen 這只有在全螢幕的時候會有用 JS 影片有個屬性叫做 paused，影片播放或暫停的方法叫做 play() 跟 pause()，很直觀 12345......

Posted by Anthony Chao on 2019-11-11

Javascript

JS30 day10 Hold Shift to Check Multiple Checkboxes

JS30 day10 - Hold Shift to Check Multiple Checkboxes 作業內容 今天要做出按住 Shift 的時候可以達到同時選取好幾個 Checkbox 的效果，聽起來簡單，但邏輯上其實有點複雜（抱歉我太嫩） 可以參考這份 CodePen 學到什麼 JS 在 checkbox 身上加 click 的 event 時要記得不管是選擇或者取消都會觸發......

Posted by Anthony Chao on 2019-11-10

Javascript

JS30 day9 JS Console 用法

JS30 day08 - Fun With HTML5 Canvas 作業內容 今天只是看看在 Dev tool 裡面， console 可以搭配哪些指令使用 學到什麼 不知道觸發的JS在哪裡的時候，在 Dev tool 的 DOM 物件上面點右鍵 => Break on => Attibute modifications 點擊，這樣觸發的時候就會跟你說相對應的 JS cod......

Posted by Anthony Chao on 2019-11-08

Javascript

JS30 day8 Fun With HTML5 Canvas

JS30 day08 - Fun With HTML5 Canvas 作業內容 今天要做出一個網頁，可以在上面畫畫，隨著畫筆移動，顏色會一直循環，色筆粗度也會變大變小 可以參考這份 CodePen 學到什麼 HTML canvas 這個 HTML 標籤就是用來使用 JS 畫圖的 JS 在canvas 上面用 JS 畫畫的時候，並不是直接畫在 html 的 canvas 上面，......

Posted by Anthony Chao on 2019-11-07

Javascript

FEATURED TAGS
Rails Javascript Life Ruby Devops Docker Cache Continuous Delivery Jenkins AWS Shell Kubernetes K8S Elixir Regular Expression SSH Apps Script GraphQL SQL AI Developer
ABOUT ME

喜歡彈吉他，打電動，看漫畫，調酒，煮菜，算是個多方位宅男

RECENT POSTS
FRIENDS
ARCHIVES
prevent_hack