flash/flex를 대신하여, 간단히 만들어본 차트

jQuery.fn.extend({
	BarChart : function(data) {
		var datas = data.data;
		var column = data.column;
		var lineCount = Math.ceil((data.count) ? data.count : 10) * 2;
		var BarMaxValue = function() {
			var value = 0;
			for(var i = 0; i < datas.length; i++) {
				for(var k in datas[i]) {
					if(k != column) {
						if(value < datas[i][k]) {
							value = datas[i][k];
						}
					}
				}
			}
			return value;
		}
		var BarMaxCount = function() {
			var value = 0;
			for(var k in datas[0]) {
				if(k != column) {
					value++;
				}
			}
			return value;
		}
		var barColors = ["#dede12", "#afafaf", "#ceaf72", "#ea9863", "#3b9696", "#93b336", "#88b0cf", "#b65c60", "#9479b1", "#d3ac32"];
		var barLineColor = ["#ffff00", "#cccccc", "#ffcc66", "#f3ab7d", "#51abab", "#a9c751", "#bed8ec", "#cc8285", "#b7a6ca", "#edc95a"];
		
		var canvas = document.createElement("canvas");
		jQuery(canvas).attr({
			width : this.width(),
			height : this.height()
		});
		/**
		*	브라우저가 getContext를 지원하는지 확인
		*/
		if(canvas.getContext) {
			var maxWidth = this.width() - 55;
			var maxHeight = this.height() - 55;
			var columnWidth = maxWidth / datas.length;
			var lineHeight = maxHeight / lineCount;
			var maxValue = BarMaxValue();
			var barWidth = (columnWidth - 16) / BarMaxCount();
			
			var context = canvas.getContext("2d");
			
			context.beginPath();
			context.lineWidth = 10;
			context.strokeStyle = "#bbccdd";
			context.moveTo(40, 10);
			context.lineTo(40, this.height() - 35);
			context.stroke();
			context.closePath();
			
			context.fillStyle = "#0b333c";
			context.font = "11px Dotum, Gulim, Arial, Verdana, sans-serif";

			var valueCount = maxValue / lineCount;
			for(var i = 0; i <= lineCount; i++) {
					var lineY = Math.ceil(lineHeight * i);
					if(i != lineCount) {
						context.beginPath();
						context.lineWidth = 2;
						context.strokeStyle = "#ffffff";
						context.moveTo(35, 15 + lineY);
						context.lineTo(45, 15 + lineY);
						context.stroke();
						context.closePath();
					}
					if(i%2 == 0) {
						if(i != lineCount) {
							context.beginPath();
							context.lineWidth = 2;
							context.strokeStyle = "#eeeeee";
							context.moveTo(45, 15 + lineY);
							context.lineTo(this.width() - 10, 15 + lineY);
							context.stroke();
							context.closePath();
						}
						context.textAlign = "right";
						context.fillText(Math.ceil(maxValue - (valueCount * i)), 30, 19 + lineY);
					}
			}

			context.beginPath();
			for(var i = 0; i < datas.length; i++) {
				context.lineWidth = 10;
				context.strokeStyle = "#bbccdd";
				if(i == 0) {
					context.moveTo(45 + (columnWidth * i), this.height() - 30);
				} else {
					context.moveTo(45 + (columnWidth * i) + 1, this.height() - 30);
				}
				if((i+1) == datas.length) {
					context.lineTo(45 + (columnWidth * (i+1)), this.height() - 30);
				} else {
					context.lineTo(45 + (columnWidth * (i+1)) - 1, this.height() - 30);
				}
				context.textAlign = "center";
				context.fillText(datas[i][column], (45 + (columnWidth * i)) + (columnWidth / 2), this.height() - 10, columnWidth-4);
			}
			context.stroke();
			context.closePath();
			
			for(var i = 0; i < datas.length; i++) {
				var n = 0;
				for(var k in datas[i]) {
					if(k != column) {
						if(datas[i][k]) {
							var percent = datas[i][k] / maxValue;
							var barHeight = maxHeight * percent;
							var barY = 15 + (maxHeight - barHeight);
							var barYY = (this.height() - 50) - (maxHeight - barHeight);
							
							context.shadowOffsetX = 0;
							context.shadowOffsetY = 0;
							context.shadowColor = "#7a7a7a";
							context.shadowBlur = 5;
							context.lineWidth = 2;
							context.fillStyle = barColors[n];
							context.fillRect(((47 + (columnWidth * i)) + 7) + (n * barWidth), barY, barWidth - 2, barYY);
							context.strokeStyle = barLineColor[n];
							context.strokeRect(((49 + (columnWidth * i)) + 7) + (n * barWidth), barY + 1, barWidth - 4, barYY - 2);
						}
						n++;
					}
				}
			}
			this.html(canvas);
		} else {
			// swf 등으로 대처
			this.html("IE9이상 또는 IE 외 브라우저를 이용하세요.");
		}
	}
});

