---
tags: HTML5
---

# [補充連結] HTML5 補充

## HTML5 張互賓老師的教材

先放老師的教材網站：
* https://docs.webmix.cc/html5/

往網址追可以發現老師的網站，甚至也有別的教材（裡面有 JavaScript 基礎的，有興趣的應該可以補）：
* http://webmix.cc/pages/tutorials

搭配互賓老師的教材章節分類一下：

## 7. File
* （官方文件）[Working Draft: File API W3C](https://www.w3.org/TR/FileAPI/)
* [MDN Web Docs: 在網頁應用程式中使用本地檔案](https://developer.mozilla.org/zh-TW/docs/Web/API/File/Using_files_from_web_applications)
* （推薦閱讀）[石頭閒語: HTML5 - File API 簡易教學](https://www.rocksaying.tw/archives/15328315.html)

### `input[type="file"]` 的 onchange 事件
`input[type="file"]` 的 onchange 事件會透過事件物件（function 的第一個參數，常用 `e`）監聽的 target（`e.target`，其實就是被監聽的節點本身［`this`］）取得一個檔案陣列 `e.target.files`，單檔選取時也是，要直接取得檔案必須搭配索引值。

假設 `input[type="file"]` 元素被抓取到、並被存取於變數 `file` 中，對它進行 onchange 事件監聽，也就是：
* `file.addEventListener("change", function(e) {...})`
* `file.onchange = function(e) {...}`

發生 onchange 事件時可以用以下 3 種方式取得檔案：
* `e.target.files[0]`
* `this.files[0]`
* `file.files[0]`

### FileReader 物件 `readAsXxx()` 函式的結果
FileReader 物件用 `readAsXxx()` 方法讀取檔案進來，必須以 `onload` 事件確認 FileReader 物件已將檔案讀取完成後，才能去取得檔案。

onload 事件監聽的 `e.target` 是 FileReader 物件，而這個物件用 `readAsXxx(...)` 方法讀取檔案的結果則會用存在 FileReader 物件的屬性 `result`中。

假設建立一個 FileReader 物件 `var file_reader = new FileReader();` 用 `readAsXxx(Ooo)` 讀取，並監聽 FileReader 物件是否讀取完成，也就是：
* `file_reader.addEventListener("load", function(e) {...})`
* `file_reader.onload = function(e) {...}`

讀取完發生`onload` 事件時，用以下 3 種方式都可以取得讀完的檔案：
* `e.target.result`
* `this.result`
* `file_reader.result`

## 8. Drag and Drop
### 拖曳區塊的 ondrop 事件
#### 1. 停用預設行為
`ondrop` 事件必須以事件物件的方法停用預設行為，否則拉入檔案時會自動進行預設行為（彈出新分頁開啟該檔案）。
* `e.preventDefault()`

#### 2. 取得檔案
ondrop 事件物件的 target 指的是被監聽的節點本身，停用預設行為後拖曳進來的檔案，必須透過事件的 dataTransfer（`e.dataTransfer`）獲得一個檔案陣列 `e.dataTransfer.files`，再搭配索引值才能直接取得。>

假設想要拖曳檔案進來的 div 元素被抓取到、並被存取於變數 `drop_zone` 中，對它進行 ondrop 事件監聽，也就是：
* `drop_zone.addEventListener("drop", function(e) {...})`
* `drop_zone.ondrop = function(e) {...}`

發生 ondrop 事件時可以用以下方式取得檔案：
* `e.dataTransfer.files[0]`

就只有這種方式，因為檔案是以陣列形式存取在 `e.dataTransfer` 的 `files` 中， 而 `e.dataTransfer` 並不是指被監聽的元素 `drop_zone`，也就不會是 `this`。

## 10. Web Worker

### Worker 物件的 onmessage 事件

Worker 物件的 `postMessage(...)` 函式，會使 Worker 發生 onmessage 事件，並儲存檔案於 Worker 物件的 `data` 屬性中。

所以需要在主執行緒監聽 Worker 物件是否有回傳訊息，假設建立新的 Worker 物件去執行指定的 js 檔：
* `var work = new Worker("檔案位置/執行緒名稱.js")`

可以用以下兩個方式監聽：
* `worker.addEventListener("message", function (e) {...})`
* `worker.onmessage = function(e) {...}`

一直重提的概念：事件觸發去執行的 function，第一個參數（通常用 `e`），代表的是**事件本身**，也就是 onmessage 事件，它會有一個 `data` 屬性，存放被傳來的訊息（可以是任何東西，在作業中是倒數的變數 `i`）。所以要取得透過 `postMessage(...)` 傳來的參數，可以用以下的方法：
* `e.data`

## 其他、共用
### 新增 DOM 元素、插入/替換/刪除節點
1. [MDN Web Docs: Document.createElement()](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/createElement#語法)
2. [MDN Web Docs: Node 方法](https://developer.mozilla.org/zh-CN/docs/Web/API/Node#方法)
appendChild()、insertBefore()、replaceChild()、removeChild()
3. [JS常見DOM節點操作示例【建立 ，插入，刪除，複製，查詢】](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/200101/)
4. [MDN Web Docs: Element.insertAdjacentHTML()](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentHTML)