以下內容是根據讀完”Professional JavaScript for Web Developers 2nd Edition“這本書的心得而來。
持續更新中…
- querySelector() & querySelectorAll()
- 提供像CSS selector一般的方式來取得element物件,jQuery framework已經改以這兩個method來實作取得element的方法。速度上比自己用JavaScript去寫一個CSS selector parser快很多。
// get first element with a class of 'selected' var elm = document.querySelector('.selected'); // get all <strong> elements inside of <p> elements var elmList = document.querySelectorAll('p strong');
- classList property
- 存在於element,可用來對element做class屬性的操作。有add, remove, has, toggle四個methods。
- postMessage()
- 可用來做Cross-Document(iframe)之間的溝通。在HTML4,兩個不同的document之間是完全無法做溝通的。而HTML5提供了這個比較安全的做法,來達到資料交換的目的。來源document可以call這個method代入要傳送的資料及來源domain、port資訊等等。而接收方document會收到一個”message” event,可根據來源資訊來決定。
<iframe id="inner_page" src="http://test.domain/inner.html"></iframe>
// in main page var innerWin = document.getElementById('inner_page').contentWindow; // send a message, parameters: data, origin innerWin.postMessage('Thank you!', 'http://test.doamin');
// in inner.html EventUtil.addHandler(document, 'message', function(event) { if( event.origin.indexOf('test.domain') >= 0 ) { // display the data alert(event.data); // send a message back event.source.postMessage('You are welcome!', 'http://test.domain'); } });
- <video> & <audio>
- 用來做影片、音樂的播放。提供許多property及event可對影片及音樂播放做細微控制。
<!-- embed a video --> <video src="movie.mpg" id="myVideo">Video player not available</video> <!-- embed a audio --> <audio src="song.mp3" id="myAudio">Audio player not available</audio>
- <canvas>
- 可用來在Web Page上繪圖,包括fillRect, lineTo, fillText, drawImage…etc.等。目前除了IE外,其他Browser均有支援。詳見這裡。
- offline & online event
- HTML5新增了offline和online兩個event,可以用來偵測目前的網路連線狀態,而對使用者做不同的UI回應。開發者可以access navigator.online這個boolean值用來做判斷,true代表連線中,false代表連線失敗。
EventUtil.addHandler(window, 'offline', function() { // some codes to handle offline status }); EventUtil.addHandler(window, 'online', function() { // some codes to handle online status }); // make different response by online stauts when user click a trigger button $('triggerBtn').click(function() { if( navigator.online ) { // do something... } else { alert('The connection is lost, please check your network status.'); } });
- pushState()
- 這個method可以讓一個AJAX Web Application在某一個時間點塞入一個state object到history queue裡,讓使用者也可以按Back返回鍵回到上一步的狀態。
// add state to history stack history.pushState({mode: 'edit'}, 'Editing'); // listen for a chance in state EventUtil.addHandler(window, 'popstate', function(event) { var state = event.state; if( mode == 'edit' ) { // restore page to 'edit' state } });
- Database Storage
- HTML5提供了client端的database空間讓JavaScript code可自由存取使用,Web App因此可以做出更接近OS Native App般更豐富的功能。
// create database var db = window.openDatabase('TestDB', '1.0', 'My Test Database', 200000);
// create table db.transcation(function(tract) { var queryStr = 'CREATE TABLE Messages (id REAL UNIQUE, msg TEXT)'; // parameters: query string, query parameter, success callback, fail callback tract.executeSql(queryStr, [], function(tract, results) { // table create successfully, do something... }, function(tract, error) { // table create failed, do something... } ); });
// query data db.transcation(function(tract) { var queryStr = 'SELECT id, msg FROM Messages WHERE id=? and msg=?'; // parameters: query string, query parameter, success callback, fail callback tract.executeSql(queryStr, [queryId, queryMsg], function(tract, results) { for( var i=0; i<results.rows.length; i++ ) { var row = results.rows.item(i); alert(row.id + '=' + row.msg); } }, function(tract, error) { alert('the query cannot be done!'); } ); });
- Drag & Drop
- HTML5提供預設的drag and drop UI支援,所有的element均有一個draggable屬性來決定是否可被拖曳。而image, text和link這三種element的預設draggable值為true,其他為false,也可以手動去更改這個屬性值。而要被drop的element可以去監聽event: dragenter, dragover, dragleave, drop。也可以設定或取得event裡的dataTransfer object資料,和指定其dropEffect及effectAllowed兩個屬性。
- WebSocket
- 可以在Browser和Server之間打開一條Socket通道,做即時的資料傳輸。用以取代類似像Comet的技術。某些應用如: WebIM, 即時股票指數更新…等,就可以改用這個方式來實現。
// create socket connection var socket = new WebSocket('ws://test.domain/connect/'); // listen connection status as opened socket.onopen = function(event) { alert('Connection is ready'); }; // listen connection status as closed socket .onclose = function(event) { alert('Connection is closed'); }; // receive data from server socket.onmessage = function() { var data = event.data; // do something... }; // send data to server socket.send('fp=1');
// add 'selected' class name elm.classList.add('selected'); // remove 'selected' class name elm.classList.remove('selected'); // check the element has 'selected' class name? if( elm.classList.has('selected') ) { // do something... } // switch the 'selected' class name on target element when user click trigger button (if target element has the class name then remove it, otherwise, add it) $('triggerBtn').click(function() { elm.classList.toggle('selected'); });
var dropElm = document.getElementById('my_drop_panel'); // listen dragenter EventUtil.addHandler(dropElm, 'dragenter', function(event) { // do something... });