変数につまずくのはもうやめたい！

足し算プログラム作成

今までの内容を応用して、formから2つの値を入力して足し算のプログラムを作ってみます（図3）。ただし、流れが分かるように、HTMLやJavaScriptの変更箇所は最小限になるようにしています。

まずは、入力部分を2つ作成します（リスト6）。「id="text1"」と「id="text2"」の2つのテキストフィールドを作成します。それから、計算結果を表示させる領域を、「id="message"」として作成しておきます。計算を開始させるところは、今までと同じように、onclickというイベントハンドラを利用します。足し算の計算をする関数は、「readText()」です。

次に、リスト7のように、getElementByIdを使ってformのデータを今までと同じように取得して、「str_val1」「str_val2」に代入します。ここで、sumという変数を宣言していますが、これは、足し算の結果を格納するためにあらかじめ用意しておく変数です。

データを取得したら、入力値チェックをします。数値以外は排除したいので、if文を使って2つの入力値が数値の場合のみ計算するようにします。

合計を計算するときに注意するのは、formから受け取った、「str_val1」と「str_val2」の中には、文字列が入っているということです。文字列のままでは、数学の足し算をすることができません。この場合、文字列の単純な結合になってしまいます。つまり、「"2" + "2" = "22"」という処理が行なわれてします。そこで、parseFloatという関数を使って、数値（正確には浮動小数点）に変換してから、足し算を実行し、その実行結果を、sumに代入します。

足し算が終わったら、HTMLに表示する文を作成して、textMessageに代入します。最後に、innerHTMLというプロパティを使って、HTMLの書き換えを実行します。

足し算プログラムのサンプルは、index7.htmlで確認することができます。

BMIの計算プログラムを作成してみましょう

それでは今回の最終目標である、足し算プログラムを応用して、BMI計算プログラムを作成します。BMIを計算するときは、身長と体重のデータが必要になりますが、入力値が2入力になるので、上記の足し算プログラムを少しだけ修正すればすぐに作ることができます。

リスト8は、リスト7との共通部分を省略して表示しています。まず、BMIの計算結果を格納する変数（bmi)、身長データ用の変数(height)、体重用の変数(weight)、標準体重用の変数(standard)の宣言をしています。

またリスト8では、BMIの計算式「体重÷(身長 x 身長)」を「weight/(height * height)」と記述しています。「Math.round()」というものが新たに出てきました。「Math.round()」とは、括弧内の数値の小数点以下を四捨五入する機能を持つメソッドです。メソッドとは、なんらかの処理をさせるものだと理解しておけば良いでしょう。

bmiの値を10倍して、四捨五入して、再度、10で割っているのは、少数点以下第1位まで求めるためのテクニックです。

標準体重の計算値は、starndardという変数に格納して、最後にメッセージを表示させるところは、今までと全く同じ方法を使っています。計算結果は、textMessageという変数に格納していますが、ここで使っている文字列演算子「"+="」は、文字列を追加するという意味になります。「"+="」という演算子は、既に定義済みの変数に、文字列を追加していくとき使います。

今回の最終形のindex8.htmlは、実行結果を試すことができます。

いかがだったでしょうか。第1回目の内容を基礎にして、第2回目では、ユーザが入力したのデータを取得してインタラクティブなBMI計算アプリケーションを、作ってみました。ソースコードをじっくり見ながらここで説明した基礎項目を復習していただければJavaScriptが徐々に分かってくるのではないかと思います。

いよいよ最終回となる次回は、今まで紹介した内容を組み合わせて、より実践的なアプリケーションを作成していきます。