配列
ステップ06では、１つの変数名で複数の値を扱える配列について学習します。配列は、繰り替えし（for）や関数の引数と組み合わせると、大変便利な変数として活用できます。まずは、配列の基本的な利用方法から学習していきましょう。
6.1 配列とは…？
配列は、１つの名前で複数のデータ（数値または文字）を扱える変数となります。１つひとつの変数を箱として考えた場合、以下のようなイラストをイメージすると配列を理解しやすくなると思います。
配列を利用して変数を扱う場合は、a[2]のように配列名[添字]と記述し、それぞれの変数（箱）をしていします。添字は０から始まり、順に１、２、３、…と付けられていきます。このため、変数（箱）の数より１つ小さい数字が添字の最大値となります。
6.2 配列の宣言
それでは、実際に配列を利用する方法を解説していきましょう。配列を利用する際は、最初に以下のように記述して配列の宣言を行います。変数の宣言と同様に、最初のvarは記述を省略しても構いません。
var 配列名 = new Array(変数の数);
たとえば、「var a = new Array(5);」と記述した場合、「a」という配列名で、a[0]、a[1]、a[2]、a[3]、a[4]という５つの変数を扱えるようになります。ここで注意しなければいけないのが、配列の添字が０から始まることです。「var a = new Array(5);」と宣言しても、a[5]は利用できません。配列の利用に慣れるまでは、この点を勘違いしないように十分に注意してください。
6.3 配列に値を代入する
続いて、配列に値を代入する方法を解説します。値の代入方法は変数の場合と同じで、「=」（イコール）を使って左辺に配列[添字]、右辺に値（または数式）を記述します。
また、以下のように配列の宣言と値の代入を同時に記述する方法もあります。この場合、Array( )のカッコ内に記述した値が順に代入されます。以下の例では、a[0]=5、a[1]=2、a[2]=15という値が代入された配列を作成できます。
もちろん、配列に文字を代入することも可能です。以下のように、同じ配列内に数値と文字を混在させても構いせん。
ワンポイント
JavaScriptでは、2次元の配列も作成できます。2次元の配列を宣言する場合は、まず１次元の配列を宣言します。続いて、その配列内の各要素（変数）に対して再び配列の宣言を行います。たとえば、次のページのように配列の宣言でvarを記述すると、エラーが発生してしまいます。また、２次元配列に値を代入する際は、配列名[添字][添字]という具合に[ ]を2回記述する必要があります。
演習
（１）以下のように配列「a」「b」を宣言し、ボタンのクリックによりa[0]×b[0]、a[1]×b[1]、a[2]×b[2]の演算結果を表示するホームページを作成してみましょう。
配列の演算
| 添字 | a | b | a×bを計算 |
|---|---|---|---|
| 0 | 5 | 33 | |
| 1 | 12 | 14 | |
| 2 | 18 | 65 |
※「kakezan0()」「kakezan1()」「kakezan2()」という３つの関数を作成し、ボタンをクリックした際に対応する関数が実行されるようにJavaScriptを記述します。
※各関数では、変数「kai」に演算結果を代入し、alert()で計算結果を表示します。
※配列「a」「b」および変数「kai」は、関数の外で宣言を行います。
※表の各セルの横幅は100ピクセルとします。また、見出しのセルの背景色は#ccccccとします。（td、thタグにcssを指定します。）
※なお、このJavaScriptオンライン教材ではcssをhtmlに直接記述してください。（本来は外部スタイルシートに記述する方が好ましいです。）
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP05へ
→STEP07へ