uhyohyo.net

JavaScript初級者から中級者になろう

基礎第六回

フォーム操作

前回より本格的にHTMLとの連携をしていきます。

今回は、その中でも簡単なほうであるフォームの操作をします。フォームとは、次のようなやつです。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="#">
      <p>
      <input type="text" size="30">
      <input type="button" value="ボタン">
      </p>
    </form>
  </body>
</html>

入力ボックスやボタンがありますね。

これとJavaScriptが提携します。次のサンプルを見てみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
    function aaa(){
      document.form1.input1.value = "test";
    }
    </script>
  </head>
  <body>
    <form action="#" name="form1">
      <p>
        <input type="text" size="30" name="input1">
        <input type="button" value="ボタン" onclick="aaa();">
      </p>
    </form>
  </body>
</html>

JavaScriptの記述が追加されたのが分かると思います。

ボタンを押すと、横の入力ボックスの文字が「test」になります。

ボタンにonclick属性があるので、クリックすると関数aaaが呼び出されるというのは分かると思います。では、そのaaa関数を見てみましょう。

その処理は1行しかありません。「document.form1.input1.value」という謎の変数に"test"を代入しています。

実は、これは変数ではなく決まった書き方で(厳密にはちょっと違いますが)、次のように書きます。

document.フォーム名.エレメント名.value

フォーム名とエレメント名ですが、タグに指定されているname属性のことです。フォーム名とは当然フォームの名前なので、formタグのname属性である"form1"があてはまります。

エレメント名ですが、エレメントとは要素のことです。つまり、フォームに属する要素を指定するということです。今回の「"input1"」はinput要素の名前ですね。

これに代入すると、表示される文字列がそれにあわせて変わるということです。変数というわけではないですが、変数と同様に扱えます。

これを用いることで、ボタンを押したら何か処理をして結果を表示するということもできますね。

よりよいフォーム操作

上で紹介したやり方は、実はよくないやり方です。よく使われているのでサンプルとして紹介しましたが、使わないようにしましょう。冒頭の「とてもレベルが低い」ものの1つです。

というのも、実は上で紹介したやり方は省略形で、もっと正式で長ったらしい書き方があるのです。

それは、このような書き方です。

document.forms["フォーム名"].elements["エレメント名"].value

違いとして、前回はフォーム名・エレメント名を"で囲みませんでしたが、今回は囲みます。

実はもっともっとよい方法もありますが、この基礎編では紹介しません。

配列

配列とは、新しい変数の種類です(これまた厳密にはやや語弊がありますが、基礎編なので仕方ありません)。サンプルを見てみます。

var aa = new Array("aaa","bbb","ccc");
alert(aa[0]);
alert(aa[1]);
alert(aa[2]);

「aaa」「bbb」「ccc」のアラートが出ます。

まず、配列とはどういうものか説明します。簡単にいうと、ひとつの変数に複数の値を代入することができるものです。複数の値が代入された変数を、配列といいます。

しかし、複数の値が入っていると使うときにどの値を使えばいいか分からないので、番号をつけて区別します。

上のサンプルの最後の3行はアラートを表示していますが、aa[0]は「aaの0番目」、同様にaa[1]は1番目、aa[2]は2番目ということです。注意してほしいのが、一番最初は1番目ではなく0番目ということです。

配列変数 概念としては、普通の変数には値を入れる箱は1つだけですが、配列変数はひとつの変数が複数の箱を持っているというイメージです。それぞれの箱に別々の値を入れることができます。このひとつひとつのの箱を、要素といいます。

さて、配列変数の作り方ですが、普通に変数に代入するのとは違った作り方をします。

変数名 = new Array(0番目,1番目,2番目,3番目 ...)

new Array( 〜 )」で値を囲みます。値は何個あっても構いません。1個や2個だけでもいいですし(1個だけでも「要素が1個の配列変数」ということになります)、10個あってもいいです。「,」で区切ります。また、普通の変数と同じように、どんなものでも入れられます。

また、配列変数を作った後で、それぞれの要素をひとつの変数のように扱うこともできます。次のような書き方です。

var aa = new Array("a","b","c");
aa[2] = "d";

このコードでは、「aaの2番目の要素」に"d"を代入しています。このように、配列変数全体でなく、ひとつひとつの要素をひとつの変数のように扱うこともできます。

改めて要素の指定の仕方を見てみると、次のようになっています。

変数名[ 数字 ]

この数字のことを、添字などといいます。意味は、「変数名数字番目」という意味になります。当然、この添字には変数も使うことができます

配列の長さ

次のサンプルを見てみます。

var aa = ["aaa","bbb"];
alert(aa.length);

「2」のアラートが出ます。

このコード、1行目から謎の文が出ています。実はこれは、配列変数を作る別の書き方です。こっちのほうが便利で、よく使われます。

変数名 = [ 0番目, 1番目, 2番目 ... ]

つまり、上のサンプルの文は

aa = new Array("aaa","bbb");

とほぼ同じ意味だということです。

