name 속성의 값이 중복되는 객체 => 배열로처리
<input type="checkbox, radio"> , <select> ,
checkbox: checked 속성으로 Form Control의 상태변화 설정
selected속성으로 Form Control의 상태변화 설정.
checked속성으로 상태 설정을 하는 Form Control.
값 얻는 순서)
1.HTML Form Control얻기
var 배열명 = document.폼이름.control명;
2.배열을 반복( Form Control이 반복된다)
for( var i = 0 ; i< 배열명.length; i++) {
3.체크 여부에 대한 상태파악을 해야함. -> checked 속성으로 함
if(배열명[i].checked // T,F를 반환) { //확인된 상태면 true, 그렇지 않으면 false
4.값 얻기
배열명[i].value;
} //end if
}//end for
selected 속성으로 상태 설정하는 Form Control
select은 하나이고 option이 여러개 묶여 있으므로 document.폼이름.control명.value로 값을 얻는다.
option이 여러개 이므로 배열로 처리 가능
<select name="이름">
<option value="백엔드로 전송할 값">보여질 값</option>
//selected는 특정옵션이 선택된 상태를 의미
</selected>
문법
1.select얻기(select은 하나 일지라도 옵션이 여러개 이기 때문에 배열로 얻어진다)
var sel = document.폼이름.컨트롤명;
2.반복으로 값 얻기 (select 안에 option의 수 만큼 반복)
for( vari =0; i< 배열명.length; i++) {
3.옵션의 선택 상태 얻기 (selected => 됐다면 true 아니면 false 반환)
if(배열명[i].selected){
4.배열의 값 얻기
배열명[i].value
}
}
JavaScript에서 발생한 값을 HTML Form Control에 설정하기
값 설정 (value 속성 변경)
<input type="text, password, date, hidden, tel,,,,"> <textarea>
문법)
id속성 접근
document.getElementById("아이디").value= 값;
name속성 접근
document.폼이름.컨트롤명.value= 값;
상태를 변환시키는 객체(checked, selected를 바꿈) - 배열로 처리
checked 변환
<input type= " checkbox, radio">
문법)
document.폼이름.컨트롤명[인덱스].checked= true or false //여기서 인덱스는 checkbox,radio의 순서.
selected변환
<select>
문법)
document.폼이름.컨트롤명[인덱스].selected= true or flase //인덱스는 option의 순서.
JavaScript Event Handling
-inline 방식(onXxx속성)으로 이벤트를 발생시키고 처리하는 방식
<input type="button" onclick="함수명()" /> //우선순위가 높지만 HTML태그와 JS코드가 합쳐짐.
-이벤트에 등록하여 처리할 수 있는 방식 //HTML태그와 JS코드가 분리된다.
-1.익명함수를 사용하는 방식
-태그를 찾아서 이벤트 속성에 익명 함수를 정의하는 방식.
document.getElementById("아이디") .onXxx=function(){
//태그 ID로 찾고, onxxx(이벤트속성)불러오고 무기명함수 정의하기.
}
-2.기명함수를(named function) 사용하는 방식- 이벤트에 등록하는 방식.
-태그를 찾고,이벤트 리스너에 등록
문법)
document.getElementById("아이디").addEventListener("이벤트종류" , 함수명 or 무기명함수 정의)
//이때 이벤트 에는 on을 제외한 이벤트명 만 기술함. ex)click,change등
JavaScript 객체
location:
페이지 이동을 수행하는 객체(HTML에서는 <a> 태그)
사용법)
href속성을 사용함 (HTML에서의 <a>와 같은 일을 수행함, web browser에 history가 남는다.)
//history로 인해 뒤로가기, 앞으로 가기가 가능하다.
window.location,href="http://이동할페이지 URL";
replace함수를 사용함
window.location.replace("이동할 페이지의 URL");
<a>와 같은 일을 수행함
이전 주소를 치환하기 때문에 웹 브라우ㅈ