웹프로그램을 통한 확장 API 활용

1. Audio & Video File Control

1.1. Play

재생 메서드와 속성	내용
load()
play()
pause()
canPlayType()	브라우저에서 미디어 파일 지원 여부 반환. Value = probably(높은 지원), maybe(지원 가능), ""(미지원)
autoplay
controls	플레이어 표시여부의 지정/반환
currentSrc	미디어 url 반환
currentTime	현재 재생위치를 초 단위로 지정/반환
defaultMuted	기본 음소거 상태의 지정/반환
defaultPlaybackRate	기본 재생속도 지정/반환
duration	총 재생시간을 초 단위로 반환
ended	재생이 종료되었는지를 반환
error	오류상태를 error.code 값으로 반환
loop	반복 재생여부의 지정/반환
muted	음소거 여부의 지정/반환
paused	일시정지 여부를 반환
playbackRate	현재 재생속도를 지정/반환
preload	이미지가 로드될 때 미디어 파일의 로드 여부를 지정/반환
src	현재 파일의 경로 지정/반환
volume	볼륨의 지정/반환

See the Pen public.re.kr/188-1-1-01 by Lee Deokho (@duqe) on CodePen.

1.2. Event

미디어 관련 이벤트	내용
abort	미디어 파일의 로딩이 중지 되었을 때
canplay	브라우저가 미디어 파일의 플레이를 시작할 수 있을 때
durationchange, duration	속성이 변했을 때
ended	재생이 종료되었을 때
error	미디어 파일 로드 및 재생시 오류
loadstart	미디어 파일 로드가 시작될 때
pause	일시정지 되었을 때
play	재생이 시작되었을 때
playing	일시정지 또는 버퍼링으로 멈추었다 재생을 시작할 때
progress	미디어 파일을 다운로드 하고 있을 때 지속적으로 발생
ratechange	재생속도(defaultPlaybackRate, playbackRate 속성)가 변경되었을 때
seeked	사용자가 미디어파일의 새로운 위치로 이동하거나 건너뜀을 마쳤을 때
seeking	사용자가 미디어파일의 새로운 위치로 이동/건너뜀을 시작할 때
timeupdate	현재 재생위치가 바뀌었을 때(재생 중 지속적으로 발생)
volumechange	volume또는 muted 속성이 변경되었을 때
waiting	다음 프레임 데이터를 버퍼링하기 위해 미디어가 멈추었을 때

See the Pen public.re.kr/188-1-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/188-1-2-02 by Lee Deokho (@duqe) on CodePen.

2. Drag & Drop

2.1. 드래그 속성 지정

<img id="image" src="flower.jpg" width="150" draggable="true">
<p draggable="true">테스트텍스트</p>

2.2. 드래그 이벤트 처리

드래그앤드롭관련 이벤트	내용
dragstart	드래그를 시작할 때 발생 - 전달할 데이터에 대한 저장(setData() 메서드) 필요
drag	드래그 중에 계속 발생
dragend	드래그를 종료했을 때 발생
dragenter	드래그 요소가 다른 요소 범위 안에 들어올 때 발생
dragover	드래그 요소가 다른 요소 위에서 드래그하고 있을 때 발생 - 기본적으로 요소 위에 다른 요소가 드롭될 수 없기 때문에 드롭을 허용하려면 기본값을 취소(preventDefault() 메서드)해야 함.
dragleave	드래그 요소가 다른 요소 범위를 벗어날 때 발생
drop	드래그 요소를 드롭하였을 때 발생 - 전달하려는 데이터를 가져 (getData()메서드) 와서 드롭요소에 추가(appendChild()메서드)하는 작업 필요

<img id="image" src="flower.jpg" width="150" draggable="true" ondragstart="메서드명(event)">
<script>
	function 메서드명(event) {
    	// 전달할 데이터에 대한 저장 필요
    }
</script>

2.3. 전달 데이터 처리

