Document 하부객체 - 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의 요소
ⓐ 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(값) : 저장된 값만큼 이전 혹은 다음목록으로 이동. 값이 음수:뒤로, 양수:앞으로 이동
'IT > JavaScript' 카테고리의 다른 글
Location, Frame, Navigator 객체 (0) | 2013.07.03 |
---|---|
브라우저, 윈도우 객체 (0) | 2013.06.29 |
내장개체(String, Date, Math, Array, Function, Screen, Number, Event (0) | 2013.06.29 |
함수, (0) | 2013.06.28 |
Java Script 기본구조 (0) | 2013.06.28 |