jQuery(window).ready(function() {
	var chartData = [{"country":"가가가","a-1":501,"a-2":467},
					{"country":"나나나","b-1":512,"b-2":477},
					{"country":"다다다","c-1":0,"c-2":488},
					{"country":"라라라","d-1":10,"d-2":299},
					{"country":"마마마","e-1":1,"e-2":400},
					{"country":"바바바","f-1":712,"f-2":411}];
									
	var chartData1 = [{"country":"가가가","a-1":501},
					{"country":"나나나","b-1":512},
					{"country":"다다다","c-1":0},
					{"country":"라라라","d-1":10},
					{"country":"마마마","e-1":1},
					{"country":"바바바","f-1":712}];
									
	var chartData2 = [{"country":"가가가","a-1":501,"a-2":467,"a-3":123,"a-4":800},
					{"country":"나나나","b-1":512,"b-2":477,"b-3":321,"b-4":700},
					{"country":"다다다","c-1":0,"c-2":488,"c-3":234,"c-4":600},
					{"country":"라라라","d-1":10,"d-2":299,"d-3":432,"d-4":500}];
									
	var chartData3 = [{"country":"","a-1":501,"a-2":467,"a-3":123,"a-4":800,"a-5":501,"a-6":467,"a-7":123,"a-8":800,"a-9":555,"a-10":111}];
									
	jQuery("#chart1").BarChart({
		data : chartData2,
		column : "country",
		count : 10
	});
	
	jQuery("#chart2").BarChart({
		data : chartData,
		column : "country",
		count : 10
	});
	
	jQuery("#chart3").BarChart({
		data : chartData1,
		column : "country",
		count : 5
	});
	
	jQuery("#chart4").BarChart({
		data : chartData3,
		column : "country",
		count : 5
	});
});
/*
*	<span id="chart4" style="width:250px;height:200px;"></span>
*	<span id="chart3" style="width:300px;height:200px;"></span>
*	<div id="chart2" style="width:400px;height:300px;"></div>
*	<div id="chart1" style="width:500px;height:400px;"></div>
*/

Server-Sent Events

• HTTP 환경에서 서버로부터 데이터 푸시를 실제와 비슷하게 지원하기 위한 API
• 서버로부터 푸시된 데이터를 수신하여 DOM 이벤트처럼 처리 할 수 있다.
• 서버로 부시될 데이터의 형식은 엄격하게 정해져 있고, 여러 줄로 구성된 일반 텍스트 형식

Server-Sent Events 동작

• 지정된 URL에 대한 정기적으로 GET 요청을 실행한다.
• 요청을 받은 서버는 데이터를 응답으로 돌려준다.
• 응답을 받으면 내용을 파싱한 다음 message 이벤트를 발생시킨다. 그리고 접속이 종료되면 일정 시간이 지나고 나서 1. 을 재시도한다.

Server-Sent Events 사용법

• 정기적으로 GET요청을 할 URL을 지정하여 EventSource 객체를 생성한다.
  - var eventSource = new EventSource(“data.php”);
