태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

자바스크립트 객체와 이벤트

16년 전

1. 자바스크립트 객체의 개요

자바스크립트 객체의 계층 구조

자바스크립트 코드를 지원하는 웹 브라우저는 HTML페이지를 로드할 때 그 페이지에 존재하는 요소들을 반영하는 자바스크립트 객체를 생성한다.

HTML 페이지의 내용에 관계없이 한 페이지가 로드될 때 처음으로 5개의 자바스크립트 객체가 존재한다.

navigator
window
document
History
Location
자바스크립트 객체들의 개요

객체이름 설명
window 윈도우마다 하나씩 존재하는 객체로서 윈도우 내에 존재하는 모든 객체의 상위 객체이다.
Frame 프레임마다 하나씩 존재하는 윈도우 객체. 즉 <frame>태그에 의해 정의된다.
document HTML 페이지마다 하나씩 존재하는 객체로서 HTML문서의 내용에 관한 정보를 가진다.
Location 현재 로드된 HTML 페이지의 URL에 관한 정보를 가진다.
History 현재 윈도우에서 사용자가 방문하였던 URL들의 리스트를 유지하는 객체이다.
navigator 현재 사용중인 브라우저의 이름과 버전 등에 관한 정보를 포함하는 객체이다.
Layer DHTML에서 지원하는 객체로서 문서 내의 한 위치에 다수의 객체를 중첩할 때 사용하는 객체이다.
Link HTML 문서 내의 링크를 표현하는 객체로서 <a href=....> 태그 당 하나의 객체가 자동 생성된다.
Image HTML 문서 내의 이미지를 표현하는 객체로서 <img> 태그 당 하나의 객체가 자동 생성된다.
Area HTML 문서 내의 이미지맵의 한 영역을 표현하는 객체로서 <area> 태그 당 하나의 객체가 자동 생성된다.
Anchor HTML 문서 내의 앵커를 표현하는 객체로서 <a name=...> 태그 당 하나의 객체가 자동 생성된다.
Applet 애플릿을 표현하는 객체로서 <applet> 태그당 하나의 객체가 자동 생성된다.
MimeType 브라우저가 지원하는 마임(MIME) 타입에 대한 정보를 표현하는 객체로서 마임 타입 하나 당 하나의 객체가 자동 생성된다.
Plugin 브라우저에 설치된 프러그인에 대한 정보를 표현하는 객체로서 설치된 플러그인 당 하나의 객체가 자동 생성된다.
Form 폼에 대한 정보를 표현하는 객체로서 <form> 태그 당 하나의 객체가 자동 생성된다.
Text <input type="text" > 태그 당 하나의 객체가 자동 생성된다.
Textarea <textarea>태그 당 하나의 객체가 자동 생성된다.
Password <input type="password" > 태그 당 하나의 객체가 자동 생성된다.
FileUpload <input type="file" > 태그 당 하나의 객체가 자동 생성된다.
Radio <input type="radio" > 태그 당 하나의 객체가 자동 생성된다.
Checkbox <input type="checkbox" > 태그 당 하나의 객체가 자동 생성된다.
Button <input type="button" > 태그 당 하나의 객체가 자동 생성된다.
Submit <input type="submit" > 태그 당 하나의 객체가 자동 생성된다.
Reset <input type="reset" > 태그 당 하나의 객체가 자동 생성된다.
Select <select> 태그 당 하나의 객체가 자동 생성된다.
Option <select> 태그 내의 옵션을 표현하는 객체로서 <option> 태그 당 하나의 객체가 자동 생성된다.
Hidden <input type="hidden" > 태그 당 하나의 객체가 자동 생성된다.

　

　

HTML 태그와 자바스크립트 코드는 어떻게 처리되는가?

웹 브라우저가 HTML 페이지를 로드하고, 그 페이지에 존재하는 자바스크립트 프로그램을 실행하는 일반적인 과정.

