내 잔이 넘치나이다.

HTML5는 navigator객체의 onLine 속성으로 온라인 상태와 오프라인 상태를 확인할 수 있습니다.

if(navigator.onLine){ 

alert("OnLine"); 

}

else{ 

alert("OffLine"); 

}

어플리케이션 캐쉬를 사용하면 온라인 상태에서 페이지를 저장해두고 오프라인 상태에서 페이지를

자동으로 불러올 수 있습니다.

매니페스트 파일

CACHE - 캐시에 저장할 요소

NETWORK - 캐시에 저장하지 않을 요소

FALLBACK - 오프라인 상태에서 보여줄 요소

Drag and Drop

Drag 

drag - 자신이 드래그 중일 때

dragstart - 자신이 드래그를 시작했을 때

dragend - 자신이 드래그를 종료했을 때

Drop

dragenter - 자신의 영역에서 드래그가 들어왔을 때

dragleave - 자신의 영역에서 드래그가 벗어났을 때

dragover - 자신의 영역에서 드래그가 일어나고 있을 때

drop - 자신의 영역에서 드래그가 종료했을 때

예)

<script>

$(document).ready(function () {

$('h1').on({

dragstart: function (event) {

$(this).addClass('active');

},

dragend: function (event) {

$(this).removeClass('active');

}

});

$('div').on({

dragenter: function (event) {

$(this).addClass('active');

},

dragleave: function (event) {

$(this).removeClass('active');

},

dragover: function (event) {

event.preventDefault();

/* event 의 기본적인 action을 막는다. */

/* DROP 이벤트가 동작하지 않는다. drogover 이벤트 발생으로 처리(?) */

/* dragover  이벤트를 삭제해도 DROP 이벤트가 동작하지 않는다. */

/* dragover 이벤트를 추가하니 DragLeave 이벤트가 동작하지 않는다. */

/* DragOver 와 DragLeave 이벤트는 상호 연관작용이 있다. */

},

drop: function (event) {

$('h1.active').appendTo(this);

}

});

});

</script>

파일 드래그

drag_drop_file.html

dragover 이벤트의 기본 이벤트를 제거해야 drop 이벤트를 사용할 수 있습니다.

drop 이벤트의 기본 이벤트를 제거해야 웹 브라우저에 파일을 불러오는 것을 막을 수 있습니다.

일반 웹 브라우저에 여러 개의 이미지 파일을 선택해서 Drop 하면 그 중에서 1개만 브라우저에 open 된다.

하지만, 위의 html 파일의 실행 결과에서는 여러 개의 이미지 파일을 선택해서 Drop 하면

선택된 모든 이미지 파일이 브라우저에 drag&drop 되서 display 되어진다.

웹 페이지는 사용자의 컴퓨터에 저장된 파일을 강제로 들고 올 수 없습니다.

하지만, 사용자가 직접 웹 페이지 위에 올린 파일이라면 접근해서 조작할 수 있습니다.

HTML5부터는 파일을 읽고 저장하는 것이 가능합니다.

var fileInput = document.getElementById('file-input');

fileInput.onchange = function () {

var files = this.files;

};

File 객체 속성

name - 이름

type - 형식

size - 크기

lastModifiedDate - 최종 수정시점

FileReader 객체의 메소드

readAsArrayBuffer() - 파일을 Array Buffer 형태로 읽습니다.

readAsBinaryString() - 파일을 이진 문자열 형태로 읽습니다.

readAsDataURL() - 파일을 Data URL 형태로 읽습니다.

                            이미지 파일과 동영상 파일 같은 미디어 파일은 readAsDataURL()로 읽습니다.

예)           

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function () {

var image = document.createElement('img')

image.width = 400;

image.height = 300;

image.src = reader.result;

document.body.appendChild(image);

};

URL Object를 이용한 미디어 파일 제어

var objectURL = URL.createObjectURL(file);

[결과] blob으로 시작되는 URL 생성

<img src="blob:http%3A//localhost/d3adcd08-7fa1-4a9f-9709-4fa25735d25d">

* blob 객체를 사용하면 파일을 웹 브라우저가 관리합니다.

var file = files.item(i);

var objectURL = URL.createObjectURL(file);

var image = document.createElement('img')

image.width = 400;

image.height = 300;

image.src = objectURL;

document.body.appendChild(image);

readAsText() - 파일을 문자열 형태로 읽습니다.

Blob 객체

blob (binary large object) 객체는 용량이 큰 데이터를 다룰 때 사용하는 객체로 일반 파일과 다른 방식으로

운용됩니다.

HTML5의 blob 객체는 웹 페이지 내부에서 생성하지만 웹 브라우저가 관리합니다.

특정한 페이지에서 생성한 blob 객체는 다른 페이지에서도 접근할 수 있습니다.

