Anthony Chao

Pseudo Worker not allowed

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

JS30 day7 Array Cardio Day2"

JS30 day07 - Array Cardio Day2 作業內容 今天的內容比較無聊，有關一些陣列的方法練習 學到什麼 列點如下： CSS 第一次碰到 outline 屬性，他跟 border 有什麼差呢？ border 會影響這個元素的大小(因為他在 box-model 裡)，而 outline 不會 border 可以對上下左右有不同設定，但 outline 不行 out......

Posted by Anthony Chao on 2019-11-06

Javascript

JS30 day6 Ajax Type Ahead

JS30 day06 - Ajax Type Ahead 作業內容 今天要做的是做出一個網頁，畫面上有一個輸入欄位，填入字之後就會依照這個字去找出美國哪個州或城市名字裡面有包含你輸入的字的內容 可以參考這份 CodePen 學到什麼 列點如下： CSS 第一次碰到 outline 屬性，他跟 border 有什麼差呢？ border 會影響這個元素的大小(因為他在 box-mod......

Posted by Anthony Chao on 2019-11-05

Javascript

JS30 day5 Flex Panels Image Gallery

JS30 day05 - Flex Panels Image Gallery 作業內容 今天要做的是做出一個網頁，畫面上有五條欄位，我點擊其中一個他就會放大，並同時會有字從上方跟下方冒出來，再點一次他就會縮小 可以參考這份 CodePen 學到什麼 列點如下： CSS box-shadow 內陰影的效果還滿漂亮的 box-shadow: inset 0 0 0 5px rgba(2......

Posted by Anthony Chao on 2019-11-04

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