《Pro_HTML5_programming》閱讀筆記

看的是英文電子版的。沒有細看,先做個閱讀作爲索引

 

 

 
<!DOCTYPE html>
<mete charset="uft-8">
 
####################
## new sectioning element
####################
   * header
   * footer
   * section
   * article
   * aside
   * nav
 
####################
## document.querySelector
####################
   * querySelector()     - return the first element matches
   * querySelectorAll()  - return all elements founded
 
####################
## Canvas
####################
 
 
####################
## Audio and Video
####################
 
<audio controls src="test.ogg">Your browser does not support video.</audio>
 
<audio controls>
   <source src="a.ogg">
   <source src="b.mp3">
</audio>
//作爲背景音樂自動播放
<audio autoplay loop>
   <source src="a.ogg">
</audio>
 
支持瀏覽器是否支持
   var hasVideo = !!(document.createElement('video').canPlayType);
 
控件function
   * load()
   * play()
   * pause()
   * canPlayType(type)
控件只讀屬性(read-only attributes)
   * duration
   * paused
   * ended
   * startTime
   * error
   * currentSrc
可編輯屬性(scriptable attributes)
   * autoplay
   * loop
   * currentTime
   * controls
   * volume
   * muted
   * autobuffer
 
## 地理位置
   
navigator.geolocation
 
####################
## 通信API
####################
 
   postMessage
window.postMessage('Hello, world', 'http://www.exapmple.com/ ');
// dangerous
element.innerHTML = e.data;
// Better
elemenet.textContent = e.data;
 
// checking for browser support
if (typeof window.postMessage === 'undefined') {
}
 
 
## WebSocket API
 
url = 'ws://localhost:8080/echo';
w = new WebSocket(url);
 
w.onopen = function(){}
w.onmessage = function(){}
w.onclose = function(){}
 
####################
## Form API
####################
!!不可替代Server端驗證
 
HTML Forms vs. XForms
 
<input type="email">
<input type="tel">
<input type="url">
<input type="search">
<input type="range" min="10" max="20" step="5">
 
type:
   * number
   * color
   * datetime
   * datetime-local
   * time
   * date
   * week
   * month
 
attribute:
   * placeholder
   * autocomplete
   * autofocus
   * required
   * maxLength
 
<input type='emal'  list='cList'>
<datalist id='cList'>
   <option value='[email protected] ' label='x'>
   <option value='[email protected] ' label='y'>
</datalist>
 
//
document.getElementById("numInput").valueAsNumber(65);
 
Validation feedback
 
 
## Web Workders API
 
if (typeof Worker !== 'undefined') {}
 
work = new Workder('echoWorker.js');
 
####################
## Web Storage API
####################
 
if (window.sessionStorage){}
if (window.localStorage){}
 
window.sessionStorage.setItem('key', 'value');
window.sessionStorage.getItem('key');
 
window.sessionStorage.key = 'value';
window.sessionStorage.key;
 
interface Storage {
   readonly attribute unsigned long length;
   getter DOMString key(in unsigned long index);
   getter any getItem(in DOMString key);
   setter creator void setItem(in DOMString key, in any data);
   deleter void removeItem(in DOMString key);
   void clear();
}
 
####################
## Offline Web Application API
####################
if (window.applicationCache){}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章