[javascript] 브라우저 객체모델(BOM, Browser Object Model)_1

 

 

 

브라우저 객체모델(BOM, Browser Object Model) : 브라우저에 내장된 객체를 의미. window는 브라우저 객체의 최상위 객체이며, window객체에는 하위객체가 포함되어 있다. 

 

---

1. window객체

window는 브라우저 객체의 최상위 객체이며, 다음과 같은 메서드를 사용

window > document( > body, div, img, a, input....), screen, location, history, navigator

 

window 객체의 메서드 종류

종류	설명
open("URL", "새창이름", "새창옵션")	URL 페이지를 새창으로 나타냄
alert(data)	경고창을 나타내고 데이터를 보여줌. 방문자가 [확인]버튼을 누르면 alert()를 사용한 다음 위치의 코드 수행
prompt("질문","답변")	질문과 답변으로 질의응답 창을 나타냄
confirm("질문 내용")	질문 내용으로 확인이나 취소 창을 나타냄. [확인]버튼을 누르면 true반환 [취소]버튼을 누르면 false반환
moveTo(x,y)	지정한 새 창의 크기를 이동
resizeTo(width, height)	지정한 새 창의 크기를 변경
setInterval(function() {자바스크립트 코드}, 일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드 실행
setTimeout(function() {자바스크립트 코드}, 일정 시간 간격)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드 실행

 

---

 

open()메서드를 이용해 팝업창 나타내기 : open() 매서드를 이용하면 지정한 url 페이지를 새 브라우저 창에 나타낼 수 있음. 하지만 현재는 사용자가 팝업창을 차단 할 수있어 광고효과가 많이 떨어짐.

open("URL", "새 창 이름", "새 창 옵션")

window.open("http://www.naver.com", "naver", "width=350, height=400, left=50, top=10, scrollbars=no");

//scrollbars는 스크롤바의 숨김/노출을 설정(숨김 = no, 노출 = yes).

 

 

새 창의 옵션 종류

속성	설명
width	새 창의 너비를 설정
height	새 창의 높이를 설정
left	새 창의 수평(X축)위치 설정
top	새 창의 수직(Y축)위치 설정
scrollbars	새 창의 스크롤바의 숨김/노출을 설정(숨김 = no, 노출 = yes)
location	새 창의 URL 주소 입력 영역의 숨김/노출을 설정
status	새 창의 상태 표시줄 영역의 숨김/노출을 설정
toolbars	새 창의 도구 상자 영역의 숨김/노출을 설정

 

예제1) window.open()메서드를 이용하여 팝업 창을 나타내는 예제

<p>
 <img src="images/img01.jpg" usemap="#intro" alt="이미지1">
 <map name="intro" id="intro">
  <area shape="rect" coords="230, 368, 280. 390" href="#" alt="창닫기"
  onclick="window.close();"> <!--창닫기를 클릭하면 현재 창을 닫음-->
 </map>
</p>

//팝업창이 나타날 수 있게 해주는 오프너 페이지 코드
//window.open()메서드를 이용하여 위에서 만든 팝업 창 페이지를 띄움
window.open("winpopup.html", "pop1", "width=300, height=400, left=300, top=50");

 

---

alert() : 경고창을 나타낼 때 사용. window.alert() 메서드는 다음 기본형처럼 window 객체를 따로 작성하지 않아도 사용 가능

alert("경고 메세지")

alert("잘못 입력했습니다.") //경고 창을 나타냄

 

---

prompt() : 질의응답 창을 나타낼 때 사용. window.prompt()메서드 역시 앞에 window 객체를 따로 작성하지 않아도 사용 가능

prompt("질의 내용", "기본 답변");

prompt("당신의 연령은?", "0";) //질의응답 창을 나타냄

 

---

confirm() : 확인 / 취소 창을 나타낼 때 사용. 앞에 window 객체를 따로 작성하지 않아도 사용 가능

confirm("질의 내용");

confirm("정말로 삭제하시겠습니까?"); // 확인/취소창을 나타냄