[Javascript] BOM(browser object model)

Window 객체

Window 객체는 모든 객체가 소속된 객체이고, 전역 객체이면서, 창이나 프레임을 의미한다. 그러므로 위의 그림에 나와있듯이 document객체나 BOM에 location객체 등 모든 것이 window객체 안에 있다.

 

crome console로 확인한 결과

위의 이미지와 같이 window객체는 window라는 식별자를 통해서 얻을 수 있다. 또한 생략이 가능하다.

(window.document를 그냥 ducument로 입력해도 결과는 같았을 것이다.)

 

위의 그림에 나와있는 객체뿐만 아니라, 우리 만드는 변수나 함수 역시 모두 window객체에 안에 포함된다. 즉, 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다.

 

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

alert

경고창이라고 부른다. 사용자에게 정보를 제공하거나 디버깅 용도로 사용한다. 하지만 alert은 확인 버튼을 누르기 전까지는 다음 코드를 실행하지 않기 때문에 최근에는 console.log를 더 많이 사용한다.

confirm

alert과 비슷한 형태의 창을 띄운다. 하지만 확인 버튼과 취소 버튼을 동시에 띄우는 것에서 차이가 있다. 확인 버튼을 누르면 true를, 취소 버튼을 누르면 false를 리턴한다.

prompt

prompt는 사용자가 입력한 값을 받아서 리턴한다.

 

 

Location 객체

location 객체는 현재 열려있는 브라우저 창의 url을 알려주는 객체이다. 이 객체를 사용해서 문서의 url을 변경할 수 있고, 문서의 위치와 관련하여 다양한 정보를 얻을 수 있다.

현재 윈도우의 url 알아내기

location.toString()과 location.href는 둘 다 같은 값을 출력한다. 둘 중에선 location.href를 좀 더 선호하는 편.

URL Parsing

location 객체는 url을 의미별로 조각내서 별도의 프로퍼티로 제공한다.

• host : 인터넷상에서 접속하고자 하는 각각의 서버들은 주소를 가지고 있다. 주소가 존재하기 때문에 우리는 그 웹 사이트에 접속할 수 있는데, 그 컴퓨터, 서비스를 식별하는 주소를 host라고 한다.
• port : host가 컴퓨터를 식별하는 것이라면 port는 컴퓨터에서 돌아가는 여러 가지 서버 소프트웨어들을 식별하는 것이다.
• pathname : 웹 서버에 접속했을 때 구체적인 정보를 요청했을 때 그 정보가 pathname에 들어간다.
• search : ? 뒤에 들어있는 값. 이 서비스에 전달된 값을 의미함.
• hash : # 뒤에 오는 값. 문서 안에 특정한 위치를 지정하면 그 위치를 book mark 할 수 있다.

URL 변경하기

아래 코드는 현재 문서를 https://ooeunz.tistory.com로 이동시킨다.

location.href = 'https://ooeunz.tistory.com/';

location = 'https://ooeunz.tistory.com/';

 

아래는 현재 문서를 reload 하는 간편한 방법을 제공한다.

location.reload();

창 제어

window.open

window.open('demo.html');

첫 번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.

 

window.open('demo.html, '_self');

_self는 스크립트가 현재 창에서 첫 번째 인자의 url을 실행시키라는 뜻이다.

 

window.open('demo.html, '_blank');

_blank는 새로운 창을 열면서 demo.html을 실행한다.

 

window.open('demo.html, 'ot');

두 번째 인자로 창에 이름을 준다. _blank를 주었을 때는 같은 기능을 여러 번 수행했을 때 demo.html이 여러 번 새로운 창으로 나타나지만, ot라는 이름을 주었을 때는 이미 ot라는 이름을 가진 웹 페이지가 실행되었기 때문에 다시 코드를 실행하더라도 새로운 창이 나타나지 않는다.

 

window.open('demo.html', '_blank', 'width=200, height=200, resizable=yes');

세 번째 인자는 새 창의 모양과 관련된 속성이 온다.

 

눈치챘을지 모르지만, window.open은 html의 a태그와 똑같은 기능을 한다. 다만 그러한 기능을 자바스크립트로 실행한다고 보면 된다. 또한 ot와 같은 이름을 주는 인자와 _self와 _blank는 어떻게 구분되는 가에 관하여 궁금할 수 있는데 _self와 _blank는 미리 정의되어 있는 기능이다.