7. html5 api

1. Drag and Drop
2. application cache
3. web storage
4. web worker
5. geolocation

•1999년에 이미 마이크로소프트사의 인터넷 익스플로러에서에서
구현했던 기능.
•HTML5에서 API를 이용하여 구현하고 있기 때문에 다른 애플리케이션과
데이터를 주고받기 쉬워졌고 그만큼 애플리케이션 개발이 쉬워졌다.
•페이지 안에서 콘텐츠 이동, 페이지 사이, 페이지와 다른 프로그램
사이에도 드래그 가능
•드래그 대상, 드롭 대상, 이동할 콘텐츠 정보 등 필요
•웹 환경에서는 지금까지 전용 API는 제공되지 않고 유사 구현을 위해
복잡한 자바스크립트
이벤트(mouse 관련 이벤트를 직접 구현함)를 다루어야 했다
http://html5demos.com/drag

데이터 유형
데이터 유형을 나타내는데 임의로 데이터 유형을 정의해서 사용할 수도 있지만
MIME 문자열을 이용할 수도 있다.
다른 애플리케이션과 데이터를 주고받을 수 있다.
예) 메일에 파일을 첨부할 때 시스템에 있는 파일을 손쉽게 메일로 드래그해서
첨부할 수 있다.
•text/plain 또는 text : 단순 문자열
•text/uri-list : 사이트 주소(URL). 주소가 하나일 경우 간단하게 URL이라고 쓰기도
한다.
•file : 다른 애플리케이션에 파일을 드래그앤드롭할 때 사용한다.

5Do it! HTML5+CSS3
IE의 임시 인터넷 파일
한번 접속했었던 사이트의 이미지,
미디어 복사본 저장
애플리케이션 캐시와 비슷한 개념
오프라인 사용이 불가능

6Do it! HTML5+CSS3
웹에 접속할 수 없는 상황에서도 애플리케이션 실행되어야.
오프라인 브라우징 : 오프라인 상태에서도 사용자가 사이트를 둘러볼 수 있다.
속도 : 캐시된 리소스들이 로컬에 있기 때문에 좀더 빠르게 로딩할 수 있다.
서버 로딩 줄임 : 리소스 변경이 있을 경우에만 서버에서 리소스를 다운로드하면
된다.
<장점>

애플리케이션 캐시
manifest 파일
자바스크립트 UI
캐시해야 할 리소스를 나열한 텍스트 파일
캐시한 파일을 실행하고 업데이트할 수 있도록 프로그래밍된
인터페이스

8Do it! HTML5+CSS3
CACHE MANIFEST
# VERSION 10
NETWORK:
http://robertnyman.com/html5/offline/offline.html
CACHE:
offline.html
base.css
FALLBACK:
online.css offline.css
<manifest 파일>

9Do it! HTML5+CSS3
CACHE MANIFEST
# VERSION 10
NETWORK:
CACHE:
offline.html
base.css
FALLBACK:
<manifest 파일>
온라인일 때 액세스할 파일

10Do it! HTML5+CSS3
CACHE MANIFEST
# VERSION 10
NETWORK:
CACHE:
offline.html
base.css
FALLBACK:
오프라인일 때 액세스할 파일
<manifest 파일>

11Do it! HTML5+CSS3
CACHE MANIFEST
# VERSION 10
NETWORK:
CACHE:
offline.html
base.css
FALLBACK:
<manifest 파일>
지정한 파일이 없을 경우
사용할 파일

12Do it! HTML5+CSS3
<html manifest=“offline.manifest”>
• 애플리케이션 캐시가 만들어지면 페이지가 한번 로딩된 후로는 리소스가 자동으로
캐시에 저장됨.
• manifest 파일이 수정되었을 경우에만 서버로부터 파일을 가져옴.
• (IE 임시 인터넷 파일은 사이트에 접속할 때마다 임시 인터넷 파일을 갱신함)
서버에서 MIME 타입을 추가해야 함

