자바스크립트(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");
}
?>

​