第 5 回 JavaScript の基本機能 条件分岐が書ける if 文 その2
JavaScript初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
今回は、
前回よりも少しだけレベルを上げたものを作りましょう。
身長と体重を入力してBMIを算出し、肥満度を表示してみます。
以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。
入力ダイアログについて
今までに、アラートダイアログalert()
と確認ダイアログconfirm()
を紹介しましたが、今回は入力ダイアログprompt()
を使います。
入力ダイアログは、文字や数値をいれることができるダイアログで、これに身長と体重を入力してもらうことにします。
BMI の算出
BMIはいわずと知れた肥満度の計算方法です。BMIは次のように計算します。
|
|
この式を、体重をweight 、身長をheightとして、JavaScriptで表すと以下のようになります。
|
|
/
は、四則演算の「÷」を表す演算子で、**
はべき乗(nの2乗など)を表す演算子です。
四則演算において「÷(/
)」よりも「べき乗(**
)」の方が、計算の優先度が高いです。
weight / height
よりも先にheight ** 2
が計算されるため、次のようにheight ** 2
を()
でくくる必要はありません。
|
|
BMIと次の判定基準を照らし合わせて肥満度を判定できます。
|
|
プログラミング
まずは、どういう手順が必要なのかを整理してからプログラミングに移りましょう。
手順は下記が考えられます。条件分岐が発生するのは4の項目ですね。
- 身長を入力する入力ダイアログを表示し、身長を入力してもらう。
- 体重を入力する入力ダイアログを表示し、体重を入力してもらう。
- BMIを算出する。
- 算出されたBMIを基に肥満度を判定し、表示する。
1と2に関しては次のように書けます。
BMI算出のために身長と体重をそれぞれ変数に格納しておきます。(次のようにすると入力した値を変数に代入できます)
また、入力はそれぞれメートルとキログラムなので、単位もダイアログに表示します。
|
|
3のBMIの計算は前節での説明どおり、次のようになります。
計算結果はBMI
変数に格納しておきます。
|
|
4は、算出したBMIを基に肥満度を判定しますので、前章で学習したif文を活用します。
|
|
このようにif else
文でいくつかの条件分岐を書く場合は、最初にマッチした条件のみが実行される、というのがポイントです。
なので、BMIが18.5以下の場合、25以下の場合、30以下の場合、それ以外の場合、という風にわけました。
厳密に、次のように書いても同じく動作しますが、タイプ数の少ないほうがミスも少なくわかりやすくなります。
|
|
サンプル実行環境
https://jsfiddle.net/kintone/27vhnxuj/6/
まとめ
最初のうちはif文の書き方で多少混乱するかもしれませんが、慣れればそこまで難しくはありません。
ただし、=
や>
などの不等式を間違って条件にしてしまうと、意図しない結果になってしまうので、今回の記事のように条件を整理してからプログラミングに入ったほうがよいと思います。