-
브라우저 객체 모델 (window, history, location, navigator)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:02
브라우저 객체 모델 (Browser Object Model)
- 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공
- 객체들을 계층 구조로 분류
브라우저 객체
- 웹 브라우저를 대상으로 이루어지 객체
- window 객체 : 창
- document 객체 : 문서
- history 객체 : 웹 브라우저 기록 정보
- location 객체 : 주소 정보
- navigator 객체 : 웹 브라우저 정보 (종류 판별 등)
- new 연산자를 통해서 생성하지 않고 그냥 사용하면 됨
- 예 : document.write()
브라우저 객체의 계층 구조
window 객체
- 창에 대한 전반적인 상황을 제어하는 최상위 객체
- 자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재
- navigator 객체만 제외하고 모든 객체는 window 객체를 통해서 접근하여 사용
- window 객체는 생략 가능
- window.document.pic.src = “image.jpg”;
- 문서 내에서 name 속성이 pic인 객체의 src 속성 변경
- <img name=”pic” src=’a.jpg’>
window 객체의 주요 속성
window 객체의 주요 메소드
window 객체의 open() 메소드
- window.open(“URL”, “창이름”, “창 속성”);
- URL : 웹페이지 주소나 HTML 파일명. 빈 값이면 새로운 창을 만들어서 오픈
- 창 이름 : 새로 만들어지는 창 이름 (임의로 작성)
- 창 속성 : 창의 모양이나 특징
- window.open(“test.html”, “test”, “width=200, height=200, status=yes, scrollbars=yes, resizable=yes”); // 기존의 test.html 문서 열기
- window.open(“”, “newWin”, “width=400, height=150”); // 새로운 창을 만들어서 열기
window 객체의 open() 메소드 예제
- 기존의 문서 열기
- bigImage.html
- windowOpen.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 window.open()</title> <script type="text/javascript"> function showBigImage(){ window.open("bigImage.html", "bigWin", "width=600, height=800, left=200, top=50"); } </script> </head> <body> <center> 그림에 마우스를 올리면 <br> 그림을 크게 볼 수 있습니다<br><br> <img src="image/고흐.jpg" width="118" height="146" onMouseOver="showBigImage()"> </center> </body> </html>
- 새로운 창 만들어서 열기
- windowOpen2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 window.open() 새 창 만들기</title> <script type="text/javascript"> // 새로운 창을 만들어서 열기 // 새로운 창에 문자열과 버튼 출력 / 버튼 클릭 시 창 닫는 기능 포함 function openNewWindow(){ var createWin = window.open("", "newWin", "width=400, height=150"); createWin.document.write("새로 만든 창입니다. <br>"); createWin.document.write("<button onClick='window.close()'>닫기</button>"); } function openWindow(){ window.open("windowOpen.html", "bigWin", "width=200, height=400, left=400, top=50, status=yes, scrollbars=yes, resizable=yes"); } // Big Image 열기 </script> </head> <body> <button onClick="openWindow()">Big Image 열기</button> <button onClick="openNewWindow()">새 창 열기</button> </body> </html>
window 객체의 타이머 관련 함수
- setTimeout() / clearTimeout()
- setinterval() / clearInterval()
setTimeout()
- setTimeout(‘호출함수’, 지연시간)
- 시간 설정
- 일정 시간이 지난 후에 호출함수를 1번만 실행
- 예 : setTimeout(‘winClose()’, 1000);
- 1초 후에 winClose() 함수 호출
clearTimeout()
- clearTimeout(타이머ID)
- 시간 설정한 것을 해제
- setTimeout() 메소드가 반환하는 타이머ID를 받아서
- 타이머ID에 해당되는 타이머를 설정해제
- 타이머ID = setTimeout(‘호출함수’, 지연시간);
- 예 : timerID = setTimeout(winClose()’, 1000);
- clearTimeout(timerID)
setTimeout() 예제
- 시작 시 msgWindow 창이 열리고, 3초 후에 자동으로 닫힘
- setTimeout.html : msgWindow 열기
- msgWindow.html : 3초 타임아웃 설정
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 msgWindow</title> <script type="text/javascript"> function winClose(){ window.close(); opener.focus(); // 현재 창을 연 부모 창에 포커스 주기 } </script> </head> <body onLoad="setTimeout('winClose()', 3000)"> 공지 사항 <br> 이 창은 3초 후에 자동으로 닫힙니다. </body> </html>
setInterval()
- setInterval(‘호출함수’, 지연시간);
- 일정 시간 간격 안에 반복 실행 : 지연시간으로 설정된 시간 간격으로 반복 호출
- 예 : setInterval(‘showTime()’, 1000);
clearInterval(타이머ID)
- setInterval()로 시간 설정한 것 해제
- 타이머ID = setInterval(‘호출함수’, 지연시간);
- clearInterval(타이머ID)
- 예 :
- timerID = setInterval(‘showTime()’, 1000);
- clearInterval(timerID)
setInterval() 연습문제1 : setInterval.html
- [시간 출력] 버튼 눌러서 1초 간격으로 시간 출력
- [시간 정지] 버튼 눌러서 정지
- 오전 11시 9분 42초
setInterval() 연습문제2 : setInterval2.html
- 1초 간격으로 이미지 1개씩 출력 (총 10개 출력) 프로그램 작성
- start() 함수 : “이미지 10개 출력” 알림창 출력
- showImage()
- 이미지 10개 출력 : apple bomb apple bomb …
- 10개 출력 후 정지
setInterval() 연습문제3 : setInterval3.html
- [카운트 다운 시작] 버튼 누르면 0.5초 간격으로 이미지 변경
- bomb1.jpg, …. bomb11.jpg
- 숫자도 10, 9, … 0 변경
- bomb11.jpg 출력되면 카운트 정지
- 다시 [카운트 다운 시작] 버튼 누르면 10부터 다시 카운트 시작
- 이미지 번호 : 1, 2, 3, ….
- 카운트 숫자 : 10, 9, 8, ….
history 객체
- 최근 방문한 주소에 관한 정보를 기억하고 있는 객체
- 메소드
- back() : 이전에 열었던 페이지로 이동
- forward() : 이전 페이지로 이동 후 다시 앞으로 이동
- go() : 몇 단계 뒤에 있는 페이지로 이동
- go(3) : 3단계 앞의 페이지로 이동
- go(-2) : 2단계 다음 페이지로 이동
location 객체
- 현재 브라우저의 주소창에 표시된 주소 값에 관련된 내용을 다루는 객체
location.href() 메소드 : 크롬 사용 시 지원 안 됨
-> 해결 : href 속성 사용
-> location.href = “http://www.google.com”;
location 객체 예제 : location.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function hrefMove(){ location.href = "http://www.google.com"; // 크롬 사용 시 // 크롬에서는 지원되지 않는 형식 // window.location.href("http://www.goolge.com"); } function assignMove(){ location.assign("http://www.daum.net"); } function replaceMove(){ // 뒤로 가기 버튼 적용 안됨 (사용할 수 없음) location.replace("http://www.youtube.com"); } </script> </head> <body> <a href="http://www.naver.com">네이버</a><br><br> <button onClick="hrefMove()">구글</button> <button onClick="assignMove()">다음</button> <button onClick="replaceMove()">유튜브</button> </body> </html>
navigator 객체
- 브라우저에 관한 정보 제공
'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환 (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26