系列文章
JS30-Day1-Javascript Drum Kit
JS30以及文章簡介 JS30，是由加拿大工程師Wes Bos所建立一系列課程，課程中我們可以學到很多Javascript程式語言的實際應用，例如如何操作Doc...
JS30-Day2-JS and CSS Clock
Day2-課題內容 進入JS30的第二天，今天我們要利用Javascript中的方法以及CSS屬性，在頁面上做出一個會轉動的虛擬時鐘。[1]實作連結一實作連結二...
JS30-Day3-CSS Variables
Day3-課題內容 今天是JS30的第三天，這次的題目將會利用CSS變數，來變換我們頁面中照片的邊框大小、顏色以及模糊度。[1]實作連結 CSS變數 透過將CS...
JS30-Day4-Array Cardio
Day4-課題內容 今天的題目當中，不會碰到任何跟頁面呈現有關的程式碼，而是將針對陣列Array於ECMAScript5中增加的新方法做進一步的認識。 ECMA...
JS30-Day5-Flex Panels
Day5-課題內容 今天進入JS30的第五天，今天將透過非常酷炫的畫面特效，來認識CSS3中的Flex屬性。[1]實作連結 首先在作者給的範例當中，我們可以看到...
JS30-Day6-Type Ahead
Day6-課題內容 進入JS30的第六天，今天要將第四天學到的陣列方法，結合正規表達式，實作出有篩選功能的表單頁面。在作者的範例中，當我們輸入英文字母時，下方將...
JS30-Day7-Array Cardio 2
Day7-課題內容 今天的題目當中，將接續第四天Array Cardio中的內容，針對幾個沒有被應用到的陣列方法，在這個章節中練習，並且再介紹幾個常用的陣列方法...
JS30-Day8-Fun with HTML5 Canvas
JS30-Day8-Fun with HTML5 Canvas Day8-課題內容 進入JS30的第八天，今天我們要透過HTML的<canvas>元...
JS30-Day9-Dev Tools Domination
Day8-課題內容 今天的內容中要來深入學習console物件的相關方法。雖然我們一般都透過console.log，在開發者工具的console中印出我們想知道...
JS30-Day10-Hold Shift to Check Multiple Checkboxes
Day10-課題內容 今天我們將透過click事件中的shift屬性以及陣列的觀念，來做出選取多個項目的功能。在作者的範例中，當勾選其中一個欄位之後，按著Shi...