【JavaScript】Windows Webプログラミング　BMI計算の入力フォームを作る

こんにちは、プログラマーのふみです。みなさんは色々な計算ができる Webページを作ろうと思ったことはありますか？

私は表計算ソフト（Microsoft Excel）で設計計算ができるファイルを色々作った経験がありますが、外出すると Excel が使えなくて不便を感じていました。そんなとき、ウェブ上に計算できるページを作ってあれば、外出先でもスマートフォンからアクセスして計算できて便利になると常々思っていました。

そこで、HTMLと JavaScript を使って、Webページの入力フォームから BMI計算ができる JavaScript のサンプルプログラムを作ってみましたので紹介します。

CONTENTS

1 BMIを計算するプログラム
2 BMI計算の数式
3 function（関数）について
4 今回使用したコードについて
5 WordPress にHTMLを組み込む時の注意
6 まとめ

BMIを計算するプログラム

入力フォームから BMI計算ができるプログラムを紹介します。

次のコードのHTMLファイルを作成して実行してみましょう。

<form style="
  width: 360px;
  background: #eeeeee;
  padding: 10px;
  text-align: center;
">
<p>
身長：<input type="text" id="height" style="
  width: 70px;
  text-align: right;
">（cm）
</p>
<span id="msg1" style="color: #ff0000;"></span>
<p>
体重：<input type="text" id="weight" style="
  width: 70px;
  text-align: right;
">（kg）
</p>
<span id="msg2" style="color: #ff0000;"></span>
<p>
<input type="button" value="BMI計算" onclick="bmi_cal();" style="
  width: 100px;
  height: 50px;
  font-size: 15px;
">
</p>
<span id="msg3"></span>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>
</form>

<script type="text/javascript">
function bmi_cal() {
  var ht = document.getElementById("height").value;
  var bw = document.getElementById("weight").value;
  var bmi = Math.round(bw / Math.pow(ht / 100, 2) * 100) / 100
  if (Number.isFinite(1 / ht)) {
    document.getElementById("msg1").innerHTML = ''; 
  } else {
    document.getElementById("msg1").innerHTML = '身長が入力されていません';
  }
  if (Number.isFinite(1 / bw)){
    document.getElementById("msg2").innerHTML = ''; 
  } else {
    document.getElementById("msg2").innerHTML = '体重が入力されていません';
  }
  if (ht * bw > 0){
    document.getElementById("msg3").innerHTML = 'BMI = ' + bmi; 
  } else {
    document.getElementById("msg3").innerHTML = '';
  }
}
</script>

上記は<form ～</form>がHTMLの記述で、<script ～</script>が JavaScript の記述です。
input タグの「BMI計算」のボタンから JavaScript の function（関数） bmi_cal を呼び出しています。

HTMLファイルを作成したら、ダブルクリックでブラウザを開いてみましょう。
ブラウザに BMIを計算する入力フォームが表示されます。
テキストボックスに身長、体重を入力後、「BMI計算」のボタンをクリックして、BMIの計算結果が表示されることを確認してみましょう。

この記事に組み込んだ、BMIを計算する入力フォームは、一番上にあります。

BMI計算の数式

BMI（Body Mass Index）を算出する数式は次のとおりです。

BMI (kg/m² ) ＝体重(kg) ÷ (身長(m))²

function（関数）について

JavaScript の関数は

function 関数名(){
任意の処理
[return 戻り値;]
}

の形で記述します。関数名はユーザーが任意の名前を設定し、任意の処理は JavaScript のコードを記述します。戻り値が不要な時は return を省略できます。
定義した関数の処理は繰り返し使用することができます。

定義した関数を呼び出すときは

関数名([引数1,引数2,…]);

の形で呼び出します。引数（ひきすう）がない時は省略しますが、()は省略できません。

今回紹介した BMI計算の入力フォームでは、関数名「bmi_cal」で定義した計算処理を、HTML で記述した汎用ボタンから「onclick=”関数名();” 」で呼び出しています。

今回使用したコードについて

getElementById メソッド

構文
document.getElementById( id )

指定された id の要素を取得します。

今回紹介した BMI計算の入力フォームでは、value プロパティでテキストボックスの値を取得し、innerHTML プロパティで BMI の計算結果や、テキストボックスに数値が入力されていない時のエラーメッセージを表示させています。

Element の「E」、By の「B」、Id の「I」は大文字で記述します。

Number オブジェクト

数値を操作するメソッドの前に記述するラッパーオブジェクトです。

Number の「N」は大文字で記述します。

isFinite メソッド

構文
Number.isFinite( value )

演算結果の値 value が有限値のとき true を返します。
演算結果の値 value が無限値のときや、数値で表現できないとき（Not a Number）は false を返します。

今回紹介した BMI計算の入力フォームでは、空欄等で値が0のとき、1 ÷ 0 = ∞ （無限値）になるので isFinite メソッドは false を返します。

isFinite の「F」は大文字で記述します。

Math オブジェクト

数値を演算するメソッドの前に記述するオブジェクトです。

Math の「M」は大文字で記述します。

pow メソッド

構文
Math.pow( x, n )

べき乗するメソッドです。値 x を n 乗します。

round メソッド

構文
Math.round( x )

四捨五入するメソッドです。値 x を四捨五入で整数にします。

今回紹介した BMI計算の入力フォームでは、BMI値を小数点第二位まで表示させるため、100倍してから round メソッドで四捨五入した後、100で割っています。

WordPress にHTMLを組み込む時の注意

WordPress にHTMLのコードを組み込むと、テーマに設定されているCSSの影響でサイズが反映されなかったり、勝手に改行されたりすることがあります。

サイズはCSSで指定する

WordPress の記事にHTMLのコードを組み込んだ時、あらかじめCSSでスタイルが設定されているとHTMLでサイズを指定しても反映されませんが、CSSでサイズを指定すると反映されます。

今回紹介した入力フォームでは、form タグの後ろに「style=”width: 360px;”」を付け加えているので、フォームの幅が360px に設定されています。

改行されない設定

改行したくないタグに「style=”white-space: nowrap;”」を付け加えると改行されなくなります。

JavaScript のコードは記事の先頭に置かない

WordPress の記事の先頭のほうに scriptタグを使って JavaScript のコードを記述すると、記事のプレビュー（このページでは下の関連記事の文章）に JavaScript のコードが表示されてしまいます。
JavaScript を組み込んだページを作成するときは、JavaScript のコードを文頭から少し離して配置しましょう。