JavaScript - 토이 프로젝트

자바스크립트

JavaScript - 토이 프로젝트 - 계산기

개발자 동찬 ㅣ 2023. 12. 21. 21:57

배웠던 내용을 토대로 간단한 토이 프로젝트인 계산기를 만들어 보았다.

계산기 토이 프로젝트 목자

1. 프로그래밍 순서도 구상

2. html 페이지 작성

3. JavaScrip 기능 구현

4. 기능 테스트

순서도

시작 -> 숫자 1을 저장할 변수 선언 -> 연산자를 저장할 변수 선언 -> 숫자 2를 저장할 변수 선언 -> 대기

숫자 버튼 클릭 -> 숫자를 변수에 저장 -> 대기

연산자 버튼 클릭 -> 연산자를 변수에 저장 -> 대기

= 버튼 클릭 -> 숫자 1과 숫자 2에 연산자를 적용해 계산 -> 계산 결과를 화면에 출력 -> 끝

html 문서

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <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 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>

</script>
</body>

javascript 구현

변수선언

let numOne = '';

let operator = '';

let numTwo = '';

numOne , numTwo : 계산할 정수 저장

operator : 연산자 저장

dom 조작

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

계산 결과 및 입력될 숫자를 표시할 $result

연산자를 표시할 $operator

함수 선언

onClickNumber

이벤트 리스너에 함수의 중복을 최대한 제거하기 위해 event 객체를 파라미터로 넘겨줌

연산자가 없는 상태 if(!operator) 면, 해당 버튼의 event.target.textContent 값을 numOne 변수에 저장

event가 발생한 객체의 ( textContent : 태그 사이의 자식 값 )

연산자가 입력된 상태면, event.target.textContent 값을 numTwo 변수에 저장

결과를 화면에 표시하기 위해 $result.value += event.target.textContent; result의 value 값 업데이트

계산기의 특성 상 입력된 값이 계속 추가되는 형태 구현 : string 자료형과 += 연산자를 이용

const onClickNumber = (event) =>{

if (!operator) {

numOne += event.target.textContent;

$result.value += event.target.textContent;

return;

}

if(!numTwo){

$result.value = "";

}

numTwo += event.target.textContent;

$result.value += event.target.textContent;

};

onClickOperator

const onClickOperator = (op) => () => {

if (numOne) {

operator = op;

$operator.value = op;

} else {

alert('숫자를 먼저 입력하세요.');

}

};

numOne의 값이 입력된 경우에만 operator 버튼 클릭 가능

operator의 value를 업데이트 시켜 화면에 출력

이벤트 리스너

숫자 버튼

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);

document.querySelector('#plus').addEventListener('click', onClickOperator('+'));

document.querySelector('#minus').addEventListener('click', onClickOperator('-'));

document.querySelector('#divide').addEventListener('click',onClickOperator('/'));

document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));

선언한 함수를 각 버튼에 이벤트 리스너를 달아주어 동작하게 함

= 버튼 입력 시 저장된 numOne 및 numTwo를 이용, operator 값을 switch 시켜 해당 operator에 맞는 계산 수행 후 result로 표시

numTwo 값이 아직 입력되지 않으면, 경고창 표시

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 = parseInt(numOne) * parseInt(numTwo);

break;

case "/":

$result.value = parseInt(numOne) / parseInt(numTwo);

break;

default:

break;

}

} else {

alert("숫자를 입력하세요");

}

초기화 버튼 이벤트 리스너 선언

모든 변수를 "" 공백으로 지정 및 화면 출력 값 "" 공백 설정 => 초기화

document.querySelector('#clear').addEventListener('click', ()=>{

numOne = "";

numTwo = '';

$operator.value = "";

operator = "";

$result.value = "";

});

실제 동작 확인

배운 점

1. 프로그래밍 순서도 작성

2. 고차함수를 통한 함수의 중복 제거

피드백

저작자표시

'자바스크립트' 카테고리의 다른 글

JavaScript - 함수 (0)	2023.12.26
JavaScript - 일급 객체 (1)	2023.12.26
JavaScript - 매개 변수 (1)	2023.12.26
JavaScript - 함수 호출 / 호출 스택 / 호이스팅 (0)	2023.12.21
JavaScript 우아한 테크 코스 - 1주차 숫자 야구 게임 (0)	2023.12.20

동찬 코드 일지