---
# System prepended metadata

title: html5筆記

---

# html5筆記

- 版號概念
3.6.0 原版
3.6.==1== 修bug
3.==7==.0 加強功能
==4==.0.0 大幅度修改

1. 建立js事件監聽，包含==物件、事件、處理函數==
```javascript=
1. html  <body onload = "doFirst()">  <<避免使用>>
2. js window.onload = doFirst;
3. js window.addEventListener("load", doFirst); <<w3c推薦>>

event -> load、click⋯⋯
evenhandler ->onload、onclick⋯⋯
```
2. 事件分類
- 滑鼠
    - mousedown
        - mousemove
        - mouseover -> 支援冒泡事件
        - mouseout -> 支援冒泡事件
        - mouseenter -> 沒有支援
        - mouseleave -> 沒有支援
    - mouseup
    - click
    - contextmenue
- 鍵盤
    - keydown
    - keyup
    - keypress
- 瀏覽器
    - resize
    - scroll
    - load
    - unload
    - beforeunload
    - copy
    - paste
    - cut
- 表單事件
    - submit
    - reset
    - focus
    - blur
    - change
    - input
    - select
3. 事件物件
    - 屬性
        - target
        - type
        - client X | Y
        - page X | Y
    - 方法
        - preventDefault()  >> 取消預設行為
        - stopPropagation() >> 阻止冒泡事件
4. 阻止事件物件
    > 只要有使用任何一個事件物件的屬性和方法，就要引用==事件物件「e」==
```javascript=
form.onreset = function(e){
    // 只要有使用任何一個事件物件的屬性和方法，就要引用事件物件
    e.target
    e.type
}
```
---
> 快捷鍵`option+上下鍵` -> 可以直接移動vscode中的code

```javascript=
HTML5的Video標籤

// 如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件
<video controls="controls"></video> 

// poster屬性可以改變影片預覽圖
<video poster=""></video> 
```
```bash=
自製播放器

# 方法一
    <video src="./movies/videoplayback.mp4" controls poster="../images/3ducks.png" width="640"></video>
    
# 方法二(推薦 比較彈性)
    <video controls id="">
        <source src="./movies/videoplayback.mp4">
        <source src="./movies/123.mp4">
        <source src="./movies/456.mp4">
        <source src="./movies/789.mp4">
    </video>
```
```javascript=
javascript語法

// 停止事件的默認動作
event.preventDefault() 

```
drag & drop 拖曳放下事件
- dragstart
- dragend
- dragenter
- dragover
- drop
拖曳依訂有這兩個事件(!一定要建)
- dragover
- drop

(!如果是拖曳功能記得要設定拖曳的範圍寬高！)

標籤沒有屬性值的話 可寫成=true
```bash=
<video controls></video>
# 寫成true
.controls="true"
```
```bash=
# 沒有上傳檔案的那個按鈕的時候就要用 .dataTransfer 因為沒有input給他抓資料
let file = e.dataTransfer.files[0];
```
新增物件
1. 建立標籤 crearElement
2. 建立標籤屬性 標籤.src="..."
3. 找到父節點，append進去 .appendChild .insertBefore
[節點選取語法.appendChild...](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild)



# Geolocation API

[window.navigato](https://ithelp.ithome.com.tw/articles/10235746)

Position.coords 是一個 Coordinates 物件的唯讀屬性，表示地理的特性：回傳的物件中包括位置、地球經緯度、海拔高度和速度，同時也包含著這些值的精準度訊息。
zoom 範圍 0~22
marker.set
layer >>紅點點
control
service >>路線規劃

```javascript=
function doFirst(){
    navigator.geolocation.getCurrentPosition(succCB);
}
function succCB(e){
    document.getElementById('position').innerHTML = `
    緯度：${e.coords.latitude} <br>
    經度：${e.coords.longitude} <br>
    準確度：${e.coords.accuracy}
    `
}
window.addEventListener('load',doFirst)
```
---

屬性或方法->駝峰式
local storage 儲存期間較長
session storage 儲存期間較短(關閉視窗就消失)

```javascript=
for(let key in man){
    // 印出key值
    conse.log(key)
    // 印出value值
    conse.log(man[key])
}
```
==key是常數 要用陣列表示法`man[car]`==
物件表示法`man.car`