브라우저는 HTML 문서를 처음부터 읽어나간다.
브라우저는 처음부터 필요한 5개의 자바스크립트 객체를 만든다.
<script> 태그를 처리한다.
브라우저는 HTML 문서를 처리하면서 자바스크립트 객체를 생성한다.
이벤트를 처리한다.


　

2. 이벤트와 이벤트 핸들러

이벤트는 브라우저의 사용자가 취한 액션을 의미한다. 즉 마우스 클릭이나 마우스 이동, 키보드 입력, 버튼 클릭 등의 행위를 의미한다. 이벤트는 브라우저에 의해 자바스크립트 코드에 전달된다. 이벤트 핸들러는 이벤트의 발생시 처리하기 위해 작성된 자바스크립트 코드이다. 이벤트 핸들러는 HTML문서를 작성하는 사람에 의해 작성된다. 만일, 버튼 객체에 마우스 클릭 즉 click 이벤트를 받아 처리하고자 한다면 onClick이라는 이벤트 핸들러에 자바스크립트 코드를 정의해 놓아야 한다.

(1) 이벤트와 이벤트가 발생하는 경우

이벤트 핸들러 이벤트가 발생하는 경우
onAbort 사용자가 이미지 로딩을 강제로 중단할 때
onBlur 윈도우,폼 구성 요소, 프레임이 포커스를 잃을 때
onChange Select, Text, Textarea 객체의 필드 값을 변경한 후 포커스를 잃을 때
onClick 폼 구성 요소가 클릭될 때
onDblClick 폼 구성요소나 링크를 더블클릭할 때
ondragDrop 사용자가 한 객체(혹은 파일)를 브라우저 윈도우 상으로 드롭할 때
onError 문서나 이미지의 로딩시 오류가 발생할 때
onFocus 윈도우, 프레임, 프레임셋, 폼 요소가 포커스를 받을 때
onKeyDown 사용자가 키를 누를는 순간
onKeyPress 사용자가 키를 누른 채 유지하는 동안
onKeyUp 사용자가 누른 키를 놓는 순간
onLoad 브라우저 윈도우에 HTML 문서의 로딩직 후 혹은 프레임셋 문서의 모든 프레임의 로딩이 마칠 때
onMouseDown 사용자가 마우스를 누르는 순간
onMouseMove 사용자가 마우스를 움직일 때마다
onMouseOver 사용자가 마우스 커서를 이미지맵이나 링크 위에 올려 놓을 때
onMouseUp 사용자가 마우스 커서를 이미지맵이나 링크 위세서 내려 놓을 때
onMove 사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 위치가 이동될 때
onReset 사용자가 reset 버튼을 누를 때
onResize 사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 크기가 조절되는 순간
onSelect 사용자가 Text나 Textarea 객체의 필드 내의 텍스트 일부를 선택할 때
onSubmit 사용자가 submit 버튼을 누를 때
onUnload 사용자가 현재 HTML문서보기를 종료하고 다른 웹 사이트로 이동할 때

　

(2) 이벤트 처리의 특징

(가) 이벤트는 이벤트를 받는 객체에서 처리된다.

사용자에 의해 발생된 이벤트는 이벤트의 목적 객체에 해당하는 자바스크립트 객체에 전달된다. 예를 들어 사용자가 어떤 버튼을 클릭하였다면 click 이벤트가 그 버튼 객체에 전달되고 이때 이 버튼 객체에 정의된 onClick 핸들러에 의 해 처리된다. 그러나 만일 버튼 객체에 onClick 핸들러가 정의되어 있지 않다면 click 이벤트를 처리할 객체가 없어서 이벤트는 단순히 사라지고 만다.

(나) 이벤트 핸들러 설정은 마치 객체의 프로퍼티에 값을 쓰는 것같이 한다.

이벤트 핸들러를 정의하는 방법 중 하나로 다음과 같이 할 수 있다. window상에서 click이벤트가 발생하면 자바스크립트 함수 FuncClick 이 실행되게 하고자 한다면 다음과 같다.

window.onClick = FuncClick;