따라서 여러 번 사용하는 미디어 파일을 생성할 때 사용합니다.

[생성자]

Blob Blob( 

[optional] Array parts, 

[optional] BlobPropertyBag properties 

);

예)

var blob = new Blob( ['Normal Text'], {type: 'text/plain'} );

URL.createObjectURL(blob);

blob 객체를 생성하면 URL.createObjectURL() 매소드로 웹 브라우저에 파일 관리를 요청합니다.

예)

var request = new XMLHttpRequest();

request.open('GET', URL.createObjectURL(blob), false);

request.send();

postMessage()

- 메시지를 전달합니다.

terminate()

- 웹 워커를 제거합니다.

onmessage

- 메시지를 전달받았을 때 실행되는 이벤트

예)

index.html

<script>

var worker = new Worker('Worker.js');

worker.onmessage = function(event){

/* 프로세스 업무 */

worker.terminate();

};

worker.postMessage(100);

</script>

Worker.js

onmessage = function(event){

postMessage(fibonacci(event.data));

}

웹 워커는 한 번 생성하면 웹 브라우저에 상주합니다. 따라서 Worker.js 파일을 수정해도 웹 브라우저를

종료하기 전까지 반영되지 않습니다.

웹 브라우저에서 웹 워커를 제거하려면 terminate() 메소드를 사용합니다.

원칙적으로 웹 워커는 파일을 나누어야 사용할 수 있습니다.

hashchange 이벤트

- hashchange 이벤트는 같은 페이지 안에서 해시(#)만 바뀌었을 때. 즉, 페이지에서 id가 있는 요소로

  이동했을 때 발생합니다.

예) window.addEventListener('hashchange', function(url, callback) { });

pushState()

- 해당 URL의 상태를 저장

- history.pushState(Object statedata, String title, [String url] /*같은 도메인의 웹 페이지*/)

Manipulating the browser history

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

popstate 이벤트

- pushState() 를 사용하여 저장한 상태값을 가져온다.

예) 

history.pushState({data:count}, 'Push State', '#'+count /* URL의 hash 값 index.html#2 */);

$(window).on('popstate', function(event){

if(event.originalEvent.state){

/* URL index.html#2 의 event.originalEvent.state.data값은 2 */

$('h1').text('Count - ' + event.originalEvent.state.data);

}

});

예) ajax 요청을 사용하는 페이지의 뒤로 가기인 경우,

tweeter_search_pushState_popstate.html

history.pushState(data, 'Search-'+ keyword, '#search?keyword='+keyword);

로 상태값을 저장한다.

이후 뒤로 가기를 할 때

if (event.originalEvent.state) {  

event.originalEvent.state.results.forEach(function (item) {

      var output = '';

output += '<h4>' + item.from_user + '</h4>';

output += '<p>' + item.text + '</p>';

output += '<hr />';

$('#content').append(output);

});

}

를 사용하여 ajax를 재요청하지 않는다.

1. 선택자

document.querySelector(선택자) - 선택자로 한 개의 문서 객체를 선택

document.querySelectorAll(선택자) - 선택자로 모든 문서 객체를 선택

2. 전체 화면

element.requestFullscreen() - 특정 요소를 전체 화면으로 만듭니다. 

element.cancelFullscreen() - 특정 요소의 전체 화면을 해제합니다.

var elements = document.querySelectorAll('.fullscreen');

for(var i = 0; i<elements.length; i++){

elements[i].onclick = function(){

if(this.requestFullscreen){

this.requestFullscreen();

}

else if(this.msRequestFullscreen){

this.msRequestFullscreen();

}

else if(this.webkitRequestFullscreen){

this.webkitRequestFullscreen();

}

else if(this.mozRequestFullscreen){

this.mozRequestFullscreen();

}

else if(this.oRequestFullscreen){

this.oRequestFullscreen();

}

}

}

3. 벤더 프리픽스

익스플로러 -ms-

크롬, 사파리 -webkit-

파이어폭스 -moz-

오페라 -o-

<style>

/* HTML5 */

div.fullscreen:fullscreen{ width:60%; border-radius:10px; }

/* 웹 브라우저 */

div.fullscreen:full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-ms-full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-webkit-full-screen{ width:10%; border-radius:10px; }

div.fullscreen:-moz-full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-o-full-screen{ width:60%; border-radius:10px; }

   </style>

4. 벤더 프리픽스 삭제

removePrefix.html

<script>

var removePrefix = (function(){

var prefixes = ['webkit','ms','moz','o'];

var capitalize = function(name){

return name.substr(0,1).toUpperCase() + name.substr(1);

};

return function(object, name){

prefixes.forEach(function(prefix){

object[name] = object[name] || object[prefix + capitalize(name)];

});

};

})();

</script>