[Javascript] 브라우저 객체 모델 BOM
브라우저 객체란, 브라우저에 내장되어있는 브라우저 조작을 위한 객체입니다. 더욱 간단히 설명하자면 브라우저에서 뒤로가기나 새로고침, 새 창 열기 등과 같은 조작을 위해 제공하는 객체입니다.
0. 계층 구조
브라우저 객체는 window라는 최상위 객체 아래에 자식 객체로 존재하고 있습니다.
물론 window가 최상위 객체이므로 여하에 수 많은 자식 객체들을 데리고 있지만 여기서는 간단하게 표시했습니다. 그리고 채용률이 높은 네 가지 정도의 객체들만 간단히 소개해보려고 합니다.
여기서 document 객체는 지난 시간까지 다룬 문서 객체입니다.
1. window 객체
window 객체는 위에서 언급했듯이 모든 객체의 최상위 객체 입니다. 다른 객체들과는 달리 메소드 앞에 이름을 따로 명시하지 않아도 되는 객체입니다.
window 객체의 메소드는 다음과 같습니다.
1-1. alert()
경고창을 띄워줍니다.
1-2. open()
open(URL, 새 창 이름, 새 창 옵션);새 창을 열어줍니다. 그런데 보통 다음과 같은 표현이 더 익숙할 것 입니다. 팝업 창을 띄워줍니다.
옵션을 지정하면 새롭게 열리는 창 크기, 위치 등을 조정할 수 있습니다. 우리가 어떤 페이지에 들어갔을때 팝업광고 크기가 제각각임을 생각하면 쉽게 이해가 가능할 것 이라고 생각이 됩니다.
1-3. prompt()
문답이 가능한 창을 띄웁니다.
1-4. confirm()
확인과 취소가 존재하는 창을 띄웁니다.
1-5. setInterval(), clearInterval()
setInterval()은 일정한 시간 간격을 두고 코드를 반복실행 하는 메소드입니다. 이 메소드만 사용하고 다른 조작이 없다면 일정 시간 마다 계속 실행되는데 이 주기를 멈추고 싶다면 clearInterval()을 사용합니다.
시간 간격은 밀리초(ms)단위로 설정해야합니다. 1초 = 1,000
setInterval(코드, 반복할 시간 간격);
clearInterval();
1-6. setTimeout(), clearTimeout()
setTimeout() 메소드는 일정시간 후에 코드를 한 번 실행하고 종료 하는 메소드 입니다. clearTimeout() 메소드를 이용하면 setTimeout() 메소드를 강제로 중지시킬 수 있습니다.
마찬가지로 시간 간격은 밀리초 단위로 지정합니다.
setTimeout(코드, 시간 간격);
clearTimeout();
2. location 객체
location 객체는 브라우저의 URL부분을 활용하는 객체입니다. 이하에 등장하는 속성들은 window 객체와 달리 속성이나 메소드 앞에 객체명을 명시해 주어야합니다. (객체명.속성명)
| 속성, 메소드 | 설명 | 사용 |
| href | 현재 페이지 URL 반환 | location.href |
| hash | 현재 URL 해시값 반환 | location.hash |
| port | 현재 URL 포트 번호 반환 | location.port |
| protocol | 현재 URL 프로토콜 반환 | location.protocol |
| search | 현재 URL 쿼리 반환 | location.search |
| reload() | 현재 페이지 새로고침 | location.relaod() |
| replace() | 지정된 URL 주소로 이동 | location.replace(URL) |
3. history 객체
history 객체는 사용자가 방문한 사이트 기록들을 저장해두고 뒤로가기나 앞으로가기 등의 기능을 지원하는 객체입니다.
| 속성, 메소드 | 설명 | 사용 |
| length | 방문기록에 저장된 URL의 갯수 반환 | history.length |
| go() | 입력된 수만큼 페이지로 이동 | history.go(n) |
| back() | 이전 방문 페이지로 이동 | history.back() |
| forward() | 다음 방문 페이지로 이동 | history.forward() |
go() 메소드에 대해 짧게 설명하고 넘어가자면 인수로 지정된 수만큼 페이지를 이동합니다. 이말은 2를 입력하면 다음 방문페이지 2개 만큼을 이동하고, -2를 입력하면 이전 방문 페이지 2개 이전 페이지로 이동합니다.
ex) 네이버 > 티스토리 > 구글 > 다음 순으로 이동했을때,
현재 페이지가 다음인 경우, go(-3)일때, 네이버로 이동, 그 후 go(2)를 하면 구글로 이동
4. navigator 객체
navigator 객체는 사용자가 이용중인 브라우저나 운영체제의 정보를 이용할 수 있게 해주는 객체입니다.
| 속성 | 설명 | 사용 |
| appCodeName | 브라우저 코드명 반환 | navigator.appCodeName |
| appName | 브라우저 이름 반환 | navigator.appName |
| appVersion | 브라우저 버전 반환 | navigator.appVersion |
| language | 브라우저 사용 언어 반환 | navigator.language |
| product | 브라우저 엔진 이름 반환 | navigator.product |
| platform | 운영체제 정보 반환 | navigator.platform |
| onLine | 온라인 상태 정보 반환 온라인 상태면 true 반환 |
navigator.onLine |
| userAgent | 브라우저와 운영체제에 대한 종합 정보 반환 | navigator.userAgent |
...BOM 포스트를 마지막으로 Javascript에 대한 기초 부분은 마치려고 합니다. 물론 필요하다면 고급기술이나 추가적인 부분에 대해선 지속적으로 포스트 추가나 수정은 이루어질 예정이기도 합니다.
그래서 다음 정기 포스팅으로 다른 기술을 가져와 보도록 하겠습니다.
처음부터 끝까지 읽었거나, 검색으로 들어와 주신 분들 모두 감사드립니다.