알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
[DOM,BOM,javascript] 객체 제어 하기 본문
BOM(Browser Object Model)
BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다.
BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다.
Location 객체
<!DOCTYPE html>
<html>
<body>
<input type="button" value="location" onclick="func_location()" />
<script type="text/javascript">
function func_location () {
alert(location.toString());
}
</script>
</body>
</html>
하지만 location 객체를 에디터로 테스트 하기 어려운 면이 있어서
크롬을 켜고 F12 단축키를 눌러서 개발자 모드를 실행합니다.
이부분에 입력 해서 샘플 코드를 진행 하겠습니다.
console.log(location.protocol, location.host, location.port, location.pathname, location.search, location.hash)
location.href = 'http://daum.net';
위와 같이 웹사이트를 이동할수도 있습니다.
이것이 location 객체의 일반적인 파트라 할수 있습니다.
Navigator 객체
온라인 에는 여러가지 웹브라우져가 존재합니다 크롬,익스플러,파이어폭스,사파리 등등 수많은 웹브라우져가 존재하지만
모든 웹브라우져에서 객체 제어가 똑같이 행동을 하는 것은 아닙니다. ECMAScript[표준 javascript] 부분 에서는 거의 비슷하게
움직이지만 독자적인 해당 웹브라우져의 기능이나 ECMAScript[표준 javascript] 업데이트로 인해 표준을 업데이트한 브라우져 와
안한 브라우져 는 똑같이 행동을 하는 부분이 있고 안하는 부분도 있고 우리는 이러한 부분을 호환성 이라고 합니다.
같은 코드로 모두가 똑같이 행동했으면 하지만 현실은 그렇게 않기 때문입니다.
그래서 이러한 호환성 부분을 해결하기 위해서 각 브라우져 마다 또는 운영체제 마다 또는 시스템 환경 마다에 따라 코드를 각기 따로 작성해
줍니다.
그럴때 시스템의 환경 적인 요인을 알기위핸 객체가 Navigator 객체 입니다.
크롬 개발자 콘솔에
navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36"
navigator.platform
"Win32"
이렇게 해당 결과물을 리턴 받아 추후에 IF 문등으로 구분하여 코드를 작성 합니다.
이후 다른 필요한 BOM ECMAScript 표준 문서나 google 을 통해 사용하면 좋을듯합니다.
'Web > 웹브라우저 객체 API' 카테고리의 다른 글
| DOM 제어대상 찾기 (0) | 2017.08.21 |
|---|---|
| [javascript] 창제어 (0) | 2017.08.19 |
| [javascript] alert,confirm,prompt 사용하기 (0) | 2017.08.19 |
| [DOM,BOM,javascript] 전역객체 윈도우 (0) | 2017.08.19 |
| [DOM,BOM,javascript]Object Model 학습 하기[중요 개념] (0) | 2017.08.17 |
