[모던자바스크립트 - JS 예제 마스터] 체질량 구하기

 

체질량 구하기 예제

 

HTML 코드

<p>
  키 : <input type="number" id="height"/> cm
</p>

<p>
  몸무게 : <input type="number" id="weight"/> kg
</p>

<p>
  당신의 체질량지수는 <output id="bmi">?</output>입니다.
</p>

<input type="button" id="button" value="계산"/>

 

 

Javascript 코드

window.onload = function(){
    document.getElementById("button").onclick = function(){
       var h = parseFloat(document.getElementById("height").value);
       var w = parseFloat(document.getElementById("weight").value);
       var bmi = document.getElementById("bmi");
       
       bmi.innerHTML = (w/((h*h)/10000)).toFixed(1);
  }
}

 

이번 예제는 크게 어려운 부분은 없었던 것 같아요.

 

하지만 또 새로운 메서드가 등장했습니다.

 

 parseFloat()  인데요

 

parseFloat() 메서드는 간단하게 말해서 

문자열을 실수(real number)로 바꿔주는 메서드입니다.

 

그리고 parseFloat()만의 독특한 특징이 있는데요.

 

 

아래와 같이 숫자 뒤에 오는 문자열이나 공백을 무시해버립니다.

parseFloat("40 years") = 40

parseFloat("35.66") = 35.66

parseFloat("34 45 66") = 34

 

그리고 숫자가 아닌 문자열로 시작하면 NAN(Not A Number) 을 반환합니다.

parseFloat("He was 40 years old") = NAN

 

공백으로 시작하면 무시하고 숫자를 반환 합니다.

parseFloat("  45  ") = 45

 

근데...<input type="number"/> 를 썼기 때문에

어차피 체중, 신장 기입란에 숫자 이외에는 기입하지 못하는데

 

굳이 parseFloat을 쓴 이유가 궁금하긴하네요.

(혹시 아시는 분은 댓글로 알려주시면 감사합니다 :) )

 

---

 

 toFixed()  함수는 스탑워치 만들기 예제에서 다뤘기 때문에 넘어갈게요

[모던자바스크립트 - JS 예제 마스터] 스탑워치 만들기

---

 

이번 예제에서 알아야 할 건 BMI 계산식인 것 같은데요.

 

BMI 지수 = 체중(kg) / 신장 x 신장 (m)

위의 공식이 기본적인 BMI 계산식입니다. 

 

신장을 적는 단위가 m 라서 내 키가 160cm 라면 신장 기입란에 1.6으로 적어야합니다.

 

근데 우리가 평소 신장을 적을 때, 160cm 이렇게 적지

1.6m 이렇게 적진 않잖아요?

 

그래서 계산식을 조금 바꿨습니다.

 

체중(kg) / ((신장 x 신장cm) / 10000)

 

즉, 

 

55 / ((160 x 160) / 10000)

 

이렇게 되는것이죠.

 

---

 

 

마지막 깨알 정보

output 태그는 뭔가요?

<output> 태그
-  스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타낼 때 사용합니다.
-  <output> 태그는 HTML5에서 새롭게 추가된 요소입니다.
-  IE 11 이하는 지원하지 않으므로 사용시 주의

 

 

 

공감❤과 구독하기✔를 눌러주시면 블로거는 힘이나요😊