13Do it! HTML5+CSS3
캐시 자동 업데이트
•manifest 파일을 수정하면 애플리케이션 캐시를 자동으로 업데이트한다
•manifest 파일에는 여러 리소스 파일이 나열되어 있는데 리소스 파일이
수정된 것은 manifest 파일과는 상관이 없으므로 리소스 파일이
수정됐다고 해서 애플리케이션 캐시가 자동 업데이트되지는 않는다.
•이전 버전과 비교해 봐서 manifest 파일의 내용이 달라진게 없다면 이
경우에도 애플리케이션 캐시는 자동 업데이트 되지 않는다.
•manifest 파일의 수정 날짜를 바꾸는 것 역시도 업데이트로 취급하지
않는다.
•애플리케이션 캐시를 자동 업데이트하려면 반드시 manifest 파일의
내용을 수정해야 한다.

CACHE MANIFEST
# VERSION 10
CACHE:
offline.html
base.css
FALLBACK:
offline.manifest
.connectivity {
color: #fff;
background: green; padding:
10px;
}
.connectivity {
color: #fff;
background: red; padding: 30px;
}
online.css
offline.css

오프라인에서 접속하면 캐시에 있는 내용, 즉 manifest 파일에서 지정한
offline.css 파일의 내용을 읽어오게 되어, 그안에서 지정한대로 주황색의
가로줄을 표시한다.

“클라이언트에 데이터를 저장한다”
'키/ 값' 쌍으로 데이터를 저장하고 키를 기반으로
데이터를 조회한다.
영원히 저장할 수 있는 공간과 임시로 저장할 수 있는
공간을 따로 두고 있어서 필요에 맞게 선택할 수 있다.

17Do it! HTML5+CSS3
•같은 사이트에서 둘 이상의 탭을 열면 둘 이상의 트랜잭션을 추적하기 어렵다.
•보안 문제를 일으키기 쉽다.
•하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20 개이다. 그리고 하나의
사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB 로 제한되어 있다.
브라우저 쿠키(cookie)의 단점

18Do it! HTML5+CSS3
•쿠키와 마찬가지로 웹 스토리지의 데이터들도 웹 사이트를 서핑하고 난 후,
브라우저 탭을 닫고 난 후, 또는 브라우저를 빠져나오고 난 후에 저장된다.
•쿠키와 다른 점은 웹 스토리지의 데이터들은 사용자가 일부러 보내지 않는 한 웹
서버로 전송되지 않는다는 것이다. (경량 모바일에 적당)
•텍스트 뿐만 아니라 객체 정보를 저장할 수 있다.
•쿠키는 만료 일자가 있지만 웹 스토리지의 경우에는 만료일자가 없다.
•두 가지 스토리지 모두 도메인당 5MB 정도의 데이터를 저장할 수 있다.

웹 스토리지
세션 스토리지
로컬 스토리지
세션 스토리지
세션 동안의 데이터를 기억하고 있다.
탭(또는 창)을 닫으면 데이터가 삭제된다.
seesionStorage라는 객체를 이용해 저장하고 검색한다.
로컬 스토리지
세션이 끝나도 계속 기억하고 있다.
탭(또는 창)을 닫았다 열어도 데이터 남아있다.
localStorage라는 객체를 이용해 저장하고 검색한다.

sessionStorage.setItem(key, value);
저장
var item = sessionStorage.getItem(key);
검색
ex) sessionStorage.setItem(1, ‘이것은 예제 문장입니다’);
ex) var item=sessionStorage.getItem(1);
alert(item);
localStorage.setItem(key, value);
var item = localStorage.getItem(key);

sessionStorage.removeItem(key);
삭제
sessionStroage.clear();
모두 삭제
localStorage.removeItem(key);
localStroage.clear();

속성 설명
storageArea 스토리지 유형(세션인지 로컬인지) 표시
key 변경된 키
oldValue 키의 이전 값
newValue 키의 새로운 값
url 키가 변경된 페이지의 URL

<body>
<h2>세션 스토리지(Session Storage)</h2>
<input type="text" name="" value="" id="first”>
<button onclick="javascript:savetheSession();">저장!</button>
<div id="displaysession">비어있음</div>
<h2>로컬 스토리지(Local Storage)</h2>
<input type="text" name="" value="" id="second”>
<button onClick="jascript:savetheLocal();">저장!</button>
<div id="displaylocal">비어있음</div>
</div>
</body>

