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("팝업창으로 보여줄 문서","팝업창의 이름","옵션")
|
<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 가 설정 됩니다.
버튼을 클릭하면 아무런 옵션이 없는 팝업 윈도우가 열리게 하는 코드는 아래와 같습니다
|
<input type="button" value="sample" name="formbutton1" />
위에서 보듯이 옵션을 사용하지 않으면 <a href="xxx.html" target="_blank">열기</a> 처럼 태그를 사용한 것과 같은 효과를 줍니다. 이 옵션 인자는 지정하지 않아도 되지만, 두 번재 인자인 name 은 사용하지 않더라도 반드시 "" 으로 표시해 주어야 한다는 것은 명심하기 바랍니다.
그럼, 이번에는 몇가지 옵션만 선별적으로 주는 예를 보겠습니다
|
<input type="button" value="sample" name="formbutton1" />
위의 예에서 보듯이 특정 옵션을 지정하면 나머지 옵션값은 자동으로 no를 준 것과 같은 효과를 나타냅니다. 옵션을 줄때 주의할점은 절대 공백을 주어서는 안됩니다. 공백을 주게되면 네츠케이프 등에서는 에러를 발생시킬 수 있습니다
이번에는 잘 이용하면 아주 요긴하게 사용될 수 있는 fullscreen 모드와 channelmode 옵션으로 팝업윈도우를 열어보도록 하겠습니다
|
<input type="button" value="sample" name="formbutton1" />
'♨ Web Programming > Java Script' 카테고리의 다른 글
| [JavaScript] true, false 로 간주되는 값들 (0) | 2014.03.22 |
|---|---|
| [Java Scrpit] JSP 페이지에서 스크립트가 동작 할 때도 있고, 동작 안할때도 있는 이유 (문자열값 넘길때) (1) | 2011.08.11 |
| java script 자바스크립트 Window 객체 (0) | 2011.07.22 |
| [펌] onkeypress/onKeyDown 이벤트 차이점 : ASCII값/KeyCode값 (0) | 2011.07.22 |
| [자바스크립트] 필드 유효성 검사 [펌] (0) | 2011.07.22 |
| KEYDOWN (ctrl, alt, 오른쪽마우스, 왼쪽 마우스 기타 막기) (0) | 2011.07.22 |
