자바스크립트 내장객체 radio,fileUpload,select,option

radio

폼의 라디오 버튼에 대한 정보를 가지고 있으며 <input type="radio"> 태그를 만날 때마다 만들어진다.

• HTML 구문

  <input
          type="radio"
          name="라디오 버튼 그룹 이름"
          value="값"
          checked
          onClick="처리할 명령이나 함수"
  >

• 기본 형식

  (window.)document.폼 이름.그룹 이름[인덱스3]
  (window.)document.폼 이름.elements[인덱스2][인덱스3]
  (window.)document.forms[인덱스1].그룹 이름[인덱스3]
  (window.)document.forms[인덱스].elements[인덱스2][인덱스3]

• 프로퍼티

• checked
  체크박스의 체크 상태를 지정한다.
• defaultChecked
  초기의 체크 상태를 지정한다.
• name
  체크 박스의 이름으로, <input> 태그의 name 속성과 같다.
• value
  체크 박스에 할당된 값으로, <input> 태그의 value 속성과 같다.

• 메서드

  라디오 버튼을 선택하거나 선택을 해제할 때 버튼을 클릭하는 동작뿐이므로 radio 객체에서 사용할 수 있는 메서드는 click()뿐이다.

• 이벤트 핸들러

  checkbox 객체와 마찬가지로 radio 객체의 이벤트 핸들러 역시 onClick()뿐이다. 사용자가 라디오 버튼을 체크하면 click 이벤트가 발생하고 지정한 함수나 명령이 실행된다.

fileUpload

fileUpload 객체의 파일 요소를 사용하면 사용자가 시스템에 있는 파일을 서버로 올릴 수 있다. 여기에서 파일 업로드명은 파일의 이름이 아니라 사용자가 파일을 업로드할 수 있게 하는 파일 업로드 요소 자체의 이름이다.
폼의 <찾아보기> 버튼에 대한 정보를 가지고 있으며 <input type="file"> 태그를 만날 때마다 만들어진다.

• HTML 구문

  <input
          type="file"
          name="파일 업로드이름"
  >

• 기본 형식

  (window.)document.폼 이름.fileUploadName
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스].파일 업로드 이름
  (window.)document.forms[인덱스].elements[인덱스]

• 프로퍼티

• name
  HTML 구문에서의 name 속성을 반영하는데 언제든지 그 값을 새로 고쳐서 사용할 수 있다.
• value
  읽기 전용 프로퍼티로 파일 업로드 요소의 현재값을 반영한다.
• 메서드
  이 객체는 메서드를 지원하지 않는다.
• 이벤트 핸들러
  다른 폼 요소와 마찬가지로 onBlur와 onChange, onFocus 이벤트 핸들러를 제공한다.

select

submit 버튼에 대한 정보를 가지고 있으며 <input type="submit"> 태그를 만날 때 만들어진다.

• HTML 구문

  <select
          name="셀렉트명"
          size="화면에 표시할 메뉴 개수"
          multiple
          onBlur="처리할 명령이나 함수"
          onChange="처리할 명령이나 함수"
          onFocus="처리할 명령이나 함수">
          <option value="옵션값" selected>표시할 텍스트</option>
                  ...
          <option value="옵션값">표시할 텍스트</option>
  </select>

• 기본 형식

  options 프로퍼티를 추가하면 select 객체에 있는 특정 옵션에 접근할 수 있다. 이 프로퍼티는 실제로는 option으로 된 배열이고 그 인덱스는 0부터 시작한다. 따라서 select 객체의 첫 번째 옵션에 접근하려면 기본 형식의 마지막 줄같이 사용하면 된다. 
  (window.)document.폼 이름.셀렉트 이름
  (window.)document.폼 이름.elements[인덱스]
  (window.)document.forms[인덱스1].셀렉트 이름
  (window.)document.forms[인덱스].elements[인덱스]
  (window.)document.폼 이름.셀렉트 이름.options[0]

• 프로퍼티

• length
  length 프로퍼티를 사용하면 select 객체의 option 개수를 알 수 있다. 이 값은 options 객체의 length 프로퍼티를 통해서도 알 수 있다.
• name
  select 영역의 이름을 지정한다. <select> 태그의 name 속성을 반영한다.
