第11回 配列

配列

配列とは

同じ種類のデータがたくさん並んでいる時は、一個ずつ別の名前を付けるよりも番号を付けた方が便利なことがあります。配列は、ひとつの変数を区切ってたくさんのデータ(配列の要素と呼びます)を保存できるようにしたものです。データを保存したり取り出したりする時は、変数名[番号]という形で指定します。

練習問題 11-1(☆)

Webコンソールで次の式を順に入力してみなさい。

  • var x = ['Alice', 'Bob', 'Carol'];
  • x[0]
  • x[2]
  • x[3]
  • x[2] = 'Charlie';
  • x[2]

[ ] は次の二種類の意味で使われています。

  • カッコの中に、配列の中に入るデータそのものをコンマで区切って書きます。1行目の代入では、'Alice'という文字列、'Bob'という文字列、'Carol'という文字列の三つの要素からなる配列を変数xに保存しています。
  • x[0]のように変数の直後に書く時は、まず変数xに記憶されているのが配列である必要があります。カッコの中に書くのは、その配列の何番の要素かという数字です。x[0]xの中に['Alice', 'Bob', 'Carol']という配列が記憶されていて、その0番の要素なので'Alice'を意味します。x[2] = 'Charlie';を実行すると、2番の要素'Carol''Charlie'で置き換えます。

代入も二種類あります。

  • 1行目では配列まるごと代入しています。この時はイコールの左側は変数名だけで数字は付きません。
  • 5行目では配列の2番の要素に代入しています。他の要素には影響しません。

繰り返しと配列

配列が便利なのは、要素の何番というのを固定せずに変数に記憶しておけば、繰り返しによって変数の値を変えると次々と順番にデータを使えるところです。

カレンダーの例を考えてみましょう。日付は数字を1ずつ増やしていけばよいですが、曜日は日曜の次は月曜、その次は火曜と違う文字列を使う必要があります。繰り返しの中で日、月、火、…と使いたい場合は、あらかじめ配列に日、月、火、…という文字列を記憶しておき、0番の曜日、1番の曜日、2番の曜日、…と指定します。

練習問題 11-2(☆☆☆)
  1. 練習問題09-5でビスケットの数を増やしていったのと同じ要領で、箇条書き(ul要素)の項目(li要素)に1日、2日、3日、…と書き込みます。ファイルex11-2.htmlex11-2.jsを次のように書きなさい。

  2. 上のプログラムは次の図とどう対応するでしょうか?また、繰り返しをぐるぐる回ると、変数xの値はどう変わるでしょうか?
  3. コンソールで次の式を順に入力してみなさい。
    • var day = ['日','月','火','水','木','金','土'];
    • var n = 1;
    • day[n]
    • n = n+1;
    • day[n]
    • n = n+1;
    • day[n]
  4. ex11-2.jsを修正して、「1日(月)、2日(火)、3日(水)、…」と表示されるようにしなさい。7日以後の曜日はどう表示されるでしょうか?
  5. 7日以後も曜日を正しく表示するには、配列の中に31個の曜日を書くのもひとつの方法ですが、もっとうまいやり方があります。それは割り算の余り(%演算子)を使う方法です。コンソールで次の式を順に入力してみなさい。
    • 7 % 7
    • 8 % 7
    • 9 % 7
    • 14 % 7
    • 15 % 7
    • 21 % 7
    • 22 % 7
  6. 割り算の余りを利用して、31日まで曜日が表示されるようにしなさい。

カレンダーをもう少し実用的にしてみましょう。

練習問題 11-3(☆☆☆☆☆)
  1. 新しい入力欄を作り、そこに何月か数字を入力すると、その月の日数(28日か30日か31日)まで表示するようにしましょう。1月から12月までの日数の配列[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]を使います。
  2. もうひとつ入力欄を作り、そこに何年か数字を入力すると、正しい曜日で表示するようにしましょう。曜日の計算にはツェラーの公式を使います。
  3. 箇条書きではなく表を使ってカレンダーっぽくしてみましょう。(いちおう見本があります。授業でやってない機能を多く使っているので、あまり参考にならないかもしれませんが…)

複数のHTML要素を操作する

前にdocument.getElementById()でHTML要素を指定して中身を操作したり(innerHTML)、文字列を入力したり(value)しました。これは、id="..."で付けた名前がページの中で一箇所しかないので、どこを指しているかは一意的に決まります。

