Browser 구조 분석 (Window Global Object)

브라우저에서 웹 페이지를 열게 되면, ‘Window’라는 전체적인 오브젝트가 존재하고, Window는 페이지 뿐만 아니라 브라우저에서 현재 열려있는 전체적인 창을 의미한다.

Window 안에 페이지가 표기되는 부분이 바로 Document 오브젝트이다. 즉, Document는 HTML에 작성한 요소들이 표기되어지는 부분이라고 볼 수 있다.

그리고 사용자 눈에는 보이지 않지만, 전체적으로 Window에 관련된 즉 브라우저 자체에 관련된 정보들이 담겨있는 Navigator라는 오브젝트도 있다.

그래서 HTML,CSS,JS를 포함한 웹페이지를 브라우저에서 열게 되면, Window라는 전체적인 오브젝트가 있고, 그 Window안에는 DOM(Document Object Model)들이 들어 있고(DOM을 이용하여 새로운 요소를 추가, 삭제, 이동이 가능) , 또 BOM(Browser Object Model)라는 브라우저에 관련된 요소들 Navigator, Location, Fetch, Storage나 WEB APIs에 관련된 오브젝트들이 들어있다.

그래서, 자바스크립트로 브라우저 위에서 동작하는 걸 만들 때는 이런 DOM 관련된 api도 쓸 수 있고, BOM에 관련된 api도 사용할 수 있는 것 이다.

기본적으로 Window는 글로벌 오브젝트이다. 그래서 Window가 기본적으로 포함하고 있는 prompt(), alert(), innerWidth 등을 window.prompt() 가 아닌, prompt()라고 사용할 수 있는 것이다.

Document

https://developer.mozilla.org/en-US/docs/Web/API/Document

Window

https://developer.mozilla.org/en-US/docs/Web/API/Window

Viewport

https://developer.mozilla.org/en-US/docs/Glossary/layout_viewport

Navigator

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

Navigator

Navigator는 window 내에 있는 오브젝트로서, 브라우저에 포함되어있는 유용한 정보들을 담고 있다.
App code name은 무엇인지, App name은 무엇인지, version은 무엇인지, 그리고 블루투스와 우리가 복사 붙여넣기 할때 쓰는 클립보드, 인터넷의 커넥션 상태, 사용자가 쓰고 있는 언어, 키보드 상태등 다양한 것을 포함하고 있다.