HTML5_11장_HTML5 인터페이스 관련 API
Download
Report
Transcript HTML5_11장_HTML5 인터페이스 관련 API
HTML5 웹 프로그래밍 입문
11장.HTML5 인터페이스 관련
API
목차
11.1 위치정보 사용하기
11.2 오디오와 비디오 제어하기
11.3 끌어다 놓기
2
HTML5 인터페이스 관련 API
11.1 위치정보 사용하기
11.1.1 위치정보 얻어오기
11.1.2 위치정보 추적하기
3
HTML5 인터페이스 관련 API
위치정보
위치정보(geolocation)
사용예
사용자 주변에 있는 주요 관심지점에 대한 정보
주변 교통 정보 등을 활용한 다양한 웹서비스
지도와 결합하여 자동차 네비게이션과 같은 서비스
HTML5에서는 위치정보를 얻을 수 있는 자바스크립트
API를 제공
4
HTML5 인터페이스 관련 API
위치정보 API
내장객체인 navigator.geolocation 객체를 이용
위치정보 API의 기능
현재 위치정보를 가져오는 기능
위치이동을 추적하는 기능
종류
메소드
이름
설명
getCurrentPosition()
현재 위치 정보를 반환.
watchPosition()
위치 변경을 추적
clearWatch()
위치 추적을 취소
5
HTML5 인터페이스 관련 API
위치정보 얻어오기
위치정보 얻어오기
웹브라우저를 통해 현재 위치에 관한 정보를 얻는 것
위치정보 얻어오기 과정
1. geolocation 객체를 구하기
2. 위치정보를 알려주는 객체의 getCurrentPostion() 메소
드를 호출하기
3. 얻은 위치정보를 처리하기
웹 애플리케이션에 따라 내용이 달라짐
6
HTML5 인터페이스 관련 API
위치정보 얻어오기
geolocation 객체
웹브라우저가 위치정보 기능을 가지고 있지 않으면, navigator 객체의
geolocation 속성은 null 값을 가짐.
이를 이용하여 웹브라우저가 위치정보 기능을 가지고 있는지 알 수 있음
getCurrentPosition() 메소드
위치정보를 가져오기 위해 사용하는 geolocation 객체의 메소드
위치정보를 받아서 처리하는 함수를 인자로 받음
오류가 발생했을 때 처리해야 할 부분을 가진 함수와 위치정보 가져오기
기능에 대한 세부 제어를 위한 내용을 추가적으로 줄 수도 있음
Position 객체
종류
속성
이름
설명
위도 정보 (단위: 도).
경도 정보 (단위: 도)
고도 (단위: m)
위치정보를 가져온 시각
coords.latitude
coords.longitude
coords.altitude
timestamp
7
HTML5 인터페이스 관련 API
예제:위치정보 얻어오기
<table>
<tr><td>Timestamp</td><td id="ts"></td></tr>
<tr><td>Position</td><td id="position"></td></tr>
</table>
<br>
<div>
<span class="button" onclick="clickGetPosition();">Get position</span>
</div>
<script type="text/javascript">
function clickGetPosition() {
if (navigator.geolocation) {
function MySuccess(MyPosition) {
var d = new Date(MyPosition.timestamp);
// Date.toUTCString() 메소드는 시간을 국제표준시 문자열로 변환
document.getElementById("ts").innerHTML = d.toUTCString() ;
document.getElementById("position").innerHTML =
"(" + MyPosition.coords.latitude + ", " +
MyPosition.coords.longitude + ")";
}
navigator.geolocation.getCurrentPosition(MySuccess);
} else {
alert("No support");
}
}
</script>
8
HTML5 인터페이스 관련 API
실행결과
위치정보 사용자의 확인 화면
위치정보 사용 허용 화면
위치정보 사용 거부 화면
9
HTML5 인터페이스 관련 API
위치정보 추적하기
위치정보 추적하기
네비게이션과 같이 사용자가 움직였을 때 변경된 위치
정보를 계속 가져와야 하는 경우에 사용하는 기능
주기적으로 위치정보를 얻어오는 것이 아니라 변경된
경우에만 위치정보를 가져와 위치정보와 관련된 작업
을 할 수 있도록 해줌
geolocation 객체의 watchPosition() 메소드와 clearWatch()
메소드 사용
10
HTML5 인터페이스 관련 API
위치정보 추적하기
watchPosition() 메소드
getCurrentPosition() 메소드의 인자와 의미가 같음
위치정보가 바뀔 때마다 watchPosition() 함수의 인자로
전달된 함수가 호출되는 점이 다름
clearWatch() 메소드
위치정보 추적기능을 멈춤
watchPosition() 함수를 호출했을 때 반환되는 값을
clearWatch() 함수에 전달
11
HTML5 인터페이스 관련 API
예제:위치정보 추적하기
<script type="text/javascript">
var geoId;
function clickStart() {
if (navigator.geolocation) {
function MySuccess(MyPosition) {
var d = new Date(MyPosition.timestamp);
document.getElementById("ts").innerHTML = d.toUTCString() ;
document.getElementById("position").innerHTML = "(" +
MyPosition.coords.latitude + ", " +
MyPosition.coords.longitude + ")";
}
geoId = navigator.geolocation.watchPosition(MySuccess);
} else {
alert("No support");
}
}
function clickEnd() {
if (navigator.geolocation) {
navigator.geolocation.clearWatch(geoId);
} else {
alert("No support");
}
}
</script>
12
HTML5 인터페이스 관련 API
11.2 오디오와 비디오 제어하기
13
HTML5 인터페이스 관련 API
오디오와 비디오 제어하기
HTML5의 멀티미디어
<audio> 요소와 <video> 요소
자바스크립트 API: 멀티미디어 요소 제어
멀티미디어 관련 요소의 속성(attribute)
HTML 태그를 통해 값을 지정할 수 있는 속성
src 속성, width 속성, height 속성
자바스크립트 코드를 통해서 값을 사용할 수 있는 속성
currentTime 속성, duration 속성 등
14
HTML5 인터페이스 관련 API
멀티미디어 요소 제어 API
종류
메소드
속성
이벤트
이름
play()
pause()
currentTime
duration
ended
paused
canplay
timeupdate
설명
멀티미디어 자료의 재생 시작
멀티미디어 자료의 재생 일시정지
멀티미디어 자료의 현재 재생 위치
멀티미디어 자료의 전체 길이
멀티미디어 자료를 마지막까지 재생했는지 여부
재생의 일시멈춤 여부
재생이 가능할 때 발생하는 이벤트
재생 중 주기적으로 발생하는 이벤트
15
HTML5 인터페이스 관련 API
예제:재생 제어
<script type="text/javascript">
var videoE = document.getElementById("video");
// videoE.oncanplay = alertCanPlay;
videoE.addEventListener("canplay", function() {
alert("Avalable to play multimedia content.");
updateState();
});
// videoE.ontimeupdate = updateState;
videoE.addEventListener("timeupdate", function() {
updateState();
});
function clickPlay() {
videoE.play();
}
function clickPause() {
videoE.pause();
}
function updateState() {
document.getElementById("currentTime").innerHTML = videoE.currentTime + " sec";
document.getElementById("duration").innerHTML = videoE.duration + " sec";
document.getElementById("ended").innerHTML = videoE.ended;
document.getElementById("paused").innerHTML = videoE.paused;
}
updateState();
</script>
16
HTML5 인터페이스 관련 API
실행결과
멀티미디어 요소를 로딩
“Play”를 선택하여 재생
하였을 때
상태
17
HTML5 인터페이스 관련 API
실행결과
“Pause”를 선택하여 멈춘
마지막까지 재생한 상태
상태
18
HTML5 인터페이스 관련 API
11.3 끌어다 놓기
11.3.1 끌기 이벤트
11.3.2 놓기 이벤트
11.3.3 끌어다 놓기 예제
19
HTML5 인터페이스 관련 API
끌어다 놓기(drag & drop)
끌어다 놓기(drag & drop)
마이크로소프트의 윈도우, 애플의 맥 OS X과 같은 데스크탑 GUI
운영체제에서 마우스를 사용하여 애플리케이션 간에 파일이나 애
플리케이션의 데이터를 전달하는 기능
웹 애플리케이션에서는 화면 상에 나타나는 요소를 옮기거나 웹
브라우저와 다른 애플리케이션간에 자료를 전달하기 위해 사용
20
HTML5 인터페이스 관련 API
끌어다 놓기
끌어다 놓기 처리 과정
마우스로 원하는 항목을 선택하여 이동시키는 끌기 과
정
해당 항목을 목적지에서 마우스 버튼을 떼어서 해당 항
목을 전달하는 놓기 과정
놓기 영역
놓기 과정의 목적지
해당 항목이 처리 가능한지 여부를 이벤트를 통해서 사
용자에게 알려줘야 함
21
HTML5 인터페이스 관련 API
관련 이벤트 및 속성
끌기를 할 요소
draggable 속성과 끌기 관련 이벤트인 dragstart 이벤트, dragend 이벤트, drag 이벤
트 처리
놓기 영역 요소
dragenter 이벤트, dragover 이벤트, dragleave 이벤트를 처리
놓기 영역에 요소를 끌어다 놓는 경우
drop 이벤트
22
HTML5 인터페이스 관련 API
끌기 속성과 이벤트
요소의 draggable 속성
요소의 끌기 가능 여부 설정
관련 이벤트
종류
이름
dragstart
이벤트 drag
dragend
설명
요소를 끌기 시작했을 때 발생
요소를 끌기 도중에 발생
요소를 끌기 끝났을 때 발생
23
HTML5 인터페이스 관련 API
예제: 요소 끌기
<div id="src">
<img id="semantics" src="res/HTML5_Semantics_64.png" draggable="false">
<img id="multimedia" src="res/HTML5_Multimedia_64.png" draggable="true">
<img id="styling" src="res/HTML5_Styling_64.png" draggable="true">
</div>
<br>
<table>
<tr><td>Drag Source Id</td><td id="srcId"></td></tr>
<tr><td>Output</td><td id="o"></td></tr>
</table>
<script type="text/javascript">
var src = document.getElementById("src");
var isDragging;
var srcId;
src.ondragstart = function (e) {
srcId = e.target.id;
document.getElementById("srcId").innerHTML = srcId;
document.getElementById("o").innerHTML = "dragstart: " + srcId;
isDragging = false;
}
24
HTML5 인터페이스 관련 API
예제: 요소 끌기
src.ondrag = function (e) {
if (isDragging == false) {
document.getElementById("o").innerHTML += "<br>drag: " + srcId;
isDragging = true;
}
}
src.ondragend = function (e) {
document.getElementById("o").innerHTML += "<br>dragend: " + srcId;
}
</script>
25
HTML5 인터페이스 관련 API
실행결과
이미지 끌기
이미지 끌기 끝
26
HTML5 인터페이스 관련 API
놓기 이벤트
관련 이벤트
종류
이름
dragenter
이벤트 dragover
dragleave
drop
설명
끌기한 요소가 놓기 영역으로 들어왔을
때 발생
끌기한 요소가 놓기 영역에 있을 때 발생
끌기한 요소가 놓기 영역을 떠날 때 발생
끌기한 요소를 놓기할 때 발생
놓기 가능 여부 처리
놓기 영역에서 항상 놓기가 가능한 것이 아님
target.ondragover = function (e) {
e.preventDefault();
...
}
27
HTML5 인터페이스 관련 API
예제:요소 놓기
<div id="src">
<img id="semantics" src="res/HTML5_Semantics_64.png" draggable="false">
<img id="multimedia" src="res/HTML5_Multimedia_64.png" draggable="true">
<img id="styling" src="res/HTML5_Styling_64.png" draggable="true">
</div>
<br>
<div id="target">
<span id="drop" class="button">Drop here</span>
</div>
<br>
<table>
<tr><td>Drag Source Id</td><td id="srcId"></td></tr>
<tr><td>Drag Target Id</td><td id="targetId"></td></tr>
<tr><td>Output</td><td id="o"></td></tr>
</table>
<script type="text/javascript">
var src = document.getElementById("src");
var target = document.getElementById("target");
var isDraggingOver;
var srcId, targetId;
28
HTML5 인터페이스 관련 API
src.ondragstart = function (e) {
srcId = e.target.id;
document.getElementById("srcId").innerHTML = e.target.id;
}
target.ondragenter = function (e) {
targetId = e.target.id;
document.getElementById("targetId").innerHTML = targetId;
document.getElementById("o").innerHTML += "dragenter: " + targetId;
isDraggingOver = false;
}
target.ondragover = function (e) {
e.preventDefault();
if (isDraggingOver == false) {
document.getElementById("o").innerHTML += "<br>dragover: " + targetId;
isDraggingOver = true;
}
}
target.ondragleave = function (e) {
document.getElementById("o").innerHTML += "<br>dragleave: " + targetId;
}
target.ondrop = function (e) {
e.preventDefault();
document.getElementById("o").innerHTML += "<br>drop: " + targetId;
}
</script>
29
HTML5 인터페이스 관련 API
실행결과
놓기 영역으로 끌기
놓기
30
HTML5 인터페이스 관련 API
예제: 끌어다 놓기 처리하기
<div id="src">
<img id="semantics" src="res/HTML5_Semantics_64.png" draggable="false">
<img id="multimedia" src="res/HTML5_Multimedia_64.png" draggable="true">
<img id="styling" src="res/HTML5_Styling_64.png" draggable="true">
</div>
<br>
<div id="target">
<span id="dropzone" class="button">Drop here</span>
</div>
<br>
<script type="text/javascript">
var srcId;
src.ondragstart = function (e) {
srcId = e.target.id;
}
target.ondragover = function (e) {
e.preventDefault();
}
31
HTML5 인터페이스 관련 API
target.ondrop = function (e) {
e.preventDefault();
var newE = document.getElementById(srcId).cloneNode();
var target = document.getElementById("target");
var dropzone = document.getElementById("dropzone");
target.innerHTML = "";
target.appendChild(dropzone)
target.appendChild(document.createElement("br"));
target.appendChild(newE);
}
</script>
32
HTML5 인터페이스 관련 API
실행결과
처음 실행화면
이미지 끌기 화면 (놓기 영역 안)
이미지 끌기 화면 (놓기 영역 밖)
이미지 끌어다 놓기 화면
33
HTML5 인터페이스 관련 API