• 서버로부터 데이터 받기
  - eventSource.onmessage = function() { // 수신데이터 처리 }
• 서버 쪽 처리 예(PHP)

<?php
	header("Content-Type: text/event-stream");
	echo “data : 클라이언트로 전송할 데이터”;
?>

서버로부터의 푸시 데이터 형식

• Text/event-stream이라는 ContentType으로 보냄
• 문자 인코딩은 UTF-8로 고정
• 줄 바꿈 코드는 ‘\r\n’, ‘\n’, ‘\r’ 어느 것이라도 유효함
• ‘:’ 으로 시작하는 줄은 주석
• 빈 줄이나 파일 끝은 이벤트 구분자가 됨
• 주석이나 빈 줄 이외는 ‘필드이름’ : ‘필드값’ 형식으로 작성

ServerSentEvents.html

	window.onload = function() {
		if(navigator.appName == "Opera") {
			document.getElementsByTagName("event-source")[0].addEventListener("server-time", function(event) {
				document.getElementById("message").innerHTML += event.data + "<br/>";
			}, false);
		} else {
			var source = new EventSource("messages.php");
			source.onmessage = function(event) {
				document.getElementById("message").innerHTML += event.data + "<br/>";
			}
		}
	}

Server-Sent Events

messages.php

<?php
	header("Content-Type: text/event-stream");
	echo "retry: 2000\n";
	echo "data: ".date('Y/m/d h:i:s')."\n";
?>
​

Web Workers

• JavaScript 코드를 백그라운드에서 실행시키기 위한 기술
• UI(DOM)와 완전히 분리된 환경에서 동작
  - UI(DOM)를 실행하는 스레드와 별도의 환경에서 동작하기 때문에 변수를 공유 할 수 없음
  - 백그라운드에서 처리한 결과를 처리하거나, 워커에 데이터를 주고 받기 위해서 메이징 API를 이용
• 오랜 시간이 걸리는 계산 처리 등을 JavaScript로 수행할 시 사용자가 UI 조작을 할 수 없고, 브라우저가 얼어버리는 문제를 해결하기 위한 장치
• 워커는 목적에 따라 사용할 수 있는 두 가지 워커가 규정되어있다.
  - 워커 객체와 백그라운드 프로세스가 일대일로 대응하는 모델
  - 여러 개의 객체가 하나의 백그라운드 프로세스를 공유하는 모델

워커생성, 메시지 보내고 받기

• 워커 생성
  - 워커를 생성하려면 워커의 소스코드가 되는 js파일의 url을 인수로 전달하여 Worker 객체를 생성
  - var worker = new Worker(“worker.js”);
• 워커에 대한 메시지 보내고 받기
  - 워커와 변수를 서로 공유할 수 없으므로 메시징 기능을 사용
  - Worker.postMessage(“Hello Vizooo”);
  - onmessage = function(event) { // 메시지 처리 수행 };
•  
워커로부터 메시지 보내고 받기

Worker 객체의 메서드

• onerror
  - 에러를 포착하기 위한 이벤트 핸들러
• terminate()
  - 워커를 강제로 종료함
• postMessage()
  - 워커에 메시지를 보냄
• onmessage
  - 메시지를 포착하기 위한 이벤트 핸들러

WebWorkers.html

<script>
    var worker;
    // 페이지가 로드 된후
    window.onload = function() {
        // 워커 객체를 생성
        worker = new Worker("workers.js");
        // 워커로 start 메시지 전송
        worker.postMessage("start");
        // 워커로 부터 메시지가 들어오면
        worker.onmessage = function(event) {
            document.getElementById("timer").innerHTML = event.data;
        }
    }
     
    // stop 버튼을 클릭하면 워커로 end 메시지 전송
    Stop = function() {
        worker.postMessage("end");
    }
</script>
<h1>Web Workers</h1>
<div id="timer"></div>
<input type="button" value="stop" onclick="Stop()">

workers.js

var timer = 0;
 
// 메시지가 들어오면
onmessage = function(event) {
    if(event.data == "start") {
        // 메시지가 start 이면 1초 단위로 timer 값을 1씩 증가
        var timeOut = setInterval(function() {
            timer++;
        }, 1000);
    } else {
        // 메시지가 start가 아니면 timer 값을 워커로 보냄
        postMessage(timer);
    }
}

Web SQL Database 실행 순서

1. 데이터베이스를 연다.

var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);

openDatabase(name, version, displayName, estimatedSize, creationCallback);
name - 데이터베이스 이름. 지정한 이름이 없을 땐 새로 생성
version - 데이터베이스의 버전 문자열. 공백 문자를 지정하면 버전에 관계없이 데이터베이스를 열림
displayName - 사용자에 표시될 데이터베이스 이름
estimatedSize - 데이터베이스 크기. 바이트(Bite) 단위, 브라우저에 따라 달라질 수 있음
creationCallback - 처리가 완료되었을 때 호출할 콜백함수. 생략할 수 있음

2. 트랜잭션을 시작한다.

var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);
		db.transaction(function(tx) {
			// SQL 처리
		},
		function(error) {
			// 에러처리
		},
		function() {
			// 트랜잭션 성공 시 처리
		});

transaction(callback, errorCallback, successCallback);
callback - 트랜잭션 안에서 처리를 지정하기 위한 함수
errorCallback - 트랜잭션이 에러로 종료되었을 때 호출되는 함수 생략할 수 있음
successCallback - 트랜잭션이 정상적으로 종료되었을 때 호출되는 함수 생략할 수 있음

3. 트랜잭션 안에서 SQL을 실행한다.

var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);
		db.transaction(function(tx) {
			tx.executeSql("INSERT INTO member (id, password) VALUES (?, ?) ",
			["painone7", "1111"],
			function() {
				alert("SQL 문 실행 성공!");
			},
			function() {
				alert("SQL 문 실행 실패!");
			});
		});

