配列の要素に，さらに配列オブジェクトを代入することで， 多次元の配列を作ることができる．(下図参照)
上図の場合，x[i] の各々が値として配列オブジェクトを持つことになるので，
i 番目の配列オブジェクトの j 番目の変数は x[i][j] と表現される．
これは，(x[i])[j] という意味で，x[i] を
y に代入 (y = x[i];)
すると，y[j] と同じになる．(下図)
通常の (1次元の) 配列では，配列オブジェクトを生成して，変数に代入して用いるが， 2次元の配列の場合，「1次元目」の配列オブジェクトの各々の変数ごとに， 個別の配列オブジェクトを生成して代入する必要がある． したがって，例えば 10x10 の2次元配列の定義 (配列オブジェクトの生成) は，以下のようになる．
var i;
var x = new Array(10); // x[0] 〜 x[9]
for(i=0; i<10; i++) {
x[i] = new Array(10); // x[i][0] 〜 x[i][9]
}
なお，最初に配列オブジェクトをすべて生成しておこうとすれば，上のようになるが， 通常は，プログラムの進行に合わせて，流れの中で生成することも多い．
式の中での配列要素の使用や，配列要素への代入には，x[i][j]
のような表現を用いる．
先の Part 8 のタスクの 九九表 のプログラムと同様のプログラムを， 2次元配列を用いて書き換える．
以下に Part 8 のタスクの例のコードをもとにした雛形を参考に付けておく． （流れ図の例）
<title>JavaScript Sample 10-1</title>
<script type="text/javascript">
<!--
var n, m; // for の制御変数，兼，乗数
// ここで配列を用意する．
// 下の for の2重ループは，Part 8 のタスクと同じものを2つ並べてある．
// 1つは九九を計算して配列に格納するように直し，
// もう1つは配列のデータを画面に表示するように直す．
// 九九を計算して配列に格納する．画面への表示は不要．
// document.writeln('<table border>'); // これは不要
for(n=1; n<10; n++){
// document.write('<tr>'); // これは不要
for(m=1; m<10; m++){
// document.write('<td>' + (n*m) + '</td>');
// ここでは，画面表示のかわりに計算結果を配列に格納する．
}
// document.writeln('</tr>'); // これは不要
}
// document.writeln('</table>'); // これは不要
// 配列のデータを画面に表示する
document.writeln('<table border>');
for(n=1; n<10; n++){
document.write('<tr>');
for(m=1; m<10; m++){
// document.write('<td>' + (n*m) + '</td>');
// ここでは，n*m のかわりに配列のデータを画面に表示する．
}
document.writeln('</tr>');
}
document.writeln('</table>');
// -->
</script>以下に例を示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)
パスカルの三角形の上から10段を計算して表示する． パスカルの三角形のi段目は，i個の数 Pi,1 〜 Pi,i から成り， 各 Pi, j は，以下の漸化式にしたがう．
| { | |
| Pi,1 = Pi,i = 1 | |
| Pi, j = Pi-1, j-1 + Pi-1, j , (1 < j < i) |
<center> 1 <br> 1 1 <br> 1 2 1 <br> 1 3 3 1 <br> … 中略 … </center>
以下に例を示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)
| 課題番号： | 10-1 |
| 課題名： | 計算練習プログラム(3) |
| ファイル名： | task10-1.html |
| 締切： | 次回の演習の前日の18:00まで |
課題9-1 (参考) のプログラムに手を加え，一度に出題される10問が全て異なる問題となるようにする．
Moodleの課題ページからファイルを提出すること．ファイル名はすべて半角文字とする．
※ 汎用ボタンとテキストフィールド等については（その1）とその
例のページ を参照してください．
<input>
type="checkbox")
(例)
true，false
の2つの状態を取る部品．
document...checked
で，チェックボックスのチェック状態を検査・変更できる．
<title>checkbox sample</title> <script type="text/javascript"> <!-- function handler() { alert(document.f.chk1.checked); } //--> </script> <form name="f"> <input type="checkbox" name="chk1" onclick="handler();"> チェックボックス<br> <input type="button" value="チェックボタンの値" onclick="handler();"> </form>
type="radio")
(例)
複数の選択肢の中から一つを選ぶための部品． 同じグループ (その中から一つだけ選ぶ) の部品は同じ名前にしておき， 個々の部品は，配列の要素のように番号で指定する．
document..[].checked
で，チェック状態を検査・変更できる．また，
document...length
で，そのグループに属する部品の数が得られる．
あらかじめ，value 属性で値を与えておくこともできる．
type="reset")
フォームの状態を，(ページ読み込み直後の) 最初の状態に戻すボタン．
<title>radio button sample</title> <script type="text/javascript"> <!-- function handler1(rad) { alert(rad.value); } function handler2() { var i, val; for (i=0; i<document.f.rad1.length; i++) { if(document.f.rad1[i].checked) val=document.f.rad1[i].value; } document.bgColor = val; } //--> </script> <form name="f"> <input type="radio" name="rad1" value="red" onclick="handler1(this);" checked> 赤 <input type="radio" name="rad1" value="green" onclick="handler1(this);"> 緑 <input type="radio" name="rad1" value="blue" onclick="handler1(this);"> 青<br> <input type="button" value="ラジオボタンの値" onclick="handler2();"> <input type="reset" value="リセット"> </form>
<textarea>
(例)
複数行のテキストを入力編集できる部品．
cols 属性と rows 属性で，
幅と高さを指定できる．
テキストフィールドと同様に，
document...value
で値を読み取ったり書き込んだりできる．
また，(テキストフィールドも同様であるが) readonly 属性を値なしでつけておくと，
編集できないテキストエリアになる．
<title>textarea sample</title> <script type="text/javascript"> <!-- function handler1() { alert(document.f.txt1.value); } function handler2() { document.f.txt1.value = "(" + document.f.txt1.value + ")"; } //--> </script> <form name="f"> <textarea name="txt1" rows="5" cols="20"> ここでテキストが 編集できます </textarea><br> <input type="button" value="テキストエリアの値" onclick="handler1();"> <input type="button" value="カッコつけ" onclick="handler2();"> <input type="reset" value="リセット"><br> <textarea name="txt2" rows="5" cols="20" readonly> これは編集 できません </textarea><br> </form>
<select>
とオプション部品
<option>)
(例)
複数の選択肢を表わしたリストから1個 (あるいは複数個) を選ぶための部品． 詳細は下の例と参考リンクを参照すること．
<title>listbox sample</title> <script type="text/javascript"> <!-- function handler1() { alert(document.f.sel1.selectedIndex); alert(document.f.sel1.options[document.f.sel1.selectedIndex].value); } function handler2() { alert(document.f.sel2.options[document.f.sel2.selectedIndex].value); } function handler3() { var i; for (i=0; i<document.f.sel3.options.length; i++) { if (document.f.sel3.options[i].selected) alert(document.f.sel3.options[i].value); } } //--> </script> <form name="f"> <select name="sel1"> <option value="red">赤</option> <option value="green">緑</option> <option value="blue">青</option> </select> <input type="button" value="色" onclick="handler1();"> <select name="sel2" size="3"> <option value="cyan">シアン</option> <option value="magenta" selected>マゼンタ</option> <option value="yellow">イエロー</option> </select> <input type="button" value="色2" onclick="handler2();"> <select name="sel3" size="5" multiple> <option value="ne">子</option> <option value="ushi" selected>丑</option> <option value="tora" selected>寅</option> <option value="u">卯</option> <option value="tatsu">辰</option> <option value="mi">巳</option> <option value="uma">午</option> <option value="hitsuji">未</option> <option value="saru">申</option> <option value="tori">酉</option> <option value="inu">戌</option> <option value="i">亥</option> </select> <input type="button" value="干支" onclick="handler3();"><br> <input type="reset" value="リセット"> </form>