dataTransfer 객체의 주요 메서드	내용
setData(type, data)	드래그앤드롭을 위한 새로운 요소를 저장 - 드래그를 시작할 때 전달할 데이터를 보관 - type의 값: 단순문자열 "text", URL 문자열을 나타내는 "url" - data: 드래그되는 요소의 id
getData(type)	드롭할 때 setData()에서 저장한 요소와 데이터를 가져옴.
clearData([type])	드래그앤드롭 중에 특정 포멧의 데이터를 삭제
setDragImage(이미지변수, x, y)	드래그 도중에 표시할 사용자 이미지를 지정

See the Pen public.re.kr/188-2-3-01 by Lee Deokho (@duqe) on CodePen.

2.4. 드래그 포인터 변경

dataTransfer 갹체의 포인터관련 속성 & 메서드	내용
effectAllowed	드래드 하는 동안 사용할 수 있는 효과 지정 - value: none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized - 드래그를 시작할 때 발생하는 dragstart 이벤트에서 사용
dropEffect	드래그가 끝날 때 어떤 효과를 사용할 지 지정 - value: none, copy, link, move - 드롭할 때 발생하는 dragenter 또는 dragover 이벤트에서 사용
setDragImage()	드래그할 때 마우스 커서 위에 표시되는 이미지 변경

See the Pen public.re.kr/188-2-4-01 by Lee Deokho (@duqe) on CodePen.

3. Web Storage

3.1. Opening

구분	로컬스토리지	세션스토리지
유효기간	- 데이터의 저장기간에 제한이 없기때문에 사용자에 의한 명시적인 삭제 전까지 영구 보관	- 데이터 저장기간 제한적 - 세션 생길 때 생성되고 세션이 종료되면 소멸
공유범위	- 도메인(웹사이트) 당 별도의 저장 영역 생성 - 같은 도메인에 모든 윈도우(웹페이지)들은 스토리지에 접근가능	- 각 세션마다 별도의 저장영역 생성 - 같은 도메인이라도 다른 윈도우에서 생성되면 스토리지에 접근 불가

웹스토리지 관련 속성과 메서드	내용
length	스토리지에 저장되어 있는 데이터의 개수를 반환
key(index) index	위치에 저장된 데이터의 "키"를 반환
getItem(key)	key에 해당하는 데이터의 "값"을 반환
setItem(key, value)	(key, value) 쌍의 데이터를 스토리지에 저장
removeItem(key)	key에 대응하는 데이터를 삭제
clear()	스토리지에 저장된 모든 데이터를 삭제

// 웹 브라우저의 웹스토리지 지원여부 확인
if (typeof(Storage) !== "undefined") {
	로컬/세션 스토리지 지원
}
else {
	로컬/세션 스토리지 미지원
}

if (window.localStorage) {
	로컬 스토리지 지원
}
else {
	세션 스토리지 지원
}

3.2. Operation

구분	문법	샘플
데이터 저장	localStorage.setItem(key, value);	localStorage.setItem("HTML5", "2");
	localStorage.key = value;	localStorage.HTML5 = "2";
	localStorage[key] = value;	localStorage["HTML5"] = "2";