물론 이때 HTML 페이지를 만든 사람은 FuncClick이라는 자바스크립트 함수를 작성하여야 한다.

(다) 자바스크립트 객체마다 처리가능한 이벤트의 종류가 정해져 있다.

자바스크립트 객체마다 처리할 수 있는 이벤트의 종류가 정해져 있기 때문에 다른 이벤트는 처리할 수 없다. 물론 이벤트를 처리하기 위해서는 이벤트 핸들링을 위한 코드를 정의하여야 한다.

　

(3) 이벤트 핸들러 작성

이벤트 핸들러 코드는 일반적으로 다음과 같이 HTML 태그 내에 작성한다.

<HTML태그  이벤트핸들러="이벤트핸들링을 위한 자바스크립트코드">

(예)

<input ype="button" value="배경변경"  onClick="document.bgColor='blue'">

또는

<script>
        function  f(c)
        {
                document.bgColor = c;
        }
</script>

........

<input ype="button" value="배경변경"  onClick="f(blue)">

　

　

3. 이벤트 핸들링

(1) onAbort 핸들러

사용자가 이미지의 로딩을 중단할 때 호출되는 abort 이벤트의 핸들러이다. 현재 브라우저가 이미지를 로딩 중인 상황에서 링크를 클릭하여 다른 URL을 선택하거나 브라우저의 메뉴 중 Stop 버튼을 선택하였을 때 abort 이벤트가 발생한다.

* 대상객체 :  Image

(2) onBlur, onFocus 핸들러

이 두 핸들러는 포커스의 변경에 의해 발생하는 이벤트의 핸들러이다. 어떤 윈도우나 애플리케이션이 포커스를 받는다는 의미는 사용자의 입력 즉, 마우스 입력이나 키보드 입력을 받아들이는 상태임을 의미한다.

onBlur는 윈도우나 프레임, 폼 요소가 포커스를 잃을 때 호출되며, onFocus는 윈도우나 프레임, 프레임셋, 폼 요소가 포커스를 받을 때 호출된다.

* 대상객체 :  Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

* (예1) <body onBlur="document.bgColor='blue' onFocus="document.bgColor='red'">

* (예2) Text창에 어떤 문작 입력될 때까지 다른 일을 할 수 없게 하는 예

<script>
    function checkText(text)
    {
        if(text.value == "") {
            alert("input Name");
            text.focus();
        }
    }
</script>

<body onLoad="document.f.t.focus()">
<form name="f">
    이름<input type="text" name="t" value=""  onBlur="checkText(this)"><br>
    학번<input type="text" name="id">
</form>
</body>

(3) onChange 핸들러

Select, Text, Textarea 객체의 내용을 변경한 후 포커스를 잃을 때 호출된다. 예를 들면 Text 창의 내용을 변경한 후 Text 창 바깥의 다른 곳에 마우스를 클릭하였을 때 실행한다.

* 대상객체 :  FileUpload, Select, Text, Textarea

* (예) 4글자 이상 입력할 수 없는 Text창 만들기. Select 객체의 옵션이 변경되면 변경된 내용을 출력함.

<script>
    function check(text)
    {
        if(text.value.length > 3) {
            alert("maximum 3 letters");
            text.value = text.value.substring(0,3);
            text.focus();
        }
    }
    function checkSel(Sel)
    {
        alert("You selects " + Sel.options[Sel.selectedIndex].value);
    }
</script>

<body>
<form name="f">
    이름<input type="text" name="t" value=""  onChange="check(this)"><br>
    과일<select name="sel" onChange="checkSel(this)">
            <option value="사과">사과
            <option value="감">감
            <option value="배">배
        <select>
</form>
</body>

　

(4) onClick, onDblClick 핸들러

onClick는 폼 요소가 클릭되었을 때 호출되며 onDblClick은 폼 요소나 링크를 더블클릭하였을 때 호출된다. 이벤트 핸들러가 false를 리턴하면 이벤트 발생의 원래 의미가 취소된다.