executeSql(sql, args, callback, errorCallback);
sql - SQL 문자열. SQL 문 안에 "?" 문자를 넣어 args에 지정한 값을 치환할수 있음
args - SQL 문 안에 "?" 치환할 배열."?" 순서대로 나열한 배열을 지정 생략할 수 있음
callback - SQL 문이 성공 시 처리할 함수 생략할 수 있음
errorCallback - SQL이 에러로 종료 되었을때 처리할 함수 생략할 수 있음

SQL 실행 결과 처리

insertId - INSERT 문의 결과 자동으로 생성된 ID. AUTOINCREMENT 지정 된 값
rowsAffected - UPDATE, DELETE 문으로 영향을 받은 행수
rows - SELECT 문을 실행한 결과 열

SELECT

var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
		db.transaction(function(tx) {
			tx.executeSql("SELECT * FROM member",
			[],
			// tx = 트랜잭션, rs = SQLResultSet
			function(tx, rs) {
			     for(var i = 0; I < rs.rows.length; i++ ) {
			          // 행에 객체를 얻음
			          var row = rs.rows[i];
			          alert("아이디 : " + row.id + "비밀번호 : " + row.password);	
			     }
			});
		});

INSERT

var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
		db.transaction(function(tx) {
			tx.executeSql("INSERT INTO member (id, password) VALUES (?, ?) ",
			["painone7", "1111"],
			function(tx, rs) {
			     // AUTOINCREMENT 지정 된 값
			     alert(ts.insertId);	
			});
		});

UPDATE, DELETE

var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
		db.transaction(function(tx) {
			tx.executeSql("DELETE FROM member",
			[],
			function(tx, rs) {
			     // 영향을 받은 행수
			     alert(ts.rowsAffected);	
			});
		});

Web SQL Database 예제

// 데이타베이스를 연다.(데이타베이스가 존재하지 않을 경우 새로 만든다.)
    var db = openDatabase("TestDb", "", "Test Database", 1024 * 1024);
            // 트랜잭션을 연다.
            db.transaction(function(tx) {
                // SQL문을 실행 시킨다.
                tx.executeSql("CREATE TABLE IF NOT EXISTS TestTable (no integer primary key autoincrement, title, content, password, index(title))");
            });
     
    /**
    *   INSERT 문 실행
    */
    function Insert() {
        var title       = document.getElementById("title").value;
        var content = document.getElementById("content").value;
        var password= document.getElementById("password").value;
         
        db.transaction(function(tx) {
            tx.executeSql("INSERT INTO TestTable (title, content, password) VALUES (?, ?, ?)",
                                        [title, content, password],
                                        function(tx, ts) {
                                            document.getElementById("title").value      = "";
                                            document.getElementById("content").value    = "";
                                            document.getElementById("password").value   = "";
                                            Select();
                                        },
                                        function(tx, ts) {
                                            alert("저장 실패");
                                        });
        });
    }
     
    /**
    *   SELECT 문 실행
    */
    function Select() {
        db.transaction(function(tx) {
            tx.executeSql("SELECT * FROM TestTable ORDER BY no DESC",
                                        [],
                                        function(tx, rs) {
                                            var list    = document.getElementById("list");
                                                    list.innerHTML = "";
                                            var rows    = rs.rows;
                                            for(var i = 0; i < rows.length; i++) {
                                                var row = rows.item(i);
                                                list.innerHTML += '<div><span onclick="FormChange(\''+ row.no +'\', \''+ row.title +'\', \''+ row.content +'\')" style="cursor:pointer;">' +
                                                                                        row.no + ' ' + row.title + ' ' + row.content +
                                                                                    '</span><input type="button" value="삭제" onclick="Delete(\''+ row.no +'\')"></div>';
                                            }
                                        });
        });
    }
     
    /**
    *   UPDATE 문 실행
    */
    function Update(no, title, content, password) {
        db.transaction(function(tx) {
            tx.executeSql("UPDATE TestTable SET title = ?, content = ?, password = ? WHERE no = ?",
                                        [title, content, password, no],
                                        function(tx, ts) {
                                            document.getElementById("title").value      = "";
                                            document.getElementById("content").value    = "";
                                            document.getElementById("password").value   = "";
                                            var insert                          = document.getElementById("insert");
                                                    insert.style.display= "block";
                                             
                                            var update                          = document.getElementById("update");
                                                    update.style.display= "none";
                                         
                                            var cancel                          = document.getElementById("cancel");
                                                    cancel.style.display= "none";
                                            Select();
                                        },
                                        function(tx, ts) {
                                            alert("저장 실패");
                                        });
        });
    }
     
    /**
    *   DELETE 문 실행
    */
    function Delete(no) {
        var no = no;
        db.transaction(function(tx) {
            tx.executeSql("DELETE FROM TestTable WHERE no = ?",
                                        [no],
                                        function() {
                                            Select();
                                        });
        });
    }
     
    function FormChange(no, title, content) {
        document.getElementById("title").value  = title;
        document.getElementById("content").value= content;
        var insert                          = document.getElementById("insert");
                insert.style.display= "none";
                 
        var update                          = document.getElementById("update");
                update.style.display= "block";
                update.onclick          = function() {
                    var title       = document.getElementById("title").value;
                    var content = document.getElementById("content").value;
                    var password= document.getElementById("password").value;
                    Update(no, title, content, password);
                };
                 
        var cancel                          = document.getElementById("cancel");
                cancel.style.display= "block";
                cancel.onclick          = function() {
                    document.getElementById("title").value      = "";
                    document.getElementById("content").value    = "";
                    document.getElementById("password").value   = "";
                    var insert                          = document.getElementById("insert");
                            insert.style.display= "block";
                     
                    var update                          = document.getElementById("update");
                            update.style.display= "none";
                 
                    var cancel                          = document.getElementById("cancel");
                            cancel.style.display= "none";
                };
    }
     
    window.onload = Select();
 
 
