次へ→JavaScriptの記述ユーザの入力内容によって動的にボタンの無効/有効を切り替えたい場合があります。このような処理はJavaScriptを記述することで実現できます。「ログイン」ボタンを無効にするようなロジックを追加してみましょう。login.jsとします。JavaScriptの記述は、部分的にはJavaによく似てはいますが、Javaとは別の言語です。記述方法について、詳しくはWEBで調べるようにしてください。body要素にonload属性を記述する。値はJavaScriptで記述する。(今回のサンプルでは関数呼び出しを記述。input要素にonkeyup,onchange属性を記述する。値はJavaScriptで記述する。(今回のサンプルでは関数呼び出しを記述。document.getElementById(ID)関数を利用する。引数IDには入力フィールドのid属性の値を指定する。これで得られたオブジェクトのvalueプロパティが、入力フィールドの値に対応している。ボタンを有効化したい場合はremoveAttribute("disabled")を呼び出す。"disabled");alert("有効化")field.removeAttribute("disabled");ログイン画面のJavaScript実装では、さきほどのHTMLファイルにJavaScriptを書き加えてみましょう。HTMLファイルに対する変更HTMLに対する重要な変更点は以下の通りです。</script>JavaScriptファイルへの参照を追加。JavaScriptファイルへの参照はscriptタグにより記述します。onload="fieldChanged();">bodyタグにonloadハンドラを追加。読み込み完了時にfieldChanged関数を呼び出し、ボタンを無効化するようにします。onchange="fieldChanged();">inputタグに変更時ハンドラとIDを追加。onchange="fieldChanged();">inputタグに変更時ハンドラとIDを追加。id="login">inputタグにIDを追加。JavaScriptファイルの記述JavaScriptファイルは以下のように記述します。フィールド変更時の処理をおこなうためのfieldChanged関数、およびその関数から呼び出されるgetField関数を定義しています。}ブラウザには以下のように表示されます。「ユーザID」と「パスワード」に文字を入力すると、「ログイン」ボタンが有効になります。一覧画面の記述ログイン画面と同じ要領で、一覧画面を記述してみましょう。ここでは作業項目は1つとして作成していき、Servletの実装時にデータベースの内容を反映するものとします。todo.css上記のファイルを適当な場所にダウンロードし、ブラウザで表示を確認してください。ブラウザには以下のように表示されます。