JS 6일차

정해랑·2024년 2월 2일

< form name="form1">
< input type="text" name="user_name" id="user_name">
< /form >
< form > 태그에 지정되는 name속성을 통하여 객체를 획득가능
let myform = document.form1;
form 객체는 자신이 포함한 모든 < input > , < select > , ... 등 태그에 대한 하위 객체를 갖는다.
이 하위 객체들은 name속성을 통하여 접근할 수 있다.
let user_name = myform.user_name;
let user_name = document.form1.user_name;
입력값의 설정 : 텍스트 입력 형식의 컴포넌트가 가지고 있는 value 속성에 문자열을 대입하면, 입력 컴포넌트의 내용을 javascript에서 강제로 설정할 수 있다.
-> document.form1.user_name.value = "jhr";

< select > 태그 안에 포함된 < option > 태그 중에서 몇 번째 항목이 선택되었는지를 파악하기 위해서는 < select > 태그 객체의 selectedindex 속성을 사용한다.
선택 위치는 0 부터 시작한다.
< form name="form2">
< select name="sell1">
< option>---선택하세요---< /option>
< option value = "item1">---항목1---< /option>
< option value = "item2">---항목2---< /option>
< /select>
< /form>
-> 사용자가 선택한 위치 : document.form2.sel1.selectedindex;
-> < selected > 태그 객체의 selsectedindex 속성에 임의의 숫자값을 대입하면 대입한 위치에 해당 하는 < option > 태그가 강제로 선택된다
-> document.form2.sel1.selectedindex = 1;( 인덱스는 0부터 시작한다 )
-> 선택 항목의 값을 조회. : < select > 태그의 객체는 하위 < option > 태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedindex 속성값으로 사용하면, 선택한 < option > 태그의 객체를 획득할 수 있다.
-> document.form2.sel1[document.form2.sel1.selectedindex].value

라디오버튼도 하나의 그룹으로 묶기 위해서 name 속석의 값을 동일하게 지정하기 때문에 javascript에서 name속성을 통하여 접근 할 경우 배열로 처리된다는 공통점을 가지고 있다.
< form name="form3">
< input type="radio" name="gender" value="M"> 남자
< input type="radio" name="gender" value="W"> 여자
< /form>
document.form3.gender[1].value : 1번째 요소의 value값을 획득
document.form3.gender[1].checked : 체크여부
document.form3.gender[1].checked = true; : 강제 체크