* 대상객체 :  Button, document, Checkbox, Link, Radio, Reset, Submit

* (예1) 간단한 계산기(eval함수 이용)

<script>
    function compute(f)
    {
        var res = eval(f.exp.value);
        f.val.value = res;
    }
</script>

<body>
<form name="cal">
    식<input type="text" name="exp" value=""><br>
    값<input type="text" name="val" value="" size=10><br>
    <input type="button" value="계산" onClick="compute(this.form)">
</form>
</body>

* (예2) 브라우저 화면 상의 아무 위치에나 더블클릭하면 브라우저 윈도우의 크기가 20*20씩 증가함.

<script>
    function docDblClick(ev)
    {
        window.resizeBy(20, 20);
    }
    document.onDblClick=docDblClick;
</script>

<body>
</body>

　

(5) onError 핸들러

자바스크립트 문법 오류나 런타임 오류시, 혹은 <img> 태그에 지정된 이미지의 로딩시 이미지에 대한 URL이 잘못되었거나 이미지가 손상되었을 경우 onError 핸들러가 호출된다.

(6) onKeyDown, onKeyPress, onKeyUp 핸들러

onKeyDown은 사용자가 키를 누르는 순간, onKeyPress는 사용자가 키를 누른 이후 누르고 있는 동안 반복적으로 계속 호출하며, onKeyUp은 사용자가 누른 키를 놓을 때 호출된다. document객체는 문서에 발생하는 모든 종류의 키 입력에 대해 이벤트를 가로챌 수 있다.

* 대상객체 :  document, Image, Link, Textarea

(7) onLoad 핸들러

onLoad 핸들러가 호출되는 경우는 윈도우 상에 문서의 로딩 완료 시점과 이미지의 로딩 완료 시점의 2가지이다.

첫째는 브라우저가 윈도우의 로딩을 완전히 마친 후 곧장 호출되거나 <frameset> 태그 내의 모든 프레임의 로딩을 마칠 때 호출된다. 이 경우는 각각 <body onLoad=".....">나 <frameset onLoad=".....">로 핸들러를 지정한다.

두 번째 경우는 <img> 태그에 지정된 이미지나 Image 객체의 src 프로퍼티의 변경에 의해 이미지가 그려지는 경우 이미지의 화면 출력이 완료되는 시점에서 호출된다. 이때도 <img onLoad="...">형태로 핸들러를 지정한다.

* 대상객체 :  Image, Layer, window

(8) onMouseOver, onMouseOut 핸들러

onMouseOver는 마우스 커서가 이미지 맵이나 링크 객체 위로 들어올 때 호출되며 onMouseOut은 마우스 커서가 이미지 맵이나 링크 객체 위에서 바깥으로 이동할 때 호출된다. 이미지 맵의 한 영역에서 다른 영역으로 마우스가 이동하면 원래의 영역에 onMouseOut이 먼저 호출되고 그 후 새 영역에 onMouseOver가 호출된다.

* 대상객체 :  Link(Area포함), Layer

(9) onMouseDown, onMouseUp 핸들러

onMouseDown은 사용자가 마우스를 누르는 순간에 한 번 호출되며, onMouseUp은 사용자가 마우스를 놓는 순간 한 번 호출된다. 이 두 핸들러가 false를 리턴하면 원래 목적이 이루어지지 않는다.

* 대상객체 :  Button, document, Link

(10) onMouseMove 핸들러

onMouseMove는 마우스 커서가 움직이는 동안 계속적으로 호출된다. 마우스의 움직임은 매우 빈번한 동작이므로 이벤트에 대한 캡쳐가 요구된 객체에 대해서만 이벤트가 전달된다. 그러므로 document가 onMouseMove 이벤트 핸들러를 동작시키고자 한다면 document.captureEvents(Event.MOUSEMOVE)를 실행하여 이벤트를 캡쳐할 의사를 분명히 지정하여야 한다.

