鐵人檔案
這次的30天系列文內容主要是JavaScript30(https://javascript30.com/)的自主學習筆記，紀錄每堂課的重點。目的是強迫自己吸收新知，希望30天後能夠有所成長，GOGOGO~
今天要為各位介紹的是一個很屌的實作–「語音辨識」。只要在網頁開啟麥克風功能，接著講的任何話都能夠被即時紀錄成文字，顯示在畫面上，從此不需聽錄音寫會議紀錄。若講到...
今天要做的是羅盤+速度顯示介面，那這網頁必須透過手機開啟才有意義，因為手機才有羅盤跟加速度儀這些硬體設備。所以當你拿著手機開啟網頁，羅盤就會根據手機陀螺儀的方位...
今天的實作又是要練習一種網頁特效，而這堂課其實只是之後某堂課的前導，所以不會太難，各位可以期待一下幾天後的進階版。而這次的練習是讓滑鼠在頁面上移動到特定元素時，...
前幾天我們做了語音轉文字，而今天我們要做的是文字變語音。在介面上我們可以選擇發音語言、發音速度以及語調。同時也能自訂文字內容，播放語音跟暫停。實作範例如下：...
今天的實作又是一個常見的網頁特效。我們直接點進下方實作範例，各位就能夠明白今天的練習內容。如同範例，常常我們進入頁面後，畫面上方是一個大banner，用來放最新...
今天的課程是要學習eventListener的幾個參數及函式，分別是Capture、Propagation、Bubbling以及Once。這次練習也是十分簡單，...
今天的實作是接續第二十二堂的Follow Along Link Highlighter，算是他的進階版。而我們要做的效果是個非常常見且實用又美觀的下拉選單，他可...
今天要實作的是一種常見的互動效果，「點擊並拖曳」。大家可以在下面實作範例中操作，按住滑鼠左鍵，將這串數字列表左右移動。 邏輯流程 監聽mousedown事件...
既然這系列叫JS30，就應該要有30堂課，但由於我第一天寫了個序，導致後面只剩29篇的quotaㄏㄏ。所以今天買一送一，給各位兩個實作，分別是影片速度控制器跟倒...
終於來到最後一堂課，而今天要做的是一個小遊戲—「打地鼠」。點選左邊的按鈕可以開始遊戲，遊戲時間為十秒，而上方會顯示你擊中的次數。實作範例如下： 邏輯流程 產...