28Do it! HTML5+CSS3
window.onload = function(){
gettheSession(); //세션 스토리지 데이터 가져오기
gettheLocal(); //로컬 스토리지 데이터 가져오기
};
결과보기

29Do it! HTML5+CSS3
기존 웹 페이지는 단일 쓰레드 모드
 오래 걸리는 스크립트를 수행하면 기다려야 한다.
 다른 UI 작업을 할 수 없다.
But, 웹 워커를 사용하면
웹 페이지에서도 멀티 쓰레드 가능
 오래 걸리는 쓰레드를 실행하는 동안, 백그라운드 쓰레드에서 스크립트 실행

31Do it! HTML5+CSS3
시간이 오래 걸리는 작업이라면 워커에게 부탁해!
예) 복잡한 수학적 계산 작업, 리소스에 대한 액세스 작업
UI 쓰레드에 방해를 받지 않고 계속 수행해야 하는 작업

32Do it! HTML5+CSS3
① 워커 만들기
② 워커에 메시지 보내기
③ 다른 작업을 함
③ 워커에서 메시지 받음
④ 워커 실행
⑤ 실행이 끝나면 메시지 보내기
…..
⑥ 워커로부터 메시지 받음

웹워커를 실행하지 않은 파일 웹워커를 실행한 파일

<body>
<p>
<label for="worker-start-value">
<strong>Start value</strong>
</label><br>
<input type="text" id="worker-start-value" value="0">
</p>
<p>
<input id="start-worker" type="button" value="Start Worker">
<input id="stop-worker" type="button" value="Stop Worker">
</p>
<h3>Web Worker results:</h3>
<p id="worker-results"> (not started yet)</p>
</body>

35Do it! HTML5+CSS3
웹 워커는 Worker 객체를 통해 실행된다.
워커를 만들려면 워커 쓰레드를 실행할 스크립트 파일의 경로 지정
<script>
var worker;
function createWorker () {
worker = new Worker("worker.js");
}

36Do it! HTML5+CSS3
워커에 메시지를 보낼 때는 postMessage 메서드를 호출
document.getElementById("start-worker").onclick = function ()
{
createWorker();
worker.postMessage(document.getElementById("worker-
start-value").value);
}

37Do it! HTML5+CSS3
•워커에서 onmessage 이벤트 핸들러로 받는다.
•워커에서 실행할 파일(worker.js) 파일의 맨 처음에서
onmessage를 이용해 크리에이터에서 보낸 이벤트를 받는다.
(worker.js 파일)
onmessage = function (event) {
var i=event.data;
for (n=1000001; i<n; i++) {
postMessage(i);
};
};

38Do it! HTML5+CSS3
워커에서 필요한 작업을 모두 마치면 워커에서 크리에이터로
결과값을 보내야 한다.
postMessage 메서드를 사용합니다.
(worker.js 파일)
onmessage = function (event) {
var i=event.data;
for (n=1000001; i<n; i++) {
postMessage(i);
};
};

39Do it! HTML5+CSS3
크리에이터에서 onmessage 이벤트 핸들러를 사용한다.
worker.onmessage = function (event) {
document.getElementById("worker-results").innerHTML =
event.data;
};

40Do it! HTML5+CSS3
워커에서 런타임 오류가 발생하면 onerror 이벤트 핸들러가 호출된다.
worker.onerror = function (event) {
document.getElementById("worker-results").innerHTML = "An
error occurred";
};

41Do it! HTML5+CSS3
워커를 중간에 종료하려면(“stop worker” 버튼을 누르면) 워커의
terminate 메서드를 호출한다.
워커 쓰레드는 작업을 종료하지 않은 상태에서 멈춘다.
document.getElementById("stop-worker").onclick = function () {
if (worker) {
worker.terminate();
}
};

42Do it! HTML5+CSS3
현재 위치에 대한 위도, 경도 같은 위치 정보를 얻을 수 있다.
HTML 5 는 위치 정보와 관련한 Geolocation 스펙을 포함하고 있다
(엄밀히 말하자면 이 스펙은 HTML Working Group 과 분리되어
있는 Geolocation Working Group에 의해 표준화가 진행되고 있다고
한다)

http://caniuse.com
그리고 아래는 http://diveintohtml5.org/geolocation.html 에서 발췌한 브라우저 지원현황이다
아래 표를 보면 아이폰이나 안드로이드와 같은 모바일 환경에서도Geolocation을 지원한다고 나와있다
Geolocation 자체가 장치의 위치정보를 이용하는 것이기에 모바일 장치의 지원은 더 자연스럽다
(참고: 오페라 10.6 이후 지원됨)

위치 정보는 사용자 동의가 있어야 한다
웹 응용프로그램이 나의 정보를 이렇게 쉽게 얻어 갈 수 있는 것인가?
만일 그렇다면 굉장한 사회적(?) 문제가 될 것이다
따라서 사용자의 위치 정보는 반드시 사용자의 허가를 받아서 수집할 수 있도록 되어있다
브라우저에서 Geolotion API를 이용해서 위치 정보를 액세스 하려고 하면,
아래 보는 바와같이 사전 동의를 구하게 된다.(파이어폭스 예)
만일 동의를 하지 않게 되면 나의 위치정보를 웹 응용프로그램이 알 수 없게 되는 것이다

45Do it! HTML5+CSS3
① 지오로케이션 서비스를 사용할 수 있는 브라우저인지 체크
if (navigator.gelocation) {
/* 지오로케이션 API 소스 작성 */
}
else {
alert("이 브라우저에서는 지오로케이션 서비스를 사용할 수 없습니다.");
}
② 현재 위치 확인 – getCurrentPosition 메서드
③ 현재 위치 계속 확인 – watchPosition 메서드
지오로케이션 API는 window.navigator 객체의 자식 객체인 geolocation 객체를
통해 실행된다.

사용자의 현재 위치를 알아내려면 getCurrentPoition 메서드 호출.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, onError);
navigator.geolocation.watchPosition(showPosition);
} else {
onError();
}
function showPosition(position) { .... }
function onError() { ... }