<h1>Web SQL Database</h1>
<div>제목 : <input id="title" type="text" style="width:300px;"></div>
<div>내용 : <textarea id="content" style="width:300px;height:100px;"></textarea></div>
<div>비밀번호 : <input id="password" type="password"></div>
<div>
    <input id="insert" type="button" value="작성" onclick="Insert()">
    <input id="update" type="button" value="수정" style="display:none;">
    <input id="cancel" type="button" value="취소" style="display:none;">
</div>
<h3>리스트 출력</h3>
<div id="list"></div>

• 클라이언트 디스크에 소량에 데이터를 저장해 두기 위한 저장소
• Web Storage 등장이전 임시저장소로 Cookie를 사용
• 단순하게 키 – 값으로 구성
• Web Storage 종류로 ‘로컬 스토리지’, ‘세션 스토리지’ 두 가 스토리지 존재

원도우마다 유효범위, 생존기간을 가짐
같은 도메인에 같은 페이지라도 탭 또는 팝업으로 각각 다른 원도우에 열릴 시 각각에 원도우마다 세션 스토리지가 생성
원도우가 닫히면 세션 스토리지도 삭제 됨

스토리지 저장

sessionStorage[“키”] = “값”;
sessionStorage.setItem(“키”, “값”);

스토리지 삭제

delete sessionStorage[“키”];
sessionStorage.removeItem(“키”);

모든 스토리지 삭제

sessionStorage.clear();

스토리지 읽기

var val = sessionStorage[“키”];
var val = sessionStorage.getItem(“키”);

스토리지 루프 처리

for(var i = 0; i < sessionStorage.length; i++ ) {
	var key = sessionStorage.key(i);
}

예제)

<script type="text/javascript">
    /**
    *   스토리지 저장
    */
    function Save() {
        var key = document.getElementById("key");
        var val = document.getElementById("val");
        sessionStorage[key.value] = val.value;  // 세션 스토리지에 데이타를 저장한다.
        ShowStorage();
    }
 
    /**
    *   스토리지 출력
    */
    function ShowStorage() {
        var storage = document.getElementById("storage");
                storage.innerHTML = "";
        for(var i = 0; i < sessionStorage.length; i++) {
            var k = sessionStorage.key(i);  // 세션 스토리지에 키값을 얻는다.
            storage.innerHTML += '<div>' + k + ' : ' + sessionStorage[k] + '<input type="button" value="삭제"';
            storage.innerHTML += ' onclick="DeleteStorage(\'' + k + '\')"/></div>';
        }
    }
     
    /**
    *   스토리지 삭제
    */
    function DeleteStorage(key) {
        delete sessionStorage[key]; // 세션 스토리지에 key값에 해당하는 데이타를 삭제한다.
        ShowStorage();
    }
     
    /**
    *   스토리지 모든 데이타 삭제
    */
    function ClearStorage() {
        sessionStorage.clear(); // 세션 스토리지를 전부 지운다.
        ShowStorage();
    }
</script>
 
<h1>세션 스토리지</h1>
키:<input id="key" type="text">
값:<input id="val" type="text">
<input type="button" value="저장" onclick="Save()">
<input type="button" value="모두 삭제" onclick="ClearStorage()">
<input type="button" value="새창" onclick="window.open(location.href)">
<h3>세션 스토리지 내역</h3>
<div id="storage"></div>