HTML5 jQuery 강좌 #2 (20120328)

AI 이전시대 (↓석기시대 IT)/02. Javascript Html

HTML5 jQuery 강좌 #2 (20120328)

📦 DonzBox 2012. 3. 27. 10:42

Cookie -> WEB Storage (client side data 저장 (key-value)) 쿠키의 대체는 아닌 새로운 기술

HTTP의 특징(stateless)

- 클라이언트의 커넥션을 서버에 한번 요청을 하면 응답을 주고 끊어버린다

- 클라이언트는 서버에 접속시 마다 서버는 새로운 커넥션으로 인식하므로 동일 클라이언트에서 접속하더라도 구분할 수 없다.

- 대안 : session(서버side에 클라이언트정보 저장)

cookie(클라이언트의 상태정보 저장)의 활용

- request 에 cookie 데이터를 브라우저가 알아서 해당 도메인을 response할때 head에 붙여 서버로 넘겨주는 형태

(서버가 필요없는 쿠키정보를 모두 넘겨주는 형태임)

----------------------------------------------------------------

WEB Storage 구현

----------------------------------------------------------------

01. 실장

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

var removeBtn = document.getElementById("removeBtn");

var addBtn = document.getElementById("addBtn");

removeBtn.addEventListener("click", remove); //removeBtn에 click이벤트 발생시 remove함수 호출

addBtn.addEventListener("click", add); //addBtn에 click이벤트 발생시 add함수 호출

load();

}

// SelectBox 갱신

function load() {

var list = document.getElementById("list");

list.innerHTML = "";

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

var key = localStorage.key(i);

list.options[list.options.length] = new Option(localStorage[key], key);

}

function remove() {

var list = document.getElementById("list");

if (list.selectedIndex < 0) return; // 아무것도 선택되지 않았다면

var selected = list.options[list.selectedIndex].value;

localStorage.removeItem(selected);

load();

}

function add() {

var key = document.getElementById("key").value;

var value = document.getElementById("value").value;

localStorage[key] = value;

load();

}

</script>

</head>

<body>

<h1>Web Storage Test</h1>

<p>

<button id="removeBtn">remove</button>

</p>

<p>

key : <input type="text" id="key"> - value <input type="text" id="value">

</p>

</body>

</html>

02. 실행

(F12를 누르면 나옴)

----------------------------------------------------------------

WEB SQL Database 구현 (W3C 에서 Drop 한 메소드임)

----------------------------------------------------------------

Drop된 이유

00. W3C는 브라우져 밴더들에게 강제로 SQLite를 사용하게 할 수 있는 권한이 없음

01. SQL을 모르는 사람들위해

02. 특정 브라우져 밴드가 독자DB를 임베디드 시켰을때 SQL문이 틀려질 수 있음

SQLite(RDBMS) - OpenSource, 안정성, 경량, 이용편의성

- 브라우저에 내장되어 있으므로 DB Connection필요없음, 단위처리, 트렌잭션처리 가능

01. 실장

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// DB 초기화

var db = openDatabase("dbtest", "", "DB TEST", "1024*1024");

// Table 준비

db.transaction(function(tx) {

tx.executeSql("create table if not exists m_tb ("

+ "_id integer primary key autoincrement,"

+ "name not null,"

+ "phone not null)");

});

window.onload = function(){

var removeBtn = document.getElementById("removeBtn");

var addBtn = document.getElementById("addBtn");

removeBtn.addEventListener("click", remove); //removeBtn에 click이벤트 발생시 remove함수 호출

addBtn.addEventListener("click", add); //addBtn에 click이벤트 발생시 add함수 호출

load();

}

// SelectBox 갱신

