소개
자바스크립트는 웹 페이지를 동적으로 만들고 상호작용을 가능하게 하는 강력한 프로그래밍 언어입니다. 자바스크립트를 사용하면 간단한 계산기부터 복잡한 애플리케이션까지 다양한 기능을 구현할 수 있습니다. 이 블로그에서는 자바스크립트를 이용하여 간단한 계산기를 만드는 방법과 예시를 소개합니다.
자바스크립트 계산기 만들기
자바스크립트를 사용하여 간단한 계산기를 만드는 것은 매우 쉽습니다. 우선, HTML 파일을 만들고 계산기의 인터페이스를 구성하는 요소들을 추가합니다. 이 예제에서는 숫자 입력창, 연산자 버튼, 결과 표시창을 사용하겠습니다.
<input type="text" id="num1" />
<input type="text" id="num2" />
<button onclick="calculate()">더하기</button>
<button onclick="calculate()">빼기</button>
<button onclick="calculate()">곱하기</button>
<button onclick="calculate()">나누기</button>
<p id="result"></p>
위 코드는 두 개의 숫자 입력창과 네 개의 연산자 버튼, 그리고 결과를 표시할 p 태그를 포함합니다. onclick 속성을 사용하여 버튼을 클릭하면 calculate() 함수가 호출되도록 설정하였습니다.
이제 JavaScript 코드를 추가하여 각 버튼이 클릭되었을 때 적절한 계산을 수행하고 결과를 표시하는 함수를 작성해보겠습니다.
<script>
function calculate() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var operator = event.target.innerHTML;
var result;
if (operator === "더하기") {
result = num1 + num2;
} else if (operator === "빼기") {
result = num1 - num2;
} else if (operator === "곱하기") {
result = num1 * num2;
} else if (operator === "나누기") {
result = num1 / num2;
}
document.getElementById("result").innerHTML = "결과: " + result;
}
</script>
위 코드에서 calculate() 함수는 num1과 num2 변수에 입력된 값을 가져와서 연산자에 따른 계산을 수행합니다. 계산 결과는 result 변수에 저장되고, 결과를 p 태그에 표시합니다. 입력된 값은 Number() 함수를 사용하여 숫자로 변환해야 합니다.
이제 HTML 파일을 저장하고 웹 브라우저에서 열어보면 간단한 계산기가 작동하는 것을 확인할 수 있습니다. 숫자를 입력하고 연산자 버튼을 클릭하면 결과가 표시됩니다.
계산기 예시
다음은 몇 가지 계산기 예시입니다.
예시 1: 두 수 더하기
첫 번째 숫자 입력창에 5를 입력하고 두 번째 숫자 입력창에 3을 입력한 후 "더하기" 버튼을 클릭하면 결과로 8이 표시됩니다.
예시 2: 두 수 빼기
첫 번째 숫자 입력창에 10을 입력하고 두 번째 숫자 입력창에 4를 입력한 후 "빼기" 버튼을 클릭하면 결과로 6이 표시됩니다.
예시 3: 두 수 곱하기
첫 번째 숫자 입력창에 7을 입력하고 두 번째 숫자 입력창에 2를 입력한 후 "곱하기" 버튼을 클릭하면 결과로 14가 표시됩니다.
예시 4: 두 수 나누기
첫 번째 숫자 입력창에 12을 입력하고 두 번째 숫자 입력창에 3을 입력한 후 "나누기" 버튼을 클릭하면 결과로 4가 표시됩니다.
결론
이 블로그에서는 자바스크립트를 사용하여 간단한 계산기를 만드는 방법과 관련 예시를 소개했습니다. 자바스크립트는 다양한 웹 프로젝트에서 유용하게 활용될 수 있으며, 계산기를 만들어보는 것은 자바스크립트 언어를 익히는 데에 좋은 학습 과정이 될 수 있습니다. 계산기 예시를 통해 실제 사용자 입력과 연산 결과가 어떻게 동작하는지 확인하고, 자바스크립트를 활용하여 다양한 계산기 기능을 구현해보세요.