* 대상객체 :  captureEvents메소드를 가지고 있는 객체(document, window)

(11) onMove, onResize 핸들러

onMove는 사용자가 브라우저 창이나 프레임의 위치를 움직일 때 호출된다. 또는 자바스크립트 코드에 의해 브라우저나 프레임의 위치가 변경될 때 호출된다. 후자의 경우는 window객체의 move 메소드에 의해 실행에 의해 발생할 수 있다. onResize는 onMove와 비슷하게 사용자나 자바스크립트 코드에 의해 브라우저 창이나 프레임의 크기가 변할 때 호출된다.

* 대상객체:  window, Frame

(12) onReset, onSubmit 핸들러

onReset은 사용자가 폼을 리셋할 때 즉 reset 버튼을 누를 때 호출된다. onSubmit은 사용자가 submit 버튼을 누를때 즉 폼 데이터를 전송할 때 호출된다. onSubmit 핸들러가 false를 리턴하면 브라우저는 폼 데이터를 전송하지 않는다. 역시 onReset 핸들러가 false를 리턴하면 폼이 리셋되지 않는다. 이핸들러들은 Submit 버튼이나 Reset 버튼에 설정되지 않고<form> 태그 내에 즉 Form 객체에 설정된다.

* 대상객체 :  Form

(13) onSelect 핸들러

사용자가 Text나 Textarea  객체의 텍스트 일부를 선택할 때 호출된다. onSelect 핸들러는 navigator 2.0에서 구현된것임.

* 대상객체 :  Text, Textarea

　

　

4. 이벤트의 흐름제어

이벤트는 일정한 경로를 거쳐 이벤트를 받도록 설정된 객체에 전달되며 그 객체의 이벤트 핸들러가 호출된다. 그러나 이벤트가 전달되는 경로 상에 있는 객체들은 이벤트의 목적 객체에 도달하기 전에 가로채거나, 이벤트가 흘러가지 못하게 하거나, 이벤트의 경로를 무시하과 다른 객체로 이벤트가 전달되도록 할 수 있다.

(1) 이벤트의 전달 경로

자바스크립트 객체들은 상호간에 상위-하위의 계층구조로 이루어져 있다. 이벤트는 기본적으로 이벤트의 목적 객체에 도달할 때까지 상위 객체로부터 하위 객체로 흘러간다. 즉 모든 이벤트는 window 객체로 먼저 들어 오면 하위 객체로 전달된다.

　

(2) 이벤트 제어 메소드들

이벤트의 전달경로 상에 있는 상위객체들은 이벤트가 목적 객체에 도달하기 전에 이벤트를 가로채거나 가로챈 이벤트가 정상적인 이벤트 전달 경로로 흘러가지 않게도 할 수 있다. 이벤트를 제어하는 제어 메소드에는 4가지가 있다.

captureEvents(이벤트 타입)
releaseEvents(이벤트 타입)
routeEvent(eV)
handleEvent(eV)
captureEvents와 releaseEvents를 지원하는 객체는 window와 document 둘뿐이다. routeEvent와 handleEvent의 파라미터인 ev는 Event 타입의 객체로서 자바스크립트 엔지이 생성하여 전달하는 객체이다.

가) captureEvents(이벤트 타입들) 메소드

파라미터는 하나의 캡쳐하고자 하는 이벤트의 타입들을 BIT-OR 형식으로 전달한다. 이벤트 타입은 Event 객체의 프로퍼티이다. 즉, click이벤트는 Event.CLICK으로 move 이벤트는 Event.MOVE를 이용한다.

captureEvents()메소드는 파라미터에 설정된 이벤트들을 가로챌 것을 지정하는 함수이다. 즉 어떤 객체의 captureEvents 메소드가 호출되면 그 객체는 지정한 이벤트들을 가로챌 수 있다. 그러나 만일 이벤트 핸들러가 없다면 이벤트는 사라지고 만다. 가로챈 이벤트를 처리하고자 한다면 capturEvents() 메소드의 호출 뿐 아니라 이벤트 핸들러를 등록하고 이벤트 핸들링 함수를 작성하여야 한다.

