Anthony Chao

Pseudo Worker not allowed

JS30 day26 Stripe Follow Along Dropdown

JS30 day26 - Stripe Follow Along Dropdown 作業內容 這次的網頁要做出下拉式選單動態移動的效果 今天的作業其實 code 本身不難，難就難在你能不能想到用這個概念做出效果，如果是我應該想不到ＸＤ，創意性看來還要再加油 可以參考這份 CodePen的效果 學到什麼 CSS 這邊很特別的地方是把隱藏的選項顯現出來的方式，一開始是 display: ......

Posted by Anthony Chao on 2019-11-26

Javascript

JS30 day24 Sticky Nav

JS30 day24 - Sticky Nav 作業內容 今天的作業相較之下簡單多了，但還滿實用的！就是頁面往下滑動，碰到導覽列之後導覽列會繼續往下滑動不會消失 可以參考這份CodePen的效果 一開始是這樣： 往下滑會變成這樣： 學到什麼 CSS 一般直覺上會想要在產生效果的時候，如果要做的是固定 navbar，會直接在 navbar 上面加上 class，但他比較特別的是把 b......

Posted by Anthony Chao on 2019-11-25

Javascript

JS30 day23 Speech Synthesis

JS30 day23 - Speech Synthesis 作業內容 最近做的都跟聲音有關，雖然概念上不複雜但我覺得 Google 能把這個東西實作出來放在瀏覽器真的太猛了吧 = =，這個作業自己覺得比較難的部分是理解整個 google 系統是怎麼把聲音的資訊結合成物件 學到什麼 JS SpeechSynthesisUtterance() 物件為 Web Speech API 中代......

Posted by Anthony Chao on 2019-11-24

Javascript

JS30 day22 Follow Along Links

JS30 day22 - Follow Along Links 作業內容 為什麼不是繼續寫 21 而是跳到 22 呢？ 因為作業 21 需要哀鳳支援，這可能要稍微去借一下ＸＤ 今天的內容是要讓網頁的連結被指到的時候，出現白色背景，跟 hover 不同的是這個邊匡會在超連結之間移動！如果不明白我的意思可以看 CodePen 連結ＸＤ 學到什麼 mouseenter 跟 mouseover......

Posted by Anthony Chao on 2019-11-23

Javascript

JS30 day20 Speech Recognition

JS30 day20 - Speech Recognition 作業內容 今天的作業內容我也覺得很有趣，是語音辨識！把講出來的話直接印在網頁上！ 學到什麼 JS 語音辨識目前似乎只有桌機版的 Chrome 有實作，原作者這樣寫的目的好像是為了抓到 FireFox 實作的語音辨識，但我們其實用下面的寫法就好了 12345window.SpeechRecognition = windo......

Posted by Anthony Chao on 2019-11-21

Javascript

JS30 day19 Webcam Fun

JS30 day19 - Webcam Fun 作業內容 今天的難度又突然提升了，主要內容在玩弄攝影機的畫面，並改造成類似靈異現象的效果，像下面這張圖這樣 學到什麼 JS 1. 如何拿到 live 的攝影畫面 要使用攝影機有一個內建的 js 方法navigator.mediaDevices.getUserMedia，要注意的是他回傳的是 Promise 物件，詳細內容可以直接看下面參......

Posted by Anthony Chao on 2019-11-20

Javascript

JS30 day18 Tally String Times with Reduce

JS30 day18 - Tally String Times with Reduce 作業內容 今天也是主要在練習 JS 的 map / reduce 這兩種方法，要把影片的總時間加總，練習字串轉時間的過程 學到什麼 JS nodeList 不能使用 map，只有 array 可以 把 nodeList 轉換成 array: Array.from(<nodeList>) ......

Posted by Anthony Chao on 2019-11-18

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 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 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

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

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

RECENT POSTS
FRIENDS
ARCHIVES
prevent_hack