출처 : http://lahuman.blog.me/60015228929
Window 객체
window 객체는 웹 브라우저가 제공하는 객체 중에 최상위 객체로 브라우저 윈도우를 대표합니다. window 객체는 객체 계층 구조상 최상위 객체 이므로, 대부분 Window 속성들을 참조할 때 속성 앞에 window를 붙이지 않아도 됩니다. 또는 window 대신에 self나 this를 이용해도 됩니다. window 객체가 제공하는 defaultStatus라는 속성을 이용하고자 할 때 다음 참조는 동일한 결과를 가집니다.
window.defaultStatus
defaultStatus
self.defaultStatus
this.defaultStatus
그러나 예외로, window 객체의 메소드 중에 open() 과 close() 메소드를 이용할때는 반드시 window라는 객체 이름을 이용해야 합니다(예를 들면, window.open(), window.close()). rm 이유는 document 객체도 open() 과 close() 메소드를 갖고 있기 때문입니다. window 객체는 top, parent 또는 name과 같은 속성을 통해 참조될수 있습니다.
속성
다음과 같은 다양한 속성들을 제공합니다.
▶ client
브라우저에 대한 정보를 얻을 때 이용합니다.
▶ closed
부울값을 갖는 읽기 전용 속성으로, 참조된 윈도우가 닫혔는지(closed=true), 아니면 열려 있는지(closed=false)를 알려줍니다.
▶ defaultStatus
브라우저의 상태바에 나타나는 텍스트를 지정하거나 리턴합니다. 이 속성은 상태바에 항상 텍스트가 나타난다는 점에서 status 속성과 차이점이 있습니다. status 속성은 상태바에 나타나는 텍스트를 일시적으로 변경하기위해 사용될수 있습니다. Internet Explorer는 현재 이 속성을 디폴트 상태바 텍스트로 설정하고 있으므로 status 속성과 마찬가지로 작동됩니다.
▶ dialogArguments
이 속성은 참조된 모달 대화상자 윈도우(modal dialog window)가 만들어질 때 사용된 인자들을 리턴합니다. 이 속성은 showModalDialog 메소드를 이용하여 만들어진 윈도우에만 적용됩니다.
▶ dialogHeight
참조된 모달 대화상자 윈도우의 높이를 알려줍니다.
▶ dialogLeft
데스크탑의 좌측 경계선을 기준으로, 참조된 모달 대화상자 윈도우의 수평 오프셋(offset)을 알려줍니다.
▶ dialogTop
데스크탑의 상단 경계선을 기준으로, 참조된 모달 대화상자 윈도우의 수직 오프셋을 알려줍니다.
▶ dialogWidth
참조된 모달 대화상자 윈도우의 폭을 알려줍니다.
▶ document
이 속성은 참조된 윈도우의 Document 객체를 참조합니다. Document 객체는 브라우저의 윈도우에 나타나는 현재 문서에 대한 정보를 갖고 있는 속성들을 보유하고 있습니다. 예를 들어, 다음 코드는 현재 윈도우의 부모 윈도우에 있는 문서의 배경색을 변수 vColour에 할당합니다.
vColour=parent.document.bgColor
▶ event
이 속성은 Event 객체를 참조합니다.
▶ frames
이 속성은 Frames 배열을 참조합니다. 문서가 프레임으로 구성된 문서일 때, 각각의 프레임에는 0부터 시작되는 인덱스가 설정됩니다. 예를 들어, <FRAME> 정의에서 세 번째로 정의된 프레임의 location 객체에 접근하려면, 다음과 같은 코드를 이용할 수 있습니다.
vLocation=window.frames(2).location
▶ history
사용자들이 최근에 방문했던 URL 리스트들을 리턴합니다.
▶ length
윈도우 객체 내의 프레임 수를 리턴합니다. 다음 코드는 HelpWin이라는 이름을 갖는 윈도우(단일 프레임 또는 window.open() 메소드를 이용하여 만들어진 윈도우) 내의 프레임 수를 변수 vFrames에 저장합니다.
vFrames=HelpWin.length
▶ location
현재 문서의 위치에 대한 정보를 지정하거나 리턴합니다.
▶ name
읽기 전용 속성으로, 윈도우 객체의 이름을 리턴합니다.
▶ navigator
Navigator 객체를 참조합니다.
▶ opener
(window.open() 메소드를 이용하여) 현재 윈도우를 만든 윈도우 이름을 리턴합니다. 이 속성은 현재 윈도우를 연 윈도우나 문서의 속성들에 액세스하고자 할 때 이용하면 좋습니다. 다음과 같은 코드는 새로운 윈도우를 만든 이전의 윈도우를 자동으로 닫게 합니다.(예외로, 최초의 브라우저 윈도우는 confirm 대화상자를 통해 사용자 확인이 있어야 닫을수 있습니다.)
self.opener.close()
▶ parent
현재 윈도우가 프레임셋의 일부인 경우, 현재 윈도우의 부모 객체를 리턴합니다. 만일 현재 윈도우가 프레임셋의 일부가 아니라면, 이 속성은 self 속성처럼 작동하여 현재 윈도우 객체를 리턴합니다. 예를 들어, 다음 코드는 현재 윈도우의 부모 윈도우 이름을 변수 vStrParentName에 저장합니다.
vStrParentName=parent.name
▶ returnValue
showModalDialog 메소드로 만들어진 모달 대화상자 윈도우의 리턴 값을 리턴합니다.
▶ screen
Screen 객체에 대한 참조를 제공합니다.
▶ self
현재 윈도우의 윈도우 객체를 리턴합니다. 예를 들어, 다음과 같은 스크립트를 문서 스크립트에 작성하면 웹 브라우저의 상태바에 "교육용 타이틀 제작"이라는 텍스트가 나타납니다.
self.status ="교육용 타이틀 제작";
위 코드는 다음과 같이 작성해도 동일한 결과를 가집니다.
window.status ="교육용 타이틀 제작";
▶ status
브라우저 윈도우의 상태바에 나타나는 텍스트를 변경하기위해 사용합니다. 마우스가 문서 내의 이미지나 버튼, 링크 등의 위에 올라가거나 할 때 이 속성을 이용하면 좋습니다. 다음 코드는 상태바에 "교육용 CD 타이틀 제작"이라는 텍스트가 나타나게 합니다.
self.status ="교육용 CD 타이틀 제작"
문서가 프레임셋으로 구성되었을 경우에는 self.status를 이용하여 상태바의 텍스트를 변경할 수 없습니다. 이럴때는 top.status를 이용하여 텍스트를 변경할 수 있습니다.
▶ top
최상위 브라우저 윈도우의 윈도우 객체를 리턴합니다. 다음 코드에서 변수 vLocation에는 최상위 윈도우에 있는 문서의 URL이 할당됩니다.
vLocation=top.location
▶ window
self처럼 현재 윈도우를 참조합니다.
메소드
다음은 window 객체가 제공하는 메소드입니다.
▶ alert()
사용자에게 메시지를 전달하는 대화상자를 보여줍니다. 인자로는 문자열 또는 다른 객체의 속성 등이 올수 있습니다. 다음 코드는 메시지 상자에 "안녕하세요! 좋은 아침입니다."라는 메시지를 보여줍니다.
alert("안녕하세요! 좋은 아침입니다.")
▶ back()
참조된 윈도우의 히스토리 리스트에서 바로 이전 윈도우로 돌아가도록 합니다.
▶ blur()
특정 윈도우 객체로부터 강제로 포커스를 제거합니다. 다음은 현재 윈도우의 포커스를 제거하는 코드 입니다..
self.blur()
다음은 새로 만들어진 HelpWin이라는 이름을 갖는 윈도우로부터 포커스를 제거합니다.
HelpWin.blur()
▶ clearInterval()
상응하는 setInterval 메소드를 취소시킵니다. 사용법은 다음과 같습니다.
clearInterval(MyInterval)
▶ clearTimeout()
setTimeout 메소드의 ID를 참조하여 지정된 setTimeout 메소드를 제거하기위해 사용합니다.
clearTimeout(MyTimeOut)
▶ close()
지정된 윈도우를 닫습니다. 이 메소드를 사용할때는 항상 window.close() 형태로 이용해야 합니다. parent, self, top 또는 name 속성 등을 이용하여 어떠한 윈도우든지 이 메소드를 이용하여 닫을수 있습니다. window.close() 메소드는 window.open() 메소드를 이용하여 만든 윈도우는 자동으로 닫을수 있지만, 다른 형태로 열린 윈도우를 닫으려고 하면 confirm 대화상자를 통해 사용자의 확인을 받아야 합니다. 다음은 현재 윈도우를 닫는 코드 입니다.
self.close()
▶ confirm()
confirm() 메소드는 메시지를 전달한다는 점에서는 alert() 메소드와 비슷하지만, "확인"과 "취소" 버튼을 제공한다는 점에서는 다릅니다. 이 메소드는 사용자가 "확인" 버튼을 클릭하면 true가 리턴되고, "취소" 버튼을 클릭하면 false가 리턴됩니다. if 문을 이용하여 confirm() 메소드의 리턴값에 따라 서로 다른 문장을 실행할 수 있으므로 원하는 작업을 수행할 수 있습니다.
다음 코드를 문서 스크립트에 작성한 후, 미리보기 창을 열면, 다음과 같은 confirm 대화상자가 나타납니다.
if (confirm("교육용 CD 타이틀을 구경하시렵니까?"))
{location.href= "http://www.miraecom.co.kr"}
확인 버튼을 클릭하면 브라우저가 http://www.miraecom.co.kr로 이동하고, 취소 버튼을 클릭하면 현재 스크립트가 작성되어 있는 문서가 나타납니다.(완성 파일: sample29.htm)
▶ focus()
강제로 특정 윈도우 객체에 포커스를 줍니다. 다음은 HelpWin이라는 윈도우에 포커스를 주는 코드 입니다.
HelpWin.focus()
▶ forward()
웹 브라우저가 히스토리 리스트에서 이전 단계로 이동하도록 합니다.
▶ moveBy()
브라우저 윈도우의 현재 위치를 기준으로 하여, 윈도우의 위치를 이동시킵니다. 예를 들어, 다음 코드는 윈도우의 현재 포지션으로부터, 현재 윈도우를 우측으로 50 픽셀, 그리고 아래로 200 픽셀 이동시킵니다.
self.moveBy (50,200)
▶ moveTo()
윈도우의 좌측 상단 모서리를 지정된 스크린상의 특정 포인트로 이동시킵니다. 다음 코드는 윈도우의 좌측 상단 모서리를 사용자 스크린 상의 50,200 포지션으로 이동시킵니다.
self.moveTo (50,200)
▶ navigate()
브라우저가 지정된 URL로 이동하게 합니다. 이것은 location.href 속성과 같은 역할을 한다고 보면 됩니다. 다음 코드는 현재 브라우저가 http://www.miraecom.co.kr로 이동하도록 합니다.
self.navigate ("http://www.miraecom.co.kr")
▶ open()
새로운 브라우저 윈도우를 열고, 그 안에 웹 문서를 로드합니다. 또한 윈도우의 모양과 크기 등을 제어할 수 있습니다. 이 메소드의 기본 구문론은 다음과 같습니다.
window.open("URL", "windowname", "window_appearance")
URL은 새로운 윈도우에 로드될 문서의 URL이고, windowname은 새로운 윈도우에 정해주는 이름입니다. window_appearance에는 윈도우 특성들이 콤마로 구분된 형태의 리스트로 올수 있습니다. 윈도우 특성들은 부울값(0 또는 1, 또는 no 나 yes)을 가질수 있습니다. 다음은 window_appearance에 올수 있는 윈도우 특성들입니다.
. toolbar: 브라우저의 툴바를 나타낼지 어떨지를 지정
. location: (현재의 URL을 보여주는) 브라우저의 location 바를 나타낼지 어떨지를 지정
. directories: 디렉토리 버튼을 나타낼지 어떨지를 지정
. status: 상태바를 나타낼지 어떨지를 지정
. menubar: 메뉴바를 나타낼지 어떨지를 지정
. scrollbars: 스크롤바를 나타낼지 어떨지를 지정
. resizable: 새로운 윈도우의 크기를 조절할수 있게 할지 어떨지를 지정
. width: 새로운 윈도우의 폭을 픽셀 단위로 지정함 . 사용법은 width="pixels" 형태를 취합니다.
. height: 새로운 윈도우의 높이를 픽셀 단위로 지정함 . 사용법은 height="pixels" 형태를 취합니다.
. top: 새로운 윈도우를 디스플레이할 상단 좌표를 지정함. 사용법은 top="pixels" 형태를 취합니다.
. left: 윈도우를 디스플레이할 좌측 좌표를 지정합니다. 사용법은 left="pixels" 형태를 취합니다.
다음 코드는 툴바와 상태바를 갖는 새로운 윈도우를 열고, 그 안에 sample1.htm 문서를 로드합니다.
window.open( "sample1.htm", "NewWin", "width= 150, height=120, toolbar=1, status=1, resizable=1");
▶ prompt()
사용자들이 값을 입력할 수 있는 대화상자가 나타나게 합니다. 이 메소드는 호출 시에 입력 박스에 기본 값을 설정하고 호출합니다. 사용자가 확인 버튼을 클릭하면 텍스트 박스에 입력한 내용이 리턴되고(텍스트 박스에 입력한 내용이 없을 경우에는 빈 문자열이 리턴됨), 취소 버튼을 클릭하면 null 값이 리턴됩니다.
prompt("나이를 입력해 주세요", 36)
위 코드는 다음과 같은 입력상자가 나타나게 합니다.
▶ resizeBy():
지정된 크기만큼 현재 윈도우의 사이즈를 조절합니다. 다음 스크립트는 윈도우의 우측 하단 모서리를 우측으로 50 픽셀, 아래로 200 픽셀 키워, 전체 윈도우 크기를 확장 시킵니다.
self.resizeBy (50,200)
▶ resizeTo()
지정된 크기로 윈도우 크기를 조절합니다. 다음 코드는 윈도우의 크기를 240*480 픽셀 크기로 조절합니다.
self.resizeTo (240,480)
▶ scroll()
사용자를 현재 윈도우 내의 특정 포인트로 이동하게 합니다. 다음 코드는, 사용자가 x 좌표200, y 좌표 300 포지션(픽셀 단위) 으로 스크롤되게 합니다.
HelpWin.scroll(200,300)
▶ scrollBy()
윈도우의 뷰 영역을 지정한 값 만큼 이동시킵니다. 다음 코드는 윈도우 뷰 영역을 좌로 50 픽셀, 아래로 100 픽셀 이동시킵니다.
self.scrollBy (50,100)
▶ scrollTo()
지정된 픽셀 포지션으로 윈도우의 뷰 영역을 이동시킵니다. 다음은 뷰영역을 우측으로 100 픽셀, 아래로 300 픽셀 스크롤 합니다.
self.scrollTo (100,300)
▶ setInterval()
지정된 시간이 지나면 반복하여 자바스크립트 함수를 호출하거나 식을 평가하기위해 사용합니다.
구문론은 다음과 같습니다.
setInterval(expression, milliseconds)
setInterval(function, milliseconds, [arg1, arg2,....argN])
예를 들어, 다음 코드는 1초가 지나면 startanim() 함수를 실행합니다. 20과 100은 함수에 인자로 제공됩니다. 참고로 milliseconds는 1000분의 1초를 의미합니다.
setInterval(startanim(),1000,20,100)
setInterval 메소드는 사용자가 스크립트가 포함된 문서를 떠날때까지, 반복하여 참조된 함수를 호출하거나, 식을 실행합니다. 이 점이 setTimeout 메소드와의 차이점입니다. setTimeout 메소드는 지정된 시간이 지난 후에 단지 한번만 실행됩니다.
▶ setTimeout()
지정된 시간이 지난후에 함수를 실행하거나, 기존의 객체 속성이나 메소드에 액세스하기위해 사용됩니다.
구문론은 다음과 같습니다.
setTimeout(expression, milliseconds)
setTimeout(function, milliseconds, [arg1, arg2,....argN])
다음 코드는 5초가 지나면, TooMuchTime() 함수를 실행합니다.
setTimeout("TooMuchTime()", 5000)
시간 간격은 항상 milliseconds(1000분의 1초)로 지정됩니다. Javascript 1.2에서는 이 메소드를 이용하여 식을 평가할 수도 있습니다. 이때는 <SCRIPT> 태그에 LANGUAGE="Javascript1.2"를 입력하여, 구버전의 브라우저에서 에러가 발생하지 않도록 해야 합니다.
▶ showModalDialog()
모달 대화상자 윈도우를 만듭니다. 모달 대화상자가 열려있는 동안은 다른 윈도우에서 작업할 수 없습니다.
구문론은 다음과 같습니다.
showModalDialog(URL [, arguments [, features]])
URL은 대화상자 열고자하는 파일의 URL입니다.
arguments는 열리는 윈도우를 위한 인자를 지정하는 문자열입니다.
features는 대화상자를 꾸밀수 있는 특성들이 옵니다. 여기에 올수 있는 특성들은 다음과 같습니다.
. dialogWidth: 대화상자의 폭을 픽셀 단위로 지정
. dialogHeight: 대화상자의 높이를 픽셀 단위로 지정
. dialogTop: 초기 수직 오프셋 값을 픽셀로 지정
. dialogLeft: 초기 좌측 오프셋 값을 픽셀로 지정
. center: 대화상자를 스크린의 중앙에 위치하게 할지 어떨지를 부울값(yes|no|0|1)으로 지정
. font: 폰트를 설정
. font-family: font family 설정
. font-size: 폰트 사이즈 설정
. font-weight: 폰트 두께 설정
. font-style: 폰트 스타일 설정
. font-variant: font variant 설정
. border: 테두리 폭(thick|think) 설정
. help: 타이틀 바에 헬프 버튼('?' button)이 나타나게 할지 어떨지를 부울값으로 설정
. minimize: 타이틀 바에 최소화 버튼이 나타나게 할지 어떨지를 부울값으로 설정
. maximize: 타이틀 바에 최대화 버튼이 나타나게 할지 어떨지를 부울값으로 설정
다음은 모달 대화상자 윈도우를 만들면서, 그 안에 sample5.htm 문서를 여는 예제 입니다.
showModalDialog("sample5.htm")
이벤트
Internet Explorer는 표준 Dynamic HTML 이벤트 중에 onHelp 이벤트를 지원하며, 그리고 다음과 같은 이벤트들을 지원합니다.
▶ OnBeforeUnload
onunload 이벤트가 발생하기 전에 발생합니다. 이 이벤트는 페이지가 언로드되기 전에 데이터가 업데이트 되도록 하기위해 Data Binding에 추가되었습니다.
▶ OnBlur
사용자가 참조된 윈도우 객체로부터 포커스를 제거할때마다 발생합니다. 이 이벤트는 <BODY>와 <FRAMESET> 태그에서 이용할 수 있습니다.
▶ OnError
문서가 로드되지 않거나, 스크립트 에러가 발생하는 등의 에러가 발생할 때 발생됩니다. 이 이벤트는 <BODY>와 <FRAMESET> 태그에서 이용할 수 있습니다.
▶ OnFocus
윈도우가 포커스를 가질때마다 발생합니다. 이 이벤트는 <BODY>와 <FRAMESET> 태그에서 이용할 수 있습니다.
▶ OnLoad
문서가 완전히 로드되면 발생하는 이벤트입니다. 이 이벤트는 <BODY>와 <FRAMESET> 태그에서 이용할 수 있습니다.
▶ OnResize
사용자가 윈도우의 크기를 조절할 때 마다 발생합니다.
▶ OnScroll
사용자가 윈도우의 스크롤바를 이용하여 스크롤할 때 마다 발생합니다.
▶ OnUnLoad
웹 브라우저의 윈도우를 닫거나 다른 문서로 이동할 때 발생합니다. 이 이벤트는 <BODY>와 <FRAMESET> 태그에서 이용할 수 있습니다.
