Embed Size (px)
Citation preview
HTML5, part III – API, …Štěpán Bechynský, @stepanb
Developer Evangelist
Microsoft, Czech Republic
ECMAScript 5
Standard ECMA-262 http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-26
2.pdf Test: http://test262.ecmascript.org/ Results: http://en.wikipedia.org/wiki/ECMAScript#Conformance_tests
New array methods
Enhanced object model
Other computational methods and functions
Strict mode
Asynchronus Script Execution <script async src=“library.js"></script>
Official ECMAScript tests
# of failed tests
IE9 323
IE10 Developer Preview 7
Chrome 15 418
Firefox 7.0.1 187
Opera 11.52 3750
http://test262.ecmascript.org/Test Suite Ver.: ES5Number of Tests: 11016Test Suite Date: 2011-09-25Last run: 2011-11-01
Data URI
Embedding data in the context of a web page
Most common is tiny image embedded in a web page
Standalone web pages with graphics
Geolocation API
Location based on IP address, Wi-Fi, GSM or GPS
User must confirm access to location
<audio>, <video> and Javascript
You can write your own audio or video player
Independent on “build-in” controls
Offline capabilities
Offline storage localStorage sessionStorage Size 5 MB
Can’t be extended
Online and offline events
Application Cache API Manifest: <html manifest="appcache.manifest"> Object: window.applicationCache
Indexed Database API http://www.w3.org/TR/IndexedDB/
File API
Read data from files chosen by the user
New objects to represent data Blob, File, FileReader
New methods to access data readAsArrayBuffer readAsBinaryString readAsText readAsDataURL
Web Sockets API
Real-time duplex communication
First handshake uses HTTP protocol No problems with proxy, firewall, etc.
Small overhead
Needs socket server Internet Engineering Task Force (IETF)
Web Workers
Runs script on background
All communication to and from the worker thread is managed through messages
postMessage Onmessage
Can’t access DOM
Developer Tools contains Web Workers debugging support
var worker = new Worker("worker.js")worker.addEventListener("message", callback, false);worker.postMessage(myData);
onmessage = function (event) { postMessage(LongRunningCode(event.data));}
Drag and Drop
Attribute draggable true - The content can be dragged false - The content cannot be dragged auto - The content takes the default browser behavior (text, links, and
images are draggable; other elements are not)
Events dragstart dragover drop … dataTransfer property of event argument contains D&D information
setData getData clearData
Developer Tools
Internet Explorer 9 Developer Tools
Visual Studio 2010 SP1 Web Standards Update for Microsoft Visual Studio 2010 SP1
Visual Studio 2011
Expression Web 4 SP2
www.vyvijej.cz
HTML5.cz
Shromažďuje české zdroje
Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“
Resources
Books Introducing HTML5 by Bruce Lawson & Remy Sharp
W3C W3C HTML5 Specification – www.w3.org/TR/html5 HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htm Validator – validator.w3.org/
Microsoft Internet Explorer 9 and 10 Engineering Blog – blogs.msdn.com/ie/ Beauty Of The Web – www.beautyoftheweb.com/experience/ IE Test Drive – www.ietestdrive.com HTML5 Labs – html5labs.interoperabilitybridges.com/
