Java Script를 이용한 계산기 만들기(table,eval)

Java Script를 이용해 계산기를 만들어보자!

 

STEP 1. 계산기 뼈대 만들기

사용자가 입력한 값
계산 결과
초기화			/
7	8	9	*
4	5	6	-
1	2	3	+
0		.	=

위와 같은 형태로 계산기를 만든다고 생각해보자.

<table> 형태로 만들것이기 때문에 행x열을 그려보면 7행(<tr>) * 4열(<td>)의 뼈대를 가집니다.

그리고 위의 Form에서 '사용자가 입력한 값', '계산결과', '초기화', 0은 열이 합쳐져 있는 것을 볼 수 있습니다.

<table>에서 열을 합칠때 colspan(가로방향으로 합치기)을 이용하고, 반대로 행을 합칠때는 rowspan(세로방향 합치기)을 이용하면 됩니다.

위 예제에서는 가로방향으로 합쳐졌기 때문에 colspan을 활용하도록합니다.

 

계산기디자인.txt

0.00MB

계산기 디자인에서는 HTML과 CSS를 이용해 계산기의 뼈대만 디자인한 상태입니다.

때문에 클릭을해도 아무런 동작을 하지 않습니다.

 

---

STEP 2. <td>태그에 각각 Onclick 속성을 추가하여 JavaScript 함수를 호출한다.

* 이 작업은 버튼을 클릭했을 때 각각의 해당하는 값을 가져오게 하는 목적을 가짐.

Onclick으로입력값받기.txt

0.00MB

add()라는 함수를 생성하여 버튼을 클릭했을때 각각의 값을 입력하도록 onclick을 설정하였다.

 

간략하게 살펴보자면, 아래와 같은 개념이다.

 

<td onclick="add(1)">1</td> // 1 버튼 클릭하면 add(1)함수를 실행.

function add(char) { //char은 매개변수명, 위 예시에서는 1을 가지고온다.
var display = document.getElementById('display');  //display라는 변수에 ID가 display인 요소를 넣는다.
display.value = display.value + char; //display에 매개변수 값을 더하여 display의 값에 넣는다.
}

하지만 STEP2의 목적은 입력한 값을 받아 display에 보여주는 개념이므로 실제 계산이 실행되지는 않는다.

---

STEP 3. 실제 계산 기능 추가(eval 함수 활용)

* = 버튼 클릭 시 display에 입력된 값들을 계산하여 result에 보여지게한다.

 

Calculate함수추가.txt

0.00MB

STEP 3에서 추가한 Calculate 함수 관련 내용을 보자면 아래와 같다.

 

<td onclick="calculate()">=</td>  // =버튼 클릭 시 calculate() 함수 실행

function calculate() {
var display = document.getElementById('display');  //ID Display 요소의 값을 display 변수에 담는다.
var result = eval(display.value);                  //display 변수의 값을 계산하여 result 변수에 저장한다.

                                                             (eval : javascript 내장함수, 계산식 수행)
document.getElementById('result').value = result;  //위에 계산된 result의 값을 ID가 Result인 요소에 넣는다.
}

 

여기까지하면 Result에 계산한 값을 출력하는 기본적인 기능까지 구현되었습니다.

하지만 계산기는 한번만 쓰이지 않죠.

계산기를 한번 써서 계산식을 출력하고, 또 다른 계산이 하고싶을 수 있습니다.

그래서 이번에는 여러번 계산작업을 할 수 있도록 이전에 계산한 값을 초기화하는 기능을 추가해보겠습니다.

 

---

STEP 4. 입력한 계산식 초기화하기

Reset함수추가.txt

0.00MB

STEP 4에서 추가한 Reset함수에 대한 내용은 아래와 같다.

<td colspan="3" onclick="reset()">AC</td> //AC 버튼 클릭 시 Reset함수 실행

function reset() {
document.getElementById('display').value = "";
document.getElementById('result').value = "";
}

 

---

STEP 1~4를 수행하면 계산기를 만들 수 있다.

그런데 여기서 eval()함수가 가지고있는 문제가 있다.

위 예시 사진과같이 문자열 ( +, -, /, * )이 잘못 입력되면 결과값을 제대로 출력하지 못한다.

해결방법은 아래 블로그의 심화 과정을 참고해서 추가로 공부해보자.

(위의 과정도 해당 블로그 내용을 기반으로 작성함).

 

https://blog.cordelia273.space/m/32

[별별 웹 특강] HTML + javascript 계산기 만들기 프로젝트!