01. 브라우저 객체 모델_js
2022. 1. 30. 12:56ㆍksmart_html_css_js/JavaScript
728x90
- 최상위 window 객체가 있다
open, close
- open : 새 창, close : 창 닫기
<script type="text/javascript">
//인수에 절대경로 혹은 상대경로 입력 가능
open('http://ksmart.or.kr'); //window.open(); 윈도우 생략 가능
//창닫기 띄워져있던 창은 닫아진다.
close();
</script>
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>팝업입니다.</h1>
<button type="button" onclock=""></button>
</body>
</html>
경로,타이틀,옵션
window.open('popup.html','팝업띄우기','width=300,height=400,left=100,top=100,scroppbar=no');
이벤트와 연계
- 인수에 들어간 선택자와 일치하는 대상을 찾기
<button type="button" id="popupOpen">팝업열기</button>
<script type="text/javascript">
var popupOpen = document.querySelector('#popupOpen');
</script>- onclick시 아래 함수 실행
<button type="button" onclick="popupOpen();">팝업열기</button>
<script type="text/javascript">
function popupOpen(){
window.open('popup.html','팝업띄우기', width=300,height=400,left=100,top=100,scroppbar=no');
}
</script>
팝업 열기, 닫기
function popupOpen(){
window.open('popup.html','팝업띄우기',
'width=300,height=400,left=100,top=100,scroppbar=no');
}<h1>팝업입니다.</h1>
<button type="button" onclick="popupClose();">팝업닫기</button>
<script type="text/javascript">
function popupClose(){
close();
}
</script>
cookie로 오늘 하루 팝업 안뜨게 하는 기능
https://www.w3schools.com/js/js_cookies.asp
function popupOpen() {
open('popup.html', '팝업띄우기',
'width=300, height=400, left=100, top=100, scrollbar=no');
}
var openPopupCheck=getCookie('myPopup');
console.log(openPopupCheck);
if(openPopupCheck != 'Y'){
popupOpen();
}
//저장시
// document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
//호출시
//날짜와 패스를 제외한 기억 값만 가지고 온다. (유효기간 내의 데이터만 )
//document.cookie -> username=John Smith; userage=20;
//함수 호출 시 인수에 키를 넣어 쿠키값 가지고오기
function getCookie(cname) {
let name = cname + "=";
//저장된 쿠키를 디코딩
let decodedCookie = decodeURIComponent(document.cookie);
//여러개의 값이 저장 시 ; 로 되어있다.
//; 기준으로 잘라 배열로 변환한다.
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
//배열의 원소에 접근하여 처음의 문자열이 공백이라면 공백을 제거
while (c.charAt(0) == ' ') {
c = c.substring(1);//데이터에 공백이 들어갈 수 있음으로 substring으로 자름
}
//배열 원소에 해당 키의 값이 포함되어 있다면
if (c.indexOf(name) == 0) {
//쿠키의 원소 값이 username=John Smith라면
//name.length -> 키의 문자열 개수
//c.length -> 배열원소의 문자열 개수
//substring 으로 값 잘라서 반환
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
728x90
'ksmart_html_css_js > JavaScript' 카테고리의 다른 글
| HTML요소(on속성)이벤트_js (0) | 2022.01.30 |
|---|---|
| 02. 브라우저 객체 모델_js (0) | 2022.01.30 |
| this, 내장객체_js (0) | 2022.01.30 |
| 객체 생성자 함수 프로토타입_js (0) | 2022.01.30 |
| 객체생성자함수_js (0) | 2022.01.30 |