BLOG ARTICLE window객체 | 1 ARTICLE FOUND

  1. 2011.07.22 java script 자바스크립트 Window 객체

Window 객체

window 객체는 계층적 구조로 되어 있는 자바스크립트 계층구조 중에서 최상위에 있는 어른(?) 객체입니다. 이 객체는 그 자체적으로도 여러 가지 작업을 수행하지만 대부분 이 객체의 자식들인 하위객체를 이용해서 많은 일들을 수행하게 됩니다.

예를들어 우리는 경고창을 띄우는데 alert() 라는 메소드를 아무런 생각없이 사용하고, 문장을 출력하는데 document.write() 메소드를 사용하지만 실제로 이들 메소드는 window.alert(), window.document.write() 가 올바른 사용법입니다. 하지만, 대부분의 경우 최상위 객체인 window 는 자연스럽게 생략하여 사용해도 이 어른(?)은 이해를 다 해 줍니다. 자식사랑은 끝이 없군요.

window 객체의 속성과 메소드는 다음과 같습니다

속성

메소드

closed

창의 닫힘여부(true/false)

alert()

경고창을 보여줍니다 

defaultStatus

상태표시줄의 초기문자열

blur()

focus를 제거합니다

document

document 객체

clearInterval()

setInterval()메소드에의해 수행되고 있는 함수를 중지합니다

frames

프레임 객체

clearTimeout()

setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다

history

history 객체

close()

창을 닫습니다

length

프레임의 수

comfirm()

확인버튼이 있는 창을 엽니다 

location

location 객체

focus()

focus를 줍니다

name

창의 이름

moveBy()

상대적 좌표로 창을 이동합니다

opener

현재창을 열어준 윈도우

moveTo()

절대위치로 창을 이동합니다

parent

부모 프레임

open()

새로운 창을 열어줍니다

self

현재창 자신

print()

화면의 내용을 프린트로 출력합니다 

status

상태표시줄의 문자열

prompt()

입력란이 있는 대화상자를 엽니다 

top

가장 앞쪽 창

resizeBy()

상대적 크기를 이용해서 창의 크기를 변경합니다 

window

현재창(=self)

resizeTo()

절대크기로 창크기를 변경합니다 

 

 

scroll()

창을 스크롤 시킵니다 

 

 

scrollBy()

상대적 좌표로 창을 스크롤 시킵니다 

 

 

scrollTo()

절대적 좌표로 창을 스크롤 시킵니다 

 

 

setInterval()

일정시간 간격으로 지정함수를 반복 호출 합니다

 

 

setTimeout()

일정시간 후 지정함수를 호출 합니다

먼저, 팝업창을 만들어 주는 window.open() 메소드를 보겠습니다. window.open() 메소드의 사용법은 다음과 같습니다.

window.open("팝업창으로 보여줄 문서","팝업창의 이름","옵션")

  • <SCRIPT LANGUAGE="JavaScript">
  • <!--
  • window.open("http://www.dreamwiz.com", "dreamwiz", "width=500,height=300,left=0,top=0,resizable=no");
  • //-->
  • </SCRIPT>

<input type="button" value="sample" name="formbutton1" />

이 예문은 http://www.dreamwiz.com 페이지를 가로 500픽셀, 높이 300 픽셀의 크기로 왼족위 모서리에 붙게 팝업창으로 열어줍니다. 두 번째 인자인 "dreamwiz" 는 뭐냐구요? 이 부분은 팝업창의 이름을 말하는 것으로 프레임 문서에서 타겟(target) 처럼 사용할 수 있습니다.. 즉, <a href="xxx.html" target="dreamwiz">열기</a> 처럼 사용하게 되면, 현재 드림위즈 홈페이지가 열려있는 팝업창에 xxx.html 문서가 열리게 되는 것이랍니다. 이 두 번째 인자에 아무것도 입력하지 않으려면 그냥 "" 만 표시 해 줍니다. (예) : window.open("http://www.dreamwiz.com", "", "옵션들")

세 번째 인자에는 옵션들을 설정 합니다. 이곳에서 사용할 수 있는 옵션에는 아래와 같은 것들이 있습니다

