5-3. html5 device access

www.javaspecialist.co.kr

Geolocation API
내 위치를 알아본다.

위치 정보
window.navigator.geolocation
getCurrentPosition
watchPosition
Lab - 현재 위치 표시하기

1. Geolocation API (1/2)
• 사용자의 위치 정보를 얻기 위한 JavaScript API
– 관련 메서드는 window.navigator.geolocation 객체에 정의되어 있음(window. 생략 가능)
– 현재 위치 얻음(한번)
• navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
– 위치 정보 확인(계속)
• var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback,
options);
• successCallback 함수에 전달되는 위치 정보(position)
위치정보 속성 coords 속성 설명
coords
latitude 위도
longitude 경도
altitude 표고
accuracy 위도, 경도의 오차 (단위와 오차)
altitudeAccuracy 표고의 오차 (단위와 오차)
heading Device 의 진행 방향. 북쪽을 기준으로 한 시계방향의 각도로 나타냄
speed Device 의 진행 속도(미터/초). (이용할 수 없을 때는 null)
timestamp 위치정보를 얻은 시각(1970년 1월 1일 부터의 millisecond)

1. Geolocation API (2/2)
• errorCallback 함수에 전달되는 객체에 담겨있는 속성과 상수
• options에 지정할 수 있는 정보
속성/상수 설명
enableHighAccuracy 정확도가 높은 위치 정보를 요청
timeout
위치 정보 확인에 시간제한을 설정.
시간제한을 초과하면 TIMEOUT error 발생
maximumAge
위치정보의 유효기간을 설정.
0 을 지정하면 항상 새로운 위치정보를 요청함
속성/상수 설명
code Error Code
UNKNOWN_ERROR 알 수 없는 Error (Error code 값 : 0)
PERMISSION_DENIED 권한 없음 Error (Error code 값 : 1)
POSITION_UNAVAILABLE 위치정보를 얻을 수 없음 (Error code 값 : 2)
TIMEOUT 시간제한 초과 (Error code 값 : 3)
message Error Message

Lab
• Geolocation API로 현재 내 위치를 브라우저에 표시함
• Google Maps에 관심장소(Map Marker)로 표시
– watchPosition()을 이용, 위치정보가 변할 때마다 관심장소 표시
• 브라우저에 지도를 나타내주기 위해 구글 JavaScript Map API이용
– https://developers.google.com/maps/
– Google Maps API는 버전3을 이용하므로 API 키가 없어도 예제 실행가능
– https://developers.google.com/maps/documentation/javascript/tutorial

Lab
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="EUC-KR">
5. <title>Insert title here</title>
6. <style type="text/css">
7. #map{
8. width : 1024px;
9. height: 600px;
10. }
11. </style>
12. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
13. <script src="myposition.js" defer></script>
14. </head>
15. <body>
16. <h1>현재 위치 추적</h1>
17. <button id="start">시작</button>
18. <button id="stop">중지</button>
19. <input type="checkbox" id="gps">GPS 사용
20. <div id="log"> </div>
21. <div id="map">
22. 지도를 로딩 중입니다...
23. </div>
24. </body>
25. </html>

