系列文章
JS 30 - 01 - drum kit
JS30的第一天要將鍵盤變成一個爵士鼓，首先看一下所拿到的.html檔 <div class="keys"> <...
JS 30 - 02 - JS and CSS Clock
今天我們要來做個時鐘，首先我們使用new Date()「在開啟網頁時」拿到當下時間 首先看到時鐘會發現秒針、分針、時針都是在9點鐘方向所以要先記得一件事「之後要...
JS 30 - 03 - CSS Variables
首先先來看看 html <h2>Update CSS Variables with <span class='hl'>JS</sp...
JS 30 - 04 - Array Cardio Part I
今天要介紹 Array 常用的 methed，廢話不多說，先來介紹今天學到的一些技巧 .filter() .filter() 會回傳一個陣列，其條件是 retu...
JS 30 - 05 -Flex Panels Image Gallery
今天要製作一個點擊某區塊，該區塊的 大小會放大 隱藏內容顯示出來 首先先看看 css ，這裡的 css 很容易解析，就是一個 flex 容器包著另外一個 f...
JS 30 - 06 - Ajax Type Ahead
Demo 首先到公眾運輸平台找 api let flights = []; fetch(flightApi) .then(blob => {...
JS 30 - 07 - Array Cardio Part II
今天有幾題要來解決，首先我們拿到了一個裝滿許多個人資料的 array ，資料如下 const people = [{ name: 'Wes',...
JS 30 - 08 - Fun with HTML5 Canvas
今天要用 canvas 來畫圖，canvas可以用來即時畫圖、畫動畫，還可以用來處理影片，為影片增加特效。今天要來做一個會隨著點擊時間「移動」、「變色」、「縮放...
JS30 - 09 - Dev Tools Domination
想要了解 js 如何操作 css我們可以鎖定目標 element看他變化時， js 在背後做了什麼事 首先開啟開發者工具的 element 找到要觀察的 el...
JS 30 - 10 - Hold Shift and Check Checkboxes
按著shift，一次選取上一次選到的chekbox至這次選取的checkbox const checkboxs = document.querySelector...