개발자의 길

자바스크립트 - window 객체 본문

2. JS

자바스크립트 - window 객체

자르르 2010. 1. 21. 15:17


[window 객체]

 

window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.

창 열기, 창 닫기, 창 크기 조절 등 창을 제어하는 다양한 작업을 할 수 있다.

사용형식) window.속성
 window.속성 = 값
 window.메소드()
 window.메소드(인자 값)

예) window.status="환영합니다." //상태 표시줄에 문자 표시
 window.close()  // 창을 닫는다.
 window.open()  // 새 창을 연다.

---------------- window 객체의 속성 -------------------

○ defaultStatus
   - 브라우저 상태 표시줄에 표시할 문자열의 초기 값 설정

○ status
   - 상태 표시줄에 표시할 문자열 지정

○ window
   - 창 자신을 가리킴

○ frames
   - 창에 포함된 프레임을 배열 형태로 지정

○ opener
   - open() 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴

○ parent
   - 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴

○ self
   - 현재 작업 중인 창, 즉 자기자신을 가리킴

○ top
   - 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음

○ classes
   - 문서 안에 정의된 모든 스타일시트의 정보를 갖음

○ tags
   - 문서 안에 정의된 모든 태그의 정보를 나타냄

○ screenX
   - 창의 x 좌표 반환

○ screenY
   - 창의 y 좌표 반환

○ closed
   - 창이 닫혀 있는지 확인한 후 true, false 반환

○ name
   - 창 이름 반환

○ length
   - 창 안에 프레임 수 반환

------------- 넷스케이프 네비게이터 전용 -----------
○ innerHeight
   - 브라우저 내용의 높이

○ innerWidth
   - 브라우저 내용의 넓이

○ outerHeight
   - 브라우저 전체 높이

○ outerWidth
   - 브라우저 전체 넓이

○ pageXoffset
   - 현재 나타나는 페이지의 x 좌표

○ pageYofset
   - 현재 나타나는 페이지의 y 좌표

 

---------------- window 객체의 메소드 -------------------

※ 윈도우 객체에서 사용할수 있는 이벤트 핸들러로는 onBlur, onDragdrop, onError, onFocus, onLoad, onUnload 가 있다.
     

----------------->사용자의 응답을 요구하는 대화상자를 생성하는 메소드<---------------------

○ alert("메시지")
   - 경고 창 띄움

○ prompt("메시지","구문")
   - 입력 창 띄움

○ confirm("메시지")
   - 확인, 취소 창 띄움


-----------------> 창 생성과 제거 메소드 <---------------------

○ open("문서명","창이름","속성")
   - 새 창을 염

○ close()
   - 창을 닫음

----------------->브라우저 크기, 위치 설정 <---------------------

○ moveBy(x,y)
   - 브라우저를 상대좌표로 지정한 픽셀만큼 이동

○ moveTo(x,y)
   - 브라우저를 절대좌표로 지정한 위치로 이동

○ resizeBy(x,y)
   - 브라우저의 크기를 상대적으로 지정한 픽셀만큼 설정

○ resizeTo(x,y)
   - 브라우저의 크기를 절대 값으로 지정한 픽셀만큼 설정

○ scroll(x,y)
   - 창이나 프레임 안의 내용을 스크롤함

○ scrollBy(x,y)
   - 스크롤을 상대좌표로 이동

○ ScrollTo(x,y)
   - 스크롤을 절대좌표로 이동

-----------------> 동작 시간 간격을 조절하는 메소드 <---------------------

○ setTimerout("명령문",시간간격)
   - 일정한 시간 간격으로 명령문을 반복 실행 (시간 1/1000초 단위)

○ clearTimerout()
   - SetTimerout() 으로 동작되는 타이머 해제

-----------------> 기타 <---------------------

○ print()
   - 현재 문서 출력
----------------->넷스케이프 네이게이터 전용<---------------------

○ back()
   - 한단계 이전 URL로 이동

○ forward()
   - 한단계 이후의 URL로 이동

○ home()
   - 브라우저에세 home으로 지정된 URL으로 이동

○ stop()
   - 브라우저의 stop 버튼처럼 불러오기 중지

○ find("문자열")
   - 지정된 문자열이 있는지 검사(true,false 값)

----------------------------------------------------------------------

=== open() 메소드로 창열기 ===

open() 메소드는 새 창을 열어준다. 옵션을 다양하게 설정하여 다양한 모양의 새 창을 열 수 있다.

window.open() 메소드의 인자 값은 반드시 세 개를 포함해야 한다. 아무런 속성도 지정하지 않을경우에는

window.open("","","") 와 같이 입력한다.

형식) window.open("문서명","창이름","설정");

예) 다음 코드는 allim.html 문서를 좌표 50, 50 위치에 200*300 크기로 새 창을 연다.
 window.open("allim.html","popup","top=50 left=50 width=200 height=300")

---------- window.open() 메소드에 설정할 수 있는 창 옵션 --------------------

○ directories : yes/no
   - 연결 등 디렉토리 메뉴 표시 여부

○ menubar : yes/no
   - 메뉴 바 표시 여부

○ toolbar  : yes/no
   - 툴 바 표시 여부

○ location : yes/no
   - 주소 입력줄 표시 여부

○ resizable : yes/no
   - 크기 재설정 버튼 표시 여부

○ status  : yes/no
   - 상태 표시줄 표시 여부

○ scrollbars : yes/no
   - 스크롤 바 표시 여부

○ copyhistory : yes/no
   - 히스토리 정보를 저장할지 여부

○ channelmode
   - 전체화면 모드

○ fullscreen
   - 전체화면으로 표시

○ width  : pixel
   - 창 넓이

○ height  : pixel
   - 창 높이

○ left  : pixel
   - 창의 좌측 좌표 값

○ top  : pixel
   - 창의 위쪽 좌표 값

----------------------------------------------------------------------


[실습하기]

----------------------open 으로 창 열기 예제-----------------------------------
<html>
<head>
 <title>Test</title>

<script language="javascript">

function openWin()
{
 window.open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");
}


</script>
</head>

<body onload="openWin()">


</body>

</html>
---------------------------------------------------------------------

 

----------------------close 으로 창 닫기 예제-----------------------------------

현지 활성화된 창을 닫을 때는 아래 세 가지 명령어 중 하나를 사용한다.

window.close()

self.close()

this.close()

만약 특정 창을 닫으려면 창을 열 때 해당 창에 객체명을 지정해야 한다.

1. 새 창을 열 때 창에 객체명 지정하기
    윈도우 객체명 = window.open("문서명","창이름","옵션설정")
   
2. 새 창으로 열린 창 닫기
    윈도우 객체명.close()

---------------------------------------------------------------

[실습하기]


------------------- 객체명.close() 으로 창닫기 -----------------------
<html>
<head>
 <title>Test</title>

<script language="javascript">

var win = null

function openWin()
{
 win = open("allim1.htm","","width=250 height=385 left=100 top=100 directories=no");
}

function closeWin()
{
 win.close();

}

</script>
</head>

<body>

<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">

<form name=info>
<input type=button name=bt value=창닫기 onclick="closeWin()">
</form>

</body>

</html>


'2. JS' 카테고리의 다른 글

자바스크립트로 특정 url 소스 가져오기  (0) 2010.02.23
자바스크립트 - location 객체와 String 객체  (0) 2010.01.21
jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작  (0) 2010.01.10
비밀번호 체크 자바스크립트 [영문+숫자 혼합]  (2) 2010.01.05
delay 시키는 함수 setTimeout,setInterval  (1) 2009.12.17


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'2. JS' Related Articles more
Comments