• option
  보통 options 배열에는 select 객체(<select>)의 각 옵션(<option>) 항목들이 저장된다. 예를 들어, 문서에서 첫 번째 폼의 첫 번째 요소가 select 객체이고 이 객체에 3개의 옵션이 있다고 가정한다면 옵션 항목에 접근할 때 다음과 같이 사용한다.
      document.forms[0].elements[0].options[0]
      document.forms[0].elements[0].options[1]
      document.forms[0].elements[0].options[2]
• selectedIndex
  selectedIndex 프로퍼티는 select 객체에서 selected 속성이 있는 옵션의 인덱스를 가지고 있다. 즉 selectedIndex 프로퍼티를 사용하면 선택한 옵션이 몇 번째인지 알 수 있다. select 객체의 옵션은 정의한 순서대로 인덱스가 정해지고 그 순서에 따라 options 배열에 저장된다. 또한 자바스크립트에서 selectedIndex 값을 조절해서 select 객체의 상태를 수정할 수 있다.

• 메서드

  select 객체가 할 수 있는 동작, 즉 메서드는 blur()와 focus()뿐이다. blur()는 콤보 메뉴에서 포커스를 해제하는 것이고, focus()는 콤보 메뉴에서 포커스를 지정하는 것이다.

• 이벤트 핸들러

• onBlur
  객체에서 포커스를 제거했을 때 실행할 함수를 연결한다.
• onFocus
  콤보 메뉴로 포커스를 지정했을 때 실행할 함수를 연결한다.
• onChange
  사용자가 옵션을 선택하면 실행할 함수를 연결한다.

• options 배열 프로퍼티

• defaultSelected
  defaultSelected 프로퍼티는 논리값을 가지는데 특정 항목이 처음부터 선택되어 있었다면, 즉 그 항목의 <option> 태그에 selected 속성이 있었다면 defaultSelected가 true가 되고 그렇지 않을 경우에는 false가 된다.
  defaultSelected의 값은 처음에는 <option> 태그 안에 selected 속성이 있는지에 따라 결정되지만 자바스크립트를 사용해서 그 값을 수정할 수도 있다.
• index
  select 객체에서 한 옵션의 index 프로퍼티는 선택 목록 중에서 객체의 위치를 알려주는 숫자이며, 이 숫자는 0부터 시작한다.
  다음 첫 문장처럼 '인덱스'값을 보고 이미 몇 번째 옵션 항목인지를 알게 되기 때문에 굳이 두 번째 문장처럼 index를 붙여 옵션의 인덱스값을 따로 알아낼 필요가 없다. 따라서 보통 index 프로퍼티는 사용하지 않는다.
      document.셀렉트 이름.options[인덱스]
      document.셀렉트 이름.options[인덱스].index
• length
  select 객체의 length 프로퍼티와 같다.
• selected
  selected 프로퍼티는 select 객체에 있는 옵션의 현재 상태를 나타내는 논리값을 가진다. select 객체에 있는 옵션(셀렉트 이름.options[인덱스])이 선택되면 selected 프로퍼티가 true가 되고 그렇지 않을 경우에는 false가 된다. 그리고 이 값은 언제든지 수정할 수 있다.
• text
  <option> 태그의 메뉴명을 표시한다.
• value
  value 프로퍼티는 <option> 정의에 있는 value 속성을 반영한다. 이 프로퍼티에 다른 값을 지정하면 초기 value 값 대신 새로 지정한 값을 사용할 수 있다.

• 생성자를 이용해 Option 객체 만들기

  <select> 태그와 <option> 태그를 사용해서 콤보 메뉴의 초기 모습을 만들 수 있지만 여기에 option 생성자(constructor)를 이용하면 새로운 옵션 항목을 추가할 수 있다.
  
  var 옵션이름 = new Option(optionText, optionValue, defaultSelected, selected)
  
  
• optionText
  콤보 메뉴에 표시할 메뉴 이름이다.
• optionValue
  옵션의 value 프로퍼티이다.
• defaultSelected
  옵션의 defaultSelected 프로퍼티이다.
• selected
  옵션의 selected 프로퍼티이다.

option

submit 버튼에 대한 정보를 가지고 있으며 <input type="submit"> 태그를 만날 때 만들어진다.