iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

新手也能懂的JS30 系列

JS30 是由加拿大工程師Wes Bos所建立一系列課程,課程中可以學到很多Javascript基礎,例如如何操作Document中的DOM以及資料AP的I應用
在此新手也能懂的JS30的文章中 將以一天一章的方式完成JS30的訓練
並針對內容闡述作者的思考邏輯以及方法 希望讓新手能對Javascript有更進一步的認識
並透過作者的經驗與想法 能激發出更多不同的火花!

鐵人鍊成 | 共 30 篇文章 | 102 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第一屆鐵人賽
DAY 11

JS30-Day11-Custom Video Player

Day11-課題內容 今天的課題中,我們將來了解 video 物件,並透過其相關方法,來客製化一個影片播放器。[1]實作範例 Video物件 在HTML5推出之...

2017-12-30 ‧ 由 王郁翔 分享
DAY 12

JS30-Day12-Key Sequence Detection

Day12-課題內容 邁入JS30的第12篇,在今天的題目中,當我們輸入的字元與的隱藏密碼一致時,便會打開隱藏在頁面中的彩蛋![1]實作連結-大家可以嘗試在上面...

2017-12-31 ‧ 由 王郁翔 分享
DAY 13

JS30-Day13-Slide in on Scroll

JS30-Day13 在今天的題目當中,我們將學習如何讓畫面中的圖片,在滾動頁面的同時,產生進入、離開的效果。從作者給的範例中,我們可以看到當圖片往上出現在畫面...

2018-01-01 ‧ 由 王郁翔 分享
DAY 14

JS30-Day14-JS Reference VS Copy

Day14-課題內容 在前幾天的課題當中,我們開始接觸到資料的使用,在今天的課題當中,我們要來認識 javascript 中各種資料型別,以及其在使用上要注意的...

2018-01-02 ‧ 由 王郁翔 分享
DAY 15

JS30-Day15-LocalStorage

Day15-課題內容 今天我們要將資料從頁面中的程式碼儲存到Web瀏覽器的儲存空間當中。如此一來,本來存入程式碼當中的資料,就不會因重新整理頁面或者關閉瀏覽器而...

2018-01-03 ‧ 由 王郁翔 分享
DAY 16

JS30-Day16-Mouse Move Shadow

Day16-課題內容 轉眼間我們的 JS30 之路已經完成一半了!今天要來實作一個頁面的影分身之術。在頁面剛開啟時,只有中間一個字串'影分身之術!!',但是當我...

2018-01-04 ‧ 由 王郁翔 分享
DAY 17

JS30-Day17-Sort Without Articles

Day17-課題內容 進入JS30的第十七天,今天要將陣列中的資料做排序的動作。[1] 進入JS30-Day17 在草稿中作者已經給了一個陣列內容,我們的目的是...

2018-01-05 ‧ 由 王郁翔 分享
DAY 18

JS30-Day18-Add Up Times with Reduce

Day18-課題內容 進入JS30的第十八天,今天的課題中,我們也要來處理陣列中的資料,而這次處理的資料對象為時間,我們要將每個元素的時間加總起來。[1] 進入...

2018-01-06 ‧ 由 王郁翔 分享
DAY 19

JS30-Day19-Webcam Fun

Day14-課題內容 在今天的課題當中,我們要將鏡頭攝影機所取得的影像資料,轉到 canvas 的畫布上,再將 canvas 上的像素資料透過一些方法,將我們的...

2018-01-07 ‧ 由 王郁翔 分享
DAY 20

JS30-Day20-Speech Detection

Day20-課題內容 在昨天的課題中我們玩了一下視訊鏡頭,今天要來玩一下麥克風聲控![1]實作連結 Speech Recognition 透過 Web Spee...

2018-01-08 ‧ 由 王郁翔 分享