로드중...
Web Workers
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// 작업을 진행하고, 작업이 끝나면 postMessage 호출.
self.postMessage("recv'd: " + event.data);
}; // 기본JS는 싱글쓰레드(setTimeout),Web Worker는 다중쓰레드,DOM접근불가 단순 계산용
Loading Route...
경로찾기 버튼을 누르고 맵을 드래그해보세요. (Workers를 사용할때만 가능합니다)
WebSocket
var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
웹에서의 Full-duplex, bi-directional 통신:
서버/클라이언트가 아무때나/동시에도 데이타 전송가능.
HTTP 헤더없에 데이터만 전송되므로 네트워 트래픽이 효율적이다.
Use the echo demo below to test a WebSocket connection from your browser.
Both the message you send and the response you receive travel over the same WebSocket connection.
Location:
Message:
Output:
Demo powered by 
서버측은 따로 구현필요,기존 웹서버 확장/새로운 서비스들이 등장 (Node.js,phpwebsocket)
Native Drag & Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
- 텍스트 선택후 드래그
(원본텍스트 드롭) - 텍스트 선택후 드래그
(드롭된 텍스트가 원본과 다름)
원본 데이타
드롭 하는곳!
이벤트 기반의 드래그 & 드롭 메커니즘 드래그 가능하게 만들려면 - draggable 이라는 속성만 추가하면 됨 <img src='aa' draggable /> drag , drop , dragstart , dragend , dragenter , dragleave , dragover 이벤트 아이폰은 touchStart,touchEnd,touchMove,touchCancel 이벤트도 따로있음 (멀티터치 지원) gestureStart , gestureEnd , gestureChange 형태로 제스쳐도 지원.
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
});
New Semantic Tags
구글이 2005년에 10억개 이상의 웹페이지를 분석한 결과 가장 많이 쓰는 클래스 이름 20개
|
Microdata
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
구글 검색엔진이 인식하는 Microdata 스펙 http://www.data-vocabulary.org/ Event , Organization , Person , Product , Review