鐵人檔案
JS30 是加拿大的獨立開發者 Wes Bos 設計的影片教學, 目的為鼓勵學習者跟著影片練習來融會貫通原生JS的各種概念. 由於自己在練習的過程中獲益良多, 深感其為優良讀物! 希望透過分享學習所得, 幫助到有需要的夥伴, 順便加深自己的印象, 好!
緣起 記得在果王大賽中落選，因此憤憤不平而決定撼動整個農業界的老樹猴嗎？（詳情請見 Day4 、 Day6 ）。為了實現大陰謀，他整整計畫了十五篇之久，決定踏出...
任務目標 製作一個會強調關鍵字的標記，當滑鼠移到某個關鍵字上頭時，標記會從畫面上追隨該關鍵字。範例連結 作法 要讓關鍵字標記真的有追隨過去的效果，只好創造出一個...
任務目標 使用語音合成 API 建立一台語音翻譯機。範例連結 作法 在 Day 21 有提到 Web Speech API 分成聲音轉字串的語音辨識 (Spee...
任務目標 讓網頁的導覽列一碰到瀏覽器視窗的頂部時便會黏在上面，移開時便會恢復原狀。範例連結 作法 HTML架構如下： <!-- 導覽列上方有固定高度的大圖...
任務目標 明白事件同時觸發時的先後順序。 重點整理 先了解可能同時觸發事件的狀況，下面是爺元素、父元素、子元素，一個包一個，祖孫三代齊聚一堂。加了一些 CSS...
任務目標 滑鼠切換到導覽列的不同選項時，會顯示該選項的下拉式清單，此外，下拉式清單會以「移動」的方式切換。範例連結 作法 HTML 標籤如下。 <nav...
任務目標 點選物件、拖曳滑鼠讓該物件滑動。範例連結 作法 以下是 HTML 架構。 <div class="items">...
任務目標 做一條控制影片播放速度的調節器，滑鼠在上面滑動就能夠改變播放速度。範例連結 作法 運用到的概念和 Day 11 的影片播放條很像。差別在於這次直接以滑...
任務目標 今天要來寫個倒數計時器，這也象徵著鐵人賽的倒數。 作法 HTML 架構如下： <div class="timer">...
任務目標 今天是最後一天！就以 JS 30 最後一篇打地鼠作結。範例連結 作法 首先是 HTML 的架構。 <!-- 計分板 --> <...
