자바스크립트(4)
<script language = "javascript">
function output(form) {
for(var i = 0; i < form.fruit.length; i++) {
if(form.fruit[i].checked) {
var output = "당신이 좋아하는 과일은 " + form.fruit[i].value + "입니다.";
alert(output);
break;
}
}
if(i == form.fruit.length) {
alert("좋아하는 과일을 선택하세요!");
return;
}
}
</script>
<form name = "select_form">
좋아하는 과일을 선택하세요.<br><br>
<input type = "radio" name = "fruit" value = "오렌지">오렌지<br>
<input type = "radio" name = "fruit" value = "포도">포도<br>
<input type = "radio" name = "fruit" value = "사과">사과<br>
<input type = "radio" name = "fruit" value = "토마토">토마토<br><br>
<input type = "button" value = "선택" onclick = "output(this.form)">
</form>
위 예제는 네 가지 과일 중 한 가지를 선택한 후 선택 버튼을 눌렀을 때 그 선택한 과일명을 경고 박스 형태로 출력해주는 예제입니다.
그리고, 만일 사용자가 아무 것도 선택하지 않고 버튼을 눌렀을 경우에는 "좋아하는 과일을 선택하세요!" 라는 메시지를 출력하는 기능도 가지고 있습니다.
그런데, 앞 강좌에서 텍스트 박스의 문자열 입력 여부를 체크하는 코드에 비해, 위 예제의 라디오 버튼 객체의 경우 선택했는지의 여부를 체크하는 코드가 좀 복잡한 것을 볼 수 있죠.
먼저, 위 자바스크립트 코드의 for() 구문 안에 보이는 form.fruit.length 가 의미하는 것은 fruit 이라는 이름을 가진 라디오 버튼 객체의 갯수를 의미합니다.
따라서, form.fruit.length 값은 4 가 되겠죠.
다음으로, if() 조건문 안에 form.fruit[i].checked 가 보이죠.
여기에서 단순히 fruit 이라고 하지 않고 fruit[i] 과 같은 배열 형태의 변수가 쓰였는데, 왜냐하면 라디오 버튼 객체의 특징이 객체명(name)은 모두 동일하고 단지 각각의 요소의 값만 다르기 때문입니다.
다시 말해서, 위 예제의 경우 4 개의 라디오 버튼 객체가 쓰였는데, 그 라디오 버튼 객체들 모두가 "fruit" 이라는 이름(name)을 가지고 있으며, 단지 값(value)만 서로 다른 값들("오렌지", "포도", "사과", "토마토")을 가지고 있기 때문입니다.
그래서, 그 동일한 이름을 가진 객체들 각각을 구분해주기 위해서는 배열 변수의 형태로 표현해주어야 합니다.(전에 배열 변수에 대해 설명드렸던 내용 기억나시죠.)
따라서, 위 예제의 경우 fruit[0] 은 "오렌지" 객체를 가리키고, fruit[1] 은 "포도" ... 이런 식으로 대응이 되겠죠.
그리고, form.fruit[i].checked 코드에서 checked 속성(property)은 사용자가 그 라디오 버튼을 선택했는지의 여부를 알려줍니다.
그래서, 만일 사용자가 "사과" 표시가 되어 있는 라디오 버튼을 선택하게 되면 form.fruit[2].checked 값은 true(참) 값을 가지게 되며, 나머지 라디오 버튼 객체들의 checked 속성 값은 false(거짓) 값을 가지게 됩니다.
그럼, 위 자바스크립트 예제의 for() 구문과 그 안에 사용된 if() 구문에 대한 이해가 되시죠.
다음으로, if(i == form.fruit.length) 라는 조건식이 보이죠.
위 조건식의 의미는..
만일, 위 예제에 사용된 4 개의 라디오 버튼 객체 중 4 번째인 "토마토" 를 선택하였을 경우, for 구문에 의해 i 값이 3 을 가지게 될 때 그 선택한 문자열이 화면에 출력되게 되며, 바로 break 문에 의해 for 구문을 빠져나가게 되겠죠.
즉, 라디오 버튼 객체를 선택하였을 경우 i 변수의 최종값은 from.fruit.length 인 4 값보다 작겠죠.
그런데, 사용자가 아무 것도 선택하지 않았을 경우, 위 예제의 for() 반복문에 사용된 i 변수값이 1 씩 증가하다가, 결국 form.fruit.length 값에 해당되는 4 라는 값을 가지게 됩니다.
따라서, if(i == form.fruit.length) 조건식이 만족한다는 것은 사용자가 아무 것도 선택하지 않았다는 것을 의미하게 되며, 그래서 경고 메시지를 출력하게 됩니다.
어느 정도 이해가 되시죠.
그럼, 오늘 배운 내용을 포함한 지금까지 배운 내용들을 정리하는 의미에서, 두 값을 입력받은 후 각각의 연산자를 선택하여 계산을 수행하는 예제를 보겠습니다.
- input.html -
<script language = "javascript">
function output(form) {
if(!form.value_1.value) {
alert("첫 번째 값을 입력하세요!");
form.value_1.focus();
return;
}
if(!form.value_2.value) {
alert("두 번째 값을 입력하세요!");
form.value_2.focus();
return;
}
for(var i = 0; i < form.operator.length; i++) {
if(form.operator[i].checked) {
break;
}
}
if(i == form.operator.length) {
alert("수행할 연산자를 선택하세요!");
return;
}
form.submit();
}
</script>
<form name = "select_form" method = "post" action = "./output.html">
두 값을 입력하세요!<br><br>
<input type = "text" name = "value_1" size = "4">
<input type = "text" name = "value_2" size = "4"><br><br>
수행할 연산자를 선택하세요!<br><br>
<input type = "radio" name = "operator" value = "add">덧셈<br>
<input type = "radio" name = "operator" value = "minus">뺄셈<br>
<input type = "radio" name = "operator" value = "multiply">곱셈<br>
<input type = "radio" name = "operator" value = "divide">나눗셈<br><br>
<input type = "button" value = "계산" onclick = "output(this.form)">
</form>
- output.html -
<?
switch ($operator) {
case ("add") :
$result = $value_1 + $value_2;
echo("$value_1 + $value_2 = $result");
break;
case ("minus") :
$result = $value_1 - $value_2;
echo("$value_1 - $value_2 = $result");
break;
case ("multiply") :
$result = $value_1 * $value_2;
echo("$value_1 * $value_2 = $result");
break;
case ("divide") :
$result = $value_1 / $value_2;
echo("$value_1 / $value_2 = $result");
}
?>