[Window_Object] JS - window 객체 - 윈도우객체 (속성/메서드) 종류

차

1. Window 객체 정의
2. Window 객체의 속성
3. Window 객체의 메서드

Window 객체 정의

 

window 객체는 브라우저에서 열린 창 의미.

 

---

 

1.

• 웹문서에 <iframe> 태그 포함 시, 브라우저는 HTML 문서용 window 객체, 각각의 아이프레임용 widnow 객체 만듦.
• Window 객체에 대한 공개 표준은 없지만, 모든 주요 브라우저가 이를 지원.

 

2. Window 객체: 

• JavaScript에는 항상 전역 객체가 정의되어 있음. 
• 프로그램이 전역 변수를 만들 때 전역 객체의 구성원으로 만들어짐. 
• window 객체는 브라우저의 전역 객체임. 
• 모든 전역 변수 또는 함수는 window 개체로 접근 가능함. 
• 전역 변수를 정의한 후 window 객체에서 해당 값에 접근 가능함.
• window 객체 사용해 동적변수 (= 가변변수 = 유동변수) 생성 가능.

Window 객체의 속성

 

• window.closed - 창이 닫혀 있는지 여부 나타내는 참거짓 반환.
• window.console - 브라우저의 콘솔에 정보를 기록하는 메소드를 제공하는 Console 객체에 대한 참조 반환 (Console 객체 참조)
• window.defaultStatus - 창의 상태표시줄에 있는 기본 텍스트를 설정하거나 반환.
• window.document  - 윈도우의 Document 객체 반환 (Document 객체 참조).
• window.frameElement - 현재창이 삽입 된 <iframe> 요소 반환.
• window.frames - 현재창에서 모든 <iframe> 요소를 반환.
• window.history - 창의 History 객체를 반환. (History 객체 참조).
• window.innerHeight - 스크롤 바를 포함하여 창 내용 영역 (= viewport) 높이 반환. 
• window.innerHeight - 스크롤 바를 포함하여 창 내용 영역 (= viewport) 너비 반환.
• window.length - 현재창에서 <iframe> 요소의 개수 반환.
• window.localStorage - 웹 브라우저에 key / value 쌍을 저장 가능. 만료 날짜 없는 데이터 저장.
• window.location - 창의 Location 객체 반환 (Location 객체 참조).
• window.name - 창이름 설정하거나 반환.
• window.navigator - 창 Navigator 객체 반환 (Navigator 객체 참조).
• window.opener - 창 생성한 window에 대한 참조 반환.
• window.outerHeight - toolbar / scrollbar 포함해 브라우저 창 높이 반환.
• window.outerWidth - toolbar / scrollbar 포함해 브라우저 창 너비 반환.
• window.pageXOffset - 현재 문서가 창의 왼쪽상단 구석으로부터 (가로로) 스크롤 된 픽셀 반환.
• window.pageYOffset - 현재의 문서가 창의 왼쪽상단 구석으로부터 (세로로) 스크롤 된 픽셀 반환. 
• window.parent - 현재창의 부모창 반환.
• window.screen - 창의 screen 객체 반환 (Screen 객체 참조).
• window.screenLeft - 화면에 상대적인 창의 수평 좌표 반환.
• window.screenTop - 화면을 기준으로 한 창의 세로 좌표 반환.
• window.screenX - 화면을 기준으로 한 창의 가로 좌표를 반환.
• window.screenY - 화면에 상대적인 창의 세로 좌표를 반환.
• window.sessionStorage - 웹 브라우저에 key / value 쌍을 저장 가능. 하나의 세션에 대한 데이터 저장.
• window.scrollX - pageXOffset의 별칭
• window.scrollY - pageYOffset의 별칭
• window.self - 현재창을 반환.
• window.status - 창의 상태표시줄에있는 텍스트를 설정하거나 반환.
• window.top - 최상위 브라우저창을 반환.

 

Window 객체의 메서드

 

• window.alert() - 시지와 확인 버튼이 있는 경고 상자 표시. 
• window.atob() - base-64로 암호화 된 문자열을 암호해독.
• window.blur() - 현재 창에서 focus 제거.
• window.btoa() - base-64로 문자열을 암호화.
• window.clearInterval() - setInterval ()로 설정된 타이머 지우기.
• window.clearTimeout() - setTimeout ()로 설정된 타이머 지우기.
• window.close() - 현재창 닫기.
• window.confirm() - 메시지와 확인 및 취소 버튼이 있는 대화상자 표시.
• window.focus() - 현재창에 포커스 설정.
• window.getComputedStyle() - 요소에 적용된 현재 계산된 CSS 스타일 가져오기.
• window.getSelection() -사용자가 선택한 텍스트 범위를 나타내는 Selection 객체를 반환.
• window.matchMedia() - 지정된 CSS 미디어쿼리 문자열을 나타내는 MediaQueryList 객체를 반환.
• window.moveBy() - 현재 위치를 기준으로 창을 이동.
• window.moveTo() - 창을 지정된 위치로 이동.
• window.open() - 새 브라우저 창 열기.
• window.print() - 현재 윈도우의 내용을 인쇄.
• window.prompt() - 방문자에게 입력을 요구하는 대화상자 표시.
• window.requestAnimationFrame() - 브라우저에 다음 Repaint 전에 애니메이션 업데이트하는 함수 호출하도록 요청.
• window.resizeBy() - 지정 픽셀 기준으로 창크기 조절.
• window.resizeTo() - 창을 지정 폭과 높이로 사이즈 변경.
• window.scroll() - 폐기예고. 이 메소드는 scrollTo () 메소드로 대체.
• window.scrollBy() - 지정된 픽셀수만큼 문서 스크롤.
• window.scrollTo() - 문서를 지정된 좌표로 스크롤.
• window.setInterval() - 지정된 간격 (밀리 초)으로 함수 호출하거나 표현식을 평가.
• window.setTimeout() - 지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가.
• window.stop() - 창 로드 정지.

 

※ Reflow : 크기와 위치에 맞게 브라우저에 배치하는 과정.

※ Repaint : Reflow 과정 끝난 후 재생성된 렌더 트리를 다시 그리는 과정.

 관련글 https://heowc.tistory.com/83