Window 객채와 BOM vs BOM

Window 객체

Window 객체란 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체이다.

인터넷 브라우저를 보면 위에 탭들도 있고, 주소창도 있고, 즐겨찾기도 있다. 그 다음부터는 이제 웹사이트가 표시됩니다. 여기서 브라우저 전체를 담당하는 게 Window 객체이고, 웹사이트만 담당하는게 Document 객체라고 이해하시면 된다.

console 에 window. 만 치더라도 많은 객체의 속성과 메소드들이 뜬다.

그중에서 대표적으로는 screen, location, history, document 와 같은 객체들이 존재한다. 메소드는 parseInt, isNaN 등이 있다.

하지만 여기서 보통 parseInt() 메소드를 쌩? 으로 사용하는 경우로 나는 사용했는데 따져보면 window.parseInt() 라고 사용했어야 한다.

이유를 찾아보니 window는 모든 객체의 조상이라고 한다. 이를 전역객체 라고 부르는데, 이는 모든 객체를 포함하고 있기에 window 자체는 생략 가능하다고 한다. 그래서 실제로 찾아보니 window 객체 내부에 String, Boolean, Number, Object, Function, Array 와 같은 자료형 이 모두 포함되어 있었다.

대표적인 window 객체의 메소드와 속성 예시

window.close()

현재 창을 닫는다. 아까 말했듣이 window 는 생략 가능하기에 그냥 close(); 만 해도 된다. 하지만 헷갈릴 수도 있기에 프로젝트 진행시에는 붙여야 할지도 않을까?

window.open()

새 창을 연다. 팝업 창의 형태로도 열 수 있고,
새 탭으로도 열 수 있다. 첫번째 인자로 주소를 받고, 두번째 인자로 새 탭으로 열지, 현재 탭에 열지 설정 가능하다. 세번째 인자로 새 창에 대한 각종 설정 또한 전달 할 수 있다.

open('https://www.google.com'); // 새 탭
open('https://www.google.com', '_self'); // 현재 탭
open('', '', 'width=200,height=200'); // 가로세로 200px의 팝업창

window.setTimeout(), window.setInterval()

함수의 실행을 지연? 할 수 있게 도와준다.
setTimeout 은 지연,
setInterval 은 지정한 초마다 반복 이다.

setTimeout(function() {
  alert('1초 뒤');
}, 1000);

setInterval(function() {
  console.log('1초마다');
});

window.getComputedStyle()

현재 적용된 CSS 속성 값을 알 수 있다.

console.log(getComputedStyle(document.getElementById('app-root')));

DOM vs BOM

DOM

DOM 은 Document Object Model 이며,
HTML 과 XML 을 위한 API 이다.

DOM 은 전체의 페이지를 'nodes 를 tree structure 형태로 표현하고 수정, 제거 등을 할 수 있게 해준다.'

BOM

웹 브라우저의 환경의 다양한 기능을 객체처럼 다루는 모델로, 대부분 브라우저에서 구현되어 있는 기능들이 있지만 표준이 존재하지 않아 브라우저마다 세부사항은 다르다는 단점이 있다.

BOM을 이용해 웹 브라우저의 버튼, URL 주소 입력창, 타이틀 바 등 웹 브라우저 윈도우 및 웹페이지의 일부분을 제어할 수 있게 한다.

window 객체를 통해 쉽게 접근이 가능합니다.

DOM 은 이해하겠는데 BOM으로 뭘 할 수 있나?

브라우저 자체를 controll 하기 때문에 아래와 같은 예시를 들어봤다.

• 사용자가 클릭 했을때, 안내창을 보여주고 싶다!?
• 현재 url 위치 및 접속 히스토리를 알고 싶다!?
• 유저가 접속한 환경을 알고 싶다!?

ex)

window.onbeforeunload = function() {
    return '작성 중인 메시지가 있습니다.'
}

창을 닫으려 할 시에 아래와 같은 안내창을 띄울 수 있다.

참고:

https://vkanakaraj.wordpress.com/2009/12/18/javascript-vs-dom-vs-bom-relationship-explained/

https://www.geeksforgeeks.org/html-vs-xml/