Javascriptの変数2
Javascriptの変数の勉強としてBMI計算プログラムを作成します。BMIとは体重と身長の関係から肥満度を示す体格指数のことです。
命令したい内容を考える
まずは作成するBMI計算機の仕組みを考えていきましょう。BMIの値はBMI=体重÷(身長×身長)で求めます。これを元にプログラムに必要な処理を考えていきます。最初に入力データとして計算に必要な体重や身長の値を取得する必要が。あります・つぎに入力された値を元にBMIを求める数値の演算処理が必要になります。最後に出力としてBMIの計算結果を利用者に伝える必要があります。
プログラムの流れ
入力:体重・身長の値を取得する
↓
処理:体重と身長を元にBMIの値を計算する
↓
出力:計算結果をダイアログボックスで表示する
プログラムを書く準備
css
|– style.css
js
|– app.js
index.html
プログラムを書く
1、体重のデータを取得する
app.jsにプログラムを入力していきます。まずはBMIの計算に必要な体重データを取得するための処理を記述します。変数weightを宣言して入力ダイアログボックスを表示して体重のデータを入力してもらったら戻り値をweightに代入して記憶します。これで体重データが取得できます。
1 2 3 |
// 体重の数値を得る let weight; weight = prompt('BMIを測定します。まずはあなたの体重(kg)を入力してください'); |
2、身長のデータを取得する
同じように変数heightを宣言して入力ダイアログボックスに身長のデータを入力してもらい、その戻り値をheightに代入して記憶します。これで身長のデータが取得できます。
1 2 3 |
// 身長の数値を得る let height; height = prompt('BMIを測定します。次にあなたの身長(m)を入力してください'); |
3、体重と身長からBMIを計算します
BMIは体重を身長の二乗で割ったものです。heightとheightを掛けて二乗を求めて、その結果でweightを割る式を記述して変数bmiに代入します。
1 2 3 4 5 6 7 8 |
// 体重の数値を得る let weight; weight = prompt('BMIを測定します。まずはあなたの体重(kg)を入力してください'); // 身長の数値を得る let height; height = prompt('BMIを測定します。次にあなたの身長(m)を入力してください'); // 体重と身長からBMIを計算して、警告ダイアログに表示する let bmi = weight / (height * height); |
※コメント分は無視されます
プログラム中の//という記号はコメント文の指定です。//から改行までの範囲のテキストは無視されてプログラムの動作に景況しません。なお複数行をコメントアウトを指定する場合は/*と*/で囲うことでコメントアウトできます。
4、警告ダイアログボックスに表示する
変数messageを宣言して出力する文字列データを代入します。messageを警告ダイアログボックスに出力することでりようしゃにBMIの結果を表示します。
1 2 3 4 5 6 7 8 9 10 |
// 体重の数値を得る let weight; weight = prompt('BMIを測定します。まずはあなたの体重(kg)を入力してください'); // 身長の数値を得る let height; height = prompt('BMIを測定します。次にあなたの身長(m)を入力してください'); // 体重と身長からBMIを計算して、警告ダイアログに表示する let bmi = weight / (height * height); let message = 'あなたのBMIは「' + bmi + '」です。'; alert(message); |
※エディタ上でプログラムの問題をチェックする
VSCodeにはプログラムのエラーや書き方を自動でチェックしてくれる機能が備わっています。問題のあるコードが記入されているとコードの下部に波線がついて何か問題のあることを教えてくれます。更にエディタの画面左下部分(出力)にある問題や警告が表示されて情報を教えてくれます。プログラムの最終チェックはブラウザですがエディタの機能も活用していきましょう。
5、結果を確認する
Chromeで表示してWebページを確認してください。app.jsプログラムが実行されてダイアログボックスが表示されます。意図通り動作しているか確認しましょう。