HTML5 웹 프로그래밍 입문 (개정판) 12장. 인터페이스 관련 API
목차 12.1 위치정보 사용하기 12.2 드래그 앤 드롭 사용하기 12.3 오디오 및 비디오 제어하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch14/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 인터페이스 관련 API
12.1 위치정보 사용하기 12.1.1 지오로케이션 API의 개요 12.1.2 단발성 위치 요청하기 12.1.3 반복적 위치 요청하기 인터페이스 관련 API
위치정보(geolocation) 위치정보 HTML5 표준 API GPS가 내장된 모바일 기기에서 정확한 위치 파악 가능 사용예 위치 정보(위도, 경도)를 조회하여 어플리케이션에 활용 사용예 사용자에게 길안내, 혹은 근처 편의시설 정보 제공 주변 교통 정보 등을 활용한 다양한 웹서비스 지도와 결합하여 자동차 내비게이션과 같은 서비스 HTML5 표준 API 위치정보를 얻을 수 있는 자바스크립트 API 제공 인터페이스 관련 API
지오로케이션 API 내장객체인 navigator.geolocation 을 이용 브라우저에서 지오로케이션 API 지원 여부 확인 단발성 위치 요청 getCurrentPosition() : 현재 위치 정보를 반환 반복적 위치 요청 watchPosition() : 지속적으로 갱신되는 위치정보 clearWatch() : 추적 취소 브라우저에서 지오로케이션 API 지원 여부 확인 if (navigator.geolocation) { // 지오로케이션 사용 가능. 원하는 작업 처리하는 프로그램 } else { // 지오로케이션 기능 지원하지 않음. 에러처리 프로그램 } 인터페이스 관련 API
단발성 위치 요청하기 현재 위치정보 구하기 Position 객체 geolocation 객체의 getCurrentPosition() 메소드 getCurrentPosition(성공콜백함수, 에러콜백함수, 옵션) 위치정보 요청이 성공하면 성공콜백함수를 실행 콜백함수의 인자인 Position 객체에 위치정보 전달 function myCallback(myPos) { // Position 객체인 myPos에 전달된 위치정보 사용, 작업수행 } Position 객체 coords.latitude 위도 , coords.longitude 경도 coords.altitude 고도 , timestamp 시각 인터페이스 관련 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> 인터페이스 관련 API
반복적 위치 요청하기 변경된 위치정보 가져오기 내비게이터과 같이 사용자 위치를 추적하거나 갱신된 위치정보를 가져와야 하는 경우 주기적이 아니라 변경된 경우에만 위치정보 가져온다 geolocation의 watchPosition(), clearWatch() 메소드 사용 인터페이스 관련 API
위치 추적: watchPosition() 메소드 getCurrentPosition() 메소드의 인자와 의미가 같음 위치정보 바뀔 때마다 watchPosition()의 콜백함수 실행 추적 중지: clearWatch() 메소드 watchPosition() 메소드가 반환한 ID값을 clearWatch() 의 인자로 사용하여 전달 var watchID = navigator.geolocation.watchPosition(myCallback2); function myCallback2(myPos) { // Position 객체인 myPos에 전달받은 위치정보를 사용하여 원하는 작업 수행 }; navigator.geolocation.clearWatch(watchID); 인터페이스 관련 API
예제:위치 추적하기 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("지오로케이션이 지원되지 않습니다."); } 인터페이스 관련 API
12.2 드래그 앤 드롭 사용하기 12.2.1 드래그 앤 드롭 API의 개요 12.2.2 드래그 이벤트 사용하기 12.2.3 드롭 이벤트 사용하기 인터페이스 관련 API
드래그 앤 드롭(drag & drop) 드래그 앤 드롭 이벤트 화면에서 객체를 끌어다 놓음으로써 애플리케이션 간에 파일이나 데이터를 전달 끌기(drag) 과정과 놓기(drop) 과정 인터페이스 관련 API
드래그 이벤트 사용하기 드래그 가능하도록 설정하기 드래그시 발생하는 이벤트 이벤트 핸들러 함수작성 draggable 속성의 값이 true로 설정해야 드래그시 발생하는 이벤트 dragstart : 드래그 시작 시 발생 drag : 드래그 도중 지속적으로 발생 dragend : 드롭 여부와 관계없이 드래그 종료시 발생 이벤트 핸들러 함수작성 <img src=“dragsrc.jpg” draggable = “true”> 드래그할요소.이벤트이름 = function(e){ srcId = e.target.id; // 처리하려는 작업 } 인터페이스 관련 API
예제: 드래그 정보 보여주기 <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> 인터페이스 관련 API
드롭 이벤트 사용하기 드롭(drop) 영역에 관련된 이벤트 드롭 이벤트 허용 : preventDefault() 메소드 dragenter : 드롭 영역에 진입할 때 dragover : 드롭 영역 위에 있을 때 dragleave : 드롭 영역에서 벗어날 때 drop : 드래그 요소를 드롭 영역에 놓을 때 드롭 이벤트 허용 : preventDefault() 메소드 드롭영역 요소에 이미 정의되어 있는 이벤트를 중지하고 현재 이벤트가 발생되도록 target.ondragover = function(e) { e.preventDefault(); if(isDraggingOver == false) isDraggingOver = true; } 인터페이스 관련 API
데이터 전달 : 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)); 인터페이스 관련 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)); 인터페이스 관련 API
12.3 오디오와 비디오 제어하기 12.3.1 오디오 및 비디오 API 개요 인터페이스 관련 API
오디오와 비디오 제어하기 HTML5의 멀티미디어 <audio>와 <video> 요소를 자바스크립트 API로 제어 멀티미디어 제어 속성 src, currentTime, duration, volume, … 파일 소스, 현재 재생위치, 재생길이, 볼륨 등 멀티미디어 제어 메소드 play() 재생 시작, pause() 일시 정지 멀티미디어 제어 관련 이벤트 canplay, timeupdate, play, ended 재생이 가능할 때, 재생 중 주기적으로, 재생될 때, 재생 종료시 인터페이스 관련 API
예제: 비디오 제어 <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> 인터페이스 관련 API
예제: 비디오 제어 <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> 인터페이스 관련 API