JavaScriptはWebページのクライアント側で様々な機能を実行させることを目的として1995年にNetscape Communications社(1998年にAOL社に買収された)が開発したスクリプト言語(簡易言語)です。 Javaという名前がついていますが、当時話題になっていたJavaにあやかって命名したとのことで、Java言語との互換性はなく、全く別の言語です。

JavaScriptは多くのWebシステムで使われており、Webアプリケーションの開発技術者には必須の技術です。 ここではWebシステムで良く使われる機能を中心に、Webアプリの開発者が最低限知っておくべき知識を解説します。 JavaScriptを理解するにはHTMLの知識が欠かせませんが、基本的なHTMLについては知っているものとします。 また最近はAjaxを実現する技術として注目を集めていますが、ここではそのような新技術については触れません。

JavaScriptの概要

図解: JavaScriptの例

JavaScriptの概要

まずJavaScriptの例を見てみましょう。 この例では太字以外のところはHTMLです。 このようにJavaScriptはHTMLに埋め込まれてWebブラウザ上で動作します。 したがってブラウザの種類や版数によって実行できる機能レベルが異なりますので、一部のブラウザでしかサポートしていないような特殊な機能は使わない、実行できるブラウザの種類や版数を明示する、などの配慮が必要です。

JavaScriptの機能として例えば、テキストボックスに数字の入力のみを許可する場合、数字以外が入力されると警告ウィンドウを表示し、再度入力をやり直させることができます。 このように入力データをクライアント側でチェックすることで、誤入力時の応答が早まるだけでなく、サーバやネットワーク負荷の軽減にもなります。 ただし、JavaScriptでチェックを行うからといってサーバ側でのチェックをなくすべきではありません。 クライアント側でJavaScriptを無効に設定していることがあるため、同じチェック処理をサーバ側でも行う必要があります。

例を見てください。 JavaScriptを利用する場合は、まずscriptタグで「type="text/javascript"」と記述します。 そしてscriptタグ内にJavaScriptのコードを記入します。 ここで <!-- と --> はHTMLのコメントの開始と終了です。 したがってJavaScriptをサポートしていないHTMLには、この間の文字列はコメント文として無視されることになります。 また // はJavaScriptの1行コメントです。 したがって、その後ろの --> はJavaScriptはコメントとして無視します。

この例ではJavaScriptの実行プログラムは「alert("JavaScript実行")」の1行だけです。 これは以下のような警告ダイアログボックスを表示する命令です。 引数の内容がメッセージとして表示されています。

[警告ダイアログ]

図解: 警告ダイアログ

JavaScriptにはこの他にもwindowの操作に関する命令があります。 主なものを示します。

windowの操作に関する主なメソッド

メソッド 概要
alert(メッセージ) 「OK」ボタンを持つ警告ダイアログを開く。
confirm(メッセージ) 「OK」と「キャンセル」の2つのボタンを持つ確認ダイアログを開く。
prompt(メッセージ,入力欄の初期メッセージ) 「OK」と「キャンセル」の2つのボタン、および入力欄を持つ入力ダイアログを開く。
open(URL) 指定したURLのページを新規ウィンドウで開く。
close() ウィンドウを閉じる。

[警告ダイアログ]

図解: 警告ダイアログ

[入力ダイアログ]

図解: 入力ダイアログ

関数の定義

前述のとおり、JavaScriptの主な用途として、入力値のチェックが挙げられます。 その際、利用者がデータを入力した上で送信ボタンを押すことで、JavaScriptプログラムが実行され、チェックが行われます。 このように利用者からのアクションに対して何らかの処理を行う場合、JavaScriptの中で関数を定義しておく必要があります。 以下は、関数の定義の例です。

図解:関数の定義

関数は上のようにHTMLのヘッダ部に定義するのが普通です。 関数を定義するにはキーワード「function」に続けて関数名(ここでは showAlert)を記述し、次に丸カッコ内に仮引数名を書きます。 この例のように仮引数がないときでもカッコは省略できません。 このあたりの規則はJavaと同じですが異なる点もあります。 それはJavaでは仮引数名の前に必ず型名を書きますが、JavaScriptでは仮引数名だけしか書かないことです。 また関数の戻り値の型も書きません。

