標題 Good Morning，其實是希望本系列能為 Functional Programming 學習雲霧中透進一絲微光 會寫本系列文章，主要是因為想要...
心得與感謝 感謝這次一起參加鐵人賽的好想工作室夥伴，真的覺得有跟你們一起參加才能寫完三十天。還要謝謝在這裡與在FB替我加油打氣的大家。也謝謝 Amos 跟我討論...
Day30-課題內容 終於來到 JS30的最後一天，在今天的課題中，我們將要使用一些之前所學的技能，在頁面上做出一個打地鼠的小遊戲。[1]實作連結 進入課題 要...
前一篇講了所有的選擇器，今天來說明一下 jQuery 基本的寫法，與幾個好用的 plugin。 寫法 $('CSS Selector').要做的事(); 例...
Day29-課題內容 在 JS30第二天的 JS & CSS Clock 中，我們利用Javascript中的 setInterval() 方法以及CS...
jQuery 是一個快數、小巧、功能豐富的 JavaScript Open Source library，主要是用來操作 DOM ，包含快速選取一個或多個來做一...
Day28-課題內容 在第十一天的課題Custom Video Player中，我們製作了一個客製化影片播放器，而在今天的內容當中，我們要利用移動滑鼠來控制影片...
CSS3 中有兩個用來做動畫的屬性，一個是 Transition，另一個是 Animation 差異比較 CSS3 差異 Transition 在...
Day27-課題內容 JS30 進入倒數第四天，在今天的課題中，我們的目標是做出可以拖曳的目錄效果。[1]實作連結 進入課題 要做出拖曳的功能，我們要結合目前為...
多重背景與漸層背景是 CSS3 才開始有的背景屬性 瀏覽器適用前綴 Google Chrome 與 Apple Safari 使用 -webkit- Mozil...
Day26-課題內容 在今天的課題當中，我們要將第22天的課題 Follow Along Link HighLighter 聚光燈的效果，做進一步的利用。當我們...
W3C 寫道：content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。 因此，使用 ::before 和 ::after 一定要...
Day25-課題內容 在今天的課題當中，我們要針對常用的 EventTarget.addEventListener 做進一步的認識。[1] EventTarge...
先來個比較表 . 符號 . . 作用 偽類 : 不是元素 不會出現在 DOM tree 用於定義元素的特殊狀態 偽元素 :: 是元素 會出現在...
Day24-課題內容 進入JS30的倒數第七天，今天將透過捲動事件加上 CSS屬性的更動，讓我們的導覽列在即將滾出畫面的時候，可以固定在畫面最上方，而不會消失在...
在各家瀏覽器開始出現的時候，除了不同瀏覽器與 IE 各版本間的不相容需要使用 reset.css 或 normalize.css 來進行最初的調整之外，最讓人頭...
Day23-課題內容 在第20天的課題當中，我們透過 Web API 中的 SpeechRecognition 介面，將輸入的聲音轉成字串。而今天我們要透過另一...
Media Queries 中文翻為『媒體查詢』，作用在偵測輸出裝置，它是由一個媒體類型（media type）與零到多個用於檢查特定條件的媒體功能（media...
Day22-課題內容 在今天的課題當中，我們要透過滑鼠事件屬性以及 CSS 屬性，在頁面上做出聚光燈。[1]實作連結 Element.getBoundingCl...
為什麼會想介紹 CSS Reset 與 CSS normalize ？ 因為在很久很久以前（喂～）。咳！重來。 在 W3C 制訂 HTML 與 CSS 規格時，...
Day21-課題內容 在今天的課題當中，我們要透過 Geolocation API，取得我們目前位置的經緯度。[1]實作連結-大家可以把得到的經緯度貼在 goo...
系列目錄 初衷是想寫給新手的一些正確觀念，以及這一路以來脫離新手的重要觀念。對我來說的過程，是 30 天的 w3.org 之旅。幾乎一天一篇，很過癮，也很辛苦。...
在學習 CSS 的時候，一定會先認識什麼是 html element、什麼是 class、什麼是 id，什麼是 css 的 inline 寫法。了解基本的 cs...
Day20-課題內容 在昨天的課題中我們玩了一下視訊鏡頭，今天要來玩一下麥克風聲控！[1]實作連結 Speech Recognition 透過 Web Spee...
「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...
Day14-課題內容 在今天的課題當中，我們要將鏡頭攝影機所取得的影像資料，轉到 canvas 的畫布上，再將 canvas 上的像素資料透過一些方法，將我們的...
會使用 Google form 是因為在做簡易的網站時，如果需要聯絡我們之類的表單，又不想要麻煩工程師，那麼使用 Google form 會是一個很方便的方式。...
「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網...
在整個網站裡，form 表單會出現在不少地方，最常看到的是在聯絡我們那頁。 以聯絡我們來舉例，基本的表單如下： <form action="&q...
Day18-課題內容 進入JS30的第十八天，今天的課題中，我們也要來處理陣列中的資料，而這次處理的資料對象為時間，我們要將每個元素的時間加總起來。[1] 進入...
LeeBoy
小艾 ( Cami )
王郁翔
Chris
iThome鐵人賽
看影片追技術