도큐먼트, 히스토리 객체

  Document 하부객체 - Form

1. Form 객체 : <FORM>의 전반적인 정보 제공

     document.form명[배열번호].속성  ->배열번호는 문서안의 Form들을 배열로 표현 (0부터 시작)

       ---> Form 객체의 자바스크립트 소스는 <FORM>태그 다음에 위치해야 한다. 

              Form 양식의 정보를 먼저 실행해야 그 정보를 얻을 수 있게 때문이다.

              다른 방법으로는 함수로 정의하여 상위에서 사용할 수 있다.

2. 속성

   .elements : <FORM> 태그내의 여러 입력양식중 지정된 입력양식을 배열로 표현

      document.form명.elements[배열번호].속성

   .length    : <FORM>태그내의 입력양식의 수 

   .action    : <FORM>태그의 action. 대개 함께 작동되는 CGI프로그램의 경로표시

      예) document.form.action = "./cgi-bin/file명.cgi"

   .name     : <FORM>태그의 name

   .method  : <FORM>태그의 method

       예) document.form.method = "get"

   .target    : <FORM>태그의 targer

   .encoding:<FORM>태그를 통해 서버로 전송되는 MIME 타입, 

        즉 CGI로 전달될 Form데이터를 인코딩하는 방식을 결정한다.

        예) document.form.encoding = "text/plain"          

3. 매소드

   reset() : 입력양식에 입력된 값을 초기화 시킨다.

   submit(): 입력양식에 입력된 값을 전송 시킨다.

      document.form명.reset()

   handleEvent() : routeEvent에 의해 전달받은 이벤트를 특정객체로 보내는 기능

4. 이벤트핸들러

   onReset  : reset 버튼을 눌렀을때 이벤트발생

   onSubmit : submit 버튼을 눌렀을때 이벤드 발생

  Document 하부객체 - Form의 요소

1. Form의 요소

   ⓐ Text, Password, Hidden, Textarea

      <속성>

       .name : <FORM>의 name

       .type   : <FORM>의 형태 (text, password...)

       .value : <FORM>의 초기값

       .defaultValue: <FORM>의 value에 입력한 초기값

       .enabled : text필드의 사용가능 여부

      <메소드>

       blur()  : 커서를 사라지게 한다.

       focus() : 커서를 위치시킨다.

       eval()   : 수식으로 된 문자열을 계산한다.

       select() : 입력상자내의 모든 택스트를 선택한다.

      <이벤트핸들러>

       onblur     : 입력상자에서 커서가 벗어났을때 이벤트발생

       onChange : 입력상자의 내용이 바뀔때

       onFocus   : 입력상자에 커서가 위치할 때 

       onSelect   :  입력상자나 내용을 선택하면 이벤트발생

   ⓑ Checkbox, Radio

       <속성>

        .name    : 요소의 name값

        .type      : 요소의 type 

        .value     : 요소의 value

        .length   : 하나의 그룹에 가지고 있는 버튼수 

        .checked : 요소가 체크되어있는 상태를 나타낸다.

        .defaultChecked : 요소가 체크되어 있는지의 여부

       <메소드>

         blur(),  click(), focus()

       <이벤트핸들러>

         onBlur, onClick, onFocus

 ⓒ Select  :선택목록을 만들어주어  항목 선택 기능

       <Select 객체속성>

         .name  : 선택목록의 이름

         .type    : multiple 정보 표시

         .length  : 선택 목록의 수

         .options: <option>을 배열로 표시

         .selectedIndex : 선택목록의 index 값표시 

       <Option 속성>

         .name  : 옵션의 이름

         .text     : 선택목록에 입력되어 있는 내용 표시

         .index   : 선택목록의 배열번호, 즉 항목의 위치

         .length  : 옵션의 수

         .value  :  각 목록의 value값

         .selected : 목록이 선택되어 있는지를 표시 

         .selectedIndex : 선택목록의 index 값표시 

         .defaultSelected: 기본값으로 선택된 항목

       <메소드>

         blur(), focus()

       <이벤트핸들러>

         onBlur, onFocus, onChange(다른 목록을 선택하는 경우)

