JS30 是加拿大的獨立開發者 Wes Bos 設計的影片教學, 目的為鼓勵學習者跟著影片練習來融會貫通原生JS的各種概念. 由於自己在練習的過程中獲益良多, 深感其為優良讀物! 希望透過分享學習所得, 幫助到有需要的夥伴, 順便加深自己的印象, 好!
任務目標 自製一個影片播放器的介面, 內容將包含: 影片進度條: 進度條要能夠顯示影片播放進度, 進度條會自動跳轉到滑鼠點擊位置, 進度條會隨著滑鼠拖曳改變進...
緣起 Dudi來自印尼, 多年前和丈夫與孩子離別, 隻身一人飄洋過海來台打工, 奮鬥數年後終於事業有成. 遙想當年 Dudi 與丈夫約定, 事業有成時一定要讓他...
任務目標 如果一篇網頁文章長到需要滾動瀏覽器 Y 軸才能看完, 為了文章中的插圖能夠吸引讀者的注意,有時會希望滑鼠滑到圖片位置時, 圖片才出現。範例連結 今天就...
任務目標 能夠區別變數值在傳遞時是透過「複製參考」還是「複製值」。 重點整理 在撰寫JS程式碼時,常會有將值指定給變數一,再把變數一指定給變數二這種傳遞值的行為...
任務目標 製作一個待辦清單,該清單所儲存的待辦事項即使網頁關掉再重開,記錄仍是保存的。 作法 一個簡單的待辦清單架構如下 <div class="...
緣起 還記得 Dudi 嗎? 在 Day 12 , Dudi 始終沒有接收到來自家鄉的老公的回應,為此她倍感消沈,每日借酒澆愁,好不愉快。隨著酗酒的日子長了,...
任務目標 今天要來分類歌單!首先有一串存在陣列中的歌單,我們希望將歌單不考慮 "A" 、 "The" 、 "...
緣起 我們的好朋友,喧猴,有收藏影片跟分享影片的習慣。日積月累下來,喧猴也在自己的網頁上張貼了許多的影片。今天,喧猴心血來潮想要清點一下他所搜集的影片總時間長度...
任務目標 擷取視訊鏡頭得到的影片,實現按鍵快照、預覽照片及下載存檔。 作法 首先是HTML檔的架構,程式碼如下: <!--拍照鈕--> <di...
任務目標 接續昨天,這次要對擷取下來的影像做畫素操控,讓影像實現灰階、負片、左右翻轉、鏡像等各種光怪陸離的效果!像這樣。 作法 前情提要,昨天我們已經將視訊鏡頭...