<img> 요소 제어

<img> 요소 제어

---

var myimg = document.getElementById("img요소의 id");

myimg.src = "이미지파일경로";

myimg.width = "200px";

myimg.height = "100px"

<form> 요소제어

---

<form>요소의 객체 획득하기

id속성값으로 접근하는 경우

// form 의 id속성값이 `form_id` 인 경우

var myform = document.getElementById("form_id");

name속성값으로 접근하는 경우

// form의 name속성값이 `form_name` 인 경우

var myform = document.form_name;

획득한 <form> 안의 <input> 요소 접근

id속성값으로 접근하는 경우

var hello = document.getElementById("input_id");

name속성값으로 접근하는 경우

var myform = document.form_name;

var hello = myform.input_name;

name속성값을 사용하는 경우 아래와 같이 축약도 가능함.

var hello = document.form_name.input_name;

획득한 <input> 요소의 입력값 처리

var myform = document.form_name;

var hello = myform.input_name;

hello.value = "hello world";     // 값의 설정

var msg = hello.value;                // 값의 조회

name 속성값을 사용하는 경우 아래와 같이 축약도 가능함.

document.form_name.input_name.value = "hello world";

var msg = document.form_name.input_name.value;

획득한 <input> 요소에 대한 값의 입력여부 조회

if (!document.form_name.input_name.value) {

// 값이 입력되지 않은 경우의 처리}

alert("내용을 입력하세요.");

document.form_name.input_name.focus();

return;

}

checkbos, radio의 제어

name속성이 동일한 요소들끼리 하나의 배열로 그룹화 됨.

var foo = document.form1.myradio[0].value;

checked 프로퍼티를 사용하여 선택 여부를 조회하거나 선택 상태를 강제 설정 할 수 있음.

// 선택 여부 검사    boolean - >true, false

var foo = document.form1.myradio[0].checked;

if (foo) {

... 선택된 경우의 처리 ...

}

// 강제 선택

document.form1.myradio[0].checked = true;

배열이라는 특성 때문에 반복문을 통한 제어가 가능.

var checkbox = document.form_name.checkbox_name;

var count = 0;    // 선택된 항목의 수

for (var i=0; i<checkbox.length; i++) {

if (checkbox[i].checked) {

count++;

}

}

(하나라도 선택되었는지 여부만 판단할 경우는 count++; 앞의 위치에서 break; 적용)

드롭다운의 제어

• <select>태그로 표현되는 드롭다운 요소는 그 자체가 배열이며 <option>태그들이 배열의 요소가 된다.

• 드롭다운 객체에 대한 selectedindex는 선택된 요소의 배열인덱스를 의미

var dropdown = document.form_name.select_name;

// 특정 위치 강제 선택

dropdown.selectedIndex = 2;

// 현태 선택된 요소의 위치

var choice_index = dropdown.selectedIndex;

// 현태 선택된 요소의 value 값

var choice_value = dropdown[choice_index].value;

주로 첫 번재 <option>요소는 선택을 요구하기 위한 안내문이 표시되는 경우가 많기 때문에 selectIndex값이 0인 경우는 선택한 것으로 간주하지 않는다.

if (dropdown.selectedIndex ==0) {

... 선택되지 않은 경우의 처리 ...

}

<form>의 reset.submit 처리

reset

document.form_name.reset();

submit

• <form>요소의 action속성에 지정된 페이지로 사용자의 입력내용을 전송하는 기능.

• <input type="submit"/> 요소를 클릭하거나 아래의 자바스크립트 구문의 호출을 통해서 구현된다.

document.form_name.submit();

submit 이벤트

<form> 요소에 onsubmit 이벤트 적용후 return false; 처리

<form name="form_name" method="post/get" action="웹프로그래밍 URL"

onsubmit="JS함수(); return false;">

</form>

(onsubmit="JS함수(); -> 입력값의 유효성을 검사하는 기능,

return false -> 데이터 전송 차단 --> JS함수()에서 form의 submit()함수를 사용하여 입력값 검사후 강제 전송해야 함.)

submit 이벤트를 통해서 JS함수를 호출할 경우

JS함수에서는 맨 마지막에 강제로 submit 처리를 해야만 한다.

function JS함수(){

... 입력값 검사 ...

document.form_name.submit();

}

JS함수 안에 에러가 있을 경우 그 이후 부분은 실행되지 않기 때문에 페이지가 새로고침되는 현상이 발생한다.

이 경우 한 블록씩 코드를 지워가면서 에러가 발생하는 위치를 찾아야 한다.

Javascript 7일차 요점정리