iT邦幫忙

鐵人檔案

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

新手也能懂的JS30 系列

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

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

JS30-Day1-Javascript Drum Kit

JS30以及文章簡介 JS30,是由加拿大工程師Wes Bos所建立一系列課程,課程中我們可以學到很多Javascript程式語言的實際應用,例如如何操作Doc...

2017-12-20 ‧ 由 王郁翔 分享
DAY 2

JS30-Day2-JS and CSS Clock

Day2-課題內容 進入JS30的第二天,今天我們要利用Javascript中的方法以及CSS屬性,在頁面上做出一個會轉動的虛擬時鐘。[1]實作連結一實作連結二...

2017-12-21 ‧ 由 王郁翔 分享
DAY 3

JS30-Day3-CSS Variables

Day3-課題內容 今天是JS30的第三天,這次的題目將會利用CSS變數,來變換我們頁面中照片的邊框大小、顏色以及模糊度。[1]實作連結 CSS變數 透過將CS...

2017-12-22 ‧ 由 王郁翔 分享
DAY 4

JS30-Day4-Array Cardio

Day4-課題內容 今天的題目當中,不會碰到任何跟頁面呈現有關的程式碼,而是將針對陣列Array於ECMAScript5中增加的新方法做進一步的認識。 ECMA...

2017-12-23 ‧ 由 王郁翔 分享
DAY 5

JS30-Day5-Flex Panels

Day5-課題內容 今天進入JS30的第五天,今天將透過非常酷炫的畫面特效,來認識CSS3中的Flex屬性。[1]實作連結 首先在作者給的範例當中,我們可以看到...

2017-12-24 ‧ 由 王郁翔 分享
DAY 6

JS30-Day6-Type Ahead

Day6-課題內容 進入JS30的第六天,今天要將第四天學到的陣列方法,結合正規表達式,實作出有篩選功能的表單頁面。在作者的範例中,當我們輸入英文字母時,下方將...

2017-12-25 ‧ 由 王郁翔 分享
DAY 7

JS30-Day7-Array Cardio 2

Day7-課題內容 今天的題目當中,將接續第四天Array Cardio中的內容,針對幾個沒有被應用到的陣列方法,在這個章節中練習,並且再介紹幾個常用的陣列方法...

2017-12-26 ‧ 由 王郁翔 分享
DAY 8

JS30-Day8-Fun with HTML5 Canvas

JS30-Day8-Fun with HTML5 Canvas Day8-課題內容 進入JS30的第八天,今天我們要透過HTML的<canvas>元...

2017-12-27 ‧ 由 王郁翔 分享
DAY 9

JS30-Day9-Dev Tools Domination

Day8-課題內容 今天的內容中要來深入學習console物件的相關方法。雖然我們一般都透過console.log,在開發者工具的console中印出我們想知道...

2017-12-28 ‧ 由 王郁翔 分享
DAY 10

JS30-Day10-Hold Shift to Check Multiple Checkboxes

Day10-課題內容 今天我們將透過click事件中的shift屬性以及陣列的觀念,來做出選取多個項目的功能。在作者的範例中,當勾選其中一個欄位之後,按著Shi...

2017-12-29 ‧ 由 王郁翔 分享