반응형
들어가기 전에
자바스크립트는 웹 개발에서 매우 중요한 역할을 하는 프로그래밍 언어입니다. 그 중에서도 사칙연산은 가장 기본적인 연산이며, 이를 계산할 수 있는 계산기는 자바스크립트를 학습하는 초보자에게 매우 유용한 학습 도구입니다. 이번 글에서는 자바스크립트로 간단한 사칙연산 계산기를 제작하고, 여러 가지 예시를 통해 자세히 알아보도록 하겠습니다.
사칙연산 계산기 만들기
우선, HTML 파일을 생성하고 다음과 같은 코드로 채워주세요.
<html>
<head>
<!-- 자바스크립트 코드 삽입 위치 -->
</head>
<body>
<h2>사칙연산 계산기</h2>
<input type="text" id="num1" placeholder="첫 번째 숫자" />
<input type="text" id="num2" placeholder="두 번째 숫자" />
<button onclick="calculate()">계산하기</button>
<p id="result"></p>
<script src="calculator.js"></script>
</body>
</html>
위의 코드에서는 계산에 사용할 두 개의 숫자를 입력할 수 있는 input 요소, 계산 버튼을 누르면 결과가 나타나는 p 요소를 만들었습니다. 그리고 자바스크립트 코드를 연결하기 위해 script 태그를 추가하였습니다.
이제 자바스크립트 코드를 작성해봅시다. 자바스크립트 파일인 "calculator.js"를 생성하고 다음과 같이 코드를 작성해주세요.
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerHTML = "유효한 숫자를 입력해주세요.";
} else {
document.getElementById("result").innerHTML = "덧셈 결과: " + (num1 + num2) + "<br>" +
"뺄셈 결과: " + (num1 - num2) + "<br>" +
"곱셈 결과: " + (num1 * num2) + "<br>" +
"나눗셈 결과: " + (num1 / num2);
}
}
위의 코드에서는 계산 함수인 calculate를 정의하고, 입력된 값을 가져와서 사칙연산을 수행합니다. 계산 결과를 결과 창에 표시합니다. 만약 입력된 값이 숫자가 아닌 경우, "유효한 숫자를 입력해주세요."라는 메시지가 표시됩니다.
사칙연산 계산기 사용 예시
이제 몇 가지 예시를 통해 사칙연산 계산기가 어떻게 작동하는지 살펴보겠습니다.
예시 1: 덧셈
첫 번째 숫자: 2
두 번째 숫자: 3
결과:
- 덧셈 결과: 5
- 뺄셈 결과: -1
- 곱셈 결과: 6
- 나눗셈 결과: 0.6666666666666666
예시 2: 숫자가 아닌 값 입력
첫 번째 숫자: abc
두 번째 숫자: 5
결과: 유효한 숫자를 입력해주세요.
예시 3: 나눗셈 결과가 정수가 아닌 경우
첫 번째 숫자: 10
두 번째 숫자: 3
결과:
- 덧셈 결과: 13
- 뺄셈 결과: 7
- 곱셈 결과: 30
- 나눗셈 결과: 3.3333333333333335
결론
이번 글에서는 자바스크립트를 이용하여 간단한 사칙연산 계산기를 만들어보았습니다. 계산기를 만들면서 자바스크립트의 기본 문법과 함수 호출, DOM 요소에 접근하는 방법 등을 익힐 수 있었습니다. 또한 여러 가지 예시를 통해 계산기가 실제로 동작하는 모습을 확인할 수 있었습니다.
반응형