<div id="clock" style="margin-bottom:10px;">&nbsp;</div>
<button id="stopClock">시간아 멈춰라!</button>
 
<hr style="margin:10px 0 10px 0;" />
 
<div id="fivesec" style="display:none;border:1px solid #000;">5초 후 보여주는 레이어</div>
<button id="dontdisplay">안봐!</button>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// 5초 후에 5초 레이어 보여주기
var timer1 = setTimeout(function() {
	// 팝업 보여주기
	$("#fivesec").show();
},5000);
 
// 5초 팝업 타이머 해제하는 액션
$("#dontdisplay").click(function() {
	clearTimeout(timer1);
	timer1 = null;
});
 
// ---------------------------
 
// 시계
var timer2 = setInterval(function() {
	// 현재시간 불러와서 변수에 저장
	var d = new Date();
 
	// 현재시간 출력
	$("#clock").html(d.toString());
},1000);
 
// 시간 멈추는 액션
$("#stopClock").click(function() {
	// 타이머 해제
	clearInterval(timer2);
	timer2 = null;
});
</script>

<script>
// ---- 함수 정의부
 
// 타이머 변수 생성 - 전역
var timer_start = null;
var timer_end = null;
 
// 시작시간 구하기 함수
function startTimer() {
	timer_start = new Date();
}
 
// 정지시간 구하기 함수
function stopTimer() {
	timer_end = new Date();
}
 
// 시간 계산하기
function getTimer() {
	var result = timer_end.getTime()-timer_start.getTime();
	console.log(result+"ms");
}
 
// ---- 구현부
startTimer(); // 시작시간 구하기 함수 실행
for(var i=0;i<100000000;i++) {
	var a = 1;
}
stopTimer(); // 정지시간 구하기 함수 실행
getTimer(); // 시간 계산해서 콘솔로 출력
</script>

<div id="data" style="border:1px solid blue;margin:10px;padding:10px;">나는 데이터! 나의 데이터는 겉으로 보이지 않아...</div>
 
<button id="btnViewData">데이터 보기</button>
<button id="btnStoreData">데이터 저장</button>
<button id="btnRemoveData">데이터 제거</button>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// 데이터 보기
$("#btnViewData").click(function() {
	var content = $("#data").data("content");
 
	alert("숨겨져 있는 데이터는 바로...\n\n'"+content+"'");
});
 
//데이터 저장
$("#btnStoreData").click(function() {
	$("#data").data("content","속에 감춰진 데이터는 바로 1");
 
	alert("데이터가 저장되었습니다.");
});
 
//데이터 제거
$("#btnRemoveData").click(function() {
	$("#data").removeData("content");
 
	alert("데이터가 제거되었습니다.");
});
</script>

<p>
Hello <a href="http://ejohn.org/">John</a>, how are you doing?
</p>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
// P 요소안의 모든 내용 불러오기
$("p").contents().each(function() {
	// 선택된 노드의 텍스트를 불러옴.
	var text = $(this).text();
 
	// Hello 라는 단어가 있으면 b태그로 감싸기
	if(text.match("Hello")) {
		$(this).wrap("<b style='color:blue;'></b>");
	}
});
</script>

<h1>testByTagName - 색 변경 - getElementsByTagName 예제</h1>
<ul id="test1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
 
<h1>testByName - 색 변경, getElementsByName 예제</h1>
<ul id="test2">
	<li name="li_name">1</li>
	<li name="li_name">2</li>
	<li name="li_name">3</li>
	<li name="li_name">4</li>
	<li name="li_name">5</li>
</ul>
 
 
<h1>drawBox - 박스 그렸다 5초만에 지우기</h1>

<script type="text/javascript">
//DIV 박스를 body 태그 안에 추가해주는 함수
function drawBox() {
	// DIV 요소 생성
	var div = document.createElement("div");
 
	// DIV의 속성 지정 (id, style)
	div.setAttribute("id","testDiv");
	div.setAttribute("style","border:1px solid #000000;padding:10px;height:100px;");
 
	// DIV 내용으로 위에서 지정한 속성을 출력 
	div.innerHTML = div.getAttribute("style");
 
	// DIV를 body 태그안에 추가해준다. 
	document.body.appendChild(div);
 
	// 5초 보여주고 지우기
	setTimeout(function() {
		// 요소 제거
		document.body.removeChild(div);
	},5000);
}
 
function testByTagName() {
	// test1이란 아이디를 가진 요소를 JS 변수로 선언
	var test2 = document.getElementById("test1");
 
	// test2에서 tagName으로 검색해서 li인 것만 찾아서 배열로 저장
	var arrLi = test2.getElementsByTagName("li");
 
	// 배열 갯수
	var cnt = arrLi.length;
 
	// 배열 루프
	for(var i=0;i<cnt;i++) {
		// 선택된 li 요소의 색상 변경
		arrLi[i].setAttribute("style","color:red;");
	}
}
 
