はじめようJavaScript第5回 JavaScriptの基本機能 条件分岐が書けるif文 その2

今回は、前回よりも少しだけレベルを上げたものを作りましょう。身長と体重を入力してBMIを算出し、肥満度を表示してみます。

ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/

※記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じてご利用ください。

入力ダイアログについて

今までに、アラートダイアログ alert() と確認ダイアログ confirm() を紹介しましたが、今回は入力ダイアログを prompt() 使います。
入力ダイアログは、文字や数値をいれることができるダイアログで、これに身長と体重を入力してもらうことにします。

BMIの算出

BMIは言わずと知れた肥満度計算方法です。BMIは下記のように計算します。

BMIと下記の判定基準を照らし合わせて肥満度を判定することができます。

プログラミング

まずは、どういう手順が必要なのかを整理してからプログラミングに移りましょう。
手順は下記が考えられます。条件分岐が発生するのは4の項目ですね。

1. 身長を入力する入力ダイアログを表示し、身長を入力してもらう
2. 体重を入力する入力ダイアログを表示し、体重を入力してもらう
3. BMIを算出する
4. 算出されたBMIを基に肥満度を判定し、表示する

1と2に関しては下記のように書けます。
BMI算出のために身長と体重をそれぞれ変数に格納しておきます。(下記のようにすると入力した値を変数に代入することができます。)
また、入力はそれぞれメートルとキログラムなのでそれもダイアログに表示するようにします。

3のBMIの計算はこうなります。計算結果をBMI変数に格納しておくことにします。

4は、算出したBMIを基に肥満度を判定しますので、前章で学習したif文を活用します。

このようにif else文でいくつかの条件分岐を書く場合は、最初にマッチした条件のみが実行される、というのがポイントです。
なので、BMIが18.5以下の場合、25以下の場合、30以下の場合、それ以外の場合、という風にわけました。
厳密に、下記のように書いても同じく動作しますが、タイプ数が少ないほうがミスも少なく解りやすくなります。

• サンプル実行環境
  https://jsfiddle.net/kintone/27vhnxuj/1/

if文の扱いは、最初は多少混乱するかもしれませんが、なれればそこまで難しくはありません。
ただし、＝や＞などの不等式を間違って条件にしてしまうと、意図しない結果になってしまうので、今回の記事のように条件を整理してからプログラミングに入ったほうがよいと思います。

<<はじめようJavaScript第4回 JavaScriptの基本機能 条件分岐が書けるif文 その1 | はじめようJavaScript第6回 JavaScriptの基本機能 繰り返し処理をする for文>>