HTML5 웹프로그래밍입문 12 장. 인터페이스관련 API
목차 12.1 위치정보사용하기 12.2 드래그앤드롭사용하기 12.3 오디오및비디오제어하기 2
12.1 위치정보사용하기 12.1.1 지오로케이션 API의개요 12.1.2 단발성위치요청하기 12.1.3 반복적위치요청하기 3
위치정보 (geolocation) 위치정보 GPS 가내장된모바일기기에서정확한위치파악가능 위치정보 ( 위도, 경도 ) 를조회하여어플리케이션에활용 사용예 사용자에게길안내, 혹은근처편의시설정보제공 주변교통정보등을활용한다양한웹서비스 지도와결합하여자동차내비게이션과같은서비스 HTML5 표준 API 위치정보를얻을수있는자바스크립트 API 제공 4
지오로케이션 API 내장객체인 navigator.geolocation 을이용 단발성위치요청 getcurrentposition() : 현재위치정보를반환 반복적위치요청 watchposition() : 지속적으로갱신되는위치정보 clearwatch() : 추적취소 브라우저에서지오로케이션 API 지원여부확인 if (navigator.geolocation) { // 지오로케이션사용가능. 원하는작업처리하는프로그램 else { // 지오로케이션기능지원하지않음. 에러처리프로그램 5
단발성위치요청하기 현재위치정보구하기 geolocation 객체의 getcurrentposition() 메소드 getcurrentposition( 성공콜백함수, 에러콜백함수, 옵션 ) 위치정보요청이성공하면성공콜백함수를실행 콜백함수의인자인 Position 객체에위치정보전달 function mycallback(mypos) { // Position 객체인 mypos 에전달된위치정보사용, 작업수행 Position 객체 coords.latitude 위도, coords.longitude 경도 coords.altitude 고도, timestamp 시각 6 HTML5 인터페이스관련 API
예제 : 단발성위치요청 <head> <script type="text/javascript"> function getmylocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(mycallback); else { alert(" 지오로케이션이지원되지않습니다."); function mycallback(myposition) { var latitude = myposition.coords.latitude, longitude = myposition.coords.longitude, date = new Date(myPosition.timestamp), parseddate = date.toutcstring(); document.getelementbyid("display").innerhtml = ' 위치 : 일시 '+parseddate +' 에위도 ' + latitude + ', 경도 ' + longitude + ' 에있습니다.'; </script > </head> <body> <h3> 단발성위치정보요청하기 </h3> <button onclick="getmylocation();"> 위치정보확인 </button> <div id="display"> 위치 : </div> </body> 7 HTML5 인터페이스관련 API
반복적위치요청하기 변경된위치정보가져오기 내비게이터과같이사용자위치를추적하거나갱신된위치정보를가져와야하는경우 주기적이아니라변경된경우에만위치정보가져온다 geolocation 의 watchposition(), clearwatch() 메소드사용 8
반복적위치요청하기 위치추적 : watchposition() 메소드 getcurrentposition() 메소드의인자와의미가같음 위치정보바뀔때마다 watchposition() 의콜백함수실행 var watchid = navigator.geolocation.watchposition(mycallback2); function mycallback2(mypos) { // Position 객체인 mypos 에전달받은위치정보를사용하여원하는작업수행 ; 추적중지 : clearwatch() 메소드 watchposition() 메소가가반환한 ID 값을 clearwatch() 의인자로사용하여전달 navigator.geolocation.clearwatch(watchid); 9
예제 : 위치추적하기 var watchid, i=0; function startmylocation() { if (navigator.geolocation) { watchid = navigator.geolocation.watchposition(mycallback); else { alert(" 지오로케이션이지원되지않습니다."); function mycallback(myposition) { var latitude = myposition.coords.latitude, longitude = myposition.coords.longitude, date = new Date(myPosition.timestamp), parseddate = date.toutcstring(); document.getelementbyid("display").innerhtml += '<br> ['+(i++)+'] 일시 '+parseddate +', 위도 ' + latitude + ', 경도 ' + longitude ; function stopmylocation(){ if (navigator.geolocation){ navigator.geolocation.clearwatch(watchid); document.getelementbyid("display").innerhtml += '<br> ** 추적종료! **' ; else{ alert(" 지오로케이션이지원되지않습니다."); 10
12.2 드래그앤드롭사용하기 12.2.1 드래그앤드롭 API의개요 12.2.2 드래그이벤트사용하기 12.2.3 드롭이벤트사용하기 11
드래그앤드롭 (drag & drop) 드래그앤드롭이벤트 화면에서객체를끌어다놓음으로써애플리케이션간에파일이나데이터를전달 끌기 (drag) 과정과놓기 (drop) 과정 12
드래그이벤트사용하기 드래그가능하도록설정하기 draggable 속성의값이 true 로설정해야 <img src= dragsrc.jpg draggable = true > 드래그시발생하는이벤트 Dragstart : 드래그시작시발생 drag : 드래그도중지속적으로발생 dragend : 드롭여부와관계없이드래그종료시발생 이벤트핸들러함수작성 드래그할요소. 이벤트이름 = function(e){ srcid = e.target.id; // 처리하려는작업 13
예제 : 드래그정보보여주기 <div id="dragsrc" style="display: block;"> <img id="html5" src="icon_html5.png" style="display: inline; width:150px;" draggable = "true"> <img id="css3" src="icon_css3.png" style="display: inline; width:150px;" draggable = "false"> <img id="js" src="icon_js.png" style="display: inline; width:150px;"> </div> <div id="dragprocess"></div> <script type="text/javascript"> var src = document.getelementbyid("dragsrc"), srcid, i=0; process = document.getelementbyid("dragprocess"); src.ondragstart = function(e){ srcid = e.target.id; process.innerhtml = "start: "+srcid+"<br/>"; src.ondrag = function(e){ process.innerhtml = "start: "+srcid+"<br/>drag: "+srcid+" ["+(i++)+"]"; src.ondragend = function(e){ process.innerhtml += "<br/>end: "+srcid+"<br/>"; </script> 14
드롭이벤트사용하기 드롭 (drop) 영역에관련된이벤트 dragenter : 드롭영역에진입할때 dragover : 드롭영역위에있을때 dragleave : 드롭영역에서벗어날때 drop : 드래그요소를드롭영역에놓을때 드롭이벤트허용 : preventdefault() 메소드 드롭영역요소에이미정의되어있는이벤트를중지하고현재이벤트가발생되도록 target.ondragover = function(e) { e.preventdefault(); if(isdraggingover == false) isdraggingover = true; 15
데이터전달 : datatransfer 객체 드롭이벤트발생시에데이터를처리하도록 datatransfer 객체의 setdata() 메소드에서저장하고, getdata() 메소드에서지정형식의데이터를꺼내온다 src.ondragstart = function(e) { e.datatransfer.setdata("text", e.target.id); target.ondrop = function(e) { var data = e.datatransfer.getdata("text"); e.target.appendchild(document.getelementbyid(data)); 16 HTML5 인터페이스관련 API
예제 : 드롭이벤트처리 <div id="dragsrc" style="margin-bottom:20px; display:block;"> <img id="html5" src="icon_html5.png" style="display:inline; width:150px;" draggable="true"> <img id="css3" src="icon_css3.png" style="display: inline; width:150px;" draggable="false"> <img id="js" src="icon_js.png" style="display: inline; width:150px;"> </div> <div id="droptarget" style="border-color:gray; border-style:solid; > 드롭영역 <br> Drop Here</div> <script type="text/javascript"> var src = document.getelementbyid("dragsrc"), isdragging, srcid, target = document.getelementbyid("droptarget"); src.ondragstart = function(e){ srcid = e.target.id; e.datatransfer.setdata("text", srcid); target.ondragenter = function(e){ dropid = e.target.id; target.ondragover = function(e){ e.preventdefault(); target.ondrop = function(e){ var data = e.datatransfer.getdata("text"); e.target.appendchild(document.getelementbyid(data)); 17
12.3 오디오와비디오제어하기 12.3.1 오디오및비디오 API 개요 18 HTML5 인터페이스관련 API
오디오와비디오제어하기 HTML5 의멀티미디어 <audio> 와 <video> 요소를자바스크립트 API로제어 멀티미디어제어속성 src, currenttime, duration, volume, 파일소스, 현재재생위치, 재생길이, 볼륨등 멀티미디어제어메소드 play() 재생시작, pause() 일시정지 멀티미디어제어관련이벤트 canplay, timeupdate, play, ended 재생이가능할때, 재생중주기적으로, 재생될때, 재생종료시 19
예제 : 비디오제어 <head> <script type="text/javascript"> window.onload = function(){ var myvideo = document.getelementbyid("myvideo"), playbtn = document.getelementbyid("playbtn"), volumectrl = document.getelementbyid("volctrl"), timediv = document.getelementbyid("time"); myvideo.addeventlistener("canplay", function(){ alert(" 재생가능합니다."); ); myvideo.addeventlistener("timeupdate", updatetime); playbtn.addeventlistener("click", play); volumectrl.addeventlistener("change", updatevolume); ( 중간생략 ) </script> </head> <body> <video id="myvideo" controls width="500" src="nature.mp4"></video><br/> <button id="playbtn"> 재생 </button> 재생시간 / 총시간 : <span id="time"></span><br> 볼륨 : <input id="volctrl" type="range" max="1" step="any"> </body> 20
예제 : 비디오제어 <script type="text/javascript"> ( 중간생략 ) function updatetime(){ timediv.innerhtml = Math.floor(myVideo.currentTime) + "/" + Math.floor(myVideo.duration) + "( 초 )"; function play(){ if(myvideo.paused){ playbtn.innerhtml = " 일시정지 "; myvideo.play(); else{ playbtn.innerhtml = " 재생 "; myvideo.pause(); function updatevolume() { myvideo.volume = volumectrl.value; </script> 21