10. Navigator 객체

10.8 form object

지금까지 배운 모든 객체를 다 합친 것 보다 많은 양을 배우게 된다. 이 객체가 실제로 가장 많이 쓰인다. form 과 함께사용되는 이벤트중 가장 보편적인 이벤트는 blur, focus, chage, click, submit이며, 이벤트 헨들러는 각각 onBlur, onFocus, onChange, onClick, onSubmit이다.

다음과 같은 HTML문서가 있다고 하면,

<FORM NAME="fm1">
.........
</FORM>

<FORM NAME="fm2">
.........
</FORM>

자바스크립트에서 각 FORM 객체에 접근하기 위해서는 window.document.fm1이라고 써주면 된다. 물론 window객체는 기본으로 적용되니까 생략하여 그냥 document.fm1이라고 써주면 첫 번째 form까지 접근할 수 있는 것이다.

위의 예에서 FORM 객체가 2개가 존재하므로,

document.fm1 == document.forms[0];
document.fm2 == document.forms[1];

이라는 등식이 성립되기도 한다.

주요 속성

action FORM Tag의 ACTION속성

elements[i] Form의 하위 요소들에 대한 배열

encoding FORM Tag의 ENCTYPE속성

method FORM Tag의 METHOD속성

target FORM Tag의 TARGET속성

하위 요소 접근

다음과 같은 HTML문서가 있다고 하자.

<FORM NAME=fm METHOD=GET ACTION="test.asp">
    <INPUT TYPE=text NAME=txt_name>
    <SELECT NAME=sel_type>
       <OPTION> Red </OPTION>
       <OPTION> Green </OPTION>
       <OPTION> Blue </OPTION>
    </SELECT>
    <TEXTAREA NAME=txt_area></TEXTAREA>
</FORM>

txt_name이라는 이름을 가지고 있는 text박스에 접근하려고 한다. 그럼,

document.fm.txt_name

이렇게 작성하면 된다. 나머지 것들도,

document.fm.sel_type : SELECT
document.fm.txt_area : TEXTAREA

이름을 줘야만 이렇게 하는 것이 가능하다. 만일 이름을 주지 않았다면,

document.fm.txt_name == document.fm.elements[0];
document.fm.sel_name == document.fm.elements[1];
document.fm.txt_area == document.fm.elements[2];

와 같이 접근해야 한다. 배열의 순서는 HTML문서상에 나타나는 순서대로 적용이 된다.

NAME 반드시 이름을 줘서 사용하는 것이 좋다. 입력 폼이 복잡한 경우가 있고, 또 TABLE과 같이 쓰이면 HTML상에 나오는 순서하고 눈에 보이는 순서하고 맞지 않아서 무지하게 고생하게 된다.! 더구나 가끔씩 브라우저도 그 순서를 엉망으로 만드는 경우도 발생한다.

- Last Update : 2001.7.3 by Deadfire(http://www.deadfire.net)

Javascript 강좌

기 초
     - HTML문서에추가하기
     - 최초 예제
     - 함수사용하기
     - 기본 함수

문 법
     - 변 수
     - 연 산
     - 조 건 문
     - 반 복 문
     - 사용자함수

객 체
     - Object란?
     - 속성과 함수
     - 객체의 생성과사용

내장 객체
     - Date
     - Math
     - String
     - Array
     - Boolean
     - Function
     - Argument
     - Number
     - Global
     - 기 타
     - with / delete

Event 객체

네비게이터 객체
     - 네비게이터객체구조
     - 객체 접근 방법
     - navigator
     - window
     - location
     - history
     - document
     - form
     - form elements

Frame 객체

기 타
- Animation
- Audio

마치며