자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법

해리스-베네딕트 기초대사량(Basal Metabolic Rate, BMR) 계산법은 개인의 기초대사량을 추정하는 데 널리 사용되는 공식을 제공합니다. 기초대사량은 휴식 상태에서 소비되는 에너지의 양을 의미하며, 이를 통해 하루 동안 필요한 총 에너지 소비량(TDEE)을 계산할 수 있습니다. 본 글에서는 해리스-베네딕트 공식을 사용하여 자바스크립트로 기초대사량 계산기를 만드는 방법을 설명하겠습니다.

기초대사량이란?

기초대사량(Basal Metabolic Rate, BMR)은 개인이 생명 유지에 필요한 최소한의 에너지를 의미합니다. 이는 호흡, 혈액 순환, 체온 유지 등 기본적인 신체 기능을 수행하는 데 필요한 에너지를 포함합니다. 기초대사량은 성별, 나이, 체중, 키 등 여러 요인에 따라 달라집니다.

해리스-베네딕트 공식

해리스-베네딕트 공식은 기초대사량을 계산하는 대표적인 방법 중 하나입니다. 이 공식은 1919년에 처음 발표되었으며, 이후 1984년에 개정되었습니다. 남성과 여성의 기초대사량을 계산하는 공식은 다음과 같습니다:

남성: BMR = 88.362 + (13.397 × 체중(kg)) + (4.799 × 키(cm)) - (5.677 × 나이(년))
여성: BMR = 447.593 + (9.247 × 체중(kg)) + (3.098 × 키(cm)) - (4.330 × 나이(년))

자바스크립트로 기초대사량 계산기 만들기

이제 자바스크립트를 사용하여 기초대사량 계산기를 만들어보겠습니다. 이 계산기는 사용자로부터 성별, 나이, 체중, 키를 입력받아 기초대사량을 계산합니다.

기초대사량 계산기 HTML 코드

먼저 HTML 코드를 작성하여 사용자 인터페이스를 구성합니다. 사용자가 데이터를 입력할 수 있는 폼과 결과를 출력할 수 있는 영역을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기초대사량 계산기</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .calculator {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .calculator input, .calculator select, .calculator button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>기초대사량 계산기</h2>
        <label for="gender">성별</label>
        <select id="gender">
            <option value="male">남성</option>
            <option value="female">여성</option>
        </select>
        <label for="age">나이(년)</label>
        <input type="number" id="age" placeholder="나이를 입력하세요" required>
        <label for="weight">체중(kg)</label>
        <input type="number" id="weight" placeholder="체중을 입력하세요" required>
        <label for="height">키(cm)</label>
        <input type="number" id="height" placeholder="키를 입력하세요" required>
        <button onclick="calculateBMR()">기초대사량 계산</button>
        <h3 id="result">결과가 여기에 표시됩니다</h3>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

기초대사량 계산기 JavaScript 코드

이제 자바스크립트 기초대사량 계산기 코드를 작성하여 사용자가 입력한 데이터를 기반으로 기초대사량을 계산합니다. HTML 파일과 같은 디렉터리에 calculator.js 파일을 생성하고 아래의 코드를 추가합니다.

function calculateBMR() {
    const gender = document.getElementById('gender').value;
    const age = parseInt(document.getElementById('age').value);
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);

    if (isNaN(age) || isNaN(weight) || isNaN(height)) {
        alert('모든 값을 올바르게 입력하세요.');
        return;
    }

    let bmr;

    if (gender === 'male') {
        bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
    } else {
        bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
    }

    document.getElementById('result').innerText = `기초대사량: ${bmr.toFixed(2)} kcal/day`;
}

코드 설명

위의 코드는 사용자가 입력한 성별, 나이, 체중, 키 값을 받아서 해리스-베네딕트 공식을 사용하여 기초대사량을 계산합니다. 계산된 결과는 소수점 두 자리까지 표시되며, 결과는 HTML 요소에 업데이트됩니다.

calculateBMR() 함수는 사용자가 입력한 데이터를 가져와서 검증한 후 기초대사량을 계산합니다.
성별에 따라 다른 공식을 사용하여 BMR을 계산합니다.
계산 결과는 result라는 ID를 가진 HTML 요소에 표시됩니다.

사용자 입력 검증

입력 값이 올바른지 확인하기 위해 간단한 검증 로직을 추가하였습니다. 나이, 체중, 키가 숫자인지 확인하고, 값이 없는 경우 사용자에게 경고 메시지를 표시합니다.

결론

이 글에서는 해리스-베네딕트 기초대사량 계산법을 사용하여 자바스크립트로 기초대사량 계산기를 만드는 방법을 설명했습니다. 이 계산기는 사용자가 입력한 성별, 나이, 체중, 키를 기반으로 기초대사량을 정확하게 계산해 줍니다. 여러분도 이 코드를 기반으로 다양한 기능을 추가하여 더욱 발전된 계산기를 만들어 보세요.

저작자표시 비영리 변경금지

'Dev > script' 카테고리의 다른 글

애드센스 광고 무효클릭 방지 코드 (0)	2024.07.21
크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해 특정 값을 popup.html로 전달하기 (0)	2024.05.24
JAVASCRIPT RGB 색상표 (0)	2024.05.19
1678. Goal Parser Interpretation leetcode javascript 해석 및 풀이 (0)	2024.01.03
(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 [경고] 개발자 도구가 감지되었습니다. (0)	2023.12.14

자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법