어떤 객체 A가 이벤트 K를 가로채어 이벤트 핸들러를 실행하고자 한다면 다음 3가지 코드가 필요하다.

A.captureEvents(K) 호출하여 객체 A가 이벤트 K를 가로챌 것을 명시하는 코드.
이벤트 핸들러 함수의 작성
이벤트 핸들러 등록
document 객체가 mousedown과 mouseup 이벤트를 캡쳐하는 자바스크립트 문은 :

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
(예)

　

나) releaseEvents(이벤트 타입들) 메소드

캡쳐하도록 지정된 이벤트의 캡쳐를 해제하는 메소드이다. 이 메소드가 호출된 후, 이벤트가 발생한다면 이벤트는 이벤트 계층 경로를 따라 정상적으로 목적 객체로 흘러 간다.

(예)

　

다) routeEvent(ev)

파라미터에 주어진 ev는 Event 타입의 객체 인스턴스이다. ev는 자바스크립트 프로그래머가 직접 생성할 필요가 없다. 이벤트가 발생하면 Event 객체는 시스템에 의해 자동으로 생성되어 이벤트 핸들러에게 전달된다.

routeEvent(ev) 메소드는 이벤트를 캡쳐한 객체가 현재 발생한 이벤트를 정상적인 계층 구조를 보내는 메소드이다.

　

라) handleEvent(ev)

파라미터에 주어진 ev는 routeEvent 메소드와 같이 Event 타입의 객체 인스턴스이다. 이벤트를 캡쳐한 객체가 다른 객체 A의 메소드 handleEvent(ev)를 호출하면(A.handleEvent(ev)), 현재 발생한 이벤트를 정상적인 계층구조가 아닌 특정 객체로 직접 보내게 된다. 객체 A의 이벤트 핸들러가 호출되고 이벤트의 생명은 그 특정 객체에서 끝나게 된다. 특정 객체에 이벤트 핸들러가 존재하지 않는다면 이벤트는 사라지게 된다.

handleEvent(ev)를 호출할 때 반드시 이벤트를 처리할 객체를 지정하여야 한다. document 객체에게 이벤트를 직접 전달하고자 한다면　다음 코드를 사용하여야 한다.

document.handleEvent(ev)
handleEvent(ev)의 파라미터에 Event 타입의 ev를 전달하는 이유는 이벤트를 받는 객체에게 시스템이 생성한 ev를 전달하기 위함이다.

　

(3) 이벤트 핸들러 작성자에 의한 이벤트 핸들링 4 가지 경우

이벤트 핸들러를 작성할 때 다음 4가지 방식으로 이벤트를 제어할 수 있다.

가) 이벤트 핸들러에서 true를 리턴

이벤트 핸들러는 이벤트를 받은 후 임의의 코드를 실행할 것이다. 그리고 나서 마지막에 true를 리턴한다면 이벤트가 발생한 객체의 행위가 실행된다. 객체마다 이벤트에 대해 정해진 의미를 가지고 있다.

나) 이벤트 핸들러에서 false를 리터하면 객체에 발생한 이벤트의 고유 의미가 실행되지 않는다.

다) routeEvent 메소드 호출

라) 이벤트 수신자의 handleEvent 메소드 호출

이벤트 핸들러의 내부 코드에서 어떤 객체(수신자)의 handleEvent 메소드를 호출하면 자바스크립트 엔진은 수신자 객체의 이벤트 핸들러를 호출한다.

　

5. Event 객체

Event 객체는 이벤트가 발생할 때 브라우저 내에서 자동으로 생성된다. 사용자가 자바스크립트 코드를 이용하여 임의로 생성해 낼 수 없다. Event 객체는 발생한 이벤트의 종류, 커서의 위치 등에 대한 정보를 제공한다. 이벤트를 캡쳐하도록 설정된 이벤트 핸들러가 호출될 때 Event 객체는 파라미터로 전달된다.