사용자 위치의 변화를 계속해서 추적하려면 watchPosition 메서드 이용
업데이트되는 위치 정보를 일정하게 호출하도록 설정한다.
정확한 값이 반환되지 않을 경우 오류 호출.
var watchID =
navigator.geoloacation.watchPosition(function(position) {
do_something(position.coords.latitude,position.coords.longitude);
});

48Do it! HTML5+CSS3
사용자 위치 설명 – position 객체 이용
timestamp : 위치를 가져온 시간
coords : nsIDOMGeoPositionCoords 객체를 이용해 좌표 표시
latitude 사용자 위치의 위도
longitude 사용자 위치의 경도
altitude 사용자 위치의 표고. 표고를 지원하지 않는 장비에서는 0
accuracy 위치 정보의 오차
altitudeAccuracy 표고 정보의 오차. 표고를 지원하지 않는 장비에서는 0
heading 사용자의 진행 방향
speed 사용자가 움직이는 속도. m/s로 표시
nsIDOMGeoPositionCoords 객체의 속성
address : 나라나 시, 거리 등 주소를 표시하는nsIDOMGeoPositionAddress
객체

getCurrentPositio 메서드나 watchPosition 메서드를 호출하는 동안 다음과
같이 오류 콜백을 실행할 수 있습니다.
function errorCallback(PositionError error);
필드 설명
code 다음의 에러 코드 중 하나
UNKNOWN_ERROR
인터페이스에 있는 다른 오류 코드로는 정의할 수 없는 오류로
인해 위치 인식 프로세스가 실패했을 때. (상수값 0)
PERMISSION_DENIED
애플리케이션이 지오로케이션 API를 사용할 권한이 없어서 위
치 인식 프로세스가 실패했을 때. (상수값 1)
POSITION_UNAVAILABLE
위치 인식 프로세스에 사용된 하나 이상의 위치 제공자가 내부
오류를 유발하여 프로세스가 실패했을 때. (상수값 2)
TIMEOUT
새로운 Position 객체를 성공적으로 가져오기 전에 지정한 최대
시간이 모드 흘렀을 때. (상수값 3)
message
로그와 디버깅을 위해 사람이 읽을 수 있는 오류 메시지를 표시
함.

7. html5 api

More Related Content

What's hot

Similar to 7. html5 api

More from 은심 강

7. html5 api