ⓓ button, submit, reset : form 내용의 전송및 초기화에 사용

        3가지형태 : submit(서버에 전송), reset(초기화), button(자바스크립트 실행)

        <속성>

          .name  : 버튼의 이름

          .type    : 버튼설명(submit, reset, button)을 선택

          .value   : 버튼에 나타나는 문자열메시지

          .enabled : 버튼의 사용가능 여부

         <메소드>

          blur(), focus()

         <이벤트핸들러>

          onClick, onFocus

   ⓔ FileUpload :클라이언트 쪽에서 파일찾기 기능을 만들어 준다.

         <속성>

           .name : FileUpload객체의 이름

           .value : FileUpload객체에 등록된 파일 경로와 파일명

   ⓕ Hidden : Form에선 보이지 않는 정보, 즉 입력한 내용이외에 프로그램 작동을 위한 값들을 갖게한다.

          <속성>

           .name : Hidden 객체의 이름

           .value : Hidden 객체의 값

  Document 하부객체 - Layer

1. Layer : 문서의 층을 구성하게 한다.

   Layer를 만드는 태그로 <LAYER>와 <DIV>가 있으나, 익스플로러에서는 <DIV>만 사용가능.

   레이어 자체에 색상을 지정하거나 투명으로도 지정할 수 있다

   ⓐ<DIV> - CSS 를 이용한 두가지 표현방식

   <STYLE>                                                     

      #이름 { position:absolute;}

   <STYLE>                                      ====>    <DIV style= "position:absolute;">

   <DIV id="이름">                                          <DIV>

   </DIV>

   ⓑ<LAYER> - 넷스케이프 전용

      <LAYER 속성="속성값></LAYER>

 

   ⓒ자바스크립트상의 표현

     익스플로러 :     document.all["레이어이름"].style.속성

     넷스케이프 :     document.layers["레이어이름"].속성

2. 속성

   .id  : 레이어 이름 지정

   .width, heigth : 레이어의 넓이, 높이

   .left, top         :문서에서 레이어까지의 좌측거리, 상단거리

   .backgroundColor       : 레이어의 배경색  (넷스케이프에선 bgcolor)

   .backgroundImage:url  : 레이어의 배경이미지 (넷스케이프에선 background)

   .visiblity   : 레이어의 숨김기능 (hidden/visible)

   .z-index   : 레이어의 순위. 숫자가 낮을수록 하단에 위치한 레이어임. 레이어가 하나이면 생략

   .clip        : 레이어의 일부만 보이게 지정 

                   rect(a b c d)명령과 함께 사용  a:좌측거리 b:a+보여줄 레이어영역의 너비

                                                              c:상단거리 d:c+보여줄 레이어영역의 높이

3. 넷스케이프 속성 (추가할 된것)

     .src  : 레이어에 불러올 HTML문서 지정

     .above, below : 해당 레이어보다 상위, 하위에 위치시킬 레이어 id 설정

         document.layers["layer1"].above == null 이면 layer1이 최상위레이어가 된다.

         document.layers["layer1"].below == null 이면 layer1이 최하위레이어가 된다. 

     .pagex, pageY :문서에서 레이저의 좌측거리, 상단거리

4. 메소드

    load("포함할 HTML파일", 레이어의 너비) : 레이어에 특정 HTML파일을 포함

    moveAbove("기준레이어") : 특정레이어를 기준으로 레이어의 위치를 위로 이동

    movebelow("기준레이어") : 특정레이어를 기준으로 레이어의 위치를 아래로 이동

    moveBy(x좌표값, y좌표값) : 레이어를 현재위치에서 지정한 만큼 위치를 이동

    moveTo(x좌표값, y좌표값) : 레이어를 기준좌표 위치에서 지정한 만큼 위치를 이동

                                            기준좌표는 상위레이어를 기준한다.

    moveToAbsolute(x좌표값, y좌표값) : 레이어를 document좌표에서 지정한 만큼 위치를 이동

    resizeBy(너비,높이) : 현재 레이어의 크기를 지정한 크기만큼 변경한다.

    resizeTo(너비,높이) : 현재 레이어의 크기를 지정한 크기로 변경한다.

 5.이벤트핸들러

   onBlur, onFocus, onLoad, onMouseOut, onMouseOver

  History 객체

1. History 객체 : 웹사이트의 이동에 있어서 이전 혹은 이후 페이지 정보를 제공

 2. 속성

   .length   : history에 저장되어 있는 주소의 갯수

   .current  : 현재 문서의 URL 지정 

   .next      : 저장된 목록중 다음문서의 URL지정

   .previous: 저장된 목록중 이전문서의 URL지정

3. 메소드

    back()     : 저장된 목록중 이전 목록으로 이동 

    forward() : 저장된 목록중 다음 목록으로 이동

    go(값)     : 저장된 값만큼 이전 혹은 다음목록으로 이동.  값이 음수:뒤로, 양수:앞으로 이동