JS30-Day20-Native Speech Recognition

一個可以透過語音輸入文字的實作

重點整理

1. 建立語音辨識的物件

SpeechRecognition 為一個 Web Speech API

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

2. interimResults 設定語音輸入的是否會立即辨試

範例:

recognition.interimResults = true;

3. result 事件

當 SpeechRecognition 回傳結果(文字或段落)時觸發

4. end 事件

當 SpeechRecognition 的連接中斷(不再說話時)觸發

5. HTML 屬性: contenteditable

加上這個屬性之後，該 DOM 元素可以像 input 標籤一樣被編輯

<div class="words" contenteditable="true"></div>

JS30-Day21-Geolocation based Speedometer and Compass

利用取得使用者位置來顯示方向和速度的一個實作

重點整理

1. Navigator.geolocation

這是用來取得使用者位置資訊的 Web API，在此實作中搭配了 watchPosition() 方法來監控使用者位置

navigator.geolocation.watchPosition((data) => {
  // do something...
}, (err) => {
  // do something...
});

JS30-Day22-Follow Along Links

一個 hover 連結時會出現效果的實作

重點整理

1. element.getBoundingClientRect()

此方法會回傳選擇到的 DOM 元素的大小和位置

範例:

const linkCoords = this.getBoundingClientRect();

2. 補充: mouse 事件

1. mouseenter: 滑鼠移入元素觸發
2. mouseleave: 滑鼠移出元素觸發
3. mouseover: 滑鼠移入元素觸發，移入移出其子元素也會觸發
4. mouseout: 滑鼠移出元素觸發，移入移出其子元素也會觸發

範例: 可以打開 codepen console 玩玩看
https://codepen.io/a90100/pen/abOKgMR?editors=1011

3. 取得瀏覽器捲軸位置

window.scrollY
window.scrollX

全部練習的程式碼都在此連結:
https://github.com/a90100/JavaScript30