Lab
1. //파일명 : myposition.js
2. (function() {
3. function log(msg){
4. var log = document.getElementById("log") || document.querySelector(".log");
5. if(log) log.innerHTML += msg + "<br>";
6. }
7.
8. window.onload = function(){
9. document.getElementById("start").onclick = function(){
10. //계속 위치 정보를 받고 싶을 때 watchPosition사용
11. //성공 시 success메서드, 실패 시 error메서드 호출
12. //maximumAge 위치정보의 유효 시간
13. watchId = window.navigator.geolocation.watchPosition(
14. success,
15. error,
16. {
17. enableHighAccuracy: document.getElementById("gps").checked,
18. timeout: 5000,
19. maximumAge: 0
20. }
21. );
22. };
23.
24. document.getElementById("stop").onclick = function(){
25. //TODO 위치 추적을 중지한다.
26. //watchPosition으로부터 리턴받은 id값을 인자로 제공함
27. window.navigator.geolocation.clearWatch(watchId);
28. };
29.

Lab
30. //TODO 구글맵을 불러옵니다.
31. //LatLng와 Map음 http://maps.google.com/maps/api/js에 정의된 클래스, 위도/경도를 가지고 있는 클래스
32. var center = new google.maps.LatLng(37.519768, 126.939769);
33. map = new google.maps.Map(document.getElementById("map"), {
34. mapTypeId: google.maps.MapTypeId.ROADMAP,
35. zoom:17,
36. center: center
37. });
38. };
39.
40. // 위치 확인 성공 시
41. function success(position){
42. //TODO 지도의 중앙을 현재 위치로 세팅한다. 위도, 경도 인자
43. var center = new google.maps.LatLng(
44. position.coords.latitude,
45. position.coords.longitude
46. );
47. map.setCenter(center);
48. //TODO 마커 표시
49. var marker = new google.maps.Marker({
50. position: center,
51. title: "내위치",
52. map: map
53. });
54. };
55. // 위치 확인 실패 시
56. function error(error){
57. log("조회 실패: " + error.code);
58. };
59. })();

Drag & Drop

draggable="true"
Drag & Drop
event.dataTransfer

1. Drag & Drop
• html 요소의 draggable 속성
– 드래그 대상 요소에 draggable 속성(true/false/값없음) 추가하여 드래그 & 드롭 기능을 사
용함
– draggable="true"
• event.dataTransfer 객체
– 드래그 & 드롭에 사용할 데이터를 저장하기 위한 객체
• event.dataTransfer 객체의 속성과 메서드
속성 값 설명
dropEffect
copy, move,
link, none
드래그 & 드롭 동작의 종류를 지정. copy, move, link, none 중 하나를 가짐.
effectAllowed number
허용할 dropEffect를 지정하는 문자열. copy, move, link, copyLink, linkMove, all 등으로
지정
types array setData를 호출 할 때 지정되는 포맷 문자열을 배열 형식으로 얻을 수 있음
files array 다른 애플리케이션으로부터 드래그 & 드롭 된 파일들을 가져올 수 있음
메서드 설명
clearData(type)
드래그 중인 데이터를 삭제함. 인수를 지정하여 특정 데이터 타입의 데이터만 삭제할 수
있음.
setData(type, data) 드래그 & 드롭 할 데이터를 저장. 타입은 MIME, Text, URL 또는 문자열로 지정 가능.
getData(type) 포맷을 지정하여 데이터를 가져옴
setDragImage(image, x, y) img 요소를 이용하여 드래그 중의 피드백(드래그 아이콘)을 지정. x, y는 표시 위치
addElement(element) 드래그 중 피드백 이미지에 추가할 요소를 지정한다.

2. 드래그 & 드롭 이벤트 핸들러 속성
이벤트 설명 사용
dragstart 요소를 드래그 시작할 때
DataTransfer에 데이터 넣습니다.
event.dataTransfer.setData("listItemId", event.target.id);
dragenter
드래그 중 마우스 포인터
가 요소와 겹칠 때
데이터의 드롭을 허용할 것인가 체크하는 코드를 넣을 수 있
다. 또는 드롭 영역의 스타일을 변경시킬 수도 있다.
dragover
가 요소 위를 가로지를 때
dragleave
가 요소 위를 벗어날 때
마우스가 드롭영역에서 벗어날 때 스타일을 변경시킬 수 있다.
drop 드롭 할 때
DataTransfer로부터 데이터를 꺼내 처리하는 코드를 포함한다.
getData() 메서드를 이용해서 데이터를 꺼낸다.
drag
드래그 대상 요소에 드래
그 중을 알림
dragend
드래그 대상 요소에게 드
래그 종료를 알림

3. 드래그 시작 요소의 이벤트 처리
• 드래그 시작 요소에서 이벤트 처리는 dragstart 이벤트를 사용
• 데이터를 저장하기 위한 dataTransfer 객체를 사용
function onDragStart(event) {
if(event.target.tagName.toLowCase() == "li") {
event.dataTransfer.setData("listItemId", event.target.id);
} else {
event.preventDefault();//드래그 대상이 li 요소가 아니면 처리하지 않음
}
}

