BMIとは1994年にWHOで定めた肥満判定の国際基準です。
体重と身長の関係から算出される、人の肥満度を表す体格指数です。
BMIをJavaScriptで計算したいと思います。
BMIの計算式
BMI = 体重kg ÷ (身長m × 身長m)
身長と体重を入力して、チェックボタンを押して下さい。
JavaScriptの解説
最初にお断り致しますが、プログラムは色々なやり方がありまして、必ずしもこの通りでなくても結構です。
以下はあくまでも例の一つです。もっと上手なやり方もあるかと思います。
HTML部分
HTML5のinput要素のrequired属性を使いたいので、formで囲っています。
required属性を使うと入力チェックを自分で書かなくてもやってくれるので、この方が楽です。
formにidを付けて、後で利用しやすくしています。
submitボタンを押したら、check関数を起動。またreturn false;を付けて、ページが遷移しないようにします。
数字しか入力されないように、HTML5のinput type=”number”を利用します。
それぞれのinputにidを付けます。
div id=”result”部分に結果を表示させます。
1 2 3 4 5 6 7 8 9 10 |
<form name="qForm" id="qForm" onsubmit="check(); return false;"> <dl> <dt>身長</dt> <dd><input type="number" name="height" id="height" required> cm</dd> <dt>体重</dt> <dd><input type="number" name="weight" id="weight" required> kg</dd> </dl> <input type="submit" value="チェック"> </form> <div id="result"></div> |
JavaScript部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
function check() { //入力した身長の値を取得 var height = document.qForm.height.value; //入力した体重の値を取得 var weight = document.qForm.weight.value; //BMIを取得 var bmi = weight / ((height / 100)*(height / 100)); //BMIの小数点2位以下を切り捨て(一度10倍してから小数点を切り捨て、その後10分の1にしています) bmi = Math.floor(bmi * 10) / 10; //BMIは22が標準らしいので、22を掛けて標準体重を取得 var right_weight = ((height / 100)*(height / 100)) * 22; //標準体重の小数点2位以下を切り捨て(一度10倍してから小数点を切り捨て、その後10分の1にしています) right_weight = Math.floor(right_weight * 10) / 10; //判定の文字列を格納する変数 var result; //BMIの値が何以上、何未満かの条件によって判定するif文 if(bmi < 18.5){ result = "低体重"; }else if(bmi >= 18.5 && bmi < 25){ result = "普通体重"; }else if(bmi >= 25 && bmi < 30){ result = "肥満(1度)"; }else if(bmi >= 30 && bmi < 35){ result = "肥満(2度)"; }else if(bmi >= 35 && bmi < 40){ result = "肥満(3度)高度肥満"; }else if(bmi >= 40){ result = "肥満(4度)高度肥満"; } //表示するhtmlを作成 var html = "<dl>"; html += "<dt>BMI</dt>"; html += "<dd>" + bmi + "</dd>"; html += "<dt>判定</dt>"; html += "<dd>" + result + "</dd>"; html += "<dt>標準体重</dt>"; html += "<dd>" + right_weight + " kg</dd>"; html += "</dl>"; //idがresultの部分にhtmlを表示 document.getElementById("result").innerHTML = html; } |