それに対して、複数のHTML要素をまとめて操作することもできます。document.getElementsByTagName()(さりげなくElementsと複数形になっていることに注意)は、カッコの中にタグ名を指定します。id="..."と違ってタグ名はページの中に同じものが何箇所も出てきますが、それ全部を指します。とりあえず全部を並べた配列を変数に保存して、後で何番のinnerHTMLとか指定して操作するのが普通です。

練習問題 11-4(☆)
  1. ブラウザでSFC-SFSのログインページを表示しなさい。
  2. ページのソースを表示し、li要素がどこに使われているか探しなさい。
  3. コンソールを開き、次の式を入力してみなさい。ページのどの部分と対応しているか分かるでしょうか?
    • var x = document.getElementsByTagName('li');
    • x[0].innerHTML
    • x[1].innerHTML
    • x[4].innerHTML
  4. ページの中でli要素が何個あったかは、配列の要素が何個あるか調べればわかります。変数xに記憶されている配列の要素の個数を調べるには、x.lengthとします。コンソールでx.lengthと入力してみなさい。
  5. スクラッチパッドを開き、次のプログラムを入力して実行してみなさい。表示はどうなるでしょうか?なぜ、そのような表示になるのか説明しなさい。
  6. input要素も同じように操作できます。スクラッチパッドで次のプログラムを入力して実行してみなさい。

実は、このページにinput要素は4個あります。4個目はtype="hidden"で画面には表示されません。画面に表示されないinput要素が何の役に立つかというと、サーバに送信するデータを保持する役目をしています。これについてはブラウザとサーバの関係を勉強しないといけませんが、それは「情報基礎2」で勉強します。

ラジオボタン

複数の選択肢から一つだけ選ぶというタイプの入力には、ラジオボタンを使います。

  • input要素のtype属性にradioを指定すると、一つのボタンができます。
  • 選択肢それぞれについて別々のinput要素を書きます。
  • どのinput要素がグループ(その中で一つだけ選ぶ)になっているかを示すために、name属性の値が同じものがグループになるという約束があります。例えば、「総合政策」、「環境情報」、「看護医療」、「1年」、「2年」、「3年」、「4年」という選択肢がある場合、「総合政策」、「環境情報」、「看護医療」のname属性には同じ値を書き、「1年」、「2年」、「3年」、「4年」のname属性にはさっきとは別の同じ値を書きます。

JavaScriptでラジオボタンのどれが押されたかを調べるには、まずページの中にあるラジオボタンを取り出さないといけません。getElementByIDだと一つのボタンしか取り出せませんし、getElementsByTagNameだとラジオボタン以外のinput要素も取り出されてしまいます。この場合はgetElementsByName(カッコの中にname属性の値を指定)を使うと、一つのグループのラジオボタンだけ集めて取り出せます。

練習問題 11-5(☆☆☆)
  1. ファイルex11-5.htmlを次のように書きなさい。
  2. ブラウザで上のファイルを表示し、ウェブコンソールで次の式を実行してみなさい。
    • var x = document.getElementsByName('faculty');
    • x[0]
    • x[0].value
    • x[1]
    • x[1].value
  3. ラジオボタンが選択されているかどうかは、ラジオボタン.checkedの値がtruefalseかでわかります。何も選択していない状態でウェブコンソールで x[0].checked を実行し、次に「総合政策」のボタンをクリックしてからもう一度 x[0].checked を実行してみなさい。
  4. truefalseかはif文の条件として使えます。まず「総合政策」をクリックした状態でウェブコンソールで次の式を実行し、次に「環境情報」をクリックした状態でもう一度実行してみなさい。
    • var f = '不明';
    • if (x[0].checked) { f = x[0].value; }
    • alert(f);
  5. ファイルex11-5.jsを次のように書き、「環境情報」をクリックした状態で「ここを押して」をクリックしてみなさい。その時のプログラムの動きを説明しなさい。
  6. 学部を表す「P」、「E」、「N」の後に学年も表示するようプログラムを修正しなさい。
チェックポイント
  • 配列とは何でしょうか?
  • x[0] はどういう意味でしょうか?
  • getElementByID, getElementsByTagName, getElementsByNameの違いは何でしょうか?