フォームとJavaScript

フォームから入力したデータをJavaScriptで処理する方法を学ぶ。

例題

次のリンクからファイルをダウンロードし、ブラウザで表示し、指示に従って操作してみる。何が起こったかを観察し、どうしてそうなるのかを考える。

スクリプトと HTML

以下が上記ファイルのJavaScriptのプログラムの部分です。この例ではHTMLファイルのHEAD部に入力されています。

このプログラムはフォームで入力された文字列を受け取り、それを結合し、フォームに出力し、ブラウザの背景色を変更します。

<script type="text/javascript">
// フォームから文字データを受け取り、それを順に結合した文字列を背景色に指定する。
function shori(){
  document.fm.RGB.value = document.fm.R.value + document.fm.G.value +document.fm.B.value;
  document.bgColor = '#' + document.fm.RGB.value;
}
</script>

以下はJavaScriptで入力データを取り出せるようにするHTMLです。JavaScriptでデータを受け取れるようにname属性を指定します。ボタンを押すとJavaScriptのプログラムが実行されるようにonclick属性に上記の関数の名前shori()を指定します。

<form action="" name="fm">
  .....
  <td class="u"><input name="R" type="text" size="2" maxlength="2" value="FF"></td>
  .....
    <input onclick="shori()" value="変更" type="button">
.....
  <td colspan="3">背景は<input name="RGB" type="text" size="6">に変更された。</td>

HTMLとJavaScriptの関係

上記のプログラムでフォームからデータを取り出すときのプログラムの文とHTMLの関係を図に示す。

フォーム入力で計算

次のファイルをダウンロードし、ブラウザで表示させ、数値を入力します。正しい結果が得られるか確認し、得られない場合の理由を考えます。

formtest.html(318)

formtest2.html(230)

文字列で受け渡し

フォームから入力されたデータは数値であってもすべて文字列として扱われるため、加算をしたつもりでも文字列の結合になってしまうため、数字列を数値に変換するにはeval()という関数を使います。

変数 = eval(フォームの値)

計算

JavaScriptでは数値計算ができます。四則演算の記号(演算子)は表の記号を使う。

演算	演算子
加算	+
減算	-
乗算	*
除算	/
剰余(余り)	%

111x12は111*12、90÷4は90/4と記す。

演習肥満度計算

フォームから身長、体重を入力して標準体重と肥満度を求め、表示するホームページを作る。次のファイルをダウンロードし、空欄を埋め、動作するようにしなさい。動作を確認できたらindex.htmlにリンクを作り、サーバへアップロードする。

なお、計算式は次の通り。

標準体重=22×身長(m)×身長(m)
肥満度は体重÷標準体重×100

himando_ex.html(238)

余裕のある人

肥満度計算に関連してBMIを計算するホームページを作ってください。ファイル名はbmi.htmlとします。完成したらindex.htmlにリンクを作り、サーバへアップロードする。

BMIの計算式

体重÷(身長×身長)

フォームとJavaScript