menubar

yes/no, 1/0

메뉴바를 보여주거나 숨깁니다

toolbar

yes/no, 1/0

도구막대를 보여주거나 숨깁니다

directories

yes/no, 1/0

디렉토리바를 보여주거나 숨깁니다

scrollbars

yes/no, 1/0

스크롤바를 보여주거나 숨깁니다

status

yes/no, 1/0

상태표시줄을 보여주거나 숨깁니다

location

yes/no, 1/0

주소표시줄을 보여주거나 숨깁니다

width

픽셀

팝업 윈도우의 가로크기를 지정합니다

height

픽셀

팝업 윈도우의 높이를 지정합니다

left

픽셀

팝업 윈도우의 x축 위치를 지정합니다

top

픽셀

팝업 윈도우의 y축 위치를 지정합니다

resizable

yes/no 1/0

팝업윈도우의 크기를 사용자가 임의로 수정할 수 있는지 여부를 지정합니다

fullscreen

 

전체화면 모드로 열어줍니다

channelmode

 

채널모드 창으로 열어줍니다

옵션인자를 지정하지 않으면 현재 창의 모양과 같은 형태로 팝업윈도우가 열리게 되고, 어느 한가지 옵션만 지정하면 나머지는 모두 디폴트 값으로 no 가 설정 됩니다.

버튼을 클릭하면 아무런 옵션이 없는 팝업 윈도우가 열리게 하는 코드는 아래와 같습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function winOpen() {
  10. window.open("http://www.dreamwiz.com","dreamwiz");
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY>
  18.  
  19. <input type=button onclick="winOpen();" value="옵션없이 팝업윈도우 열기">
  20.  
  21. </BODY>
  22.  
  23. </HTML>

<input type="button" value="sample" name="formbutton1" />

위에서 보듯이 옵션을 사용하지 않으면 <a href="xxx.html" target="_blank">열기</a> 처럼 태그를 사용한 것과 같은 효과를 줍니다. 이 옵션 인자는 지정하지 않아도 되지만, 두 번재 인자인 name 은 사용하지 않더라도 반드시 "" 으로 표시해 주어야 한다는 것은 명심하기 바랍니다.

그럼, 이번에는 몇가지 옵션만 선별적으로 주는 예를 보겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function winOpen() {
  10. window.open("http://www.dreamwiz.com","dreamwiz","location=yes,width=400,height=300");
  11. }
  12. //-->
  13. </SCRIPT>
  14.  
  15. </HEAD>
  16.  
  17. <BODY>
  18.  
  19. <input type=button onclick="winOpen();" value="location=yes,width=400,height=300">
  20.  
  21. </BODY>
  22.  
  23. </HTML>

<input type="button" value="sample" name="formbutton1" />

위의 예에서 보듯이 특정 옵션을 지정하면 나머지 옵션값은 자동으로 no를 준 것과 같은 효과를 나타냅니다. 옵션을 줄때 주의할점은 절대 공백을 주어서는 안됩니다. 공백을 주게되면 네츠케이프 등에서는 에러를 발생시킬 수 있습니다

이번에는 잘 이용하면 아주 요긴하게 사용될 수 있는 fullscreen 모드와 channelmode 옵션으로 팝업윈도우를 열어보도록 하겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample Script </TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8. <!--
  9. function fullOpen() { // fullscreen 모드로 열기 함수
  10. window.open("http://www.dreamwiz.com","dreamwiz","fullscreen");
  11. }
  12.  
  13. function channelOpen() { // 채널모드로 열기 함수
  14. window.open("http://www.dreamwiz.com","dreamwiz","channelmode");
  15. }
  16. //-->
  17. </SCRIPT>
  18.  
  19. </HEAD>
  20.  
  21. <BODY>
  22.  
  23. <input type=button onclick="fullOpen();" value="fullscreen">
  24. <p>fullscreen 윈도우를 닫으려면 Alt+F4 키를 누르세요
  25. <p>
  26. <input type=button onclick="channelOpen();" value="channelmode">
  27.  
  28. </BODY>
  29.  
  30. </HTML>

<input type="button" value="sample" name="formbutton1" />

 

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST