Window 객체
자바스크립트에서 웹화면(브라우저) 전체를 담당하는 전역 객체.
브라우저 전체를 담당하는 Window 객체 안에는 여러 내장 객체들이 속해있다.
<Window 객체 안의 내장 객체>
Frame 객체 : 2개 이상의 문서가 조합되어 만들어지고 배열로 이루어져 있는 객체. 프레임을 제어한다. length를 이용해서 프레임의 갯수를 알 수 있고, 각 프레임의 정보에 접근 가능.
Location 객체 : 현재 열려진 웹 화면의 URL 주소와 관련된 정보 제공.
History 객체 : 웹 브라우저의 히스토리(방문한 적이 있는 URL 주소)를 관리.
Document 객체 : 문서의 정보(제목, 변경날짜, 시간 등)를 관리. 원하는 내용을 출력하거나 문서의 정보를 제공해준다.
ex)document.getElementById : 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용
ex) Document.querySelector() : ID가 없는 요소에 접근. 모든 선택자를 사용가능
Document 객체는 방대하기 때문에 메소드를 그때그때 찾아 봐야 한다.
객체 생성 없음
<메소드 호출>
window.메소드(~)
<속성변수 호출>
window.속성변수
window는 웹브라우저가 제공하는 Window의 객체참조변수이다.
| window 객체 메소드 | |
| open(url, 창이름, 창옵션) | 새로운 웹화면 생성하고 그 화면을 관리하는 window 객체 생성 |
| close() | 웹화면 닫음 |
| alert(메시지) | 확인버튼이 있는 대화상자를 보여줌 |
| confirm(메시지) | 확인, 취소버튼이 있는 대화상자를 보여줌 |
| prompt(메시지) | 입력상자가 있는 대화상자를 보여줌 |
| setTimeout("java script 코드", n초 * 1000) | n초 뒤에 "java script 코드" 실행. setTimeout(function(~){java script 코드}, n초 * 1000)도 가능 |
| clearTimeout() | setTimeout 메소드를 정지 |
| setInterval("java script 코드", n초 * 1000) | n초 마다 "java script 코드" 실행. setInterval(function(~){java script 코드}, n초 * 1000)도 가능 |
| clearInterval() | setInterval 메소드를 정지 |
| find( 찾을문자 ) | 원하는 문자열 찾기 |
| moveBy( x , y ) | 웹화면을 지정한 상대적 위치로 이동 |
| moveTo( x , y ) | 웹화면을 지정한 절대적 위치로 이동 |
| resizeBy( x , y ) | 웹화면을 지정한 상대적 크기로 이동 |
| resizeTo( x , y ) | 웹화면을 지정한 절대적 크기로 이동 |
| scrollBy( x , y ) | 웹화면의 스크롤 위치를 지정한 상대적 위치로 이동 |
| scrollTo( x , y ) | 웹화면의 스크롤 위치를 지정한 절대적 위치로 이동 |
| focus() | 초점 맞춤. 텍스트창의 경우, 커서를 위치시켜서 바로 입력 가능하게 만듬. 버튼의 경우, 엔터키를 눌렀을 때 클릭효과. |
| blur() | focus()의 반대로 초점 제거. fucus() 제거 또는 창 최소화 |
| addEventListener( "load", 호출함수명, false ) | body 태그 안의 내용물을 다 읽어들인 후 특정 이벤트가 발생했을 시 특정 함수를 실행. load 대신에 다른 이벤트명을 지정할 수 있다. |
| 기타 등등.... | |
| window 객체 속성변수 | |
| opener | open() 메소드 사용해서 열린 웹화면의 window 객체 저장 |
| innerHeight | 실제 문서가 출력될 부분의 높이 저장 |
| innerWidth | 실제 문서가 출력될 부분의 넓이 저장 |
| outerHeight | 화면 전체의 높이 저장 |
| outerWidth | 화면 전체의 넓이 저장 |
| locationbar | 창에 제목표시줄 표시 여부 |
| personalbar | 창에 personal도구모음 표시 여부 |
| scrollbar | 창에 스크롤바 표시 여부 |
| statusbar | 창에 상태표시줄 표시 여부 |
| toolbar | 창에 툴바(도구창) 표시 여부 |
| status | 상태표시줄 문자 변경 |
| defaultStatus | status를 설정하지 않았을 때 기본적으로 표시할 내용 |
| 특정 이벤트가 발생했을 시 특정 함수를 실행 | body 태그 안의 내용물을 다 읽어들인 후 실행할 함수명을 지정. |
| 기타 등등.... | |
<예제1-1> 5초 뒤에 Tistory 페이지로 이동하기
<html>
<head>
<script>
function move_5_sec(){
window.setTimeout(
"location.replace('http://www.naver.com');" , 5*1000
);
}
</script>
</head>
<body onLoad = "move_5_sec();"> // body 태그 안의 내용을 모두 읽어 실행한 후 move_5_sec 함수호출
5초 뒤 페이지 이동합니다.<center>
</body>
</html>- Window 객체의 setTimeout(~,~) 메소드로 지정한 시간 뒤에 페이지를 이동한다.
- Location 객체의 replace 메소드 호출 형식) window.location.replace("이동할 URL 주소")
이동할 URL 주소로 현재 페이지가 바뀐다. 위 replace 메소드 대신에 아래처럼 href 속성변수에 "이동할 URL 주소" 설정해도 현재 페이지가 바뀐다. Location 객체의 메위주는 location 변수에 저장되어 제공한다. -> location.herf = "이동할 URL 주소"
<예제1-2> 5초 뒤에 Tistory 페이지로 이동하기. 단, 화면에 5,4,3,2,1로 카운트다운 세기.
<html>
<head>
<script>
//변수 num 선언
var num = 5;
//countdown 함수 선언
function countdown(){
//document 객체의 document.getElementById 메소드 사용 : id 있는 곳에 시간문자 삽입
document.getElementById("second").innerHTML = 5;
//window 객체의 setInterval 메소드 : n초마다 실행
window.setInterval(
//실행할 코드
function(){
document.getElementById("second").innerHTML = --num;
if(num==1){location.replace("https://heannim-world.tistory.com/");}
}
//n초마다 실행
, 1*1000);
}
</script>
</head>
<body onLoad = "countdown();"><center>
//문자열 삽입
<span id = "second"></span>
</body>
</html>- document 객체의 document.getElementById 메소드 : id = "nowTime" 가 있는 태그 영역 내부에 시간 문자열 삽입
-> 시간 문자열이 "second"
- setInterval("java script 코드", n초 * 1000) : n초마다 "java script 코드"실행
-> 실행할 때마다 1씩 줄어들고, 만약 num이 1이라면 그 다음 페이지를 이동시킨다.
댓글