간단한 계산기

  안녕하세요?
  오늘도 소스코드분석입니다. 지난번에 간단하게 계산하는 코드를 작성한적이 있는데요. 그거를 폼과 버튼들로 예쁘게 만들었네요. 간단한 계산기 코드입니다. 그럼 실행예를 볼까요?

이런식으로 맨앞에 첫수를 맨뒤에 두번째 수를 입력하고 +,-,X,,^ 버튼을 누르면 그 결과값이 오른쪽에 나타나게 하는 겁니다. 그럼 소스코드를 볼까요?

<script language="JavaScript">
<!--
function a_plus_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a+b
        form.ans.value = c
}
function a_minus_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a-b
        form.ans.value=c
}
function a_times_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a*b
        form.ans.value=c
}
function a_div_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a/b
        form.ans.value = c
}
function a_pow_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=Math.pow(a, b)
        form.ans.value = c
}
// -->
</script>

<form name="formx"><input type=text size=4 value=12 name="a">
        <input type="button" value="  +  " onClick="a_plus_b(this.form)">
        <input type="button" value="  -  " onClick="a_minus_b(this.form)">
        <input type="button" value="  x  " onClick="a_times_b(this.form)">
        <input type="button" value="  /  " onClick="a_div_b(this.form)">
        <input type="button" value="  ^  " onClick="a_pow_b(this.form)">
        <input type="number" size=4 value=3 name="b"> = <input type "number" value=0 name="ans" size=9>
</form>

자바스크립트 부분부터 분석할까요? 하나만 분석하면 나머지는 계산부호만 다르니깐 이해하실겁니다.

function a_plus_b(form) {
        a=eval(form.a.value)
        b=eval(form.b.value)
        c=a+b
        form.ans.value = c
}

덧셈을 하는 부분인데요. 함수 이름은 a_plus_b이고 인수로 (form)즉 폼을 인수로 받습니다. 밑에서 onClick="a_plus_b(this,form)" 이렇게 폼을 전송하죠? 그 다음에 a=eval(form.a.value) 입니다. a에 폼에있는 name="a"라고 해놓은 type=text글상자 보이시죠? 거기에 있는 a의 값을 a라는 변수에 넣는 겁니다. 여기서 주의하실게 변수 a와 form.a의 a는 다른겁니다. 그다음에 다시 b에도 b의 값을 대입하구요. c=a+b라고 해서 c에 a와 b를 더한 값을 저장합니다. 그 다음에 form.ans.value=c에서 폼에있는 name="ans" 맨뒤에 있는 number숫자타입의 텍스트박스보이시죠. 그거 이름이 ans입니다. 거기에 value즉 값을 a+b를 한 c로 저장하라는 내용입니다.

  나머지 뺄셈, 곱셈, 나눗셈등도 다 똑같습니다. 아래 폼은 설명 안해드려도 다 아시겠지요? 그럼 오늘은 여기까지 다음시간에 다시 만나요~