25. API
& API
draggable
dragstart DataTransfer
dropover event.preventDefault()
drop DataTransfer
event.stopPropagation()
26. API
<div id=”dragSrc” draggable> </div>
<div id=”dragDest”> </div>
dragSrc.addEventListener(“dragStart”, function(e) {
var dt = e.dataTransfer;
dt.setData(“text/plain”, “Hello”);
return true;
});
dragDest.addEventListener(“dragOver”, function(e) {
e.preventDefault();
return false;
});
dragDest.addEventListener(“drop”, function(e) {
var text = e.dataTransfer.getData(“text/plain”);
e.stopPropagation();
...
return false;
});
27. DOM API
Element.classList className
Document.getElementByClassName()
designMode execCommand() WYSIWYG
Microdata
role, aria-, contextmenu, hidden, data-*, contentEditable.....
... more and more
28. Open Web Platform API
Web Workers
Web Storage
Web Database
Web Sockets
29. Web
Content-Type: text/
cache-manifest
Web html manifest
URL : <html manifest=”hello.manifest”>
JavaScript
31. document
window.postMessage(message, targetOrigin)
onmessage
:
var iframe = ...
iframe.contentWindow.postMessage(“Hello”, “http://destdomain.com”);
:
onmessage = function(event) {
if (event.origin == “http://srcdomain.com”) {
var message = event.data;
...
}
}
32. Web Workers
UI
: new Worker(scriptUrl)
: worker.postMessage(message);
: worker.onmessage(event);
postMessage onmessage
SharedWorker
ui.js worker.js
worker.onmessage = onmessage = function(msg) {
function(msg) { ...
... postMessage(...)
} }
function a {
worker.postMessage(...)
33. Web Database
SQL
API API
API
API
var db = openDatabase(...)
db.transaction(function(tx) {
tx.executeSql(
“INSERT INTO Customer (NAME, AGE) “ +
“VALUES(?,?)”, [“Shiraishi”, 31],
function onSuccess(tx, rs) {
... ...
},
function onError(tx, error) {
34. Web Storage
LocalStorage
SessionStorage
localStorage.setItem(“key”, “value”);
var val = localStorage.getItem(“key”);
//
localStorage.key =“value”;
var val = localStorage.key;
35. Web Sockets
HTTP API
80(ws), 443(wss) HTTP/HTTPS
new WebSocket(url) postMessage() onmessage()
var ws = new WebSocket(“ws://example.com”);
ws.onmessage = function(message) {
...
}
ws.postMessage(“Hello”);
36. HTML Web
HTML5 API
Web
Canvas SVG UI
...
Let’s HTML5!