系列文章
Day 1 - JS Drum Kit
任務內容 利用JS做出一組爵士鼓.HTML code如下, 類別keys內部包著九個類別為key, 但持有不同data-key屬性值的div標籤. 在外頭也有九...
Day 2 - JS & CSS Clock
任務目標 做一個會動的時鐘. 沒錯, 一個能夠顯示現在時間的時鐘.一個時鐘會有什麼呢? 鐘面, 時針, 分針, 秒針, 鐘心.HTML結構如下, 來吧! <...
Day 3 - CSS Variables
任務內容 這章的目的是學會如何宣告CSS變數, 在CSS內呼叫CSS變數, 以及用JS控制CSS變數.下面有三條input range可以調整, 我們希望拖動s...
Day 4 - Array Cardio Part I
任務目標 陣列原型(Array Prototype)是個物件, 代表著陣列建構式的模型. 裡面存放著一些好用的方法與特性, 所有透過陣列建構式建立的陣列實例都可...
Day 5 - Flex Panel Gallery
任務目標 盤踞在大台南市區的四大天王「火爆浪子」最近在經營網路形象, 他們需要一個頁面來一段魅力的展現, 要求如下: 四名天王都必須有等寬的展示空間 滑鼠點擊...
Day 6 - Type Ahead
緣起 大家還記得果王大賽中, 因為水果被沒收而忿忿不平的老樹猴嗎? 詳情請參閱Day 4 - 果王大賽.老樹猴在水果被沒收的打擊中, 萌生了一個偉大的計劃: 「...
Day 7 - Array Cardio Part II
緣起 夜喧猴, 簡稱喧猴, 已經到了適婚年齡. 心急如焚的父母為他安排了許多相親活動. 但是相親活動最重要的是什麼? 沒錯, 就是不能犯法, 喧猴看著排山倒海的...
Day 8 - HTML Canvas
任務目標 只要按住滑鼠就能在螢幕上畫畫, 線條大小, 顏色都會隨著畫筆移動的距離漸變. 像這樣 作法 <canvas> <canvas>...
Day 9 - Dev Tools
任務目標 認識瀏覽器開發者工具列 (以Chrome舉例實作) 重點整理 Break On Attribute Modifications 從之前的練習中發現,...
Day 10 - Hold Shift and Check Checkboxes
任務目標 喧猴結婚了. 開玩笑的, 喧猴為了體驗婚後生活, 模仿未來的老婆寫了一張家事清單給自己. 喧猴希望透過一件一件的完成清單上的事情來證明自己也是有當家庭...