여러 방식으로 해보다가 ,, 결국은 제대로 완성도 못하고 뜻대로 되지 않아서
이미 만들어진 코드를 보면서 이해해보기로 했다 .
오류 없이 잘 실행되는 모습이다.
HTML 코드
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>계산기</title> <link rel="stylesheet" href="calculator.css"> </head> <body> <div class="wrap"> <div class="input-box"> <div class="show-box"></div> <input id="numInput" type="text" placeholder="0"> </div> <table> <tbody> <tr> <td colspan="3" class="col3"><button id="acBtn">AC</button></td> <td><button class="op">/</button></td> </tr> <tr> <td><button class="number">7</button></td> <td><button class="number">8</button></td> <td><button class="number">9</button></td> <td><button class="op">*</button></td> </tr> <tr> <td><button class="number">4</button></td> <td><button class="number">5</button></td> <td><button class="number">6</button></td> <td><button class="op">-</button></td> </tr> <tr> <td><button class="number">1</button></td> <td><button class="number">2</button></td> <td><button class="number">3</button></td> <td><button class="op">+</button></td> </tr> <tr> <td colspan="2" class="col2"><button class="number">0</button></td> <td><button class="number">.</button></td> <td><button class="op">=</button></td> </tr> </tbody> </table> </div> <script src="calculator.js"></script> </body> </html>
UTF-8
유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나
가장 많이 사용되는 것으로 알고 있다.
<link rel="stylesheet" href="calculator.css">
link 는 말 그대로 링크 ,
href 는 Hypertext reference 로 하이퍼 텍스트 참조 이며, 파일의 위치를 나타낸다.
rel Relation ( 관계 ) 의 약자 이며, 링크된 대상과의 관계를 지정한다.
rel 은 불러오는 문서가 Stylesheet 이라고 정의를 하는 것이다.
style 로 HTML 안에 불러오기 위해 속성을 정의해 주는 것 .
table 을 이용하여 계산기의 틀을 만들어준다.
CSS 코드
table, tbody, tr, td, button { margin: 0; padding: 0; } button { width: 100px; height: 100px; font-size: 40px; color: #333; border: 1px solid #bbb; cursor: pointer; }여백, 버튼의 사이즈와 위치, 글씨의 크기 및 색삭, 테두리, 커서 등을 설정한다.
.wrap { width: 410px; margin: 50px auto 0 auto; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.5); } .input-box { position: relative; width: 100%; height: 100px; padding: 5px; box-sizing: border-box; text-align: center; background-color: #202020; } .show-box { color: #757575; text-align: right; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }입력박스와 결과박스 , 전체 형태 테두리 등의 사이즈와 색상 ,
그리고 글자가 가운데에 오게 설정되는 코드가 있다 .
#numInput { position: absolute; left: 7px; bottom: 5px; display: inline-block; padding: 3px; width: 94%; height: 60px; color: #fff; text-align: right; font-size: 50px; box-sizing: border-box; border: none; background-color: #202020; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } button.number { background-color: #efefef; } button.number:hover { background: #ddd; } button.number:active { background-color: #ccc; } button.op { background-color: #FF9B22; } button.op:hover { background-color: #f99112; } button.op:active { background-color: #EB7016; } .col2 button { width: 201px; } .col3 button { width: 303px; }
버튼에 커서를 갖다대면 확인이 가능하게끔 색이 톤다운 된다.
하얀색 숫자 부분에는 회색, 수식 부분에는 진한 주황색.
그리고 버튼을 클릭 했을때 파란 테두리가 생긴다.
JS 코드
"use strict" let numbers = document.querySelectorAll(".number") let opText = document.querySelectorAll(".op") let numInput = document.querySelector("#numInput") let acBtn = document.querySelector("#acBtn") let equalBtn = document.querySelector("#equal") let showBox = document.querySelector(".show-box")
"use strict" 는 "strict mode" 에서 실행되어야 한다고 정의하는 것이다.
strict mode 에서는 선언되지 않은 변수는 사용될 수 없다.
사용할 숫자, 수식 , 입력, 등의 변수들을 선언해준다.
strict mode 에서는 선언없이 변수를 사용하는 것과
선언없이 객체를 사용하는 것, 그리고 변수를 삭제하는 것은 허용되지 않는다.
let checkBtn = false let checkPreNum = false for (let i = 0; i < numbers.length; i++) { numbers[i].addEventListener('click', inputNum) }연산 버튼 클릭시 input에 새로 입력받기.
preNum 과 nextNum 구분하기.
숫자버튼 클릭 시 inputNum 함수 호출.
function inputNum() { if (checkBtn) clearNum() if (cal.preOp === '=' && checkBtn === true) clearShowBox() var inputText = this.innerHTML numInput.value += inputText showBox.innerHTML += inputText checkBtn = false }해당 element의 content 를 input box에 뿌린다.
function clearNum() { numInput.value = "" console.log("clear") } function clearShowBox() { showBox.innerHTML = "" }클리어 버튼을 누르면 입력창 내용이 삭제되게 한다.
let cal = { result: 0, preNum: 0, nextNum: 0, preOp: null, op: null, calculator: function() { var inputText = this.innerHTML cal.op = inputText showBox.innerHTML += inputText checkBtn = true if (!checkPreNum) { cal.preNum = Number(numInput.value) console.log(cal.preNum) checkPreNum = true } else { cal.nextNum = Number(numInput.value) console.log(cal.nextNum) clearNum() cal.resultFn(cal.preOp) cal.preNum = cal.result if (cal.op == '=') { checkPreNum = false showBox.innerHTML += cal.result +', ' } } cal.preOp = cal.op }, resultFn: function(op) { switch (op) { case '+': cal.result = cal.preNum + cal.nextNum console.log("result"+cal.result) break; case '-': cal.result = cal.preNum - cal.nextNum console.log("result"+cal.result) break; case '*': cal.result = cal.preNum * cal.nextNum console.log("result"+cal.result) break; case '/': cal.result = cal.preNum / cal.nextNum console.log("result"+cal.result) break; } numInput.value = cal.result } }
계산기 객체
숫자를 눌렀을 때 cal.preNum 에 값이 들어가게 하고 다음 값을 누르면
이전값 + ' ' 이어서 숫자가 입력 박스에 보여지게 한다.
= 버튼을 눌렀을 때 결과 박스에 연산된 값을 보여준다.
switch~case문을 사용해서
각 수식마다 연산을 정의해준다.
for (let i = 0; i < opText.length; i++) { opText[i].addEventListener('click', cal.calculator) } acBtn.addEventListener('click', function() { numInput.value = "" showBox.innerHTML = "" cal.result, cal.preNum, cal.nextNum = 0 checkPreNum = false })연산자버튼 클릭시 이벤트를 등록한다.
버그 몇가지 있어서 알려드릴게요!
숫자 연산자 숫자 연산자 = 누르면 버그가 있네요. 예를 들어 설명하면 2 + 2 + = 순으로 누르면 2 + 2가 계산되어 showBox에는 4가 나와있고 그 상태에서 + = 를 누르면 4 + 4가 계산되어 값이 8이 나옵니다. 곱하기 같은경우도 4 * 4 가 되어 16이 나와요.
AC 후 =버튼을 두번누르면 이전 숫자가 나옵니다.
이건 버그는 아닌데 나누기 0은 따로 처리를 안해주셨어요 값이 Infinity로 나오기는 하지만 다른 언어로 작성하게 된다면 런타임에러가 발생할 수 있습니다!