JavaScript COOKIE Chapter 10 Part III 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 10 Part III
쿠키 만들기 쿠키란 쿠키 지정 쿠키 지정 예 브라우저가 컴퓨터에 잠시 저장하는 정보로 사용자의 로그인 정보 등 document.cookie=“쿠키이름1=값1; 쿠키이름2=값2; 유효기간(UTC format)” document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
쿠키 실습시 주의 사항 cookie는 소스코드가 서버에 업로드되고 서버에 있는 문서를 실행시켜야 정상적으로 작동함 하드디스크에 저장된 HTML 문서를 실행시키면 쿠키가 정상적으로 작동하지 않음
자바스크립트 쿠키 확인 – cookie.html document객체의 속성 cookie로 확인 가능 <!doctype html> <body> <script> function printCookie() { var str=document.cookie; document.getElementById("demo").innerHTML = str; } </script> <button onclick=printCookie()>Check Cookie</button> <p id=demo></p> </body>
결과 – 반드시 서버에 있는 문서 실행
쿠키 설정 document.cookie = "username=John Doe"; 참고: 유효기간을 과거로 설정하면 쿠키 삭제 document.cookie = ＂쿠키이름=쿠키값; 유효기간＂ document.cookie = "username=John Doe"; document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
쿠키 설정 함수 cname : 쿠키의 이름 cvalue : 쿠키의 값 exdays: 쿠키의 유효 기간 function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; } cname : 쿠키의 이름 cvalue : 쿠키의 값 exdays: 쿠키의 유효 기간 예) 쿠키이름은 userid, 값은 sunwoo, 유효기간은 30일 setCookie(“userid”, “sunwoo”, 30)
w3schools.com이 제공해주는 함수 쿠키 설정: setCookie() 쿠키 가져오기: getCookie() 유효기간은 UTC forma으로 쿠키 가져오기: getCookie() 쿠키 검사: checkCookie()
쿠키 관련 실습 방법 쿠키 관련 실습은 을 포함하고, 이를 한 페이지에서 확인하기 위하여 다음과 같이 실습한다. 쿠키 문자열 확인 쿠키 설정 쿠키 값 가져오기 쿠키 삭제 등 을 포함하고, 이를 한 페이지에서 확인하기 위하여 다음과 같이 실습한다. 앞으로 실습할 코드는 모두 cookie.html에 추가하여 작성한다. (새로운 파일을 만들지 않고 하나의 파일에 계속 추가) 자바스크립트는 <script> … </script>에 기타 HTML 코드는 <body> 아래 부분에 계속 추가
쿠키 설정 body <hr> 쿠키: <input type=text id=cookieName> <br> 값: <input type=text id=cookieValue> <p> <button onclick=saveCookie()>쿠키 설정</button>
쿠키 설정 - script function saveCookie(){ var cname=document.getElementById("cookieName").value; var cvalue=document.getElementById("cookieValue").value; var exdays=7; // 유효기간은 7일 setCookie(cname,cvalue,exdays); } function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); // 시간 변환 document.cookie = cname + "=" + cvalue + "; " + expires;
쿠키 삭제 - body <hr> 쿠키: <input type=text id=delName> <button onclick=delCookie()>쿠키 삭제</button>
쿠키 삭제 - script function delCookie(){ setCookie(cname,"",-1); } var cname=document.getElementById("delName").value; setCookie(cname,"",-1); }
원하는 쿠키의 값 가져오기 - body <hr> 쿠키: <input type=text id=cName> <button onclick=checkCookie()>쿠키 확인</button> <p id=result2></p>
원하는 쿠키의 값 가져오기 – script function checkCookie() { var cname=document.getElementById("cName").value; var cvalue=getCookie(cname); document.getElementById("result2").innerHTML=cname+"="+cvalue; } function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); return "";
실습 – cookieportal.html HTML 문서가 시작되면서 script로 쿠키(username)을 확인 username이 쿠키 설정되어 있으면 Hello 인사 쿠키가 없으면 location.assign()을 이용하여 login.html 문서 로드 로그아웃 버튼을 클릭하면 username 쿠키를 삭제하고 login.html 문서 로드 login.html에서는 username과 password를 받아서 username을 쿠키로 설정
cookieportal.html <!doctype html> <html> <head> <script> function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); return ""; </script> </head>
cookieportal.html (계속) <body > <script> var uname=getCookie("username"); var str=""; if(uname) { str+="<h1>Cookie Portal Site에 오신 것을 환영합니다</h1>"; str += uname+"님 환영합니다<br>"; str += "<p><button onclick=logout()>로그아웃</button></p>"; } else { location.assign("login.html"); document.write(str); </script> </body> </html>
login.html <!doctype html> <html> <head> <script> function login() { /* id와 passwd 받아서 유저 확인하고 쿠키 설정 */ /* 유저 확인은 아직 안되니 쿠키만 설정 */ /* code here */ } </script> </head> <body > <h1>Cookie Portal Site에 오신 것을 환영합니다</h1> <h3> 로그인이 필요합니다.</h3> <form method=post action=action.php > <p>username: <input type=text id=username > <p>password: <input type=password id=passwd> <p><input type=button value=로그인 onclick=login()> </body> </html>
마무리 cookieportal.html에서 logout() 추가 함수 logout() 쿠키 username을 삭제하고 “로그아웃 되었습니다.” 메시지 출력 “뒤로 가기“버튼 생성 login.html에서 쿠키 설정 후 location.assign을 이용하여 cookieportal.html 호출
도전 과제 - 오늘 하루 열지 않는 popup openWindow() 실행 NO YES cookieportal.html과 동일 NotOpenToday 쿠키? NO YES cookieportal.html과 동일 cookiePortalPopup.html 팝업으로 cookieNotice.html username Welcome 인사 후 main 보여주기 logout 버튼 로그인 화면으로 login.html 띄우기 openWindow() 실행
함수 openWindow() 함수 openWindow() NO YES 아무것도 하지 않음 popup 창 보여주기 NotOpenToday 쿠키 값 확인 아무것도 하지 않음 popup 창 보여주기 (cookieNotice.html) 체크박스를 클릭하면 NotOpenToday를 checked로 쿠키 저장 YES NO
cookiePortalPopup.html <!doctype html> <html> <head> <script> function openWindow() { /* code here by yourself */ } function logout() { function getCookie() { /* code 복사 */ </script> </head>
cookiePortalPopup.html (계속) <body onload=openWindow()> <script> var uname=getCookie("username"); var str=""; if(uname) { str+="<h1>Cookie Portal Site에 오신 것을 환영합니다</h1>"; str += uname+"님 환영합니다<br>"; str += "<p><button onclick=logout()>로그아웃</button></p>"; } else { location.assign("login.html"); document.write(str); </script> </body> </html>
cookieNotice.html <!doctype html> <html> <head> closeWIndow()에서 해야 할 일 NotOpenToday 쿠키 값을 checked 저장 시간은 편한대로(1=1일, 1/24=1시간,1/24/60=1분) 윈도우 닫기 <!doctype html> <html> <head> <style> #notice {text-align:center} footer {position:absolute; bottom:10px; right:10px;} </style> <script> function closeWindow() { /* code here by yourself */ } function setCookie(cname,cvalue,exdays) { /* 코드 복사 */ </script> </head>
cookieNotice.html (계속) <body> <h1 id=notice>공지사항</h1> <div> <h2>2017년 1학기 웹프로그래밍 기말고사</h2> <ul> <li>일시: 6월 20일(화) 15:00~</li> <li>장소: 과기대 401</li> <li>시험방법: 필기+실기(?)</li> <li>Open Book?: 고려중</li> </ul> </div> <footer> <input type=checkbox onclick="closeWindow()">오늘은 열지 않기 [닫기] </footer> </body> </html>
login.html (앞에 했던 것과 동일) <!doctype html> <html> <head> <script> function login() { var cname="username"; var cvalue=document.getElementById("username").value; var exdays=7; setCookie(cname,cvalue,exdays); location.assign("cookieportal.html"); } function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; </script> </head> <body > <h1>Cookie Portal Site에 오신 것을 환영합니다</h1> <h3> 로그인이 필요합니다.</h3> <form method=post action=action.php > <p>username: <input type=text id=username > <p>password: <input type=password id=passwd> <p><input type=button value=로그인 onclick=login()> </form> </body> </html>