중첩 제거 스킬은 이해가 안된다. ㅎㅎ;
스스로 그린 것인데 강사님은 operator와 numOne, numTwo 변수를 사용해서 문자열에 변환값을 더해서 변환하는 식으로 순서도 작성.
강사님의 순서도에 맞게끔 이론을 펴나가시고 위의 두 함수를 쓰면서 코드의 중복값을 줄이는 설명을 하셨다. 나랑 너무 다른 순서도 구성방식이다. 내가 이번 수강내용은 이해가 후달릴만 한듯 싶다. (처음 보는 패턴임)
지금 보면 중간에 있는 순서도에서 3가지 단계로 내가 쪼개 놓은 부분을 마름모에 operator를 넣어 사용하셔서 순서도 단계를 1단계 작성으로 줄여놓으셨더라.
자꾸 새 지식을 응용되어 나오는 지라 뭔소리인지 이해가 쉽지는 않다는게 내 결론이다.
강사님도 순서도 연습과 그것을 스스로 구현해보는데에 의미를 두라고 말씀하신다.
<!DOCTYPE html>
<html lang="en">
<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>
<input readonly type="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>
<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 = (event) => {
if(!operator) { // 비어있다 = 연산자버튼 안 누름
numOne += event.target.textContent;
$result.value += event.target.textContent;
return;
}
// 비어있지 않다. = 연산자 버튼 누름(operator 가동상태)
if (!numTwo) { //연산자 누른 상태인데 아직 다음 수가 없다면
$result.value = ''; // 2번째 숫자버튼 누르기 전에는 계산기처럼 result창을 말끔히 비워줌
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
const onClickOperator = (op) => () => {
// 함수 안에 함수가 있다. op를 매개변수로 쓰는 ()함수의 리턴값은 함수{}의 결과값
// const 변수 = (op) => {if-else문} 만 쓰려 했는데.. 중괄호에 return값이 없으면.. 변수 불러서 함수 쓸때, 함수의 결과값으로 undefined가 출력되서 에러발생 -----------------> {if-else문}을 return의 결과값으로 쓰는 함수를 중간에 집어 넣음.(바지사장)
// (op) => {return () => {if-else문 } } 이런 상태로 수정. 화살표 함수는 중괄호와 return이 붙으면 생략가능.
// (op) => {return () => {if-else문 } }
그 함수1의 결과값인 다른 함수2의 결과값인 함수3의 결과값이 실제 우리가 쓰고자 하는 값
