初心者のためのホームページ作り 第109号

初心者のためのホームページ作り

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

<第109号> 今週のおさらい
               毎週金曜日配信 What's New 2005年1月5日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ JavaScript講座  第23回 --- Form/Elementオブジェクト
JavaScript講座 --- Formオブジェクト
アンケートや質問、意見などを扱うフォームは、HTMLタグの formタグによって形成されます。そこには様々なタイプの入力フィールドがあり、Formオブジェクトはそうしたフォーム全体や様々な入力フィールドをオブジェクトとして活用します。
Formオブジェクトの最上位オブジェクトは windowオブジェクトですが、下位に Elementオブジェクトを内包し、そのまた下位に11個のオブジェクトを持っています。
下図は Formオブジェクトの階層を示したもので、上位オブジェクトとして Formがあり、その直下に Elementオブジェクトが位置します。Elementオブジェクトの下位層に11個のオブジェクトが定義され、その中の Selectオブジェクトには Option

Formオブジェクトの階層図

なお、下位オブジェクトを利用する際には、そのオブジェクト名を記述する必要がありません。各入力フィールドに対応したオブジェクトが自動的に割り当てられるので、メソッドあるいはプロパティのみ明示すれば適応されます。
Form、および Elementオブジェクトの使い方
Formオブジェクトは、HTML構文のフォームをオブジェクトとして扱うため、最低1つ以上のフォームが必要です。ファームを扱うスクリプトを作成するためには、formタグに name属性で、フォームの名前を振る必要があります。
もし、名前がなければ最初に出現するフォーム要素が対応されます。
例文
<form name="myForm">
Elementオブジェクトは、フォーム内に配置される各種入力フィールドを対象とします。つまり、テキスト入力フィールドやチェックボックス、ラジオボタン、あるいはメニュー選択フィールドなど様々なフォーム構成部品を Elementオブジェクトとして扱います。
Elementオブジェクトとして扱う入力フィールドは、その要素名 (name属性で定義した名前)、あるいは入力フィールドの出現順番を割り当てます。順番は最初の入力フィールドが 0 であることに注意してください。
Elementオブジェクトの書式は以下のとおりです。
document.フォーム名.elements[順番号].メソッド (あるいはプロパティ)

具体例
  document.myForm.elements[0].focus();
Formオブジェクトのサンプル
以下の構文は入力された値を条件分岐によってメッセージを出すスクリプトです。入力された値の取り出し方法で Form、Elementオブジェクトを使っています。
ヘッダ部に記述
  <script type="text/javascript">
  <!--
  function myAge(){
   var a=document.myForm.age.value;
   if(a<=25) {
   alert("お若くて羨ましいです!");
   }
    else if(a<=26 && a>=32) {
    alert("そろそろ責任が問われる時期ですね。");
    }
    else {
    alert("もう若くありませんね、同情します。");
   }
 }
//-->
</script>

body部に記述
  <form name="myForm">
  <p>あなたの年齢を入力してください。
  <input type="text" name="age">
  <input type="button" value="実行" onclick="myAge()">
  </p>
  </form>
上記サンプルの実行結果


This page is Valid HTML 4.01! 初版公開日 2005年1月7日
Copyright(C) 2002-2005 banban@scollabo.com