Javascript_브라우저 객체(Browser Object Model)

재이·2022년 2월 7일
2

Javascript

목록 보기
6/7

※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 바탕으로 작성되었음

브라우저 객체(Browser Object Model)

BOM(브라우저 객체 모델)이란 브라우저 창에 포함된 모든 객체 요소들**을 의미한다. 브라우저에는 URL 주소에 대한 정보를 제공하는 'location' 객체, 현재 실행 둥인 브라우저에 대한 정보(브라우저명, 코드명 등)를 제공하는 'navigator' 객체, 브라우저의 방문 기록에 대한 정보를 제공하는 'history' 객체 등이 있따.

단, 브라우저라는 것도 결국 창(윈도우) 안에서 실행되는 프로그램이므로, 위의 모든 개별 객체들은 최상위 객체인 window(창) 아래에 존재한다. 그럼 이번 과에서는 각 브라우저 객체 별 역할과 기능(메서드), 속성에 대해 살펴보자.

브라우저 객체의 종류

window

  • document --- 문서 객체이며, 하위에 form, cookie, images 등이 존재
  • navigator --- 브라우저에 대한 정보를 제공하는 객체
  • location --- 위치(url)관련 정보를 제공하는 객체
  • scrreen --- 스크린(모니터)에 대한 정보를 제공하는 객체
  • history --- 인터넷 방문 기록에 대한 정보를 제공하는 객체

window

모든 객체의 최상위 객체이며, 새 창을 생성하는 역할 등을 한다. 다음은 window 객체의 메서드들이다.

open("경로", "창이름", "※옵션") --- 새 창으로 문서를 열 때 사용
alert("문자") --- 경고창을 열 때 사용
prompt("질문", "기본응답") --- 질문/응답창을 열 때 사용
confirm("질문") --- 확인/취소창을 열 때 사용
setTimeout(실행문, 간격시간) --- 해당 간격시간 뒤에 실행문을 한 번만 수행
setinterval(실행문, 간격시간) --- 해당 간격으로 실행문을 반복적으로 수행
=> window 객체 생략 가능

※ open 메서드의 옵션종류
width --- 새 창의 너비 (px, 픽셀 단위)
height --- 새 창의 높이 (px, 픽셀 단위)
left --- 새 창을 열 때 스크린 기준 좌측 위치 (px, 픽셀 단위)
top --- 새 창을 열 때 스크린 기준 상단 위치 (px, 픽셀 단위)
scrollbars --- 스크롤바의 생성 여부 (값은 yes or no)
menubar --- 메뉴 바의 노출 여부 (값은 yes or no)
toolbar --- 도구상자의 노출 여부 (값은 yes or no)
location --- 주소표시줄의 노출 여부 (값은 yes or no)
status --- 상태표시줄의 노출 여부 (값은 yes or no)
resizeable --- 창의 사이즈 조정 가능 여부 (값은 yes or no)

다음은 window객체의 open 메서드를 활용한 팝업창 띄우기이다.

<body>
  <p><img src="images/popup.jpg" alt="이달에 새로 나온 책" usemap="#pop" /></p>
  <map name="pop" id="pop">
    <srea shape="rect" coords="228, 371, 294, 399" href="#" onclick="window.close();" alt="창 닫기" />
  </map>
</body>
<script type="text/javascript">
  //<!CDATA[
    window.open("popup1.html', "naver", "width=300px, height=400px, left=200px, top=20px, scrollbars=no, toolbar=no, location="no");
  //]]>
</script>
</head>
<body>
  <h1>opener페잊지</h1>
</body>

위 실습 예제는 본 페이지(오프너)와 팝업으로 열릴 'popup1.html' 페이지의 내용이다.

navigator는 브라우저에 대한 정보를 제공하는 객체이며, 다음과 같은 속성들이 존재한다.

appCodeName --- 브라우저의 코드명을 제공
appName --- 브라우저의 이름을 제공
appVersion --- 브라우저의 기본 버전과 실행 중인 플랫폼 정보를 제공
userAgent --- 브라우저의 전체적인 정보를 제공

다음은 navigator 객체의 각 속성들을 출력해 본 것이다.

<script type="text/javascript">
//<![CDATA[
  document.write("코드명: " + navigator.appCodeName + "<br />")
  document.write("브라우저명: " + navigator.appName + "<br />")
  document.write("플랫폼 버전: " + navigator.appVersion + "<br />")
  document.write("전체정보: " + navigator.userAgent + "<br />")
