(JavaScript) 브라우저 객체 모델

카테고리

{ "Hello World!" };/JavaScript／jQuery

작성일

2021. 12. 31. 15:43

작성자

갱수터

728x90

- 브라우저에 내장된 객체

- 계층적 구조

- 최상위 window 객체가 있다.

window 객체

메서드 종류

open('URL','새 창 이름','새창옵션')	URL페이지를 새 창으로 나타냄
close()	현재 창 종료
alert(data)	경고창
prompt('질문','답변')	질의응답창 (결괏값: 문자형)
confirm('질문내용')	진행여부확인창 (결괏값: 확인-true, 취소-false)
moveTo(x, y)	지정한 새 창의 위치를 이동
resizeTo(width, height)	지정한 새창의 크기 변경
setInterval(function() { 코드 }, 시간간격)	지속적으로 일정한 시간 간격으로 함수 호출
setTimeout(function() { 코드 }, 시간간격)	단 한번 일정한 시간 간격 이후에 함수 호출

쿠키 이용해서 하루동안 안보기 체크박스 만들어보기

(https://www.w3schools.com/js/js_cookies.asp)

팝업창은 페이지가 로드되면 자동으로 뜨고, 버튼을 눌러도 뜨게함

<button type="button" onclick="popupOpen();">팝업열기</button>
<script type="text/javascript">
	//인수에 절대 경로 혹은 상대 경로 입력 가능
	//open('http://ksmart.or.kr'); //window생략가능
	//창닫기
	//close();

	//경로, 타이틀, 옵션
	/* window.open('popup.html'
			, '팝업띄우기',
			'width=300, height=400, left=100, top=100, scrollbar=no'); */

	//이벤트와 연계
	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);
		    }
		    //배열 원소에 해당 키의 값이 포함되어 있다면
		    if (c.indexOf(name) == 0) {
		    	//쿠키의 원소 값이 username=John Smith라면
		    	//name.length ->키의 문자열 갯수
		    	//c.length -> 배열원소의 문자열 갯수
		    	//substring으로 값 잘라서 반환
		      return c.substring(name.length, c.length);
		    }
		  }
		  return "";
		}
</script>

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>팝업</title>
</head>
<body>
	<h1>팝업입니다.</h1>
	<input type="checkbox" id="dayCheck"> 오늘하루안보기
	<button type="button" onclick="popupClose();">팝업 닫기</button>
	<script type="text/javascript">
		function popupClose() {
			//인수에 들어간 선택자를 검색하고 검색된 대상이 체크가 되어있는지 결과 얻어오기
			var isDayCheck = document.querySelector('#dayCheck').checked;
			if (isDayCheck){
				setCookie('myPopup', 'Y', 1);
			}
			//현재 창 닫기
			close();
		}

		//document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
		/*
			저장 포맷터
			키=값; expires=쿠키 저장 유효기간; path=/ (/일 경우 사이트 전체 경로)
		 */
		function setCookie(cname, cvalue, exdays) {
			const d = new Date(); //현재 기준 날짜 객체 생성
			//생성된 날짜 객체에 인수에 들어온 값의 * 하루연산
			d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
			//날짜 정보를 문자열로 변환
			let expires = "expires=" + d.toUTCString();
			//쿠키에 키와 값 날짜 정보를 한꺼번에 저장하기
			document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
		}
	</script>
</body>
</html>

실습1. 아래에 주어진 날짜 객체를 활용하여 1초 마다 아래의 문자형 포멧이 출력되도록 하여라.
(포멧: 14 : 07 : 01 ->시간증가)

풀이

var date = new Date();

setInterval(function(){
	date.setSeconds(date.getSeconds()+1);
			
	var printDate = date.getHours()+' : ';
	printDate += date.getMinutes()+' : ';
	printDate += (date.getSeconds()<10)?'0'+date.getSeconds():date.getSeconds();
			
	console.log(printDate);
}, 1000);

> 문제풀때 시간과 분은 두자리수라 초와 같이 0붙일 생각을 안함...

결과

선생님풀이

setInterval(function(){
	var h = date.getHours();
	var m = date.getMinutes();
	var s = date.getSeconds();
			
	if(h<10) h='0'+h;
	if(m<10) m='0'+m;
	if(s<10) s='0'+s;
			
	console.log(h + ':' + m + ':' +s);
			
	date.setSeconds(date.getSeconds()+1);
}, 1000);

실습2. 5~1까지 카운팅 후에 1초때 '이벤트 종료'라는 경고를 띄우도록 하여라.

풀이

var cnt = 6;
var intervalNumber = setInterval(function() {
	cnt--;
	console.log(cnt);			
	if(cnt==1){
		clearInterval(intervalNumber);
		alert('이벤트 종료');
	}
}, 1000);

> 카운팅하는 숫자에 5를 넣고 console.log()메서드를 증감연산자 위에써도 if문에 조건을 1로 넣어서 1은 출력이 안되어서 그냥 카운팅 숫자 초기화를 6으로해버림... 근데 그냥 cnt=5, cnt--랑 console.log()메서드 자리 바꾸고, if(cnt<1)했으면 될일...

결과

location 객체

- 현재 페이지의 url의 정보
- 새로고침 : reload()

- 페이지 이동 : location.href ='이동 경로';

histoty 객체

- 사용자가 방문한 사이트 이력을 가지고 있는 객체
- 방문한 사이트이력을 가지고 있음으로 이전 페이지 다음 페이지 이동 가능하다.

- .back() = .go(-1)

- .forward() = go(1)

navigator 객체

- 브라우저 정보 및 OS정보를 제공하는 객체

- ex) const agt = navigator.userAgent.toLowerCase();

screen 객체

-디바이스 크기를 가지고 있는 객체

document 객체

- 이벤트 처리에 주로 사용 따로 정리

2022.01.08 - [{ "Hello World!" };/JavaScript] - (JavaScript) document 객체

(JavaScript) document 객체

- DOM(Documnet Object Model) 문서 객체 - document API를 활용, html 요소를 검색하여 이벤트 등록 및 문서 제어가 가능하다. API(Application Programming Interface) - 응용 프로그램 프로그래밍 인터페이스 I..

everyday-com-eat.tistory.com

2022.01.14 - [{ "Hello World!" };/JavaScript] - (JavaScript) 콜백 함수, cloneNode 동적바인딩

(JavaScript) 콜백 함수, cloneNode 동적바인딩

콜백 함수 - 이벤트에 등록된 함수는 콜백함수이다. 콜백함수 테스트 더보기 더보기 한국스마트정보교육원 onmousemove - 마우스가 움직일 때 textMove라는 id를 가진 div의 top,left의 값을 마우스 좌표