関数内の処理は関数の呼び出しが行われない限り実行されることはありません。 したがって、上記プログラムへのアクセスが行われても、ダイアログは表示されません。

ボタンの作り方

これからボタンを押すと上で定義した関数を呼び出すことを考えて行きます。 しかし、その前にボタンの作り方を示します。 ボタンやテキストボックスのような入力要素を定義するには、まずそれらをまとめて管理するためのフォーム要素を作成します。 入力要素は画面に表示するものなので、これらはHTMLのbody部に記述します。 そしてその中にinputタグを記述していきます。

図解:ボタンの定義

inputタグでは、「type=」に続けて部品の種類を指定します。 今回は一般的なボタンを作るということで「button」と指定します。 次の「value=」に続けているのは、ボタンに描画する文字列です。 タグ中で「type=」や「value=」に引き続いて指定するこのような値を「属性(プロパティ)」と言います。 「type="button"」と書くことで「type属性にbuttonを指定した」ということになります。

これを実行すると、以下のようなボタンが表示されます。

図解:ボタン

ボタンにはこの他にサーバーに送信するときに使うsubmit(送信)ボタンや、フォーム内の入力情報をクリアするリセットボタンがあります。

利用者のアクションに応じたJavaScript実行

ではいよいよボタンと処理との結びつけです。 それはとても簡単で次のようにするだけです。

図解:ボタンと処理の結び付け

利用者のアクションに応じたJavaScript実行

つまりinputタグのonClick属性として呼び出す関数名を指定するだけです。 このプログラムを実行すると、まず「押してください」ボタンだけが存在する状態でページが表示され、「押してください」ボタンをクリックすると、ダイアログが表示されます。

