JS30-Day20 & Day21 & Day22 练习重点整理

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 事件

mouseenter: 滑鼠移入元素触发mouseleave: 滑鼠移出元素触发mouseover: 滑鼠移入元素触发，移入移出其子元素也会触发mouseout: 滑鼠移出元素触发，移入移出其子元素也会触发

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

3. 取得浏览器捲轴位置

window.scrollYwindow.scrollX

---

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30