본문 바로가기
웹개발 개인연습장

개인연습(12) - 간소한 계산기 만들기

by 창고관리장 2023. 6. 7.

 

간소한 계산기 만들며 자바스크립트 복습하기

 

오늘은 현재 기초를 탄탄히 하기 위해 다시 시작한 자바스크립트로 간소한 계산기를 만들어보았다.

새로 만들어본 계산기 웹페이지

위 이미지가 현재 만들어본 웹페이지이며, 수업자료와 동일한 레이아웃과 내용으로 만들었는데, 수업을 들으면서 하지 않고 직접 만들어보았다. 그래서 코드가 수업과는 많이 다르다.

 

우선 사용자가 입력칸에 숫자를 입력하여 사칙연산버튼 중 하나를 클릭하면 아래 박스의 0이라고 적힌 곳에 덧셈이면 '0 + 0' 식으로 나타나게 되고, 결과값을 아래의 Result 숫자에 표시하게 된다.

HTML 파일과 연결한 스크립트 파일의 코드

우선 HTML 파일에 기능을 넣고 싶은 부분의 ID를 연결하여 각각의 상수에 저장해주었다. 또, 계산식이 나오는 resultProcess 박스는 초기값을 0으로 표출되도록 설정했다.

로직코드가 담긴 파일 (좌 -> 우)

계산기 로직이 있는 파일에서는 사용자가 입력하는 값인 userNum의 초기값을 0으로 설정했고, 각 계산이 끝날 때마다 값이 변경될 결과값인 resultNum도 초기값을 0으로 설정했으며, 결과값들을 차례대로 배열에 저장해보고 싶어서 resultArray의 초기값을 빈 배열로 설정해주었다.

 

userInputFunc 함수는 event 매개변수로 값을 받는데, 사용자가 입력하는 값인 userNum을 event.target.value로 변경해서 타이핑하는 값을 바로 받아 저장하도록 설정한 함수이다. 이 값은 다른 계산함수에서 사용했다.

 

resultArray 함수는 result 매개변수로 값을 받는데, result는 결과값인 resultNum으로 지정해주었다. 그리고 이 값을 빈 배열인 resultNumArray의 맨 끝에 하나씩 추가하도록 하고 콘솔창에도 표출되도록 했다. 이 함수를 만든 이유는 각 계산식에서 이 로직을 사용하면 코드가 반복되기 때문에 이를 막기 위해 만들었다.

 

그 다음으로 addFunc, subFunc, multiplyFunc, divideFunc 함수를 만들었는데 각각 덧셈, 뺄셈, 곱셈, 나눗셈을 하는 함수이며 기본 로직은 동일한 함수들이다. 각 함수는 사용자 입력값을 num1으로 받고, 인증로직을 통과하도록 했다. 이 로직은 조건문으로, 만약 num1이 0이거나 빈 값이면 더 이상 함수를 진행하지 않도록 했다. 이를 통과하면 결과값인 resultNum과 입력값인 num1을 연산하여 각각의 함수 목적에 맞는 상수에 저장하도록 했고, 연산과정을 resultProcess 박스에 텍스트로 표출하기 위해 각각에 해당되는 연산과정을 문자열로 입력해주었다.

 

그리고 결과값이 나오는 부분에는 위에서 저장한 각 상수의 값이 나타나도록 해주었고, 이 값이 다른 연산과정에서도 쓰일 수 있도록 결과값인 resultNum을 동일한 상수의 값으로 변경해주었다. 

 

또, 연산이 끝날 때마다 입력칸이 초기화되도록 userInput의 value값을 빈 값으로 설정했고, 마지막으로 배열에 추가하는 로직이 있는 resultArray 함수를 실행해주었다.

 

맨 오른쪽 아래의 코드는 입력칸과 각 버튼에 이벤트리스너를 추가해준 코드이다.

연산중인 모습

위 이미지는 코드의 결과로 연산이 진행되고 있는 모습이다. 수업과 코드는 달랐지만 결과는 같아서 만족한 연습이었다.