系列文章
JS30-Day11-Custom Video Player
Day11-課題內容 今天的課題中，我們將來了解 video 物件，並透過其相關方法，來客製化一個影片播放器。[1]實作範例 Video物件 在HTML5推出之...
JS30-Day12-Key Sequence Detection
Day12-課題內容 邁入JS30的第12篇，在今天的題目中，當我們輸入的字元與的隱藏密碼一致時，便會打開隱藏在頁面中的彩蛋！[1]實作連結-大家可以嘗試在上面...
JS30-Day13-Slide in on Scroll
JS30-Day13 在今天的題目當中，我們將學習如何讓畫面中的圖片，在滾動頁面的同時，產生進入、離開的效果。從作者給的範例中，我們可以看到當圖片往上出現在畫面...
JS30-Day14-JS Reference VS Copy
Day14-課題內容 在前幾天的課題當中，我們開始接觸到資料的使用，在今天的課題當中，我們要來認識 javascript 中各種資料型別，以及其在使用上要注意的...
JS30-Day15-LocalStorage
Day15-課題內容 今天我們要將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間當中。如此一來，本來存入程式碼當中的資料，就不會因重新整理頁面或者關閉瀏覽器而...
JS30-Day16-Mouse Move Shadow
Day16-課題內容 轉眼間我們的 JS30 之路已經完成一半了！今天要來實作一個頁面的影分身之術。在頁面剛開啟時，只有中間一個字串'影分身之術!!'，但是當我...
JS30-Day17-Sort Without Articles
Day17-課題內容 進入JS30的第十七天，今天要將陣列中的資料做排序的動作。[1] 進入JS30-Day17 在草稿中作者已經給了一個陣列內容，我們的目的是...
JS30-Day18-Add Up Times with Reduce
Day18-課題內容 進入JS30的第十八天，今天的課題中，我們也要來處理陣列中的資料，而這次處理的資料對象為時間，我們要將每個元素的時間加總起來。[1] 進入...
JS30-Day19-Webcam Fun
Day14-課題內容 在今天的課題當中，我們要將鏡頭攝影機所取得的影像資料，轉到 canvas 的畫布上，再將 canvas 上的像素資料透過一些方法，將我們的...
JS30-Day20-Speech Detection
Day20-課題內容 在昨天的課題中我們玩了一下視訊鏡頭，今天要來玩一下麥克風聲控！[1]實作連結 Speech Recognition 透過 Web Spee...