Javascript 30作品系列

是由加拿大工程師Wes Bos所建立一系列課程,課程中我們可以學到很多Javascript程式語言的實際應用,例如如何操作Document中的DOM以及資料的API,對於剛踏入Javascript領域的新鮮人來說,是一個非常有趣且扎實的課題。

以下為個人的學習筆記目錄連結

我覺得 JS30 真的是非常好的 JS 練習,文章中有記錄著每一個關卡的製作步驟與個人製作成果,有興趣的可以點選參考了解,中途也參考了很多網路上的學習筆記,每一篇文章下方都會把相關的參考筆記附上。



  • [Day1] JavaScript Drum Kit

    偵測鍵盤, key, 播放音效, transitionend

    • DOM & INTERFACE
    • FRIENDS WITH CSS
    • AUDIO + VIDEO


  • [Day2] CSS + JS Clock

    時間, time,CSS操作

    • DOM & INTERFACE
    • FRIENDS WITH CSS
    • AUDIO + VIDEO


  • [Day3] Playing with CSS Variables and JS

    CSS Variables, CSS變數, data-attribute

    • FRIENDS WITH CSS
    • FUN + EXPERIMENTAL


  • [Day4] Array Cardio Day 1

    Array, 陣列, filter, map, sort, reduce

    • FUNDAMENTALS


  • [Day5] Flex Panels Image Gallery

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day6] Ajax Type Ahead

    JS30, AJAX, 正規表達式, 資料篩選, 資料過濾, filter

    • DOM & INTERFACE


  • [Day7] Array Cardio Day 2

    Array, 陣列, some, every, find, findIndex

    • FUNDAMENTALS


  • [Day8] Fun with HTML5 Canvas

    canvas, 繪圖

    • FUN + EXPERIMENTAL


  • [Day9] 14 Must Know Dev Tools Tricks

    chrome, devtool, 開發者工具

    • FUNDAMENTALS


  • [Day10] Hold Shift to Check Multiple Checkboxes

    checkbox, shift, key, multiple, select

    • DOM & INTERFACE


  • [Day11] Custom HTML5 Video Player

    HTML5, video player, video element, mediaElement

    • AUDIO + VIDEO


  • [Day12] Key Sequence Detection (KONAMI CODE)

    slice, join, array

    • FUNDAMENTALS


  • [Day13] Slide In on Scroll

    scroll, detection, 捲軸, 滾動, debounce, 投影片效果

    • DOM & INTERFACE


  • [Day14] Object and Arrays – Reference VS Copy

    flex

    • FUNDAMENTALS


  • [Day15] LocalStorage and Event Delegation

    localStorage, custom checkbox, 客制化checkbox, event delegation

    • FUNDAMENTALS
    • DOM & INTERFACE


  • [Day16] CSS Text Shadow Mouse Move Effect

    mouseevent, mousemove, offset, 陣列解構賦值, Object Destructing, coordinate

    • DOM & INTERFACE
    • FRIENDS WITH CSS


  • [Day17] Sorting Band Names without articles

    sort, regex, 省略某些關鍵字後排序

    • FUNDAMENTALS


  • [Day18] Tally String Times with Reduce

    Array-like to Array, 時間累加, dataset, 秒數轉時分秒

    • FUNDAMENTALS


  • [Day19]Unreal Webcam Fun

    flex

    • HARDWARE ACCESS
    • FUN + EXPERIMENTAL
    • AUDIO + VIDEO


  • [Day20] Native Speech Recognition

    AI, contenteditable, note style, 語音辨識

    • AUDIO + VIDEO
    • FUN + EXPERIMENTAL


  • [Day21] Geolocation based Speedometer and Compass

    flex

    • HARDWARE ACCESS


  • [Day22]Follow Along Links

    flex

    • DOM & INTERFACE
    • FRIENDS WITH CSS


  • [Day23]Speech Synthesis

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day24]Sticky Nav

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day25]Event Capture, Propagation, Bubbling and Once

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day26]Stripe Follow Along Dropdown

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day27]Click and Drag to Scroll

    coordinate system, drag, 座標系統

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day28]Video Speed Controller UI

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day29]Countdown Clock

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE


  • [Day30]Whack A Mole Game

    flex

    • FRIENDS WITH CSS
    • DOM & INTERFACE