4. 드롭 대상 요소의 이벤트 처리
• 드롭 대상 요소에서 처리할 수 있는 이벤트
• dragenter :
– 드래그 중 마우스 포인터가 대상 요소와 겹치는 순간 호출되는 이벤트.
• dragover :
– 드래그 중 마우스 포인터가 대상 요소 위를 가로지를 때 간헐적으로 발생하는 이벤트.
– 드롭되기 전에 event.preventDefault() 메서드를 통해 디폴트 이벤트 상태를 취소해야 함.
• drop :
– 드롭 처리를 실행할 때 발생하는 이벤트. 이 때 dataTransfer로부터 데이터를 꺼내어 처리.
– 드롭 요소를 포함하는 요소가 이벤트를 포함할 경우 이벤트가 끝난 후 이벤트가 부모 요소
에 전파되는 것을 방지하기 위해 stopPropagation() 메서드를 호출해야 함.
• 요소들이 디폴트 이벤트를 가지고 있을 때에는 드롭을 허용하지 않음
– 그럴 때에는 event.preventDefault() 를 통해 디폴트 이벤트 상태를 취소해야 함

File API
로컬의 파일을 읽을 수 있다.

FileReader
File

1. File
• File interface
– File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적인 정보에 접근 할 수 있
음
– File interface는 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에
한정됨
• File 객체 사용 예
– var file = document.getElementById("file").files[0];
– document.getElementById("fileName").textContent = file.name;
– document.getElementById("fileSize").textContent = "(" + file.size + "byte)";
• File Interface 속성과 메서드
Attribute/Method 설명
name File 이름
type File 의 MIME Type(알 수 없을 때는 null)
urn File 의 범용 식별자
size File Size
slice(start, length)
시작위치와 끝 위치를 지정하여 파일의 내용을 잘라내 새로운 Blob객체를 만
드는 함수

2. FileReader
• FileReader interface
– FileReader interface 는 비동기적인 상황에서 사용
– FileReader interface 는 File 의 내용을 읽을 수 있는 기능을 제공함.
• FileReader 생성
– var reader = new FileReader();
• FileReader Interface 속성과 메서드
Attribute/Method 설명
readAsBinaryString(fileBlob) File 내용을 읽어 Binary 문자열로 저장
readAsText(fileBlob, encoding)
File 내용을 읽어 들여 문자열로 저장, 두 번째 인수는 File 의 문자
encoding 을 지정할 수 있음(기본값 : UTF-8)
readAsDataURL(file) File 내용을 읽어 dataURL 형식의 문자열로 저장
result 읽은 File 내용
error error 발생시의 error 정보
onload 읽기 성공 했을 때 호출하는 event handler. load event 에 대응
onprogress
읽기 진행 상황을 얻을 수 있는 event handler. progress event 에 대
응
onerror 읽기 error 시에 호출되는 event handler. error event 에 대응.

3. Error Code
• 파일을 읽을 때 발생하는 에러 코드
상수 Code 설명
NOT_FOUND_ERR 1 읽을 File 을 찾지 못할때
SECURITY_ERR 2
Web Application 이 Access 하기에 안전하지 못한 File일 때
File 에 너무 많은 읽기 호출이 있을 때
사용자의 선택한 이후에 File 에 변경이 있을 때 사용할 수 있음
ABORT_ERR 3 abort() 함수 호출과 같은 것으로 인해 읽기가 중지되었을 때
NOT_READABLE_ER
R
4 File 접근 권한 문제와 같은 것으로 인해 File 을 읽지 못할때
ENCODING_ERR 5
동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수 없
음
DataURL 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳
의 DataURL 에 대한 URL 길이 제한에 걸렸을 때

5-3. html5 device access

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 5-3. html5 device access

Similar to 5-3. html5 device access (20)

5-3. html5 device access