function testByName() {
	var arrLi = document.getElementsByName("li_name");
 
	// 배열 갯수
	var cnt = arrLi.length;
 
	// 배열 루프
	for(var i=0;i<cnt;i++) {
		// 선택된 li 요소의 색상 변경
		arrLi[i].setAttribute("style","color:blue;font-size:14px;");
	}
}
 
// 함수 실행
drawBox();
testByName();
testByTagName();
</script>

element.attachEvent(event, callback);

element.addEventListener(event, callback, useCapture);

function addEvent(ele,evt,callback, useCapture) {	
	if(ele.addEventListener) {
		ele.addEventListener(evt,callback, useCapture);
	} else if(ele.attachEvent) {
		ele.attachEvent("on"+evt, callback);
	}
}

<h1>Event Test</h1>
<div id="wrap">
	<div id="wrap2">
		<button id="test_btn">click</button>
	</div>
</div>
 
<h1>DEBUG <button id="clear">clear</button></h1>
<div id="console"></div>

<!-- 스크립트 영역 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
// HTML 엘리먼트를 자바스크립트 변수로 저장
var wrap = document.getElementById("wrap"); // 감싸는 레이어
var wrap2 = document.getElementById("wrap2"); // 감싸는 레이어2
var clear_btn = document.getElementById("clear"); // 클리어 버튼
var test_btn = document.getElementById("test_btn"); // 클릭 버튼
var consol_div = document.getElementById("console"); // 콘솔창
 
// 카운트 변수 정의
var logCnt = 1;
 
// 로그를 출력하기 위한 함수
function logConsole(msg) {
	consol_div.innerHTML = logCnt+" : "+msg+"<br />"+consol_div.innerHTML;
	logCnt++;
}
 
// 로그 초기화 함수
function clearConsole() {
	consol_div.innerHTML = "";
	logCnt = 1;
}
 
// 이벤트 등록을 위한 브라우저 호환을 위한 함수 정의
function addEvent(ele,evt,callback, useCapture) {	
	if(ele.addEventListener) {
		ele.addEventListener(evt,callback, useCapture);
	} else if(ele.attachEvent) {
		ele.attachEvent("on"+evt, callback);
	}
}
 
/*** 구현 ***/
 
// 로그 clear 버튼 클릭 이벤트 걸기
addEvent(clear_btn,"click", function(e) {
	clearConsole();
},false);
 
// 감싸는 레이어 클릭 이벤트 걸기
addEvent(wrap,"click", function(e) {
	logConsole("wrap click");
},false);
 
//감싸는 레이어2 클릭 이벤트 걸기
addEvent(wrap2,"click", function(e) {
	logConsole("wrap2 click");
},false);
 
// 버튼 클릭 이벤트 걸기
addEvent(test_btn,"click", function(e) {
	// 표준 브라우저일 경우
    if(typeof(e.stopPropagation) == "function") {
    	 e.stopPropagation();    	
    } else { // IE 일 경우           
    	window.event.cancelBubble = true;   	
    } 
 
	logConsole("button click");
},false);
</script>

<!-- 모달 창을 여는 버튼 -->
<button id="button">Open Modal</button>
 
<!-- 모달창 -->
<div id="modal">
	<h3>Test Modal</h3>
	<p>이 창은 모달창입니다.</p>
	<button id="confirm_button">확인</button>
	<button class="js_close">닫기</button>
</div>

#modal {display:none;background-color:#FFFFFF;position:absolute;top:300px;left:200px;padding:10px;border:2px solid #E2E2E2;z-Index:9999}

<!-- 스크립트 영역 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="Example.Modal.js"></script>
<script type="text/javascript">
// 모달창 인스턴트 생성
var myModal = new Example.Modal({
	id: "modal" // 모달창 아이디 지정
});
 
// 모달 창 여는 버튼에 이벤트 걸기
$("#button").click(function() {
	myModal.show(); // 모달창 보여주기
});
 
// 모달 창 안에 있는 확인 버튼에 이벤트 걸기
$("#confirm_button").click(function() {
	alert("나는 모달창이다.");
	myModal.hide(); // 모달창 감추기
});
</script>

if(typeof(Example) == "undefined") var Example = {};
 
