* BOM ( Browser Object Model )
DOM 객체들은 HTML 페이지의 각 HTML 태그들을 객체화 한것으로
자바스크립트 코드로 화면에 출력된 HTML 태그의 콘텐츠나 모양을
변경하기위해 설계되었다.
BOM 은 윈도우 , 윈도우에 로드된 문서의 URL , 브라우저가 출력된 스크린장치,
브라우저의 종류와 기능 등 브라우저와 브라우저가 실행되고 있는 환경을 자바스크립트 코드로
접근하고 제어할수 있도록 설계된 객체들의 그룹을 일컫는다.
BOM의 종류
대부분의 브라우저들은 다음의 BOM 을 제공하며 , 개발자들이 자바스크립트를 이용하여 브라우저와
관련된 정보를 얻고 브라우저와 윈도우를 제어 하도록 한다.
.window 객체는 브라우저가 제어하는 BOM 객체의 최상위에 존재한다.
. window
. navigator
. history
. location
. screen
.window 객체
window 객체는 열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체로 , 윈도우마다
하나의 window 객체가 생성된다.
window 객체가 생성되는 경우는 다음 3가지 이다.
1.브라우저가 새로운 웹페이지를 로드할 때 window 객체 자동 생성
2.<iframe> 태그당 하나의window 객체 자동 생성
3. 개발자가 다음 자바스크립트 코드로 임의의 window 객체 생성
ex] window.open("웹페이지 URL","윈도우이름","윈도우 속성")
window.open()이 실행되면 새 윈도우(혹은 탭 윈도우) 가 열리고
웹페이지가 출력된다.
* window 객체의 프로퍼티와 컬렉션, 메소드
프로퍼티 / 컬렉션
. window // 현재 윈도우 객체에 대한 레퍼런스
. self // 현재 윈도우 객체에 대한 레퍼런스
. document // 윈도우에 담긴 document 객체에 대한 레퍼런스
. name // 윈도우 이름 문자열
. location // location 객체에 대한 레퍼런스
. history // history 객체에 대한 레퍼런스
. locationbar // 위치바 객체에 대한 레퍼런스
. menubar // 메뉴바 객체에 대한 레퍼런스
. personalbar // 북마크 툴바 등 사용자 개인의 취향에 따라 기능을 두는 바
. scrollbars // 스크롤바 객체에 대한 레퍼런스
. toolbar // 툴바 객체에 대한 레퍼런스
. status // 상태바에 출력한 문자열 .
보안의 이유로 대부분의 브라우저에서
이를 허용하도록 셋팅을 해야 문자열 변경가능
. closed // 현재 창이 닫혀 보이지 않는 상태이면 true
. frames // 윈도우에 존재하는 iframe 객체에 대한 컬렉션
. length // 윈도우에 존재하는 iframe 의 개수
. top // 윈도우 계층 구조에서 최상위 윈도우 객체에 대한 레퍼런스
. parent // 현재 윈도우의 부모 윈도우 객체에 대한 레펀스
. navigator // navigator 객체에 대한 레퍼런스
. outerWidth // 윈도우 전체의 폭
. outerHeight // 윈도우 전체의 높이
. screenX // 스크린상의 윈도우 x 좌표
. screenY // 스크린상의 윈도우 Y 좌표
. pageXOffset // scorllX와 동일하며 현재 문서의 스크롤 x값
. pageYOffset // scorllY와 동일하며 현재 문서의 스크롤 y값
메서드
. open() // 새 윈도우를 연다
. close() // 윈도우를 닫는다
. focus() // 윈도우에 포커스를 주어 키보드 입력을 받을수 있는 상태로 만든다.
. blur() // 현재 윈도우는 포커스를 잃는다
. getSelection() // 윈도우 내에 선택된 텍스트를 문자열로 리턴한다.
. stop() // HTML 페이지 로딩을 중단시킨다.
브라우저의 STOP 버튼을 누른 것과 동일하다.
. alert() // 경고 다이얼로그를 출력한다.
. confirm() // 확인 다이얼로그를 출력하낟
. prompt() // 프롬포트(입력) 다이얼로그를 출력한다.
. postMessage() // 다른위도우나 워커 테스크로 문자열 데이터를 보낸다.
. setInterval() // 타임아웃 코드가 반복 호출 되도록 타이머를 가동시킨다.
. clearInterval() // setInterval() 로 가동 중인 타이머를 중단시킨다.
. moveBy() // 지정된 픽셀만큼 윈도우를 이동시킨다.
. moveTo() // 지정된 위치로 윈도우를 이동시킨다.
. resizeBy() // 지정된 크기만큼 윈도우를 이동시킨다.
윈도우 열기 , window.open()
window.open(URL,WindowName,Feature)
- URL : 윈도우에 출력할 웹 페이지 주소 문자열
- WindowName : 새로 여는 윈도우의 이름 문자열로서 생략 가능
- Feature : 윈도우의 모양 , 크기 등의 속성들을 표현하는 문자열.
속성들은 빈칸 없이 콤마 로 분리하여 작성하며 생략가능
. location 객체
location 객체는 윈도우에 로드된 웹페이지의 URL 정보를 나타내는 객체로서, 윈도우 열릴때 자동 생성된다.
URL 정보는 다음과 같이 window의 location 프로퍼티를 통해 알아낼수 있다.
ex ]
window.location 혹은 location
'국비 과정 > JavaScript' 카테고리의 다른 글
| 국비 - 0928 ( JSON , CANVAS) (0) | 2022.09.28 |
|---|---|
| 국비 - 0927 ( Screen ) (2) | 2022.09.27 |
| 국비 - 0923 ( 이벤트 디폴트 ) (0) | 2022.09.26 |
| 국비 - 0922 ( Math 객체 , Object 객체 , DOM) (0) | 2022.09.22 |
| 국비 - 0921 ( Javascript 의 객체와 배열 ) (0) | 2022.09.21 |