Event의 프로퍼티(메소드 없음)

프로퍼티 설명
target 이벤트의 목적 객체에 대한 레퍼런스
type 이벤트 타입을 나타내는 스트링. 이벤트 종류를 소문자로 표현한 스트링 "click", "keydown", "change"
data 드롭된 객체의 URL을 표시하는 스트링(dragdrop 이벤트인 경우)
height 윈도우나 프레임의 높이
layerX 혹은 x resize 이벤트 경우 객체의 폭
layerY 혹은 y resize 이벤트 경우 객체의 높이.
modifiers 수정자 키를 가리키는 스트링(마우스나 키보드 이벤트 경우) 수정자 키
pageX 페이지 내의 픽셀 주소로서 커서의 수평 위치
pageY 페이지 내의 픽셀 주소로서 커서의 수직 위치
screenX 스크린 내의 픽셀 주소로서 커서의 수평 위치
screenY 스크린 내의 픽셀 주소로서 커서의 수직 위치
which 눌러진 마우스 버튼 종류 혹은 눌러진 키의 ASCII 값
width 윈도우나 프레임의 폭

(예)



출처 : window 객체...새창관련  [LIST]


window 객체 .........................................................

아래는 최상위 window객체가 가진 속성과 메서드,이벤트 핸들러의 종류를 훓어보고 몇가지 예제를 해본다. 필요한 작업이 있을 때마다 객체를 찾아보고 속성이 있나, 메서드를 가졌나, 이벤트핸들러가 있는지를 찾아봄으로써 점점 내공이 깊어지는 것이다.

■ window 객체 프로퍼티

status 브라우저의 상태바에 문자열을 출력하는 경우에 사용
defaultStatus 브라우저의 상태바에 초기 문자열을 설정
length 창안의 프레임 수
name 창 이름
self 현재 창 자신, window와 같음
window 현재 창 자신, self와 같음
parent 프레임에서 현재프레임의 상위프레임
top 현재프레임의 최상위프레임
opener open()으로 열린 창에서 볼 때 자기를 연 창
document document 오브젝트
frames 창안의 모든 프레임에 대한 배열정보
history history 오브젝트 및 배열
location location 오브젝트
closed 창이 닫혀 있는 상태
locationbar location 바
menubar 창 메뉴 바
innerHeight 창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음
innerWidth 창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음
outerHeight 창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음
outerWidth 창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음
pageXOffset 현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음
pageYOffset 현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음
personalbar 창의 퍼스널 바
scrollbar 창의 스크롤 바
statusbar 창의 상태 바
toolbar 창의 툴 바

■ window 객체 메서드

alert() 경고용 대화상자를 보여줌
clearTimeout() setTimeout 메소드를 정지
confirm() 확인, 취소를 선택할 수 있는 대화상자를 보여줌
open() 새로운 창을 오픈
prompt() 입력창이 있는 대화상자를 보여줌
setTimeout() 일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정
eval() 문자열을 숫자로 바꿈
toString() 오브젝트를 문자열로 바꿈
blur() focus를 이동
focus() focus를 줌
scroll() 창을 스크롤 함
valueOf() 오브젝트 값을 반환
back() 한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함
find() 창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함
forward() 한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함
home() 초기화 홈페이지로 이동. 익스플로러 지원 안함
moveby() 창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정
moveto() 창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정
resizeby() 창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정
resizeto() 창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정
scrollby() 창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정
scrollto() 창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정
stop() 불러오기를 중지. 익스플로러는 지원 안함
captureEvents() 모든 타입의 이벤트를 판단
setInterval() 일정시간마다 지정된 처리를 반복
clearInterval() setInterval 메소드의 정지
handleEvent() 이벤트 취급자를 정함
print() 화면에 있는 내용을 프린터로 출력
releaseEvent() 다른 계층의 이벤트로 이벤트를 넘김
routeEvent() 판단한 이벤트와 같은 계층의 이벤트
toSource() 오브젝트값을 문자열로 반환

