BOM(Browser Object Model)

웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단, Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것

전역객체 Window

alert('Hello world'); //window를 생략한 것과 같은 효과

window.alert('Hello world');

bom, dom, jsCore 모두 Window에 소속되어 있는 객체

웹브라우저 자바스크립트에서 Window 객체는 ECMAScript의 전역객체이면서 동시에 웹브라우저의 창이나 프레임을 제어하는 역할을 합니다.

사용자와 커뮤니케이션 하기

alert 경고창 :  사용자에게 정보를 제공하거나 디버깅의 용도로 사용

confirm : 확인을 누르면 true, 취소를 누르면 false값을 리턴

prompt : 사용자가 입력한 값을 받아 js가 얻을 수 있는 기능

Location 객체

location객체는 문서의 주소와 관련된 객체로 window 객체의 프로퍼티입니다.

객체를 이용해 문서의 URL을 변경할 수 있고, 문서의 위치와 관련해 다양한 정보를 얻을 수 있습니다.

현재 윈도우의 URL 알아내기 : console.log(location.toString(), location.href);

http : 웹 페이지를 웹 서버와 클라이언트가 정보를 주고 받기 위한 통신 규약

host : 컴퓨터를 식별하는 것

port : 컴퓨터에 돌아가는 서버, 소프트웨어들 식별하는 것

location.protocol : http , location.host : opentutorials.org

location.port : 80, location.pathname : /module/904/6634

location.search : 물음표 뒤에 따라오는 정보, location.hash : #뒤에 정보

location객체는 URL변경과 reload의 기능도 합니다.

location.href = ‘http://www.naver.com’;

location = ‘animal-park.tistory.com’;

location.reload();

Navigator 객체

Navigator객체 : 브라우저의 정보를 제공하는 객체

크로스 브라우징(Cross Browsing) :

ie, ff, chrome, safari, opera 각각의 브라우저 동작 방법은 W3C(dom), ECMA(js) 국제 표준화 기구에서 정의한 스펙에 따라 브라우저를 만드는 것

넷스케이프              Internet Explorer

addEventListener      attachEvent

개발자의 고충을 해결하기 위해 등장한 것이 웹 표준

표준에 정의된 스펙을 따르며 효율적으로 성능의 면으로 경쟁을 하게 됩니다.

console.dir(navigator); // navigator객체 프로퍼티의 리스트를 알 수 있음

console.log(appName); // 웹브라우저의 이름으로 IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시

console.log(appVersion); // 브라우저의 버전을 의미

console.log(platform); // 브라우저가 동작하고 있는 운영체제에 대한 정보

창 제어

window.open : 새창을 만드는 메소드

window.close : 새창을 닫는 메소드

팝업 차단

같은 도메인의 사이트라면 원격에 다른 웹 페이지를 제어하는 것을 허용합니다.

도메인이 다르다면 서비스에 접근해 악의적인 일을 할 수 있기 때문에 제어를 허용하지 않습니다.

팝업을 기본적으로 차단하고 명시적으로 허용할 때 사이트가 열리도록 함

스크립트 태그 안의 팝업은 차단되지만 window.open 시 팝업은 차단되지 않습니다.

출처 : 생활코딩 강의