(function($){
	Example.Modal = function() {
	this.initialize.apply(this,arguments);
}
 
Example.Modal.prototype = {
	initialize : function(hash) {
		var obj = this;
 
		// 멤버변수 정의
		this.hash = this.getHashData(hash);
		this.width = 0; // 콘텐츠 레이어 너비
		this.height = 0; // 콘텐츠 레이어 높이
		this.c_width = 0; // body 화면 너비 
		this.c_height = 0; // body 화면 높이
		this.s_width = 0; // body 전체 너비
		this.s_height = 0; // body 전체 높이
 
		// 콘텐츠 레이어 사이즈 구하기(멤버변수에 저장)
		this.getLayerSize();
 
		// body 사이즈 구하기(멤버변수에 저장)
		this.getBodySize();
 
		// 추가 엘리먼트 생성
		this.addElement();
 
		// 마우스, 키 이벤트 정의
		this.addEvent();
	},
 
	// Hash 변수정의
	getHashData : function(hash) {
		if(typeof(hash.id) == "undefined") hash.id = "modal"; // 개체 아이디
		if(typeof(hash.is_slide) == "undefined") hash.is_slide = 0; // 슬라이딩 여부
 
		return hash;
	},
 
	// 추가 엘리먼트 생성 - JS에서 추가해 주어야 할 HTML 작성합니다.
	addElement : function() {
		// 배경 레이어 HTML 받아오기
		var html = this.addOverlay();
 
		// 배경레이어 HTML을 콘텐츠레이어 앞에 추가
		$("#"+this.hash.id).before(html);
	},
 
	// 마우스, 키 이벤트 정의
	addEvent : function() {
		var obj = this;
 
		// 닫기 버튼 클릭 이벤트 정의
		$("#"+this.hash.id+" .js_close").click(function() {
			// 모달창 감추기(여기서 obj는 Example.Modal 인스턴트 자체를 의미)
			obj.hide();
		});
	},	
 
	/* 주요기능 */
 
	// 모달창 보여주기
	show : function() {
		// 가운데로 이동
		this.moveCenter();
 
		// 배경레이어 적용
		this.applyOverlay();
 
		// 콘텐츠 레이어 보여주기
		$("#"+this.hash.id).show(); 
 
		// 배경 레이어 보여주기
		$("#"+this.hash.id+"_overlay").show();  
	},
 
	// 모달창 감추기
	hide : function() {
		$("#"+this.hash.id).hide(); // 콘텐츠 레이어 감추기
		$("#"+this.hash.id+"_overlay").hide(); // 배경 레이어 감추기 
	},	
 
	/* 부가 기능 */
 
	// 콘텐츠 레이어의 너비와 높이를 구해서 멤버변수에 정의
	getLayerSize : function() {
		this.width = $("#"+this.hash.id).outerWidth();
		this.height = $("#"+this.hash.id).outerHeight();
	},
 
	// body 사이즈 구해서 멤버변수에 정의
	getBodySize : function() {
		this.c_width = document.documentElement.clientWidth;
		this.c_height = document.documentElement.clientHeight;
		this.s_width = document.documentElement.scrollWidth;
		this.s_height = document.documentElement.scrollHeight;
	},
 
	// 배경 레이어 HTML 생성
	addOverlay : function() {
		var html = "";
		html += "<div id='"+this.hash.id+"_overlay' style='display:none;width:100%;position:absolute;top:0px;left:0px;opacity:0.5;background-color:#000000;z-Index:999'></div>";
 
		return html;
	},
 
	// 콘텐츠 레이어를 가운데로 이동(top, left 조절해 줌)
	moveCenter : function() {
		// left 좌표 구하기
		var left = Math.floor((this.c_width-this.width)/2);
 
		// top 좌표 구하기
		var res_height; // 콘텐츠를 화면상의 가운데로 두었을 때의 높이
		if(this.c_height < this.height) { // 화면 높이 < 콘텐츠 레이어 높이
			res_height = 0; 
		} else { // 화면 높기 >= 콘텐츠 레이어 높이
			res_height = Math.floor((this.c_height-this.height)/2); // 차이를 빼서 2로 나눔. 그리고 내림. 
		}
		var top = res_height+$(document).scrollTop(); // 화면상의 높이에 스크롤높이를 더한 절대좌표를 top에 저장
 
		// css의 top,left 조정
		$("#"+this.hash.id).css("top",top);
		$("#"+this.hash.id).css("left",left);
	},
 
	// 배경 레이어 적용
	applyOverlay : function() {
		// body 사이즈 구하기(멤버변수에 저장)
		this.getBodySize();
 
		// 배경 레이어에 width, height css 값 조정
		$("#"+this.hash.id+"_overlay").css("width",this.s_width);
		$("#"+this.hash.id+"_overlay").css("height",this.s_height);
	}
}
 
})(jQuery);

		this.hash = this.getHashData(hash);