[javascript] 조건문을 사용한 계산기 기능 추가 예제

12 Dec 2023

javascript

이번에는 JavaScript를 사용하여 간단한 계산기를 만들어 보겠습니다. 사용자가 입력한 두 숫자에 대해 더하기, 빼기, 곱하기, 나누기 중 하나의 연산을 선택하고, 해당 연산을 수행한 결과를 보여주는 프로그램입니다.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>간단한 계산기</title>
    <script src="calculator.js"></script>
</head>
<body>
    <h2>간단한 계산기</h2>
    <input type="number" id="num1" placeholder="첫 번째 숫자">
    <input type="number" id="num2" placeholder="두 번째 숫자">
    <select id="operator">
        <option value="add">더하기 (+)</option>
        <option value="subtract">빼기 (-)</option>
        <option value="multiply">곱하기 (*)</option>
        <option value="divide">나누기 (/)</option>
    </select>
    <button onclick="calculate()">계산</button>
    <p id="result"></p>
</body>
</html>

JavaScript

// calculator.js
function calculate() {
    let num1 = parseFloat(document.getElementById('num1').value);
    let num2 = parseFloat(document.getElementById('num2').value);
    let operator = document.getElementById('operator').value;
    let result;

    if (operator === 'add') {
        result = num1 + num2;
    } else if (operator === 'subtract') {
        result = num1 - num2;
    } else if (operator === 'multiply') {
        result = num1 * num2;
    } else if (operator === 'divide') {
        if (num2 !== 0) {
            result = num1 / num2;
        } else {
            result = '나누는 수는 0이 될 수 없습니다.';
        }
    }

    document.getElementById('result').innerText = '결과: ' + result;
}

이제 위의 코드를 HTML 파일과 JavaScript 파일로 나누어 저장한 뒤, HTML 파일을 웹 브라우저에서 열면 간단한 계산기를 사용할 수 있습니다. 사용자가 선택한 연산에 따라 조건문을 통해 해당 계산을 수행하고 결과를 표시하는 간단한 계산기가 완성되었습니다.

참고 자료

MDN Web Docs - 조건문