さて、次の行で「aa.length」というものをアラートで表示しています。「2」が出るので、どうやらこれは「2」を表しているようです。

実は、これは配列変数aaの長さを表しています。長さとは、要素がいくつあるかということです。

つまり、この場合、配列変数aaには2つの要素があるから、「2」が表示されたというわけです。

配列変数の長さを得るには、次のように書きます。

配列変数.length

これは変数のようなもので、代入されているのは数値です。

コメント

ここで、コメントというものを解説しておきます。コメントとは、スクリプト中に書いて置くメモのようなものです。大規模なものになってくると、この部分ではどんなことをしているとか、そういったメモ書きが不可欠です。コメントがあるとないとでは、後で見た時のわかりやすさがかなり違います。

それでは、コメントの書き方を解説します。

var a = 3;	//aに3を代入
//コメント
/*コメント
コメント コメント*/
//alert(5);
alert(a);

「3」とだけアラートが出ます。

コメントには、2種類の書き方があります。一つは、行の途中に「//」を書くと、その行の終わりまでがずっとコメントになります。

もう1種類は、「/*」と「*/」で囲んだ間もコメントになります。

前者はその行だけですが、後者は複数の行にまたがることができます。

サンプルでは、1行目では文の後ろにコメントが、2行目は行の先頭からコメントで、3〜4行目は2行にまたがるコメントであることがあります。5行目もコメントです。

コメントはプログラムに影響を与えないので、このスクリプトは結局、1行目でaに3を代入し、6行目でそのaを表示するだけのプログラムということになります。

配列の利用

それでは、配列の実践的な利用を見ていきます。コメントを紹介したので、これからはコメントによる解説も交えていきます。

var members = ["鳩山由紀夫", "麻生太郎", "福田康夫", "安倍晋三", "小泉純一郎", "森喜朗"];

var i = 0;	//カウンタ
while(i < members.length){
    alert(members[i]);
    i++;
}

実行すると、配列変数membersの中身が順番にアラートで表示されます。ちなみに、「鳩山由紀夫」はこれを書いている時点で現役の内閣総理大臣です。

基礎第五回のwhile文も使われているのがわかります。解説なしでも内容がわかればかなり理解できているといえます。

まず、1行目では配列変数membersに配列を代入しています。0番目の要素が"鳩山由紀夫"、1番目の要素が"麻生太郎"・・・となっています。

さて、1行開けて変数iに0を代入しています。「カウンタ」というコメントがありますが、これは変数iがカウンタであるということをメモとして残しているわけです。このような、繰り返しのときに数が増えていき、回数や現在の番号などを表す変数がカウンタと呼ばれることがあります。

次のwhile文では、iが0で、members.lengthが6なので、この式は真です。したがって、中の処理が実行されます。

alertの引数は、members[i]です。iは0なので、0番目の要素ということになります。よって、「鳩山由紀夫」が表示されます。

次の行でiに1を足し、戻ります。members.lengthは6なので、iが5になるまでは常にwhileの式は真です。よって、members[1],members[2],.....members[5]が表示されていきます。

members[5]を表示した後、iは6になり、i < members.lengthが偽になるので、while文が終了します。

このように、カウンタと繰り返しの文を使うことで、配列変数の要素ひとつひとつに処理を行うことができます。

for文

上のサンプルでは、繰り返しにwhile文を使いました。もちろんそれでも良いのですが、このように配列を扱うのにもっとよい繰り返しの文があります。それはfor文です。

for文を使うと、上のサンプルは次のように書き換えられます。

var members = ["鳩山由紀夫", "麻生太郎", "福沢康夫", "安倍晋三", "小泉純一郎", "森喜朗"];

for(var i=0; i < members.length; i++){
    alert(members[i]);
}

for文の括弧の中には、3つのが「;」で区切られて書かれています。

1つめの式がカウンタを初期化する(0を代入する)文で、2つめの式が繰り返しの条件、3つめの式がカウンタの値を増やす文であることがわかります。{ 〜 }の中には、処理の本体部分しかありません。

これはもう配列変数を扱うときにお決まりの書き方ですが、詳しく解説します。

for( 式1 ; 式2 ; 式3 ){
    文
}

for文 まず、for文に差し掛かると、式1最初に1回だけ実行されます。for文の直前に書くのと同じです。そのため、カウンタのような変数を初期化する(0を代入する)のに適しています。

その後、式2の条件が判定され、真だと中の文を実行し、偽だとfor文を終了します。この処理は、while文と同じですね。

そして、中の処理が終わったタイミングで式3が実行されます。while文で処理の最後にあったi++;をここに移動させることができます。

その後はまた先頭に戻り、式2の条件を判定するのを繰り返します。

ちなみに、第五回で解説したbreak文・continue文も使えます。continue文を使って途中で先頭に戻った場合でも、式3は実行されます

このfor文は、配列変数とセットでよく使われる繰り返し文です。もちろんかなり便利な繰り返し文なので、他のさまざまな用途にも使えます。覚えておきましょう。