계산기 만들기 예제
자바스크립트 예제 중에 많이 나오고, 기본이라고 하는 계산기 만들기
만들면서 두번 생각해야하는 부분도 많아서 어려웠지만 계속 반복하면 언젠가 익숙해질 그날을 기대한다.
1. 순서도 그리기
프로그램을 짜기 전 가장 중요한 순서도 그리기
예상외로 게임 프로그램 작성할 때 보다는 계산기 순서도가 전체적인 흐름에서는 간단했다
순서도를 토대로 코드를 작성하면서 순서도도 상호보완하는 작업을 거친다.
2. 코드작성
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계산기</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<!-- 계산기 버튼 구현 -->
<body>
<!-- readonly = 사용자가 글자를 쓸수 없다. -->
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (number) => (event) => {
if (operator) { //비어있지 않다.
if (!numTwo) {
$result.value = '';
} //첫번째 숫자 입력하고 화면 지우기 + 두번째 숫자 출력
numTwo += number;
} else { //비어있다.
numOne += number;
};
result.value += number;
};
//onClickNumber자리가 함수자리니까 undefined 대신 return 뒤에 함수를 넣어둔다.
//고차함수 : high order function 함수가 함수를 리턴하는 것
document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));
const onClickOperator = (op) => () => {
if (numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = numOne - numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
default:
break;
}
numOne = $result.value;
numTwo = '';
}
if (numOne) {
operator = op;
$operator.value = op;
} else {
alert('숫자를 먼저 입력하세요.');
}
};
document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click', () => {
if (numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = numOne - numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
default:
break;
}
$operator.value = '';
numOne = $result.value;
operator = '';
numTwo = ''; //연달아 계산하기 코드
} else {
alert('숫자를 먼저 입력하세요.');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
numTwo = '';
operator = '';
$operator.value = '';
$result.value = '';
});
</script>⭐️ 고차함수
고차함수 = 함수간의 중복을 제거하기 위해서 사용하는 함수
함수가 함수를 리턴하는 경우를 말한다.
const func=() => {
return ()=> {
console.log ('hello'); };
};위의 함수식을 아래와 같이 생략하여 작성할 수 있다.
const func = (매개변수자리) => () => {
console.log('hello');
};⭐️ 코딩 테크닉 - if문 중첩 피하기
if문 중첩이 무분별하게 사용되거나 정리가 되지않은 경우 코드를 볼때 괄호 부분이 한눈에 들어오지 않아 코드 해석에 어려움이 있을 수 있다.
되도록이면 중첩 if문은 정리를 통해 한눈에 보기 쉽게 정리하자.
if 중첩문 정리하기
- if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣어준다.
- 분기점에서 짧은 절차부터 나오게 if문을 작성한다.
- 짧은 절차가 끝나면 return(함수 내부의 경우) 이나 break (for문 내부의 경우) 로 중단한다.
- else를 제거한다. (이때 중첩 하나가 제거된다.)
const onClickNumber3 = (event) => {
if (!operator) { //비어있다. 짧은 절차를 올릴때 if 조건에 !를 붙인다.
numOne += event.target.textContent;
result.value += event.target.textContent;
return;
}
if (!numTwo) { //비어있지않다.
$result.value = '';
}
numTwo += event.target.textContent;
result.value += event.target.textContent;
};프로그램 코드는 누구나 실행시킬 수 있지만 가독성이 좋은 코드를 사용하는 것이 좋은 개발자인지 아닌지를 나누는 기준이된다.
connecting the dots 💫