계산기 프로그램

Chapter 6. 계산기 프로그램

1. 개요

HTML, CSS, Javascript를 이용하여 웹브라우저에서 이용할 수 있는 계산기 프로그램을 만든다.

 

2. 디자인

가장 일반적으로 사용하는 계산기의 디자인을 참고하여 제작하였다.

구조는 다음과 같다.

계산기 전체를 감싸는 foundation, 모든 객체는 foundation에 소속되어 있다.

상단 부분을 차지하는 top,

계산기의 로고를 담당하는 logo와 결과를 출력하는 monitor가 소속되어 있다.

하단 부분을 차지하는 bottom,

단순 입력을 실행하는 버튼 whiteButton과 연산을 실행하는 greyButton이 소속되어 있다.

 

3. 로직

3.1. 변수
opertator: 입력받은 연산자를 저장하는 변수
checkOperator: 입력받은 연산자의 존재여부를 확인하는 변수
operand: 입력받은 피연산자의 값을 저장하는 변수

3.2. 함수
show(num): 숫자의 입력을 받아 계산기에 출력하는 함수이다. 동작 과정은 다음과 같다.
(1) checkOperator가 true일 경우 
- monitor의 innerHtml을 지우고 checkOperator를 true로 한다.
- monitor에 innerHTML에 num값을 추가한다.
(2) checkOperator가 false일 경우
- monitor의 innerHTML의 길이가 15 이상일 경우 더 이상 숫자를 입력할 수 없다는 알림창을 띄우고 함수를 종료한다.
- monitor의 innerHTML의 길이가 15 미만일 경우 num을 추가하고 함수를 종료한다.

cal(op): greyButton의 입력을 받아 피연산자의 연산을 수행하는 함수이다. 동작 과정은 다음과 같다.
(1) 입력받은 greyButton의 innerHtml을 매개변수 op로 받아 switch문의 조건으로 사용한다.
(2) op가 AC인 경우, monitor의 innerHtml과 operand를 모두 지워 계산기를 초기화한다.
(3) op가 +/-인 경우, monitor의 innerHtml의 값의 부호를 반대로 변경한다.
(4) op가 사칙연산자인 경우, operator의 값을 그 연산자로 저장하고, checkOperator를 true로 한 후, operand에 monitor의 innerHtml을 저장한다.
(5) op가 =인 경우, operate() 함수를 호출한다.

operate(): 연산 후 결과를 출력하는 함수이다. 동작 과정은 다음과 같다.
(1) operator에 저장된 연산자를 switch문의 조건으로 사용한다.
(2) monitor의 innerHtml을 operand와 monitor의 innerHtml값을 parseInt시킨 값으로 각각의 연산자를 이용하여 연산한다.
(3) 연산 결과값의 길이가 15 이상일 경우 15까지 잘라 출력한다.

 

4. 파일

아래 파일을 열어 필자가 제작한 계산기를 사용할 수 있습니다.

calculator.html

0.01MB