계산기에 사칙연산부호를 적용시키는 방법좀 알수있을까요 ?!
조회수 955회
<body>
<div class="calculator">
<div class="top">
<span id="cancel">C</span>
<span id="output" class="output"></span>
</div>
<div class="bottom">
<span class="num">7</span> <span class="num">8</span>
<span class="num">9</span>
<span class="operator">+</span>
<span class="num">4</span> <span class="num">5</span>
<span class="num">6</span>
<span class="operator">-</span>
<span class="num">1</span> <span class="num">2</span>
<span class="num">3</span>
<span class="operator">*</span>
<span id="period">.</span>
<span class="num">0</span>
<span class="operator">=</span>
<span class="operator">/</span>
</div>
</div>
<script src="script_2.js" type="text/javascript"></script>
</body>
document.addEventListener("DOMContentLoaded",function(e){
var output = document.getElementById("output");
var bottom = document.getElementsByClassName("bottom");
var num = document.getElementsByClassName("num");
var operator = document.getElementsByClassName("operator")
var cancel = document.getElementById('cancel')
for(i=0; i<num.length; i++){
num[i].addEventListener("click",Number);
}
function Number(a){
var space=a.target.textContent
output.innerText+=space
}
cancel.addEventListener('click',function(){output.innerText=""})
for ( j=0; j<operator.length; j++){
operator[j].addEventListener('click',oper)}
function oper(b){
var op=b.target.textContent
output.innerText+=op
}
})
이 코드에서 = 을 클릭했을때, output ( 숫자나 연산기호눌렀을때 입력되는곳 ) 에 + 가있으면 덧셈,
-가있으면 뺄셈, *가 있으면 곱셈 이런식으로
만들고싶어서 if 문이든 switch 문이든 다양하게 해봤는데 변함이없더라구요
어떤코드를 써야 완벽한 계산기가 될까요??
1 답변
-
계산기라는 것의 기본 아이디어를 다시 좀 복기해 보면 어떨까요?
다음 플로우차트를 꼼꼼히 읽어보세요. 딱 맞지는 않겠습니다만 이게 질문자님의 구현에 가장 가까워 보입니다.
이것저것 생략 및 무시하고 핵심만 뽑자면...
- 최초 initializing 이후의 모든 작업은 종료가 없는 반복이다. (상기 차트의 시나리오처럼 "스크린 클리어"가 있다고 가정하지 않는 한)
- 입력은 일단 받고, 그 입력이 숫자인지 연산자인지는 그 다음에 확인한다.
- 연산자는 순서대로 저장되며, "="가 입력될 때에야 비로소 저장된 순서대로 계산 결과를 만들어 제공한다.
"계산기에 사칙연산부호를 적용"하는 부분은 차트의 "compute result"에 해당하는데 그냥
switch쓰시면 됩니다. 저장된 연산자에 따라 앞뒤 2개 숫자의 연산을 해서 반환하면 그만이죠. 이건 재미있는 부분이고, 문제는 그 앞의 재미없는 알고리즘 부분이지요.생각해 봅시다. 애초에 계산기라는 걸 왜 이런 순서로 구현해야 하는 걸까요? 어떻게 하면 계산기를 "초기화"할 수 있을까요? 항상 입력 이벤트를 기다리고 있는다는 건 자바스크립트에서 어떻게 구현될까요? 연산자는 어디에 어떻게 저장하고 비울까요? (그냥 특정
DOMElement의innerText로 꼽아놓으면 되는 걸까요?)자! 생각해 보세요! 하실 수 있습니다.
댓글 입력