Insert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
var cal = document.getElementById("cal");
cal.addEventListener("click",calculate);
}
function calculate(){
//message.js 파일의 내용을 스레드로 생성
worker = new Worker("message.js");
worker.postMessage(document.getElementById("num").value);
worker.onmessage = function(event){
alert("합계 :"+event.data);
}
}
</script>
</head>
<body>
숫자: <input type="text" id="num"/>
<input type="button" id="cal" value ="계산"/>
</body>
</html>
local_sto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로컬 스토리지(브러우저에 저장)</title>
<script>
window.onload = function(){
//addbutton 과 removebutton 이라는 id를 가진 태그 찾아오기
var addButton = document.getElementById("addbutton");
var removeButton = document.getElementById("removebutton");
//위 2개의 버튼의 클릭이벤트에 메서드 연결
addButton.addEventListener("click",addData);
removeButton.addEventListener("click", removeData);
alert("뎀1");
//데이터를 출력하는 메서드 호출
init();
}
//로컬 스토리지의 내용을 select(list)에 출력하는 메서드
function init(){
var list = document.getElementById("list");
//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 addData(){
alert("뎀");
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
localStorage[key] = value;
init();
}
function removeData(){
var list = document.getElementById("list");
if(list.selectedIndex <0){s
alert("선택사항이 없습니다.");
return;
}
var selected = list.options[list.selectedIndex].value;
localStorage.removeItem(selected);
init();
}
</script>
</head>
<body>
<!-- select는 size가 보여지는 개수 -->
<select id="list" size="10"></select>
<fieldset>
<legend>로컬 스토리지 사용</legend>
키:<input type="text" id="key"/>
값: <input type="text" id="value"/>
<input type="button" id="addbutton" value="삽입"/>
<input type="button" id="removebutton" value="삭제"/>
</fieldset>
</body>
</html>
message.js
onmessage = function(event){
var num = event.data;
var sum =0;
for(var i=1; i<=num;i++){
sum += i;
}
//sum값을 호출한 쪽으로 다시 전달
postMessage(sum);
}
seesion_sto.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로컬 스토리지(브러우저에 저장)</title>
<script>
window.onload = function(){
//addbutton 과 removebutton 이라는 id를 가진 태그 찾아오기
var addButton = document.getElementById("addbutton");
var removeButton = document.getElementById("removebutton");
var newbutton = document.getElementById("newbutton");
//위 2개의 버튼의 클릭이벤트에 메서드 연결
addButton.addEventListener("click",addData);
removeButton.addEventListener("click", removeData);
newbutton.addEventListener("click",newWindow);
alert("뎀1");
//데이터를 출력하는 메서드 호출
init();
}
//로컬 스토리지의 내용을 select(list)에 출력하는 메서드
function init(){
var list = document.getElementById("list");
//list태드 안의 모든 내용 삭제
list.innerHTML = "";
//로컬 스토리지의 내용을 읽어서 출력
for(var i=0;i<sessionStorage.length;i++){
var key = sessionStorage.key(i);
list.options[list.options.length] =
new Option(sessionStorage[key], key);
}
}
function addData(){
alert("뎀");
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
sessionStorage[key] = value;
init();
}
function removeData(){
var list = document.getElementById("list");
if(list.selectedIndex <0){
alert("선택사항이 없습니다.");
return;
}
var selected = list.options[list.selectedIndex].value;
sessionStorage.removeItem(selected);
init();
}
function newWindow(){
window.open(location.href);
}
</script>
</head>
<body>
<!-- select는 size가 보여지는 개수 -->
<select id="list" size="10"></select>
<fieldset>
<legend>로컬 스토리지 사용</legend>
키:<input type="text" id="key"/>
값: <input type="text" id="value"/>
<input type="button" id="addbutton" value="삽입"/>
<input type="button" id="removebutton" value="삭제"/>
<input type="button" id="newbutton" value="이벤트추가"/>
</fieldset>
</body>
</html>
thread_web.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하나의 스레드로 처리</title>
<script>
window.onload=function(){
var btn = document.getElementById("sum");
btn.addEventListener("click",sum);
}
function sum(){
var num = document.getElementById("num");
var tot =0;
for(var i=1;i<=num;i++){
tot != i;
}
document.getElementById("display").innerHTML = tot +"";
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" id="sum" value="계산"/>
<div id="display"></div>
</body>
</html>
20140905_Jquery2.zip