JavaScriptの記述

ユーザの入力内容によって動的にボタンの無効/有効を切り替えたい場合があります。
このような処理はJavaScriptを記述することで実現できます。

ここでは、以下のように「ユーザID」と「パスワード」の両方に文字列が入力されないと 「ログイン」ボタンを無効にするようなロジックを追加してみましょう。
JavaScriptのファイル名は login.jsとします。

JavaScript説明(ログイン画面)

JavaScriptの記述は、部分的にはJavaによく似てはいますが、Javaとは別の言語です。
記述方法について、詳しくはWEBで調べるようにしてください。
ここではサンプルの実装に必要な最低限の項目について説明します。

機能 実現方法 記述例
HTMLのロードが完了した時に処理を実行する body要素にonload属性を記述する。
値はJavaScriptで記述する。(今回のサンプルでは関数呼び出しを記述。)
<body onload="alert('ロードされました!');">
入力フィールドに文字が入力された時・変更された時に処理を実行する input要素にonkeyup,onchange属性を記述する。
値はJavaScriptで記述する。(今回のサンプルでは関数呼び出しを記述。)
<input onkeyup="alert('入力されました!');"
       onchange="alert('変更されました!');">
入力フィールドの値を取得する document.getElementById(ID)関数を利用する。
引数IDには入力フィールドのid属性の値を指定する。

これで得られたオブジェクトのvalueプロパティが、入力フィールドの値に対応している。
var field = document.getElementById('ID');
alert("値は" + field.value);
ボタンを無効化/有効化する まずdocument.getElementById(ID)関数を使い、ボタンのオブジェクトを取得した後、
ボタンを無効化したい場合はsetAttribute("disabled", "disabled")を、 ボタンを有効化したい場合はremoveAttribute("disabled")を呼び出す。
var field = document.getElementById('ID');
alert("無効化");
field.setAttribute("disabled", "disabled");
alert("有効化")
field.removeAttribute("disabled");


ログイン画面のJavaScript実装

では、さきほどのHTMLファイルにJavaScriptを書き加えてみましょう。

HTMLファイルに対する変更

HTMLに対する重要な変更点は以下の通りです。

ダウンロード index.js.html
6~7行目:
  6: <script type="text/javascript" src="login.js">
  7: </script>

JavaScriptファイルへの参照を追加。
JavaScriptファイルへの参照はscriptタグにより記述します。
9行目:
  9: <body onload="fieldChanged();">

bodyタグにonloadハンドラを追加。
読み込み完了時にfieldChanged関数を呼び出し、ボタンを無効化するようにします。
20~23行目:
 20: <input type="text" name="user_id" value="" 
 21: size="24" id="user_id" 
 22: onkeyup="fieldChanged();" 
 23: onchange="fieldChanged();">

inputタグに変更時ハンドラとIDを追加。
31~34行目:
 31: <input type="password" name="password" value="" 
 32: size="24" id="password" 
 33: onkeyup="fieldChanged();" 
 34: onchange="fieldChanged();">

inputタグに変更時ハンドラとIDを追加。
39行目:
 39: <input type="submit" value="ログイン" id="login">

inputタグにIDを追加。


JavaScriptファイルの記述

JavaScriptファイルは以下のように記述します。
フィールド変更時の処理をおこなうためのfieldChanged関数、およびその関数から呼び出されるgetField関数を定義しています。

ダウンロード login.js todo.css
login.js
  1: // フィールドが変更された場合に処理する関数
  2: function fieldChanged(){
  3:     var userId = getField("user_id");
  4:     var password = getField("password");
  5:     var disabled = true;
  6:     
  7:     if (userId.value.length > 0 && password.value.length > 0) {
  8:         disabled = false;
  9:     }
 10:     
 11:     var login = getField("login");
 12:     if (disabled) {
 13:         login.setAttribute("disabled", "disabled");
 14:     }
 15:     else {
 16:         login.removeAttribute("disabled");
 17:     }
 18: }
 19: 
 20: // フィールドを取得する関数
 21: function getField(fieldName){
 22:     var field = document.getElementById(fieldName);
 23:     if (field == undefined) {
 24:         throw new Error("要素が見つかりません: " + fieldName);
 25:     }
 26:     return field;
 27: }


ブラウザには以下のように表示されます。
「ユーザID」と「パスワード」に文字を入力すると、「ログイン」ボタンが有効になります。

ログイン画面(3)


一覧画面の記述

ログイン画面と同じ要領で、一覧画面を記述してみましょう。
なお、ここでは作業項目は1つとして作成していき、Servletの実装時にデータベースの内容を反映するものとします。

HTMLレイアウトイメージ(一覧画面)

ダウンロード list.html todo.css

上記のファイルを適当な場所にダウンロードし、ブラウザで表示を確認してください。
ブラウザには以下のように表示されます。

一覧画面