728x90
BOM
- 브라우저 객체 모델(Browser Object Model) = 내장객체
- window, location, history, document 등 포함
2022.12.29 - [클라이언트/JavaScript] - [JavaScript] 이벤트 핸들러, this, BOM, DOM
[JavaScript] 이벤트 핸들러, this, BOM, DOM
이벤트 핸들러 화면에서 클릭이나, 동작시 발생하는 동적인 기능 이벤트: 사용자의 동작 / 핸들러: 함수 이벤트 앞에 on 붙음 태그 - 스크립트의 이벤트 연결 방식: 인라인 이벤트 모델 / 기본 이
j-won950101.tistory.com
window 객체
- 웹브라우저에 대한 전반적인 정보 취득이나 제어에 관련된 객체
window.open() - 새 창을 띄워주는 메서드
window.close() - 창을 꺼주는 메서드
window.open (띄워줄 창의 주소, 별칭, "옵션=값, 옵션=값, 옵션=값");
// 옵션은 문자열로 들어감, 콤마(,) 사용
| window.open 옵션 = 창을 띄우는데 사용되는 옵션들 | |
| width = 픽셀값 | 가로 넓이 |
| height = 픽셀값 | 세로 넓이 |
| left = 픽셀값 | 위치 |
| top = 픽셀값 | 위치 |
| location = yes, no | 윈도우 주소창 (show/hide) |
| scrollbars = yes, no | 윈도우 스크롤바 (show/hide) |
| menubar = yes, no | 윈도우 메뉴바 (show/hide) |
| toolbar = yes, no | 윈도우 툴바 (show/hide) |
| status = yes, no | 윈도우 상태줄 (show/hide) |
window 객체 기본함수 window 생략가능
alert() - 경고창
confirm() - 확인창
setTimeout()
- 일정 시간이 지난 후 딱 한번 함수 실행
- 일정 시간이 지난 후 진행시킬 때
clearTimeout()
- setTimeout 중지 메서드
setInterval()
- 일정 시간마다 = 주기적으로 함수 반복 실행
clearInterval()
- setInerval 중지 메서드
더보기
1-1. 팝업창 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.onload = function() {
// window.open("popup.html"); //open("띄울창", "별칭", "옵션");
window.open("popup.html", "별칭", "width=500px, height=300px, left=100px, top=100px");
}
</script>
</body>
</html>- window.open() 으로 팝업창을 띄우면서 옵션 걸어주기
1-2. 팝업창 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>팝업창</h3>
<input type="checkbox" class="x"> 오늘 하루 이 창을 열지 않기
<script>
var x = document.querySelector(".x");
x.onclick = function() {
//쿠키 사용해야 오늘 하루 창을 안 열수 있음
window.close();
//opener - 주창과 보조창 간의 데이터 전달이 가능
//필요할 때 찾아서 코드 보기
}
</script>
</body>
</html>2. 일정 시간이 지난 후 진행되는 함수 중지 (timeout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="stop">5초 뒤에 경고창이 나오는데 중지하려면 누르시요</button>
<script>
//window 생략가능
//5초 뒤에 동작
var id = setTimeout(function() {
alert("5초후 출력됨");
}, 5000);
var stop = document.querySelector(".stop");
stop.onclick = function() {
clearTimeout(id);
}
</script>
</body>
</html>- setTimeout으로 일정 시간이 지난 후 딱 한번 실행하는 함수 만들기
- 중지 버튼을 가져와서 클릭하면 clearTimeout으로 중지
3. 일정시간마다 반복하는 함수 중지(interval)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="stop">멈춰</button><!-- 멈추는 버튼 만들기 -->
<script>
var id = window.setInterval(function() { //중지하기 위해서 실행되는 함수는 변수에 담음
console.log('실행됨');
}, 1000 ); //(실행시킬 함수, 인터벌); 여기서는 1000밀리세컨즈
//인터벌 중지
var stop = document.querySelector(".stop"); //버튼을 가져와서
stop.onclick = function() { //버튼을 클릭하면
window.clearInterval(id); //인터벌이 중지하게 만듦 (실행되는 인터벌을 중지해야 하기 때문에 담아진 변수를 넣어줌)
}
</script>
</body>
</html>- setInterval로 일정 시간마다 실행하는 함수 만들기
- 중지 버튼을 가져와서 onclick시 clearInterval로 인터벌 중지시킴
window 실습
쿠팡 광고 초단위로 돌아가는 형태
애니메이션이 주기적으로 동작하려면 태그가 변경되어야 함
더보기
1. 내 풀이 - img의 src(속성)만 변경 (애니메이션x)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
.bgImg {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>
<div class="slide">
<img src="img/slide1.jpg" class="bgImg">
</div>
<!-- 애니메이션 적용 안되는 풀이 -->
<!-- 애니메이션은 작동될 때 실행되는데 src만 바뀌면 class는 그대로라 애니메이션 작동하지 않음-->
<script>
var slide = document.querySelector(".slide img");
// console.log(slide); //<img src 나옴>
var count = 1; //전역변수로 이미지 숫자를 설정해 줌
window.setInterval(function() { //인터벌 안에서 돌리기
slide.src="img/slide" + count + ".jpg"; //img태그의 src를 count로 분리해서 img 변수에 넣기
console.log(slide.src); //첫번째 img 나옴
count++; //하나 띄우면 count 증가 = 1 ▶ 2 ▶ 3 ▶ 4 ...
if(count > 4) { //if 조건문으로 4 넘어가면 다시 count = 1 로 만들어줌
count = 1;
}
}, 2000); //2초에 한번씩 바꿔줌
</script>
</body>
</html>- slide의 img태그 가져오고, 전역변수로 이미지 숫자(사진 제목에 들어간 숫자) = 1로 초기화
- setInterval로 2초에 한번씩 바뀌게 설정
- img태그의 scr 속성 + count(숫자) + .jpg 바꿔줌
- 한번 돌아갈 때마다 count 증가
- if 조건문 count가 4를 넘어가면 count를 다시 1로 바꿔줌
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
.bgImg {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>
<div class="slide">
<img src="img/slide1.jpg" class="bgImg">
</div>
<!-- 다른 풀이 1 -->
<script>
var slide = document.querySelector(".slide"); //div 나옴
var count = 1; //jpg 바꿔줄 전역변수 설정
var chage = window.setInterval(function() { //2초마다 이미지 바꾸기
var img = document.createElement("img"); //img 태그를 만듦
img.src = "img/slide" + count + ".jpg"; //img 태그에 scr 속성을 만들어 줌(count 사용)
img.classList.add("bgImg"); //클래스 추가해서 style 넣어줌
console.log(img);
slide.firstElementChild.remove(); //현재 slide에 있는 img 태그 삭제
slide.appendChild(img); //만든 img 태그를 slide에 넣어줌
count++; //숫자 증가
if(count == 5) { count= 1;} //숫자가 5가 되면 count를 1로 만들어줌
}, 2000);
</script>
</body>
</html>- img 태그를 바꿔야 하기 때문에 slide 태그만 가져옴
- jpg를 바꿔줄 전역변수 count = 1; 설정
- setInterval로 2초마다 실행
- img 태그를 만들고, img태그의 속성인 src에 count를 넣음
- img 태그의 클래스 bgImg를 만들어서 추가 =style 넣을 목적
- img 태그가 잘 만들어졌는지 확인 후 firstElementChild로 현재 slide에 있는 img태그 제거
(어차피 slide에는 img 태그 하나 밖에 없음) - appednChild로 위에서 만든 img 태그를 slide에 넣어줌
- 한번 넣어주고 count를 하나씩 증가시켜서 이미지 변경
- if 조건문으로 count == 5이면 count = 1;로 만듦
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 0;}
.bgImg {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>
<div class="slide">
<img src="img/slide1.jpg" class="bgImg">
</div>
<!-- 다른 풀이 2 -->
<script>
var count = 1; //시작은 1부터
var arr = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg', 'img/slide4.jpg'];
setInterval(function() {
var img = document.createElement("img"); //img 태그 생성
img.src = arr[count++]; //img의 src 속성에 배열값 넣음
img.classList.add("bgImg"); //img의 classList에 class="bgImg" 넣음
console.log(img); //돌아가는 거 확인
//remove
var slide = document.querySelector(".slide"); //slide 가져와서
slide.firstElementChild.remove(); //들어가 있는 첫번째 img 태그 지워줌
//append
slide.appendChild(img);
if(count == arr.length) count = 0;
}, 2000);
</script>
</body>
</html>- 인덱스의 번호 바꿔줄 count 변수 생성, 맨 처음값이 인덱스0 이므로 count는 1부터 가능
- arr 배열에 이미지 다 넣어주기
- img 태그 생성
- img 태그의 src 속성에 arr배열의 인덱스(현재 카운트 넣고 하나씩 증가)로 넣어주면서 class이름도 추가
- slide 클래스 가져와서 들어가 있는 첫번째 이미지 제거
- appendChild로 만든 img 넣기
- if 조건문 count가 배열의 인덱스값과 같으면 count = 0;으로 바꿔줌
4. 최종 풀이 = 보통 이렇게 사용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slideImg {display: none;}
.slideImg.active {display: inline; animation: fadeIn 0.5s ease-in-out;}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>
<div class="slide">
<img src="img/slide1.jpg" class="slideImg active">
<img src="img/slide2.jpg" class="slideImg">
<img src="img/slide3.jpg" class="slideImg">
<img src="img/slide4.jpg" class="slideImg">
</div>
<script>
var arr = document.querySelectorAll(".slide > .slideImg"); //이미지 4개 배열로 가져옴
var i = 0; //전역변수 선언, 배열 인덱스 사용하려고
setInterval(function() {
arr[i].classList.remove("active"); //기존의 active 지우고
i++; //i를 하나 더해줌 (다음 인덱스)
if(i == arr.length) { //i가 4가 되면
i = 0; //0으로 초기화
}
arr[i].classList.add("active"); //더 해진 인덱스에 active 클래스 추가
}, 2000);
</script>
</body>
</html>
- 각 img 태그를 div 안에 넣어주고, 현재 보여지는 이미지에는 active 클래스가 들어가 있음
- 배열로 이미지 4개 다 가져오기
- 배열의 인덱스로 사용할 전역변수 i 설정
- 돌아가면서 arr의 첫번째 인덱스의 active 클래스 제거
- i++ 로 다음 인덱스의 이미지 파일에 active 클래스 생성
- 제거되고, 생성되는 과정 중간에 if 조건문으로 i == arr.length라면 i = 0으로 초기화
- 여기서 중요한 점은 setInterval 함수가 for문의 역할(=반복해줌)을 함
location 객체
- 자바스크립트 페이지 이동 - 게시판 만들기 할 때 사용함
location.href = '주소';
- 자바스크립트 새로고침: location.reload();
많이 쓰지 않음 - reload가 생성되면 가만히 있다가 로드가 들어감
더보기
location으로 주소 이동 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="move()">네이버 이동하기</button>
<script>
function move() {
location.href = "https://www.naver.com";
}
// 3초마다 location.reload() 하자
// setInterval(function() {
// location.reload();
// }, 3000);
</script>
</body>
</html>- 네이버 이동하기 버튼 누르면 location.href = " ";로 이동
- setInterval로 일정 시간마다 함수 반복 실행하는데 location.reload() 해주면 계속 load됨
history(기록) 객체
history.go(-1);
- 기록이동
- -1 1 -3 3 +, -로 앞뒤로 왔다갔다 할 수 있음
history.back();
- 뒤로가기
history.replaceState(저장할데이터(null), 바꿀제목(' '), 바뀐주소);
- 주소 변경
- list ▶ 등록(동적인 작업) ▶ 결과 ▶ list 화면이 된 등록
history.pushState(저장할데이터(null), 바꿀제목(' '), 바뀐주소);
- 새로운 기록 추가
- 5 ▶ 변경 ▶ 6 ▶ 변경 ▶ 5 (변경을 추가 했으므로 뒤로가기 하면 이 순서로 진행)
history.state;
- 페이지데이터
2023.01.06 - [클라이언트/JavaScript] - [JavaScript] AJAX, API, fetch, Promise, then, json, xml
! 언제 필요할까요?
검색 페이지나 페이지네이션(pagination)을 가진 페이지에서 많이 사용됩니다. 즉 검색 조건이나 페이지 전환이 비동기식 ajax로 이루어질때 이를 반영하기 위해 페이지 주소를 함께 변경하는 것입니다. 페이지 주소를 변경해두면 만약 페이지를 리로드, 갱신하더라도 바뀐 주소나 쿼리 스트링 정보를 그대로 가져올 수 있기 때문이죠.
pushstate()의 장점은 페이지 주소만 변경하는 것이 아니라 url 주소를 바꾸면서 동시에 데이터(state)를 전달하거나 타이틀 변경도 가능하다는 점입니다.
- 데이터 state 값 전달 가능
- 페이지 타이틀 변경
만약 전달된 data를 확인하기 위해서는 history.state 를 사용하면 접근이 가능
출처: https://webisfree.com/2020-09-10/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-history-%EA%B0%9D%EC%B2%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%B1%EC%8B%A0-%EC%97%86%EC%9D%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%84%ED%99%98-pushstate
https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7
https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7
www.zerocho.com
https://developer.mozilla.org/ko/docs/Web/API/History/replaceState
History.replaceState() - Web API | MDN
History.replaceState() 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 stateObj, title, URL로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history
developer.mozilla.org
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>index05 페이지</h3>
1번 페이지<br><br>
<button onclick="location.href = 'index06.html'">index06 페이지 이동</button>
<h3>리플레이스 스테이트</h3>
<button onclick="func()">기록 변경하기</button>
<script>
function func() {
// history.pushState(null, '', '변경.html');
//현재에서 브라우저에 기록을 하나 추가 05 ▶ 변경 ▶ 06, 이동하는 게x
//뒤로가기 하면 06 ▶ 변경 ▶ 05
history.replaceState('', '', null); //05를 안바뀜
}
//기록을 변경해서 사용할 데이터를 '' 바꿔주면, 사용자가 뒤로가기 버튼을 누른
//history.state 속성으로 확인이 가능함
if(history.state == '') { //사용자가 뒤로 가기를 눌렀구나를 감지
alert("기록이 변경되었습니다.");
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>index06 페이지</h3>
2번 페이지<br><br>
<button onclick="history.go(-1)">뒤로 가기</button>
</body>
</html>document 객체 = DOM
navigator
- 어떤 브라우저에 접속했는가? 사용자의 위치 정보 등을 담음
navigator.userAgent
- 사용자의 접속환경 확인 ▶ 문자열
더보기
navigator 확인해서 userAgent로 사용자의 접속환경 console에 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//console.log(navigator); 내비게이터 확인
//navigator.userAgent는 문자열임
var userAgent = navigator.userAgent.toLowerCase(); //소문자로 만들어줌
console.log(userAgent);
//사용자의 접속환경을 userAgent 속성으로 확인할 수 있음
//lsatIndexOf - 값이 없으면 -1, 있으면 나옴
if(userAgent.lastIndexOf("edg") != -1 ) { //-1이 못찾았다는 뜻이니까 그게 아니면 찾았다는 말 = if(true)
console.log("엣지");
} else if(userAgent.lastIndexOf("firefox") != -1) {
console.log("파이어폭스");
} else if(userAgent.lastIndexOf("whale") != -1) {
console.log("웨일");
} else {
console.log("크롬");
}
</script>
</body>
</html>- userAgent를 소문자로 찍으면 mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/108.0.0.0 safari/537.36 나옴
- 여기서 lastIndexOf로 값 찾기 - 값이 없으면 -1 나옴
- if 조건문: 원하는 값이 -1이 아니면 = 원하는 값이 있으면 true이면 console로 확인하겠다
- 엣지와 크롬은 동일한 것으로 봄
geolocation.getCurrentPosition()
- 현재 위치 정보를 얻어옴
getCurrentPosition(success)
getCurrentPosition(success, error)
getCurrentPosition(success, error, options)
navigator 객체 안에 geolocation 함수가 있고, 거기서 getCurrentPosition() 메서드가 있음
getCurrentPosition() 메서드는 success함수, error(선택)함수, 옵션을 매개변수로 갖을 수 있음
여기서 success, error함수는 GeolocaitonPosition객체를 유일한 입력 매개변수로 갖는 콜백 함수임
- 여기서 coords는 현재 위치를 정의 하는 객체를 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//console.log(navigator);
//콜백 - 호출하면 다시 거기다가 내가 결과를 돌려줄게
navigator.geolocation.getCurrentPosition(success, fail);
function success(result) { //위치정보 조회에 성공하면 success 함수 실행
console.log(result.coords);
console.log(result.coords.latitude); //위도
console.log(result.coords.longitude); //경도
}
function fail(result) { //위치정보 조회에 실패하면 fail 함수를 실행
console.log(result);
}
</script>
</body>
</html>callback
- 호출하면 다시 거기다가 내가 결과를 돌려줄게
- 함수에 파라미터로 들어가는 함수
- java script에서는 함수를 변수로 선언 가능
- 순차적으로 실행하고 싶을 때 사용
예제는 geolocation 사용함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>콜백함수 - 함수의 매개변수로 함수를 반환시켜줌</h3>
<script>
//콜백 - 호출하면 다시 거기다가 내가 결과를 돌려줄게
function geolocation(success, fail) { //너는 함수 콜만해주면 내가 대신 실행시켜서 결과를 줄게!!!
//처리, 몇초가 걸리지? 시간이 얼마나 걸릴지 몰라서 이것을 사용
//지금까지는 바로 실행되었음
setTimeout(function() { //5초 있다가 success 함수 실행시켜줘!!!!!!!
//성공
success("결과"); //대신실행
}, 5000);
}
// geolocation(function () {
// console.log(result); //결과가 5초 뒤에 돌아옴
// }, function() {
// });
geolocation(success, fail);
function success(result) {
console.log(result); //실행되는데 5초가 걸리고, 성공시에 결과=result를 콘솔에 띄움
}
function fail(result) {
}
</script>
</body>
</html>- geolocation 함수 실행하는데 callback 함수인 success, fail 넣어줌
- 그 안에서 setTimeout으로 5초 있다가 success함수에 결과라는 파라미터 넣어서 실행해줘라
- 그래서 geolocation(success, fail); 실행해주고 5초가 지난뒤 성공시에 success함수에 넣은 결과 = result를 콘솔에 보여줘!
js에서의 cookie & session
- 정보를 지속적으로 유지하기 위한 수단
2022.11.30 - [Server/JSP] - [JSP] 내장 객체(request, response, out, application), cookie, session, path
cookie - 서버간의 전송이 가능
localStorage - 브라우저에서만 사용 가능
cookie
- document.cookie 자체가 문자열
document.cookie = "user = john; path = /; expires = UTC String 기준시간";
document.cookie = "키 = 값;쿠키가 만들어진 도메인(생략가능); 완료시간";
UTC String 기준시간 = 완료시간
1. var date = new Date(); // Date 객체 생성
2. date.setMinutes ( date.getMinutes() + 1); //시간 설정, 시, 분, 초 등
3. date.toUTCString(); //UTC String 메서드
실습
더보기
1. cookie 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
쿠키이름: <input type="text" id="cookieName">
쿠키값: <input type="text" id="cookieValue">
<button id="btn">쿠키만들기🍪</button>
<script>
// document.cookie = "키=값;";
// document.cookie = "키=값; expires=UTC스트링시간타입";
/*
var date = new Date();
date.setMinutes( date.getMinutes() + 1 ); //지금 시간으로부터 1분 뒤를 저장
console.log(date);
document.cookie = "키=값; path=/; expires=" + date.toUTCString();
*/
var cookieName = document.getElementById("cookieName");
var cookieValue = document.getElementById("cookieValue");
var btn = document.getElementById("btn");
btn.onclick = function() {
var date = new Date();
date.setHours( date.getHours + 1); //지금 시간으로부터 1시간 뒤
var key= cookieName.value; //사용자가 입력한 값
var val = cookieValue.value; //사용자가 입력한 값
var cookie = "";
cookie += key + "=" + val + ";";
cookie += "path=/;"
cookie += "expires=" + date.toUTCString();
document.cookie = cookie;
}
</script>
</body>
</html>- 생성할 쿠키 이름과 쿠키 값 가져오기 + 버튼 가져오기
- 버튼을 클릭하면 Date객체 생성 후 시간 설정
- key에는 위에서 적은 쿠키 이름의 value 값
- val에는 위에서 적은 쿠키 값의 value 값
- cookie라는 빈 변수에 이어 붙이기
- 이어붙인 변수 cookie를 가지고 document.cookie에 넣어 쿠키 생성
2. cookie 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>1번 페이지에서 만든 🍪 사용할거야</h3>
<input type="text" id="findCookie">
<button id="btn">찾을 🍪</button>
<script>
console.log(document.cookie)
var findCookie = document.getElementById("findCookie"); //찾을 쿠키를 가져옴
var btn = document.getElementById("btn"); //btn 가져옴
btn.onclick = function() {
//사용자가 입력한 값
var find = findCookie.value;
var arr = document.cookie.split("; ");
//console.log(arr); //;기준 split으로 쪼개서 배열에 담아주기
//반복을 이용해서 쿠키를 찾음
for(i in arr) { //i는 인덱스
// console.log(arr[i]); //arr[i]는 값
if(arr[i].indexOf(find) != -1) { //입력한 값이 있다면
console.log('🍪있음');
var value = arr[i].replaceAll(" ", "").replace(find+"=", "") //replaceAll-공백제거, replace로 사용가자 입력한 값 a= 을 공백으로 바꿔주면 값만 남음
console.log("키:" + find);
console.log("값:" + value);
}
}
}
</script>
</body>
</html>- 찾을 쿠키 이름(findCookie)과 버튼 가져옴
- 버튼을 누르면 findCookie.value(사용자가 입력한 값) 값을 find 변수에 담음
- cookie가 몇개 있는지는 document.cookie로 콘솔에 찍어볼 수 있는데 "; "로 나눠서 나타남
- arr 배열에 ; 기준, slplit으로 쪼개서 담기
- for 반복문 이용하여 배열 안의 쿠키 찾기
- 향상된 for문 for(i in arr) { } 사용, 여기서 i는 인덱스
- if 조건문으로 arr[i]에서 indexOf로 find(입력값)을 찾으면
indexOf() 메서드는 찾는 값이 없으면 -1이 나오므로 -1이 아니면 찾은 것임 - console에 쿠키 있다고 띄우고
- key값은 find
value값은 arr[i]값에서 replaceAll로 모든 공백 제거 후, replace로 '키=(사용자가 입력한값 + =)'을 공백으로 바꿔주면 값만 남음
문제 - 팝업창과 쿠키
더보기
내 풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 쿠키가 살아있으면 팝업창이 안 나옴 -->
<h3>팝업창</h3>
오늘 하루 이 창을 다시 열지 않음<input type="checkbox" id="check">
<script src="popup.js"></script>
</body>
</html>- popup.html 파일 - 팝업창 만들기
- 여기에서 js파일을 src로 연결 *주의! script가 위로 올라가면 안됨, 순서 중요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>메인화면</h2>
<script>
// window.onload = function() {
// window.open("popup.html", "팝업", "width=400px, height=500px, left=100px, top=100px");
// }
//쿠키 찾기
// console.log(document.cookie);
var cookieCheck = document.cookie.indexOf("popupCookie");
console.log(cookieCheck);
if(cookieCheck != -1) { //쿠키가 있다면
} else { //쿠키가 없다면
window.onload = function() {
window.open("popup.html", "팝업", "width=400px, height=500px, left=100px, top=100px");
}
}
</script>
</body>
</html>- 쿠키 찾기 - 만들어진 쿠키가 있는지 확인해서 팝업을 띄울지 말지 결정해야 하므로
document.cookie에서 indexOf로 만든 쿠키 key 확인 - if 조건문으로 indexOf의 결과가 -1이 아니라면 = 쿠키가 있다면
window가 로드될 때, open으로 팝업창 열어주기 (옵션 설정 필요)
var check = document.getElementById("check");
check.onclick = function(e) {
var date = new Date();
date.setHours ( date.getHours + 24 ); //지금 시간으로부터 24시간
document.cookie = "popupCookie=done; expires=" + date.toUTCString();
}- popup.js 파일 - script 들어가는 부분
- 팝업창에서 check 가져오고, 체크하면 onclick 이벤트 발생
- 쿠키 만들기
Date 객체 생성 후, 시간 설정 24시간
document.cookie로 쿠키 키, 값, 시간조건 붙여서 생성
강사님 풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- js파일을 위에서 쓰고 싶으면 인라인이벤트 사용하고, js파일에서 함수 사용 -->
<!-- 쿠키 js -->
<script src="popup_answer.js"></script>
</head>
<body>
<!-- 쿠키가 살아있으면 팝업창이 안 나옴 -->
<h3>팝업창</h3>
<div>
내용
</div>
오늘 하루 이 창을 다시 열지 않음<input type="checkbox" onclick="popupClose()">
<script>
function popupClose() {
//쿠키생성
createCookie(); //호출
window.close(); //팝업창 종료
}
</script>
</body>
</html>- js파일을 위에서 쓰고 싶으면 인라인이벤트 사용하고, js파일에서 함수 사용
- 체크박스를 누르면 popupClose() 함수 실행
- 이 함수에서는 쿠키 생성하는 함수 호출(popup.js)하고, 팝업창 종료
var mainPopup = "mainPopup";
var subPopup = "subPopup"; //다양한 매개변수 사용가능
function createCookie() { //쿠키생성
var date = new Date();
date.setDate( date.getDate() + 1); //날짜가 하루 늘어남
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
var cookie = "";
cookie += mainPopup + "=true;";
cookie += " path=/;";
cookie += " expires=" + date.toUTCString();
document.cookie = cookie;
}
function getCookie(x) { //쿠키 찾기(얻어오기) 쿠키값이 여러개 일 수 있으니까 배열로 확인
var arr = document.cookie.split("; ");
for(var i = 0; i < arr.length; i++) {
if(arr[i].indexOf(x) != -1) {
return true;
}
}
}- main.html 에서 사용하기 위한 mainPopup 변수 설정 - 다양한 매개변수를 사용해서 여러 팝업창에 사용 가능
- 체크가 되면 우선 쿠키를 생성해야 하기 때문에 시간 설정
Date 객체 생성 후, setDate, getDate + 1로 하루 늘리고, 기본 시, 분, 초 0으로 맞춤 - 문자열을 이어붙일 cookie 변수 생성 후 키(mainPopup)=true로 cookie 생성, 쿠키의 키 = mainPopup, 값 = true
- 쿠키 찾기위해 arr 배열에 쿠키 다 쪼개서 담기
- for 반복문 돌리면서 indexOf가 -1이 아니라면 true 반환
- 결국 true가 나오면 쿠키 값이 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- js파일을 위에서 쓰고 싶으면 인라인이벤트 사용하고, js파일에서 함수 사용 -->
<!-- 쿠키 js -->
<script src="popup_answer.js"></script>
</head>
<body>
<h2>메인화면</h2>
<script>
window.onload = function() {
//팝업
//getCookie(쿠키명)
if(getCookie(mainPopup) != true) { //mainPopup이 없는게 맞다면 = 쿠키가 없다면
window.open("popup_answer.html", "팝업", "width=400px, height=500px, left=100px, top=100px");
}
}
</script>
</body>
</html>- popup.html 파일 - 쿠키 확인
- getCookie() 함수가 true가 아니며 쿠키가 없다는 뜻이므로 팝업창 띄워줌
- 없으면 안 띄워주니까 굳이 쓸 필요 없음
session
localStorage & sessionStorage
localStorage와 sessionStorage는 브라우저의 키=값 형태로 데이터를 저장하는 브라우저 측의 세션
cookie - 서버간의 전송이 가능
localStorage - 브라우저에서만 사용 가능
localStorage
- 브라우저를 종료하더라도 지속
|
setItem
|
키,값 쌍을 보관 |
| getItem(key) | 키에 해당하는 값을 받아옴 |
| removeItem(key) | 키와 해당 값을 삭제 |
| clear() | 모든 것을 삭제 |
| key(index) | 인덱스(index)에 해당하는 키를 받아옴 |
| length | 저장된 항목의 개수를 얻음 |
- storage에는 객체가 저장되지 않고, 순수한 문자열만 저장됨
- 그래서 obj를 저장하려면 JSON.stringify()로 치환해서 저장 ▶ JSON 문자열로 변환
- 가져와 쓸때도 JSON.parse()로치환하면 원본 객체로 가져와서 볼 수 있음
더보기
로컬스토리지 사용하기 - 세션 생성/제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- local storage - 브라우저 측의 session -->
<h3>로컬스토리지 사용하기</h3>
<button onclick="createSession();">세션만들기</button>
<button onclick="removeSession();">세션삭제하기</button>
<script>
/*
localStorage와 sessionStorage는 브라우저의 키=값 형태로 데이터를 저장하는 브라우저 측의 세션입니다.
localStorage - 브라우저를 종료하더라도 지속
sessionStorage - 브라우저를 종료하면 사라짐
쿠키와 다른점은
쿠키 - 서버간의 전송이 가능
localStorage - 브라우저에서만 사용 가능
*/
/*
setItem(key, value) - 키,값 쌍을 보관
getItem(key) – 키에 해당하는 값을 받아옴
removeItem(key) – 키와 해당 값을 삭제
clear() – 모든 것을 삭제
key(index) – 인덱스(index)에 해당하는 키를 받아옴
length – 저장된 항목의 개수를 얻음
*/
function createSession() {
//스토리지에는 순수한 문자열만 저장됨
//그래서 obj를 저장하려면 JSON.strigify() 치환해서 저장하면 좋음
//저장
localStorage.setItem("aaa", "홍길동");
localStorage.setItem("bbb", JSON.stringify([1,2,3])); //객체 저장이 안되고, 순수한 문자열 형식으로 저장됨
//JSON.stringify([1,2,3]) - 저장할 때는 문자열로 치환
//사용
var aaa = localStorage.getItem("aaa"); //키
var bbb = localStorage.getItem("bbb");
console.log(aaa);
console.log(JSON.parse(bbb));
//JSON.parse(bbb) - 가져다 쓸때도 치환하면 원본 객체로 가져와서 볼 수 있음
}
function removeSession() {
localStorage.removeItem("aaa");
}
</script>
</body>
</html>- localStorage.setItem으로 세션의 키, 값 저장
- 사용할때는 getItem으로 키를 변수에 담아서 사용
- 삭제는 removeItem(키값)
sessionStorage
- 브라우저를 종료하면 사라짐
오늘 하루
더보기
기억에 남는 부분
-
-
어려운 부분
-
-
문제 해결 부분
-
-
728x90
'클라이언트 > JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX, API, fetch, Promise, then, json, xml (0) | 2023.01.06 |
|---|---|
| [JavaScript] form객체, 정규분포표, date객체 (0) | 2023.01.04 |
| [JavaScript] 이벤트 객체 (0) | 2023.01.03 |
| [JavaScript] node remove, select(parent,children), class 속성제어 (1) | 2023.01.02 |
| [JavaScript] node select, create, onfocus&onblur (0) | 2022.12.30 |