なお、この例のような簡単な処理ならば、関数を定義せずonClickの属性としてalertメソッドを記述してしまってもかまいません。 すなわち onClick = "alert('押してください')" とします。 このときダブルクォーテーション(")はすでに使われているので「押してください」はシングルクォーテーション(')で囲みます。 JavaScriptでは文字列を表す際に ' と " のどちらも使うことができるのです。 このようにタグ内にJavaScriptの命令を埋め込む時は、metaタグで次のようにデフォルトの言語としてJavaScriptを使うこと宣言しておくとよいでしょう。

<meta http-equiv="Content-Script-Type" content="text/javascript" />

図解:実行結果

JavaScriptにはonClickのように、何らかの出来事(イベント)をきっかけにして動作する仕組みがあります。 これをイベントハンドラーと言います。 主なイベントハンドラーの例を示します。

主なイベントハンドラーとその発生条件

部品名 イベント発生条件
onClick マウスがクリックされたとき
onKeyDown キーが押されたとき
onFocus そのオブジェクトが選択された状態になったとき
onBlur そのオブジェクトからフォーカスが外れたとき
onSubmit submit(送信)ボタンが押されたとき
onChange その部品の内容が変更されたとき
onLoad そのページが読み込まれたとき

例えばonBlurを使うと、入力を終えて次の要素にフォーカスを移した時点で、すぐにその入力内容をチェックして警告を発することができます。 またイベントハンドラーはinputタグだけでなく、アンカー(<a>)やイメージ(<img>)、太文字(<b>)など、多くの要素から呼び出すことができます。

テキストボックスとその入力内容の取得

データを入力するためのテキストボックスを作り、そこに入力されたデータをチェックすることを考えましょう。 それには、入力データをJavaScriptのプログラムで読み取る必要があるので、まずその方法を示します。 データを読み取るにはフォームとテキストボックスに名前を付け、それを指定します。 次の例を見てください。

図解:テキストボックスとその入力内容の読み取り

テキストボックスを表示するにはボタンと同じようにinputタグを使います。 inputタグのtype属性としてtextを指定することでテキストボックスが表示されます。 フォームとinputの名前はname属性で指定します。 ここではフォーム名として「myform」、テキストボックス名として「indata」としました。

JavaScriptで入力データを取得するには、ここで定義した名前を利用します。 showAlert関数の引数を見てください。 初めにdocumentと記述します。 documentは画面に表示するページの様々な情報を保持しているオブジェクトですので、入力要素を指定するときにはいつも指定します。 引き続いてフォーム名、テキストボックス名、キーワード「value」をピリオドで区切って指定します。 valueはテキストボックス内のデータそのものを指し示す「属性」です。 これによってテスキトボックスに入力された情報が警告ダイアログに表示されることになります。 したがってプログラムを実行すると、以下のようになります。

図解:実行結果

入力値が指定数値範囲内かどうかのチェック

日付や年齢など、数値データの入力を行う際、特定範囲の数値データのみを受け付けたいことがあります。 その際、Java言語と同様、比較演算子(『>』や『<=』など)や論理演算子(『&&』や『||』など)とif文を利用することで、チェックすることができます。

図解:入力データのチェック

上記のプログラムでvarはvariantの略で変数のことです。 var dtでdtという変数を宣言しています。 JavaScriptはJavaと違って「型に寛容」な言語であり、変数が文字か数値かなどと指定する必要はありません。 それどころか実はvarと書かずに直接dtから始めてもエラーにはなりません。

ここではdtに入力データの値を代入して、次のif文で評価しています。 比較演算と論理演算は、結果としてtrueまたはfalseを返します。 上記プログラムの場合、0未満または100超過の入力であればtrueを、0以上かつ100以下の入力であればfalseを返します。 そして、if文の働きにより、前者の場合にのみダイアログを表示します。

このプログラムを実行すると、次のようになります。

図解:実行結果

実際には、この他にも様々なチェックが必要かもしれません。 よく行なわれるチェックとその確認方法を示します。

入力データが数値である isNaNメソッドを使う。 このメソッドはisNaN(dt) とすると引数が数値でなければtrueを返す。 NaNはNot a Numberの略。
「何か」が入力されている 空文字の文字列 ("") と等しいことを調べる。 具体的にはif( dt == "" ) のようにする。

エラー入力時にリクエストを送信しない方法

これまで紹介してきた方法により、入力が不正であればダイアログを開くことができます。 しかしこのままではダイアログを閉じると、不正な入力データがサーバへ送信されてしまいます。 不正でない場合のみ送信を行うためには、以下のようにプログラムを記述します。

図解:エラー入力時のリクエスト送信制御

図解:result.html

ここでのポイントは3つです。

  1. checkData関数で戻り値を返します。 数値が範囲外ならfalse、範囲内ならtrueとします。
  2. formタグでonSubmit属性とaction属性を記述します。 前者は、submitボタンを押した場合に行なう動作の指定です。 上記プログラムでは、ボタンを押すとcheckData関数を呼び出し、戻り値がtrueの場合のみリクエストが送信されます。 ここで「return」を記述し忘れると、戻り値がfalseでもリクエストが送信されますので注意が必要です。
    次のaction属性はリクエストの送信先の指定です。 このプログラムを実行すると数値が範囲内なら、ここで指定したresult.htmlが呼び出されます。 このresult.htmlは「ボタンが押されました。」と表示するだけの単純なページです。 実際には、action属性でServletやJSPを指定し、サーバ側のプログラムが呼び出されるようにします。
  3. フォーム内のボタンを定義するinputタグのtype属性がbuttonではなく、submitとなっています。 データを送信する場合について考えますので、ただのボタンではなく、submit(送信)ボタンにします。 必ずしもsubmitボタンにする必要はありませんが、典型的なやり方としてご紹介しました。

主な入力要素とその操作

HTML画面の入力要素としてこれまでにボタンとテキストボックスについて述べました。 HTMLではこの他にも様々な入力要素が用意されています。 以下に主な入力要素とその表示例を示します。

主な入力要素

種類 名称 指定方法 説明
テキスト テキストボックス <input type="text"> 1行のテキスト入力
パスワード <input type="password"> パスワード入力
テキストエリア <textarea> 複数行のテキスト入力
ラジオ/チェック ラジオボタン <input type="radio"> ラジオボタン(択一選択)
チェックボックス <input type="checkbox"> チェックボックス(複数選択可)
選択 セレクトボックス <select> 選択ボックス
ファイル ファイル選択 <input type="file"> ファイル選択ボックス
ボタン ボタン <input type="button"> 一般的なボタン
送信ボタン <input type="submit"> 送信ボタン
リセットボタン <input type="reset"> リセットボタン

[表示例]

図解:入力要素の表示例

入力要素は「属性」を使って様々な機能を果すことができます。 以下に入力要素の操作に使用する主な属性をまとめておきます。

入力要素で使う主な属性

属性名 説明
name 要素の名前。 要素の値のセットや読み出し時に使用する。 書込不可。
type 要素の種類。 text、button、radioなど。 書込不可。
value 要素の値。 テキスト系では入力内容、ボタン系ではボタンに表示する内容。
checked ラジオボタン/チェックボックスがチェックされていることを示す。
trueやfalseを代入することもできる。
selected セレクトボックスの各要素が選択されていることを示す。
size テキストボックスの幅やセレクトボックスの高さを指定する。

テキスト系の要素はvalue属性で値を読み書きするだけで、簡単に扱えます。 しかし、ラジオボタン、チェックボックス、セレクトボックスの操作は多少複雑です。 以下にこれらの使い方の例を示します。

ラジオボタンとチェックボックス

ラジオボタン

ラジオボタンとチェックボックスは1つのことがらに関して複数の選択肢が対応するので、入力要素のグループ化が必要になります。 グループ化は複数の入力要素にname属性で同じ名前を付けることで実現します。 グループの各要素には配列としてアクセスします。 以下にラジオボタンに設定された値を取得して表示するプログラムを示します。 checked属性やvalue属性の使い方を確認してください。

図解:ラジオボタンとその指定内容の取得

チェックボックスも同様ですが、複数選択されていることがあるので、その考慮が必要です。

セレクトボックス(単一選択型)

セレクトボックスは他の入力要素のようにinputタグで指定するのではなく、selectタグで記述します。 選択肢はoptionタグで1つずつ記述します。 セレクトボックスはvalue属性を参照することで、選択結果を取得することができるので、入力値を読み取るプログラムはラジオボタンに比べてずっと簡単です。 以下にセレクトボックスのプログラム例を示します。

図解:セレクトボックスとその指定内容の取得

セレクトボックス(複数選択型)

セレクトボックスはmultiple属性を指定することで、複数選択を許すことができます。 またsize属性を指定することで複数行表示することもできます。 複数選択の場合は選択結果をvalue属性では取得できないので、ラジオボタンのプログラムで示したように1要素ずつ調べていかねばなりません。 ただし、各要素が選択されているかを調べるために、ラジオボタンではchecked属性を使いましたが、セレクトボックスではselected属性を使います。 以下に複数選択型のセレクトボックスを使ったプログラムを示します。

図解:選択可能なセレクトボックスとその選択内容の取得

確認問題

(1) HTML内にJavaScriptを記述するときに使うタグと属性を挙げてください。
(2) メッセージとOKボタンを表示するダイアログボックスの名前とそれを表示させるメソッド名は何ですか。 メッセージとOKボタンに加えてキャンセルボタンも表示するダイアログの名前とそれを表示させるメソッド名も示してください。
(3) ボタンを押したときの処理を指定するイベントハンドラーを2つ挙げてください。
(4) JavaScriptのプログラムがテキストボックスに記入された値を取得するために使用する属性は何ですか。
(5) ラジオボタンがチェックされていることを示す属性は何ですか。
(6) セレクトボックスに表示する選択肢の情報を記述するタグは何ですか。

解答

(1) scriptタグのtype属性
(2) 警告ダイアログ、alert、確認ダイアログ、confirm
(3) onClick、onSubmit
(4) value属性
(5) checked属性
(6) optionタグ
ページの先頭へ