//]]>
</script>

이처럼 navigator 객체의 'userAgent' 속성을 이용하면 현 운영체제에 대한 정보를 얻을 수 있으므로, 현재 사용자의 기기가 데스크탑 PC인지 모바일 기기인지를 파악할 수 있다.

<script type="text/javascript">
  //<![CDATA[
	var myAgent = navigator.userAent.toLowerCase();
	var mobile = ["iphone", "ipod", "android", "blackberry", "window ce", "nokia", "webos", "opera mini", "sonyericsson", "opera mobi", "iemobile"];
	for(var i = 0; i < mobile.legth; i ++) {
	  if(myAgent.indexOf(mobile[i]) >= 0) {
		location.href="http://m.naver.com";
		break;
	  }
	}
  //]]>
</script>
</head>
<body>
  <h1>PC버전 페이지</h1>
</body>

location

location 객체는 브라우저의 현재 URL 주소값에 대한 정보를 제공한다. location 객체의 속성들은 다음과 같다.

location.hash --- 주소창에 URL에서 #뒤에 오는 문자열을 반환
location.host --- 주소창에 URL에서 도메인명을 반환
location.hostname --- 주소창에 URL에서 도메인명을 반환
location.href --- 주소창에 URL에서 전체 정보를 반환
location.pathname --- 주소창에 URL에서 메인명 다음에 오는 겨오를 반환
location.port --- 주소창에 URL에서 포트번호를 반환
location.portcol --- 주소탕에 URL에서 프로토콜을 반환

screen

screen 객체는 스크린(모니터)에 대한 속성을 제공하는 객체이다.

availWidth --- 사용 가능한 스크린 가로 너비값을 반환
availHeight --- 사용 가능한 스크린 세로 높이값을 반환
availTop --- 창이 위치할 수 있는 최상위의 위치값을 반환
availLeft --- 창이 위치할 수 있는 가장 좌측의 위치값을 반환

각각의 속성에 해당하는 값을 다음의 실습을 통해 알아보도록 하자.

<script type="text/javascript">
  //<![CDATA[
	document.write("스크린 너비값 " + screen.availWidth + "<br />");
	document.write("스크린 높이값 " + screen.availHeight + "<br />");
	document.write("스크린 가장 좌측 위치값 " + screen.availLeft + "<br />");
	document.write("스크린 가장 상단 위치값 " + screen.availTop + "<br />");
  //]]>
</script>

출력값 예시
스크린 너비값 1920
스크린 높이값 1048
스크린 가장 좌측 위치값 0
스크린 가장 상단 위치값 0

availHeight(사용 가능한 스크린 높이값)는 작업표시줄 제외한 높이를 반환한 것이다.

비 IE 계열 브라우저들만의 전용 속성 availLeft, availTop
screen 객체의 속성 중 'availLeft'와 'availTop'은 비 IE 계열 브라우저(파이어폭스, 크롬 등)들만의 전용 속성으로, 만약 위의 코드를 IE에서 실행하면 availLeft와 availTop의 값은 'undefined(확인되지 않음)'로만 출력된다.

history

브라우저로 방문한 페이지들의 정보를 제공하며, 메서드를 사용하여 '이전' 및 '다음'과 같은 페이지 이동을 위한 버튼을 만들 수도 있다.

go(값) --- 값만큼 다음 또는 이전 페이지로 이동한다.
back() --- 이전 페이지로 이동한다.
forward() --- 다음 페이지로 이동한다.

<body>
  <h1>첫 페이지</h1>
  <a href="index2.html">두번째 페이지로 이동</a>
</body>
<body>
  <h1>두번째 페이지</h1>
  <p><a href="index3.html">마지막 페이지로 이동</a></p>
  <input type="button" value="이전 페이지로 이동" onclick="history.back();" />
  <input type="button" value="다음 페이지로 이동" onclick="history.go(1);" />
  <input type="button" valur="forward 버튼" onclick="history.forward();" />
</body>
<body>
  <h1>마지막페이지</h1>
  <p><input type="button" value="이전 페이지로 이동" onclick="history.go(-1)" /></p>
  <p><input type="button" value="첫 페이지로 이동" onclick="history.go(-2)" /></p>
</body>
profile
재이
그림쟁이 개발자
이전 포스트

Javascript_이벤트(Event)

다음 포스트

문서 객체(Document Object Model)

0개의 댓글