H5標準提供哪些新的API

地理定位API

navigator.geolocation 對象

• getCurrentPosition(callback, errCallback, options) 獲取當前位置
• watchPosition(callback, errCallback, options) 實時獲取位置
• clearWatch() 中止監控位置變化

position對象（獲取位置成功後，後調函數中的獲得的參數）

• timestamp 獲取位置時的時間戳
• coords 包含座標信息的對象
  • latitude 緯度
  • longitude 經度
  • altitude 海拔
  • heading 前進方向
  • speed 速度

error對象 （獲取位置失敗，回調函數獲得的參數）

• code
• message

選項（getCurrentPosition 和 watchPosition 第三參數）

• timeout
• maximumAge 緩存時間
• enableHighAccuracy 是否最佳

多媒體API

video/audio 的dom對象

track 標籤的用法

拖放API

拖拽屬性

• draggable （true/false）

拖拽事件

• dragstart 被拖拽元素 開始拖拽
• dragend 被拖拽元素 結束拖拽
• drag 被拖拽元素 拖拽過程不停觸發
• dragenter 目標元素 進入目標元素
• dragleave 目標元素 離開目標元素
• dragover 目標元素 在目標元素內 不停觸發
• drop 目標元素 在目標元素內結束

dragEvent

• dataTransfer 數據傳遞
  • setData()
  • getData()

文件API

概述

• H5容許JS有條件的讀取客戶端文件
• 容許讀取的文件：1.待上傳的文件 2,拖進瀏覽器的文件

FileList對象

• 由File對象構成的集合 （類數組對象）

File對象

• name
• size
• type
• lastModified
• lastMOdifiedDate

FileReader對象

• 方法
  • readAsText()
  • readAsDataURL()
• 屬性
  • error
  • readyState
  • result
• 事件
  • onload
  • onloadstart
  • onloadend
  • oneror
  • onabort
  • onprogress

XHR2

概述

• XMLHttpRequest 對象， 用於發起http請求
• H5標準新增了更多的屬性和方法和事件

FormData

• 用來獲取表單數據
• http請求（post方式）， 請求體 編碼方式 application/x-www-form-urlencoded ||| multipart/form-data
• XMLHttpRequiest默認的請求體編碼方式 multipart/form-data
• 建立FormData對象能夠把form元素做爲參數，也能夠沒有參數建立空的formdata
• FormData對象調用append() 在原來內容基礎上添加新的內容

XMLHTTPRequst對象 新增的屬性、方法、事件

• 方法
  • open()
  • send()
  • abort()
• 屬性
  • responseText
  • responseXML
  • readyState
  • status
• 事件
  • onreadystatechange

progressEvent

• loaded
• total
• lengthComputable 長度是否可計算

XMLHttpRequestUpload

• onload
• onloadstart
• onloadend
• onprogress
• onerror
• onabort
• ontimeout

HTML5新增API

canvas

• 可視化數據
• 特效 banner
• 遊戲
• 模擬器(在線PS、在線編輯器)
• 地圖

SVG

定義

矢量圖工具， 繪圖
SVG在H5標準以前就有了， IE對SVG的兼容性很是好

svg與canvas區別

• canvas位圖， svg是矢量圖
• canvas使用JavaScrpt繪圖， svg使用XML來繪圖
• canvas不支持事件（藉助庫） svg支持事件

svg的應用領域

• 矢量圖標
• 地圖

SVG的使用

• <svg>
• <rect>
• <circle>
• <line>
• <path>
• <ellipse>
• <polygon>
• .....

HTML中使用SVG

• 在html中直接寫 <svg>
• <embed src="" type="image/svg+xml" width="" height="">
• <object data="" type="image/svg+xml" width="" height="">
• <iframe src="">

地理定位 geolocation

navigator.gentlocation

• getCurrentPosition(successCallback, errorCallback, options) 獲取當前的地理位置
• watchPosition(successCallback, errorCallback, options) 監聽地理位置變化
• clearWatch() 中止位置監聽

position對象

獲取位置成功會調用 successCallback回調函數， 自動接收position對象

• coords

  • longitude 維度
  • latitude 精度
  • altitude 海拔
  • handing 前進方向
  • speed 速度
  • altitudeAccuracy 海拔經度
  • accuracy 座標經度

• timestamp 時間戳

error對象

獲取位置失敗，調用errorCallback回調，調用 error對象

• code 錯誤代碼
• message 錯誤信息

選項 options

• timeout 超時時間
• enableHighAccuracy 是否最優
• maxmunAge 最大緩存時間

注意

• chrome瀏覽器只有在https方式下打開的網頁才能獲取地理位置
• 手上上的大部分瀏覽器，微信 也要求https 才能獲取位置

多媒體

相關標籤

• <video> 視頻
• <audio> 音頻
• <source>
• <track>

DOM(video/audio)

• 屬性
  • volume 音量
  • muted 是否靜音
  • ....
• 方法
  • play()
  • pause()
  • .....
• 事件
  • onplay
  • ....

視頻插件

• ckplayer
• jplayer
• flowplayer
• video.js
• flv.js

拖拽

屬性

• draggable 設置爲true 元素就能夠被拖拽

事件

• ondrag
• ondragstart
• ondragend
• ondragenter
• ondragleave
• ondragover
• ondrop

dataTransfer

• 獲取 是dragEvent的屬性
• getData()
• setData() 拖拽實例