17. HTML5 API 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
HTML5 Geolocation 사용자의지리적위치를가져오는데사용 위치정보는사용자의개인정보이기때문에사용자가승인하지않으면활용할수없음. Geolocation은스마트폰과같은 GPS를가진디바이스에서더정확함. 브라우저지원현황 2
HTML5 Geolocation 위치정보는 navigator 객체가가지고있는 geolocation 객체 를통해얻을수있음. var geolocation = navigator.geolocation; 메소드들 method description getcurrentposition( ) 사용자의현재위치정보를반환한다. watchposition( ) 장치의현재위치에대한정보를주기적으로반환한다. clearwatch( ) 현재진행중인 watchposition( ) 실행을중지한다. 3
getcurrentposition() 사용 getcurrentposition() 세개의인수 성공시호출되는콜백함수, 실패시호출되는콜백함수, 옵션 옵션 : enablehighaccuracy( 높은정확도 ), timeout( 시간제한설정 ), maximumage( 유효기간설정 ) 예 ) var options = {enablehighaccuracy:true, timout:1000, maximumage:6000}; 예 : 사용자위치의경도및위도를반환 Try it! if(navigator.geoloation) 문 : 위치정보가지원되는지를검사 지원된다면, getcurrentposition() 메소드실행 getcurrentposition() 이위치정보를얻는데성공하면, showlocation() 함수가호출되고인수로좌표객체를가지고있는 Position 객체가반환됨. showgeolocation() 함수는 Position 객체에서위도및경도를추출해서화면에표시 4
getcurrentposition() 사용 (cont d) getcurrentposition() 메소드가성공할때전달되는객체에포함된속성들 오류처리 Try it! getcurrentposition() 메소드의두번째매개변수로오류를처리하는콜백메소드를넘겨줌. 5
지도에위치표시하기 지도의결과를표시하기위해서, 구글맵 (Google Map) 처럼위도및경도를사용할수있는지도서비스에대한액세스가필요 예 : 현재위치의위도및경도데이터를사용하여구글서비스에서정적이미지형태로새로운윈도우에서보여줌. Try it! Google Maps JavaScript API v3 6
watchposition(), clearwatch() watchposition() 사용자의현재위치를연속하여출력자동차처럼사용자가이동하고있으면계속업데이트된위치를반환 clearwatch() watchposition() 메소드를중지 예 : 스마트폰처럼정밀한 GPS 장치를가지고있으면이동중에 변환되는위치가출력됨. Try it! 7
위치정보응용 예 : 구글 API 를이용하여현위치의주소를출력 Try it! google_maps_geocoder() 객체와 geocode 메소드응용 google_maps_geocoder 클래스 : 주소와 LatLng 간의변환을해주는서비스 Reference 8
HTML5 Drag and Drop 애플과윈도우에서가장많이사용하는사용자인터페이스중의하나 예 ) 구글캘린더에서끌어다놓기기능을이용하여할일목록을다른날짜로이동할수있음. 영역 A 영역 B 로특정콘텐츠를마우스로이동 9
HTML5 Drag and Drop (cont d) 브라우저지원현황 그외참고사이트 : http://caniuse.com/ 10
Drag and Drop 구성 드래그대상 (drag source) HTML 요소에 draggable 속성값을 true 로설정 <img id= html src=../img/html5.jpg draggable= true > 드롭타겟 (drop target) drop 이가능하도록설정하려면, 이벤트의 preventdefault() 메소드를호출하여기본값을취소 드래그데이터 (drag data) 이동할데이터는 datatransfer 객체를통해이루어지는데, 드래그대상 (drag source) 에서이객체에값을저장하고드롭타켓 (drop target) 에서이객체의값을꺼내어오는방식 11
이벤트 이벤트이벤트알리는곳설명 dragstart 드래그대상요소드래그가시작 drag 드래그대상요소드래그중 dragenter dragover dragleave 드래그중마우스커서가위치한요소 드래그중마우스커서가위치한요소 드래그중마우스커서가위치한요소 drop 드롭할곳의요소드롭되었음 dragend 드래그대상요소드래그종료 드래그조작이요소안의범위에들어옴 드래그조작이요소안의범위를통과중 드래그조작이요소안의범위를벗어남 12
Drag and Drop Event Flow 13
HTML5 Drag and Drop 예 Try it! Try it! 을위한설명 dragstart -> function drag(ev) datatransfer 객체에 Text 형식의 id( drag1 ) 를보냄. function drag (ev) { ev.datatransfer.setdate( text, ev.target.id); } dragover -> function allowdrop(ev) 기본적으로모든요소들은다른요소에드롭될수없음. 그렇게때문에 drop 이벤트에대한처리를위해서는기본적인동 작을막아야함. 그러므로, 디폴트처리를방지하려면 event.preventdefault() 를함. event.preventdefault(); 14
HTML5 Drag and Drop 예 (cont d) Drop -> function drop(ev) preventdefault() 를호출하여브라우저의기본적인동작을막음. datatransfer 객체에서 getdata() 를이용하여필요한데이터 ( drag1 ) 를꺼내자식노드에추가 function drop (ev) { ev.preventdefault(); var date = ev.datetransfer.getdata( text ); ev.target.appendchild(document.getelementbyid(data)); } 15
HTML5 Web Storage 쿠키 (cookie) 클라이언트에간단한정보를저장하기위해사용함. 간단하고편리함. 단점 : 데이터저장용량이 4KB 밖에되지않음. HTTP Request 호출시마다헤더전송필요 ( 응답속도저하의원인 ) 창단위로범위가나뉘어지지않음. -> Session Storage로극복 유효기간제한 -> Local Storage로극복 보안에취약 문자열만저장가능 16
HTML5 Web Storage (cont d) 웹스토리지는로컬스토리지 (local storage) 와세션스토리지 (session storage) 로나뉨. LocalStorage SessionStorage 저장공간도메인기준브라우저기준 저장타입 데이터공유 기타특징 장기적인저장공간 ( 브라우저를닫아도데이터유지 ) 현재열려진모든브라우저창 대용량쿠키 일시적인저장공간 ( 브라우저를닫으면데이터사라짐 ) 현재브라우저창 새브라우저창이열렸을경우부모창데이터복사 웹스토리지안에서데이터는키 / 값 (key/value) 쌍으로저장됨. 웹스토리지는약 5MB 정도까지저장이가능하며, 쿠키와달리서버에정보를보내지않음. 17
HTML5 Web Storage (cont d) 브라우저지원 18
Web Storage 의속성과메소드 메소드 / 속성 length key(index) getitem(key) setitem(key, value) removeitem(key) clear() 내용저장되어있는데이터 (key/value) 의수 index의위치에있는 key를반환 Key과연관된 value 반환, 존재하지않으면 null 반환 key/value를저장 key/value를삭제모든 key/value를삭제 19
Web Storage 의예 localstorage 예 1: key/value ( lastname / Smith ) 을저장하 고읽는예 Try it! localstorage 예 2: 사용자가버튼 을클릭한횟수를세는예 Try it! sessionstorage 예 : 현재의 session에서사용자가버튼을클릭한횟수를세는예 Try it! 20
웹스토리지 API 사용 값설정 1 sessionstorage.setitem( a, 1); 2 sessionstorage.a = 1; 두번째방법은한글이나공백이포함된값과같이변수로사용될수없는값에는제한 값읽기 1 2 var a = localstorage.getitem( a ); var a = localstorage.a; 역시, 두번째방법은변수로사용될수없는 key 값에대해서는제한 21
웹스토리지 API 사용 (cont d) key 읽기 1 localstorage.setitem( a, 1); 2 localstorage.setitem( b, 2); 3 var keys = localstorage.key(0) + localstorage.key(1) IE와오페라의경우는 ab, 사파리, 크롬, 파이어폭스는 ba 값삭제 localstorage.removeitem( a ); localstorage.clear(); 22
HTML5 Application Cache 애플리케이션캐시 (application cache) 란? 애플리케이션이사용하는파일을클라이언트의캐시 (cache) 에저장하는기술 애플리케이션캐시가애플리케이션에게제공하는장점 오프라인브라우징 : 오프라인상태일때도사용자는웹애플리케이션을사용할수있음. 스피드 : 캐시된파일은더빨리로드됨. 서버부하가감소됨 : 브라우저는서버로부터변경된리소스만을다운로드하면됨. 23
HTML5 Application Cache (cont d) 브라우저지원 24
매니페스트파일 (Manifest File) 애플리케이션캐시를활성화하려면, 문서의 <html> tag 에 manifest 속성을포함해야함. 시계애플리케이션의예 Try it! <!DOCTYPE HTML> <html manifest= clock.appcache > <body> </body> </html> ( 참고 : http://www.whatwg.org/) 매니페스트파일의추천된파일확장명은.appcache 임. 매니페스트파일의 MIME 형식은 text/cache-mainfest 임. 이것을처리할수있도록웹서버의 config 파일에추가해야함. 25
매니페스트파일 (Manifest File) (cont d) 단순한텍스트파일이며, 캐시해야될것을브라우저에게지시 clock.appcache 파일의예 CACHE MANIFEST clock.html clock.css clock.js 26
매니페스트파일 (Manifest File) 구성 3 개의섹션으로구성됨. CACHE MANIFEST 이헤더아래에나열된파일들은처음으로다운로드된후에캐시됨. 예 : 매니페이스파일이로드될때, 브라우저는웹사이트의루트디렉토리에서아래의 3개의파일을다운로드함. CACHE MANIFEST /theme.css /logo.gif /main.js 27
매니페스트파일 (Manifest File) 구성 (cont d) NETWORK 이헤더아래에나열된파일들은반드시서버에연결해야접근이가 능한파일을명시함. 예 : login.asp 파일은캐시될수없음. 즉, 오프라인에서활용될수 없음. NETWORK: login.asp 예 : 모든리소스와화일들은인터넷연결을해야사용할수있음을나타냄. NETWORK: * 28
매니페스트파일 (Manifest File) 구성 (cont d) FALLBACK 이헤더아래에나열된파일들은만일페이지를접근할수없을경우에대체되는페이지임. 예 : 인터넷연결이될수없을때, /html/ 카탈로그안에있는모든화일들에대해 offline.html 로대체 처음 URI: 리소스, 두번째 : fallback FALLBACK: /html/ /offline.html 29
매니페스트파일 (Manifest File) 구성 (cont d) 완전한매니페스트파일의예 CACHE MANIFEST #2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: Login.asp FALLBACK: /html/ /offline.html # 은주석라인임. 30
캐시업데이트 어플리케이션이캐시될때, 다음중하나가발생할때까지캐시상태를유지함. Tip 사용자가브라우저의캐시를지운다. 매니페스트파일이수정된다. 어플리케이션캐시가프로그램으로업데이트된다. 반드시매니페스트파일이바뀔때에만캐시를갱신함. 주석줄에서날짜와버전을업데이트하는것은브라우저가파일을다시캐시하도록하는방법중하나임. Chrome 에서사이트별상태확인 chrome://appcache-internals/ 31
File API 웹브라우저가사용자컴퓨터에있는로컬파일을읽어올수있도록해주는 API PC 의파일을스크립트로읽기 사용자가드래그앤드롭을한파일 Input 요소의 type 속성을 file 로지정하여선택한파일 파일의수정이나삭제는할수없음. 사용자가입력양식을통하여파일이름을입력하면이것에서 File 객체를추출하고 FileReader 객체를통하여파일의내용을읽음. 32
File API (cont d) 브라우저지원 (http://caniuse.com/) 33
파일 API 에서사용되는객체 File 객체 Try it! 로컬파일시스템에서얻어지는파일데이터 name 속성 / 메소드설명 파일의이름 size 파일의크기 ( 단위 : 바이트 ) type lastmodifieddate 파일의타입 (MIME type) 최종변경날짜 slice(start, length) 시작위치와길이를지정하여파일의내용을잘라서새로운 Blob(Binary Large OBject) 객체를만듦 34
파일 API 에서사용되는객체 (cont d) FileReader 객체 Try it! 이벤트처리를통하여파일의데이터에접근하는메소드를제공 하는객체 속성 / 메소드 readasbinarystring(fileblob) readastext(fileblob, encoding) readasdataurl(file) result error load progress 설명파일내용을읽어들여바이너리문자열로저장파일내용을읽어들여문자열로저장파일내용을읽어들여 dataurl 형식의문자열로저장읽어들인파일의내용실패시발생읽어들이기에성공했을때발생읽어들이는동안에주기적으로발생 35
텍스트편집 : 편집속성 Try it! Contenteditable( 특정요소편집여부 ), designmode( 페이지전체 ) 속성사용 contenteditable 속성값은 true, false, inherit designmode 속성값은 on, off <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function() { var editor = document.getelementbyid("editor"); if(editor.iscontenteditable) { editor.focus(); } }; </script> </head> <body> <div id="editor" contenteditable></div> </body> </html> 36
텍스트편집 Try it! 편집속성부여 Contenteditable( 특정요소편집여부 ), designmode( 페이지전체 ) 속성사용 contenteditable 속성값은 true, false, inherit designmode 속성값은 on, off <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function() { document.designmode = "on"; }; </script> </head> <body> <div></div> </body> </html> 37
execcommand 메소드를이용한텍스트편집 Try it! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 텍스트편집 </title> execcommand 메소드를이용한텍스트편집 : <body> : </body> </html> <script type="text/javascript"> window.onload = function() { var editor = document.getelementbyid("editor"); if (editor.iscontenteditable) editor.focus(); }; function setbold() { document.execcommand("bold"); } <input type="button" value=" 굵게 " onclick="setbold();"> <input type="button" value=" 기울게 " onclick="setitalic();"> <input type="button" value=" 아래첨자 " onclick="setsubscript();"> <div id="editor" contenteditable></div> 38
웹워커 (Web Workers) 페이지의성능에영향을주지않고, 백그라운드에서실행되는자바스크립트시간이많이걸리는작업을웹워커에게위임하면, 사용자는웹페이지에서자신이원하는작업을계속할수있음. 매우복잡한수학적계산작업원격지에있는소스에대한액세스로컬스토리지액세스작업백그라운드에서조용히오랜시간해야하는작업 UI Thread에방해없이지속적으로수행해야하는작업 39
웹워커 (Web Workers) (cont d) DOM 조작불가능 Window object 조작불가능 Document object 조작불가능 Parent object 조작불가능웹워커에서사용가능한요소 Object, Array, Date, Math, String 등의 JavaScript 객체 Navigator object Location object (read only) settimeout(), cleartimeout(), setinterval(), clearinterval() XMLHttpRequest Application Cache 40
웹워커 (Web Workers) (cont d) 41
웹워커 (Web Workers) (cont d) 웹워커의종류 전용워커 (Dedicated Worker) 워커를생성한페이지에만백그라운드프로세스가응답하는형태공유워커 (Shared Worker) 하나의워커가여러개의문서에응답하는형태 웹워커의브라우저지원 42
전용워커 (Dedicated Worker) Try it! 웹워커를만들기전에사용자의브라우저가지원하는지를검사 If (typeof(worker)!= undefined ) { // Yes! 웹워커지원 } else { // Sorry! 웹워커를지원하지않음 } 43
전용워커 (Dedicated Worker) (cont d) 웹워커파일만들기 ( 외부자바스크립트파일로작성할경우 ) demo_workers.js 파일로저장 var i=0; function timedcount() { i=i+1; postmessage(i); settimeout( timedcount(), 500); } timedcount(); postmessage(i): 웹워커에서 HTML 페이지로다시메시지를보낼때사용 44
전용워커 (Dedicated Worker) (cont d) 웹워커객체만들기 HTML 페이지에서이전장에서만든 JS 파일호출 워커가이미존재하는지를검사. 웹워커가없으면새로운웹워 커객체를만들고, demo_workers.js 를실행 if (typeof(w) == undefined ) { w = new Worker( demo_workers.js ); } 웹워커로부터메시지를수신하기위해웹워커의 onmessage event listener 를추가 w.onmessage = function(event) { document.getelementbyid( result ).innerhtml = event.data; }; 45
전용워커 (Dedicated Worker) (cont d) 웹워커의종료 웹워커객체가만들어질때, 객체가종료될때까지메시지수신을계속함. 웹워커를종료하기위해 terminate() 메소드를사용 w.terminate(); 46
공유워커 (Shared Worker) 공유워커객체생성 (in main JavaScript thread) var worker = new SharedWorker( sharedworker.js ); 공유워커에메시지를보냄 (in main JavaScript thread) worker.port.postmessage(msg); http://tutorials.jenkov.com/html5/webworkers.html#sharedworker 47
웹소켓 (Web Socket) 웹소켓이란? 웹환경에서실시간양방향통신을위한스펙웹소켓을이용하면일반적인 TCP 소켓과같이연결지향양방향통신이가능 브라우저지원 (http://caniuse.com/) 48
웹소켓 (Web Socket) (cont d) 서버연결 HTML5가제공하는 WebSocket 객체를통해서버연결일반통신 : ws, 보안통신 : wss 프로토콜을이용 var ws = new WebSocket ( ws://echo.websocket.org ); //echo.websocket.org는 WebSocket.org사이트에서테스트용으로제공하는에코서버. 즉, 클라이언트가보낸데이터를다시돌려보내줌. Try it! 데이터송신 WebSocket 객체의 send 함수를사용하여데이터를서버로송신 ws.send( 송신메시지 ); ws.send(document.getelementbyid( data ).value); 49
웹소켓 (Web Socket) (cont d) 데이터수신 서버에서전송하는데이터를받으려면웹소켓객체의 message 이벤트처리기를구현 ws.onmessage = function (evt) { var msg = evt.data; document.getelementbyid( result ).innerhtml=msg; }; 50
웹소켓 (Web Socket) (cont d) 웹소켓의이벤트 웹소켓객체에서발생하는이벤트 이벤트 onopen onclose onerror onmessage 설명소켓연결이확립되면발생연결이종료되면발생통신에서오류가있을때발생서버로부터데이터가도착하면발생 웹소켓의메소드 이벤트 설명 send(data) 웹소켓을통해데이터를보낸다. close( ) 연결을해제한다. 51
웹소켓예 Try it! <!DOCTYPE html> <html> <head> <script> var ws; function open1(){ if("websocket" in window){ ws = new WebSocket("ws://echo.websocket.org"); ws.onopen = function() { alert(" 웹소켓오픈성공 ");}; ws.onmessage = function(evt) { var msg = evt.data; document.getelementbyid("result").innerhtml = msg; }; ws.onclose=function(){ alert(" 웹소켓연결해제 "); }; } else { alert(" 웹소켓이지원되지않음 ");} } function send() { ws.send(document.getelementbyid("data").value); } function quit() { ws.close();} </script></head> 52
웹소켓예 (cont d) <body> <button onclick="open1()"> 웹소켓연결 </button> <button onclick="quit()"> 웹소켓연결종료 </button> <input type="text" id="data"> <button onclick="send()"> 데이터송신 </button><br> 에코서버로부터받은데이터 : <output id="result"></output> </body> </html> 53
웹소켓서버구축하기 웹소켓서버웹소켓은일반적인 TCP 소켓과는다른프로토콜로설계기존 TCP 서버를그대로이용할수없고새로구현해야하는데웹소켓서버사양에맞도록구현 pywebsocket, phpwebsocket, jwebsocket, web-socketruby, Socket.IO-node WebSocket 라이브러리 http://jwebsocket.org/ 자바로구현된웹소켓서버모듈인 jwebsocketserver 자바스크립트로구현된웹소켓클라이언트데모인 jwebsocketclient jwebsocket 라이브러리의전체소스코드는 jwebsocketfullsource 54
웹소켓서버구축하기 (cont d) jwebsocketserver 다운받아압축을해제 환경변수에 JWEBSOCKET_HOME 경로지정 bin 폴더의 jwebsocketserver.bat 파일실행 통신로그와메시지가이창에기록됨. 실행창을닫으면서버도종료됨. 55
HTML5 서버전송이벤트 (Server-Sent Events) 웹페이지가서버로부터자동적으로데이터를전달받을수있는기법 예 : Facebook/Twitter 갱신, 주식가격갱신, 뉴스피드, 스포츠결과등 브라우저지원 56
HTML5 서버전송이벤트 (cont d) Try it! 웹브라우저가서버 - 전송이벤트를지원하는지검사 (server_event.html) if (typeof(eventsource) == undefined ) { // Yes! Server-sent events support! // some code } else { // sorry! No server-sent events support.. } 서버 - 전송이벤트는 EventSouce 객체를통하여구현되기때문에이객체가존재하는지체크 57
HTML5 서버전송이벤트 (cont d) 데이터받기 (server_event.html) var source = new EventSource( test.jsp ); source.onmessage = function(event) { document.getelementbyid( result ).innerhtml +=event.data + <br> ; }; EventSource 객체를생성하고, 인수로주어진 URL ( test.jsp ) 에접속해데이터를주기적으로받음. 서버로부터갱신데이터를받을때마다, onmessage 이벤트를발생 onmessage 이벤트가발생할때, id= result 안에받은데이터를추가 58
HTML5 서버전송이벤트 (cont d) EventSource 객체의이벤트들 이벤트 onopen onmessage onerror 설명서버로연결이이루어지면발생메시지를받았을때발생에러가발생할때 59
HTML5 서버전송이벤트 (cont d) 서버측코드예 (test.jsp) <%@ page import= java.util.data %> <% response.setcontenttype( text/event-stream;charset=utf-8 ); Date.time=new Date(); %> data:<%=time%> Content-Type 헤더를 text/event-stream 으로설정 현재시간을받아변수 time 에저장 클라이언트로데이터를출력 data: 현재시간 60