데이터 읽기	localStorage.getItem(key)	let value = localStorage.getItem("HTML5)";
	localStorage.key;	localStorage.HTML5;
	localStorage[key];	localStorage[HTML5];
데이터 삭제	localStorage.removeItem(key);	localStorage.removeItem("HTML5");
	delete localStorage.key;	delete localStorage.HTML5;
	delete localStorage[key];	delete localStorage["HTML5"];

<h3>로컬 스토리지에서 모든 데이터 읽기</h3>
<textarea id="result" cols="45" rows="5"></textarea>
<script>
  // 로컬스토리지에 저장
  window.onload = function() {
    if (wiindow.localStorage) {
      localStorage.setItem("HTML5", "2");
      localStorage.algorithms = "3";
      localStorage["machine learning"] = "3";
    }
  }
  // 로컬스토리지에서 읽기
  if (window.localStorage) {
    data = document.getElementById("result");
    data.value = "";
    for (i=0; i<localStorage.length; i++) {
      let key = localStorage.key(i);
      let value = localStorage.getItem(key);
      data.value += "(" + key + "," + value + ")" + " ";
    }
  }
</script>

See the Pen public.re.kr/188-3-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/188-3-2-02 by Lee Deokho (@duqe) on CodePen.

3.3. Event (of localStorage)

StorageEvent 객체의 속성	내용
key	변화가 발생한 데이터의 key를 반환; clear()가 호출되면 null 반환
oldValue	변화가 발생한 데이터의 이전 value 반환; clear() 호출이나 새로운 데이터 추가시 null 반환
newValue	변화가 발생한 데이터의 새로운 value 반환; value 가 삭제된 경우 null 반환
url	이벤트가 발생한 웹 문서의 url
storageArea	이벤트가 발생한 웹 스토리지 객체

See the Pen public.re.kr/188-3-3-01 by Lee Deokho (@duqe) on CodePen.

4. Position Information

4.0. Opening

위치정보 관련 메서드	내용
getCurrentPosition()	현재 위치정보를 얻을 때
watchPosition()	사용자의 위치가 변경될 때마다 업데이트 된 위치정보를 지속적으로 얻을 때
clearWatch()	watchPosition() 메서드의 동작을 종료

// 지오로케이션 API가 웹 브라우저에서 지원되는지 여부 판단
if (navigator.geolocation) {
	위치 정보 얻기
}
else {
	해당 브라우저는 위치정보를 미지원
}

4.1. 현재 위치정보

// getCurrentPosition() 사용방법
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
- successCallback: 위치 정보를 성공적으로 얻었을 때 호출되는 콜백 함수명
- errorCallback: (생략가능) 위치 파악 중 오류가 발생하였을 때 호출되는 콜백 함수명
- option: (생략가능) 선택사항을 객체 형식으로 전달

인자	Position타입 객체 속성	내용
첫번째	coords.latitude	위도
	coords.longitude	경도
	coords.accuracy	정확도(m)
	coords.altitude	고도(m)
	coords.altitudeAccuracy	고도정확도(m)
	coords.heading	아동중일 때 진행방향을 북쪽을 기준으로 시계방향의 각도로 표시
	coords.speed	이동중일 때 속도를 m/s로 표시
	timestamp	위치가 파악된 시간정보(1970.1.1부터 밀리초단위로 표시)
두번째	code	현재 오류를 나타내는 오류를 반환 - PERMISSION_DENIDE: 위치 정보에 대한 수집권한을 얻지 못함. - POSITION_ANAVAILABLE: 위치 정보를 얻지 못함. - TIMEOUT: 위치 정보를 얻는데 제한 시간을 초과한 경우 - UNKNOWN_ERROR: 알수없는 오류
	message	오류내용을 텍스트로 변환
세번째	enableHighAccuracy	true로 지정하면 정확도가 높은 위치정보를 얻도록 요청. 다만 반응속도 감소 우려
	timeout	위치 정보 파악에 대한 제한 시간을 설정(밀리초 단위) - 초과하면 TIMEOUT 오류발생
	maximumAge	파악된 위치 정보의 유효시간을 설정 - 초과하면 해당정보를 폐기하고 새로운 정보의 파악을 시도하고, 0이면 항상 새로운 위치정보를 요청

See the Pen public.re.kr/188-4-1-01 by Lee Deokho (@duqe) on CodePen.

4.2. 연속적인 위치정보

// watchPosition() 사용방법
let 식별id = navigator.geolocation.watchPosition(successCallback, ErrorCallback, option);
navigator.geolocation.clearWatch(식별id);

See the Pen public.re.kr/188-4-2-01 by Lee Deokho (@duqe) on CodePen.

4.3. 지도서비스

See the Pen public.re.kr/188-4-3-01 by Lee Deokho (@duqe) on CodePen.

[참고자료]

• 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023.