cookie , dom : 접근법

AlreadyNo 2014. 6. 4. 13:10

2014. 6. 4. 13:10

<!DOCTYPE html>

<head>

<title> Cookie Demo </title>

window.addEventListener("load", setup, false);

function setup(){

var p = document.getElementsByTagName('p');

if(navigator.cookieEnabled){ //브라우저가 cookie를 지원하면

var sum = getCookie("sum");

if(sum){

var varSum = parseInt(sum) + 1;

alert("Cookie's count is " + varSum);

if(varSum > 5){

document.body.style.backgroundColor = 'red';

}else{

document.body.style.backgroundColor = 'yellow';

}

setCookie("sum", varSum);

}else{ //쿠키를 만든 적이 없다면

alert("NO Cookie, Set Now!");

setCookie("sum", 0);

document.body.style.backgroundColor = 'green';

}

function getCookie(key){

var cookie = document.cookie;

var startIdx = cookie.indexOf(key + "=");

if(startIdx >= 0){ //cookie가 있다면

var str = cookie.substring(startIdx, cookie.length);

var endIdx = str.indexOf(";");

if(endIdx < 0){

endIdx = str.length;

}

str = str.substring(0, endIdx);

var array = str.split("=");

return decodeURI(array[1]);

}else{ //cookie가 없다면

return null;

}

function setCookie(key, value){

var timeStamp = new Date(2014, 5, 4, 15, 0, 0, 0); //6월 5일 자정까지. 2014년 6월 5일 15시 0분 0초 0밀리세컨드. GMT시간으로 해야해서. 한국시간으로 자정을 맞추기 위해.

document.cookie = key + "=" + encodeURI(value) + ";expires=" + timeStamp.toGMTString() + ";path=/0604/"; //0604폴더에 있는, 시간은 GMT시간으로

}

function clearCookie(key){

}

</script>

</head>

<body>

<p>result</p>

</body>

</html>

//새로고침하면 쿠키가 1씩 증가하며 위의 정한 숫자가 되었을 때 색이 바뀜.

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

위의 cookie 카운트 숫자를 이미지로

<!DOCTYPE html>

<head>

<title> Cookie Demo </title>

window.addEventListener("load", setup, false);

function setup(){

var count = getCookie("count");

if(count){

var tempCount = parseInt(count) + 1;

setCookie("count", tempCount);

printCount(tempCount);

}else{ //쿠키를 만든 적이 없다면

printCount("1");

setCookie("count", 1);

}

function getCookie(key){

var cookie = document.cookie;

var startIdx = cookie.indexOf(key + "=");

if(startIdx >= 0){ //cookie가 있다면

var str = cookie.substring(startIdx, cookie.length);

var endIdx = str.indexOf(";");

if(endIdx < 0){

endIdx = str.length;

}

str = str.substring(0, endIdx);

var array = str.split("=");

return array[1];

}else{ //cookie가 없다면

return null;

}

function setCookie(key, value){

var timeStamp = new Date(2014, 5, 5, 0, 0, 0, 0); //6월 5일 자정까지

document.cookie = key + "=" + value + ";expires=" + timeStamp.toGMTString();

}

function printCount(cnt){

var count = document.getElementById('count');

var str = "";

cnt = new String(cnt);

for(var i = 0 ; i < 5 - cnt.length ; i++){

str += "<img src='images/0.gif'>";

}

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

str += "<img src='images/" + cnt.charAt(i) + ".gif'>";

}

count.innerHTML = str;

}

</script>

</head>

<body>

</body>

</html>

//1초마다 새로고침되게해서 자동으로 카운트 되게만듬

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

localstorage

<!DOCTYPE html>

<head>

window.addEventListener("load", setup, false);

function setup(){

if(typeof(Storage) !== "undefined"){

localStorage.irum = "조성모"; //localStorage.setItem("irum", "조성모");

document.getElementById('result').innerHTML = localStorage.irum;

//localStorage.getItem("irum");

}else{

document.getElementById("result").innerHTML =

"<span style='color:red'>Not Support LocalStorage</span>";

}

</script>

</head>

<body>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

DOM

<!DOCTYPE html>

<head>

window.onload = function(){

var Ps = document.getElementsByTagName('p');

Ps[2].innerHTML = "이것은 세번째 단락입니다.";

};

</script>

</head>

<body>

<p>이것은 <abbr title="Document Object Model">DOM</abbr> 문서입니다.</p>

<p>이것은 두번째 단락입니다.</p>

<p id="console"></p> //원래 세번째 단락이 없었으나 자바스크립트를 이용하여 값을 넣어줬음.

</body>

</html>

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

dom

클릭을 하면 스타일을 줘서 글씨체를 바꿔주는 코드.

<!DOCTYPE html>

<head>

window.onload = function(){

//var Ps = document.getElementsByTagName('p');

//Ps[2].innerHTML = "이것은 세번째 단락입니다.";

document.getElementById('second').onclick = function(){

var str = document.getElementById('second').innerHTML;

var str1 = "<span style='font-size:2em;color:red'>";

str1 += str + "</span>";

document.getElementById('second').innerHTML = str1;

};

</script>

</head>

<body>

<p>이것은 <abbr title="Document Object Model">DOM</abbr> 문서입니다.</p>

<p id="second">이것은 두번째 단락입니다.</p>

</body>

</html>

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

dom 접근 : .getElementById, childNodes 사용

dome1demo.html

<!DOCTYPE html>

<head>

window.onload = function(){

var str = document.getElementById('habit').childNodes[5].lastChild.textContent;

document.getElementById('console').innerHTML = "세번째 좋은 습관은 " + str;

};

</script>

</head>

<body>

<li><span>습관 5.</span> 먼저 이해하고 다음에 이해시켜라</li>

</ol>

</body>

</html>

style.css

h1 {

font-size:1.5em;

}

ol{

list-style-type: none;

}

span{

font-weight:bold;

color:darkblue;

}

실행하면 리스트목록이 쭉 뜨고 마지막 id가 console 부분에 "세번째 좋은 습관은 소중한 것을 먼저하라" 라고 뜬다.

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

dom 접근 : getElementsByClassName 과 nextSibling - 다음 형제

domdemo2.html

<!DOCTYPE html>

<head>

window.onload = function(){

var str = "세번째 좋은 습관은 <";

str += document.getElementsByClassName('mylist')[2].nextSibling.textContent;

document.getElementById('console').innerHTML = str + ">.";

};

</script>

</head>

<body>

<li><span class="mylist">습관 5.</span> 먼저 이해하고 다음에 이해시켜라</li>

</ol>

</body>

</html>

style.css

h1 {

font-size:1.5em;

}

ol{

list-style-type: none;

}

.mylist {

font-weight:bold;

color:darkblue;

}

이렇게하면 역시 마지막 console부분 출력은 세번째 좋은 습관은 < 소중한 것을 먼저하라>. 라고 뜬다.

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

dom 접근 : querySelectorAll , querySelectorAll

<!DOCTYPE html>

<head>

window.onload = function(){

var str = "세번째 좋은 습관은 <";

//str += document.getElementsByClassName('mylist')[2].nextSibling.textContent;

str += document.querySelectorAll("#habit")[0].querySelectorAll("li")[2].lastChild.textContent;

document.getElementById('console').innerHTML = str + ">.";

};

</script>

</head>

<body>

<li><span class="mylist">습관 5.</span> 먼저 이해하고 다음에 이해시켜라</li>

</ol>

</body>

</html>

출력은 똑같이 소중한 것을 먼저하라

저작자표시

'Java & Oracle' 카테고리의 다른 글

자바스크립트 Dom (0)	2014.06.09
제품관리프로그램, dom : childNodes, nextSibling, attribute, 성적관리프로그램 (0)	2014.06.05
자바스크립트 function, select, checkbox, radiobox, 개인정보 샘플, location, history, useragent (0)	2014.06.03
자바스크립트 배열의 값 복사, 전달된 인자 검사, function, event, this, dom leve (0)	2014.06.02
array : join, sort, concat, slice, push, unshift, 성적관리프로그램, RegExp (0)	2014.05.30

AlreadyNo의 블로그

cookie , dom : 접근법

'Java & Oracle' 카테고리의 다른 글

+ Recent posts

티스토리툴바