JS / BOM, window
공부한 곳: https://ossam5.tistory.com/224?category=938138
[JS강좌] 14강 BOM - window객체 - 오쌤의 니가스터디
* 객체의 큰 부분 종류 설명 기본내장객체 기본적인 객체들로 보통 컴퓨터 언어들은 갖고 있는 객체 BOM(Browser Object Model) 브라우저오브젝트 모델, 브라우저 관련 객체 DOM(Document Object Model) 문서객.
ossam5.tistory.com
BOM의 객체에는
window - 브라우저 창 객체, BOM의 최상위 객체
location - 주소표시줄 객체
screen - 운영체제 화면 객체
history - 방문기록 객체
navigator - 브라우저 정보 객체
document - 문서객체 - body태그 부분
BOM은 전부 소문자로 쓰는것이 규칙이고
DOM은 BOM의 일부이나 매우 중요하기 때문에 나눠서 본다
| closed | 창이 닫혀 있는지 열려 있는지를 불표현식으로 반환 닫혀 있으면 true반환, 열려 있으면 false반환 |
| innerHeight | 창의 콘텐츠 영역 높이를 반환 - 스크롤바나 제목표시줄 등은 제외 |
| innerWidth | 창의 콘텐츠 영역 폭을 반환 - - 스크롤바나 제목표시줄 등은 제외 |
| length | 현재 창의 아이프레임 개수를 숫자로 반환 |
| outerHeight | 창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환 |
| outerWidth | 창의 모든 인터페이스요소(스크롤바등)을 포함한 높이를 반환 |
| pageXOffset | 현재 문서가 창의 왼쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환 |
| pageYOffset | 현재 문서가 창의 위쪽에서 얼마나 스크롤되어 있는지를 픽셀수치로 반환 |
| parent | 아이프레임으로 되어 있는 페이지의 부모가되는 페이지를 선택하는 속성 |
| screenLeft | 창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환 |
| screenTop | 창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환 |
| screenX | 창이 화면 좌측을 기준으로 얼마큼 떨어져 있는지 좌표를 반환 |
| screenY | 창이 화면 상단을 기준으로 얼마큼 떨어져 있는지 좌표를 반환 |
| self | 현재 창을 반환 |
| top | 현재 창의 최상위 브라우저 창을 반환 |
| 메서드 종류 | 설명 |
| close() | 창을 닫는 메서드 - 매개변수는 없음 |
| moveBy(x,y) | 창을 상대적으로 이동시키는 메서드 |
| moveTo(x,y) | 창을 절대적으로 이동시키는 메서드 |
| open(url,name,specs,replace) | 새창 혹은 새탭으로 창을 여는 메서드 |
| print() | 현재 창을 인쇄할수 있는 창을 띄워주는 메서드 |
| resizeBy(w,h) | 창 사이즈를 상대적으로 변경시키는 메서드 |
| resizeTo(w,h) | 창 사이즈를 절대적으로 변경시키는 메서드 |
| scrollBy(x,y) | 창의 스크롤바 위치를 상대적으로 이동시키는 메서드 |
| scrollTo(x,y) | 창의 스크롤바 위치를 절대적으로 이동시키는 메서드 |
| stop() | 창이 로드되는 것을 멈추는 메서드 - ie 및 edge는 사용 불가능 |
## 매개변수의 종류
| 매개변수 종류 | 설명 |
|
| URL | 창으로 띄울 주소를 담는 매개변수 | |
| name | 창이 띄워질 위치(대상)을 지정하는 매개변수 | |
| name 값 | _blank | url의 주소가 새창 혹은 새탭으로 띄워짐 - 기본값 |
| _parent | 아이프레임의 부모가 되는 페이지로 url주소가 띄워짐 | |
| _self | 현재 페이지로 url주소가 띄워짐 => 주소가 바뀜 | |
| _top | 로드되는 모든 frameset으로 url주소가 띄워짐 | |
| name | 새창으로 띄워진 곳의 이름을 작성하면 그곳에서 url주소가 띄워짐 | |
| specs | 띄워지는 창에 대한 옵션을 설정, 쉼표로 아이템을 구분해서 작성 window.open('주소'.'_blank','옵션=값,옵션=값',true); |
|
| specs 값 (대부분의 값은 yes|no|1|0으로 지정하면 된다.) (위치나 크기는 수치만 적고 픽셀단위로 인정된다) |
channelmode | 극장 모드로 띄울지를 지정하는 옵션, IE만 가능 |
| directories | 디렉토리 버튼 추가 여부, IE만 가능하고 구버전들에게만 있음 | |
| fullscreen | 풀스크린모드로 띄울지를 지정하는 옵션, IE만 가능 | |
| height | 창의 높이를 지정하는 옵션, 최소값은 100으로 처리 | |
| left | 창의 왼쪽 좌표를 지정하는 옵션, 음수는 지정되지 않음 | |
| location | 주소표시줄을 표시할지 지정하는 옵션, 오페라브라우저에만 사용가능 | |
| menubar | 메뉴바를 표시할지 지정하는 옵션 | |
| resizable | 창사이즈를 변경하지 지정하는 옵션, IE만 가능 | |
| scrollbars | 스크롤바를 표시할지 지정하는 옵션, IE, Firefox, Opera가능 | |
| status | 상태표시줄을 표시할지 지정하는 옵션 | |
| titlebar | 타이틀바를 표시할지 지정하는 옵션 | |
| toolbar | 브라우저 툴바를 표시할지 지정하는 옵션, IE와 Firefox만 가능 | |
| top | 창의 상단 좌표를 지정하는 옵션, 음수는 지정되지 않음 | |
| width | 창의 가로폭을 지정하는 옵션, 최소사이즈는 100으로 처리 | |
| replace | url로 작성한 주소를 새항목으로 만들지, history 목록의 현재 항목으로 대체할지를 지정 - true : history목록의 현재 문서로 대체 - false : 주소를 새 항목으로 대체 |
|
window.open('주소','','width=300,height=300');
//name값은 생략해서 새창으로 뜨도록 설정
//specs는 가로와 세로값만 설정해봤습니다.
setTimeout(funtion(){
newWindow.close();
},3000);
//3초후에 창닫김
----------------------------------------------------------
var newWindow = window.open('','','width=300,height=300');
newWindow.resizeTo(500,500); // 단위 작성하지 않으며 창을 절대적사이즈로 지정하여 키운 부분
setInterval(function(){
newWindow.resizeby(20,20);
},1000); //1초마다 20px씩 키우기