function load() {

db.transaction(function(tx) {

tx.executeSql("select * from m_tb", [], // ?에 넣을값

function(tx, rs) { // 성공시

var list = document.getElementById("list");

list.innerHTML = "";

var rows = rs.rows;

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

var row = rows.item(i);

list.options[list.options.length] = new Option(row.name, row._id);

}

});

var list = document.getElementById("list");

list.innerHTML = "";

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

var key = localStorage.key(i);

list.options[list.options.length] = new Option(localStorage[key], key);

}

function remove() {

var list = document.getElementById("list");

if (list.selectedIndex < 0) return; // 아무것도 선택되지 않았다면

var selected = list.options[list.selectedIndex].value;

db.transaction(function(tx) {

tx.executeSql("delete from m_tb where _id=?", [selected], // ?에 넣을값

function() { // 성공시

load();

});

}

function add() {

var name = document.getElementById("name").value;

var phone = document.getElementById("phone").value;

db.transaction(function(tx) {

tx.executeSql("insert into m_tb (name,phone) values(?,?)", [name, phone],

function() { // 성공시

load();

});

}

</script>

</head>

<body>

<h1>Web SQL Database Test</h1>

<p>

<button id="removeBtn">remove</button>

</p>

<p>

name : <input type="text" id="name"> - phone <input type="text" id="phone">

</p>

</body>

</html>

02. 결과 (F12를 누르면 나옴)

----------------------------------------------------------------

Indexed DB (SQLite의 대안) - 지원되는 브라우져가 현시점 극소

----------------------------------------------------------------

객체를 구조화시켜 내부적으로는 밴더가 어떠한 방식으로든(예:SQLite이용) 브라우져에 저장 가능하도록 하는 방식

-------------------------------------------------------------------------------------------------

----------------------------------------------------------------

Communucation API

----------------------------------------------------------------

동기통신 - 클라이언트에서 서버로 데이터 요청시 브라우저에서 만들어진 request 데이터를 서버에서 받아, 서버는 response

데이터를 만들어 클라이언트에게 전달해 준다 (클라이언트는 서버의 응답을 받을 때 까지, 어떠한 동작도 할 수 없다)

비동기통신 - AJAX

stateless - client 접속상태유지를 위해 session, cookie, web storage

realtime data통신 불가 : C/S 커넥션이 끊어진 상태로, 서버로부터는 클라이언트에게 데이터를 전송할 수 없다.

대안 : polling (클라이언트에서 일정시간 서버에 연결시도) - 네트웍 트레픽 초래

comet : 클라이언트에서 요청을 하면 서버는 응답을 하지 않고 있다가 이벤트가 발생되면 서버에서 그때서야

응답을 함 - 클라이언트는 대기화면이지만 innerFrame=0 부분으로 넘기고 부모창으로 넘김

HTML5 대안 : web socket (web socket 전용 서버가 필요함), server sent event (주기적인 C/S 통신)

SameOrigin Policy - 서로 다른 서버에서 하나의 클라이언트와 접속되었을때 클라이언트의 정보를 공유할 수 없다

(서브 도메인의 경우도 메인도메인과 다른 도메인으로 취급)

대안 : Cross Document Message

Web Worker - JavaScript Thread Program (node.js, 서버:구글의 V8엔진) - 모바일에서 안됨

----------------------------------------------------------------

Crocess Document

----------------------------------------------------------------

상이한 도메인 (서로다른 도메인을 가진 document 간의 객체 전송을 위한 기술)

01. 환경설정

02. Dynamic Web Project 로 프로젝트 생성

03. 프로젝트 생성 계속

04. 아래와 같이 코드 실장 (일단 inner.html 로 twitter 의 검색 내용 가져오기 소스 짜기)

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// dom node 구조 접근시 편하게 사용하기 위한 jquery 스타일의 함수

function $(id) {

return document.getElementById(id);

}

window.onload = function() {

search();

}

function search() {

$("results").innerHTML = "";

// 검색문자열

var keyword = "kkang";

// callback : 검색 결과를 process로 받을 수 있는 개발자 함수

var query = "http://search.twitter.com/search.json?callback=process"

+ "&q=";

query += encodeURI(keyword);

// 존재하지 않는 script tag를 만들어 사용하겠다

var script = document.createElement("script");

script.src = query;

// 만들어진 tag를 헤드테그의 자식노드에 붙임, 바뀐 head 정보에 의해 페이지가 열림

document.getElementsByTagName("head")[0].appendChild(script);

}

// twitter 검색결과를 callback 으로로 지정한 process 펑션으로 핸들링

function process(response) {

var datas = response.results;

// map : 집합객체의 갯수만큼 지정된 함수를 호출(하나하나 넘김)

var rows = datas.map(function(data) {

// 한 건의 데이터로 화면에 찍어주기 위한 html 구조를 만들어 주는 함수 호출

return createResult(data.profile_image_url, data.text);

});

// 화면 출력

rows.forEach(function(row) {

$("results").appendChild(row);

});

}

// 넘어온 데이터로 화면에 찍을 html 구조를 완성하는 함수

function createResult(src, title) {

var p = document.createElement("p");

var icon = document.createElement("img");

icon.src = src;

icon.setAttribute("width" , 48);

icon.setAttribute("height", 48);

// p 테그 속에 img 테그를 넣고 문자열로 만듬

p.appendChild(icon);

p.appendChild(document.createTextNode(title));

return p;

}

</script>

</head>

<body>

</body>

</html>

05. 검색결과 확인 (설정한 도메인으로 검색결과를 확인한다)

본격적인 crocess document 테스트

inner.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// dom node 구조 접근시 편하게 사용하기 위한 jquery 스타일의 함수

function $(id) {

return document.getElementById(id);

}

// outter에서 넘어오는 MessageEvent 시 호출될 함수

function messageHandler(e) {

if (e.origin == "http://localhost:8080") {

search(e.data);

}

window.onload = function() {

//search();

// message 이벤트가 발생했다면 messageHandler함수를 호출하라

window.addEventListener("message", messageHandler);

}

function search(keyword) {

$("results").innerHTML = "";

// 검색문자열

//var keyword = "kkang";

// callback : 검색 결과를 process로 받을 수 있는 개발자 함수

var query = "http://search.twitter.com/search.json?callback=process"

+ "&q=";

query += encodeURI(keyword);

// 존재하지 않는 script tag를 만들어 사용하겠다

var script = document.createElement("script");

script.src = query;

// 만들어진 tag를 헤드테그의 자식노드에 붙임, 바뀐 head 정보에 의해 페이지가 열림

document.getElementsByTagName("head")[0].appendChild(script);

}

// twitter 검색결과를 callback 으로로 지정한 process 펑션으로 핸들링

function process(response) {

var datas = response.results;

// map : 집합객체의 갯수만큼 지정된 함수를 호출(하나하나 넘김)

var rows = datas.map(function(data) {

// 한 건의 데이터로 화면에 찍어주기 위한 html 구조를 만들어 주는 함수 호출

return createResult(data.profile_image_url, data.text);

});

// 화면 출력

rows.forEach(function(row) {

$("results").appendChild(row);

});

}

// 넘어온 데이터로 화면에 찍을 html 구조를 완성하는 함수

function createResult(src, title) {

var p = document.createElement("p");

var icon = document.createElement("img");

icon.src = src;

icon.setAttribute("width" , 48);

icon.setAttribute("height", 48);

// p 테그 속에 img 테그를 넣고 문자열로 만듬

p.appendChild(icon);

p.appendChild(document.createTextNode(title));

return p;

}

</script>

</head>

<body>

</body>

</html>

outter.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

iframe {

width : 800px;

height: 400px;

}

</style>

window.onload = function() {

var searchBtn = document.getElementById("searchBtn");

searchBtn.addEventListener("click", search);

}

function search() {

var searchTxt = document.getElementById("keyword").value;

// Cross Document 로 데이터 전송

document.getElementById("inner").contentWindow.postMessage(searchTxt, "http://www.test.com:8080");

}

</script>

</head>

<body>

<p>

keywork : <input type="text" id="keyword" width="500">

<button id="searchBtn">search</button>

</p>

<p>

</p>

</body>

</html>

결과 : outter.html (http://localhost:8080/Ch4-Communication/outter.html) 을 실행시켜

inner.html (http://www.test.com:8080/Ch4-Communication/inner.html) 에서 결과가 나오는 것을 확인한다

로컬 주소를 통하여 www.test.com:8080 에서 실행된 검색 결과를 가져온다.

document.getElementById("inner").contentWindow.postMessage(searchTxt, "http://www.test.com:8080");

로 인하여 가능

-------------------------------------------------------------------------------------------------

----------------------------------------------------------------

CANVAS

----------------------------------------------------------------

canvas : pixel

SVG : vector (http://svg-wow.org/)

----------------------------------------------------------------

VIDEO Control (안드로이드와 타브라우저의 동작이 상이하므로 주의할것)

----------------------------------------------------------------

01. 프로젝트를 Dynamic Web Project 로 생성 하여 video.html 파일 실장

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

var video;

window.onload = function() {

var device;

video = document.getElementById("video");

//*******************************************

// user agent 값으로 현 디바이스의 정보를 뽑아냄

//*******************************************

var agent = navigator.userAgent;

if (agent.toUpperCase().indexOf("IPHONE") > -1) {

device = "iPhone";

} else if (agent.toUpperCase().indexOf("ANDROID") > -1) {

device = "Android";

// Android4.0 ICS 폰(2012.03월 현재 최신버전)에서의 브라우저는

// html5 video play 를 테스크탑 브라우저와 동일 방법으로 처리

if (agent.toUpperCase().indexOf("ANDROID 4.0") > -1) {

device = "Android4.0";

}

} else {

device = "unKnown";

}

//*********************************************************

// 중요 : 안드로이드용은 컨트롤바를 빼야함, 소스의 타입을 빼야함

//*********************************************************

if (device == "Android") {

var videodiv = document.getElementById("myvideo");

videodiv.innerHTML = "<video id='video' poster='bbb_poster-360x240.jpg' width='360' height='240'>"

+ " <source src='BigBuck.m4v' />"

+ " <source src='BigBuck.webm' />"

+ " <source src='BigBuck.theora.ogv' />"

+ "</video>"

+ "<p><input type='button' onClick='play()' value='play' /></p>";

}

function play(){

video.play();

}

</script>

</head>

<body>

<!-- -----------------------------------------------------

데스크탑 브라우저나 iPhone 에서느 아래와 같이 정상 play됨

안드로이드의 경우는 source type에 명시되어 있으면 안되고

반드시 javascript에서 play 명령을 내려야 함

------------------------------------------------------ -->

</video>

</div>

</body>

</html>

02. 확인

저작자표시 (새창열림)

현재글HTML5 jQuery 강좌 #2 (20120328)

돈즈박스

점점 유명해지는 트렌드를 찾아 전달해 드리는, 점점 유명해지는 블로그 입니다.

JavaScript, Lego, jQuery, iframe, Eclipse, 쉘, html5, java, oracle, 배치파일, Tomcat, Batch, CSS, HTML, 톰켓, apache, 레고, Shell, 강좌, 배치,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

HTML5 jQuery 강좌 #2 (20120328)

'AI 이전시대 (↓석기시대 IT)/02. Javascript Html'의 다른글

티스토리툴바

HTML5 jQuery 강좌 #2 (20120328)

'AI 이전시대 (↓석기시대 IT)/02. Javascript Html'의 다른글

관련글

티스토리툴바