■ window 객체 이벤트핸들러

onBlur 브라우저가 포커스를 잃을 때 발생
onDragDrop 사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함
onError 문서를 읽는 중에 에러가 생길 때 발생
onFocus 브라우저에 포커스를 얻을 때 발생
onLoad 문서를 읽을 때 발생
onMove 브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함
onResize 창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함
onUnload 현재 문서를 지울려고 할 때 발생

■ 새창열기 open() 메서드

window.open("문서url","창이름","창의 특성")

웹여행중에 많이 본 것일텐데 링크나,버튼,이미지를 누를 때 많이 뜨죠!

첫째인수로 url이 필요하죠. 새창에도 내용을 넣어야 하니까요.
둘째인수로 창이름, 이게 같은 경우엔 계속 창을 열 때 새로 열지 않고 이미 열린 창을 이용합니다.
세째인수는 새로 열릴 창의 너비,높이,툴바,상태바등을 지정하는거죠.

■ 창의특성
directories yes || no 익스플로러 연결도구모음, 익스플로러 전용
location yes || no 주소입력란
menubar yes || no 메뉴표시줄
scrollbars yes || no 스크롤바
status yes || no 상태표시줄
toolbar yes || no 도구모음
copyhistory yes || no 히스토리정보를 복사
resizable yes || no 창 크기 조절 가능여부
width 픽셀 창의 너비
height 픽셀 창의 높이
  <script language="javascript">
// 페이지로딩시 새창 열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<body onLoad="winOpen()">

--------------------------------------------------------------------------------
<script language="javascript">
// 클릭시 새창열기

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()">
--------------------------------------------------------------------------------
<script language="javascript">
// 클릭시 새창열기 , 링크에서

function winOpen() {
window.open("123.html","newWin","width=300,height=200,toolbar=no")
}
</script>

<font onClick="winOpen()"> 클릭열기 </font>
<a href="javascript:winOpen()"> 링크열기 </a>
--------------------------------------------------------------------------------
<script language="javascript">
// 매개변수를 이용하기

function winOpen(url,winname,winhow) {
window.open(url,winname,winhow)
}
</script>

<a href= "javascript:winOpen('123.html','newWin','width=300,height=200,toolbar=no')"> 매개열기 </a>
--------------------------------------------------------------------------------


■ 새창열기 close() 메서드

  <script language="javascript">
function winClose() {
window.close()
}
</script>

<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>

<a href= "javascript:window.close()"> 메서드 이용 닫기 </a>
--------------------------------------------------------------------------------


■ 새로 열린 창에서 연 창을 컨트롤하기

  <script language="javascript">

// 창 닫기 전에 연 창의 폼요소에 값 넘기기

function winClose(addr) {
opener.form1.address=addr
self.close()
}
</script>

<a href= "javascript:winClose('서울 종로구')"> 종로구</a>
<a href= "javascript:winClose('서울 마포구')"> 마포구</a>
--------------------------------------------------------------------------------
<script language="javascript">

// 창 닫기 전에 연 창을 리로드하기

function winClose() {
opener.location.reload()
self.close()
}
</script>

<a href= "javascript:winClose()"> 함수이용해서 닫기 </a>
--------------------------------------------------------------------------------


■ 새로 열린 창에서 크기 조절하기 window.resizeTo
  <script language="javascript">
// 페이지로딩시 크기 조절

function winSize() {
window.resizeTo(300,200) // 너비,높이
}
</script>

<body onLoad="winSize()">

■ 새로 열린 창에서 위치 조절하기 window.moveTo
  <script language="javascript">
// 페이지로딩시 위치 조절

function winMove() {
window.moveTo(200,200) // X,Y 좌표
}
</script>

<body onLoad="winMove()">

window 객체에서 가장 많이 사용되는 필수 기능인 새창관련만 살펴보았다.
나머지는 필요할 때 검색을 통해 많은 예제 소스를 접할 수 있을 것이다!!!