フォームの操作-2
ステップ17では、ラジオボタンやセレクトボックスをJavaScriptで操作する方法を学習します。これらのオブジェクトもプロパティで各種操作を行います。
17.1 ラジオボタン
<input type="radio" …>により作成されたラジオボタンは、Radioオブジェクトとして管理されます。このオブジェクトでよく利用されるプロパティは、以下のとおりです。
■Checkboxオブジェクトの主なプロパティ
| プロパティ | 値 | 指定内容 |
|---|---|---|
| checked | true/false | 選択の有無 |
| defaultChecked | true/false | 選択の有無の初期値 |
| value | （文字） | ラジオボタンの値(HTMLのvalue属性) |
| name | （文字） | オブジェクトの名前 |
| length | （数値） | 同じ名前のラジオボタンの数 |
| type | checkbox | オブジェクトのタイプ |
なお、ラジオボタンでは、複数のラジオボタンに同じ名前を付ける場合が多くあります。この場合にRadioオブジェクトを名前で指定するには、その名前を配列として扱います。たとえば、ラジオボタン群の名前が“iro”であった場合、各オブジェクト名は以下のようになります。
17.2 ラジオボタンの活用例
Radioオブジェクトの指定に配列を利用すると、どのラジオボタンが選択されているかをfor文で確認できます。ここでは、その例として、ラジオボタンで背景色を指定できるホームページのJavaScriptを紹介しておきましょう。
▼Sample17_1.html
このJavaScriptの作成ポイントは、以下のとおりです。
・10行目～17行目
関数「bgChange( )」の記述です。ラジオボタンで色を選択した後、「背景色を変更」ボタンをクリックすると、この関数が呼び出されます。
・11行目
オブジェクト名の添字は0から始まるため、添字の最大値は（ラジオボタンの数－1）になります。これを変数「imax」に代入します。
・12行目～16行目
変数「i」を0～imaxまで変化させる繰り返し処理で、全てのラジオボタンを順番に確認していきます。
・13行目～15行目
添字が[i]のラジオボタンについて、それが選択されているかを確認します。選択されていた場合は、document.bgColorにラジオボタンのvalue属性の値を代入します。各ラジオボタンのvalue属性には、あらかじめ背景色がRGBの16進数で指定されているため、この代入文でホームページの背景色を選択した色に変更できます。
17.3 セレクトボックス
<select>～<select>により作成されるセレクトボックスは、Selectオブジェクトとして管理されます。このオブジェクトでよく利用されるプロパティは、以下のとおりです。
■Selectオブジェクトの主なプロパティ
| プロパティ | 値 | 指定内容 |
|---|---|---|
| selectedIndex | （数値） | 選択されている項目の添字（0から始まります） |
| name | （文字） | オブジェクトの名前 |
| length | （数値） | セレクトボックス内の項目数（<option>～</option>の数） |
また、<select>～</select>内の<option>～<option>は、それぞれOptionオブジェクトとして管理されます。
■optionオブジェクトの主なプロパティ
| プロパティ | 値 | 指定内容 |
|---|---|---|
| text | （文字） | 項目に表示されている文字 |
| selected | true/false | 選択の有無 |
| defaultSelected | true/false | 選択の有無の初期値 |
| value | （文字） | 項目の値 |
17.4 セレクトボックスの活用例
続いては、セレクトボックスを活用したJavaScriptの例を紹介しておきましょう。以下のホームページでは、セレクトボックスから県を選択すると、その県のホームページを新しいウインドウに表示できます。
このHTMLファイルの作成ポイントは、以下のとおりです。
≪HTMLについて≫
・25～26行目
formタグに“f1”、selectタグに“links”という名前を付けていきます。このため、セレクトボックスをdocument.f1.linksのオブジェクト名で指定できます。また、selectタグにonChangeイベントを追加し、選択項目が変更された際に関数「OpenLinks( )」を呼び出します。
・27～35行目
セレクトボックス内に表示する項目を指定します。各県のvalue属性には、その県のホームページのURLを指定しておきます。
≪JavaScriptについて≫
・11～16行目
セレクトボックスの選択項目が変更された際に呼び出される関数「OpenLink( )」の記述です。
・12行目
selectedIndexプロパティを利用し、セレクトボックスで選択された項目の添字を変数「n」に代入します。
・13行目
「n」が0の場合、セレクトボックスの一番上にある「県を選択」が選択されたことになります。この場合は何も処理を行わないので、「n」が0以外という条件で処理を分岐します。
・14行目
「n」が0出なかった場合は、window.open( )で新しいウィンドウを開きます。表示するホームページのURLは、Optionオブジェクトの値（value属性）を利用します。選択された項目の添字は「n」に代入されているため、カッコ内にdocument.f1.links.options[n].valueと記述すると、選択した県のホームページを新しいウィンドウに表示できます。
演習
（１）以下のように、表示する写真をセレクトボックスで切り替えられるホームページを作成してみましょう。
明治村の写真
 |
写真の選択 |
※この演習で使用する画像のURLは「images/meiji01.jpg」～「images/meiji04.jpg」です。
※1行2列のtableを作成し、左側のセルに写真、右側のセルにフォームを配置します。
※imgタグには、"BigPhoto"という名前指定しておきます。また、最初は「meiji01.jpg」を表示しておきます。
※selectタグにonChangeイベントを追加し、選択項目が変更された際に関数「photoChange( )」を呼び出します。
※表示する写真のファイル名は、optionタグのvalue属性に指定しておきます。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP16へ
→STEP18へ