배웠던 내용을 토대로 간단한 토이 프로젝트인 계산기를 만들어 보았다.
계산기 토이 프로젝트 목자
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 구현
변수선언
numOne , numTwo : 계산할 정수 저장
operator : 연산자 저장
dom 조작
계산 결과 및 입력될 숫자를 표시할 $result
연산자를 표시할 $operator
함수 선언
onClickNumber
이벤트 리스너에 함수의 중복을 최대한 제거하기 위해 event 객체를 파라미터로 넘겨줌
연산자가 없는 상태 if(!operator) 면, 해당 버튼의 event.target.textContent 값을 numOne 변수에 저장
event가 발생한 객체의 ( textContent : 태그 사이의 자식 값 )
연산자가 입력된 상태면, event.target.textContent 값을 numTwo 변수에 저장
결과를 화면에 표시하기 위해 $result.value += event.target.textContent; result의 value 값 업데이트
계산기의 특성 상 입력된 값이 계속 추가되는 형태 구현 : string 자료형과 += 연산자를 이용
onClickOperator
numOne의 값이 입력된 경우에만 operator 버튼 클릭 가능
operator의 value를 업데이트 시켜 화면에 출력
이벤트 리스너
숫자 버튼
선언한 함수를 각 버튼에 이벤트 리스너를 달아주어 동작하게 함
= 버튼 입력 시 저장된 numOne 및 numTwo를 이용, operator 값을 switch 시켜 해당 operator에 맞는 계산 수행 후 result로 표시
numTwo 값이 아직 입력되지 않으면, 경고창 표시
초기화 버튼 이벤트 리스너 선언
모든 변수를 "" 공백으로 지정 및 화면 출력 값 "" 공백 설정 => 초기화
실제 동작 확인
배운 점
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 |