JavaScript: table td にイベント処理を付ける (1-2)

body の onload() で初期化処理を実行する。
td.onclick= でクリックイベントの関数をつける。

セルをクリックすると色が変わる
0-0	0-1	0-2	0-3
1-0	1-1	1-2	1-3
2-0	2-1	2-2	2-3

デバッグ出力

(2009-2022/04)
動作     : 

◎ノート(2012/02)
・JavaScript で td.onclick= で処理をつける。

for (let i=0; i<a.length; i++){
    //let に注意。
    //let td では 1),2) どちらでも正常に動く。
    //var td では 2) は正常に動作しない。
    let td = a[i];
    td.onclick = function(){
        onclickTd(this); //1) this を個別の td を表す。
        //onclickTd(td); //2)
    };
}

・昔の JavaScript には let や const がなく、var のみだったので、
　1), 2) の違いに注意というのが重要な話だった。

・現在は、変数を宣言をするときには var を使わず、let を使う。
  td に再代入しないなら const の方が良い。

・(参考) var td = a[i]; で 2) onclickTd(td); にした場合。
  変数 td が 1個しか用意されず、関数 onclickTd(td) の
  引数 td は a[i] の最後の要素、(2,3) の td になる。そのため、
  どの td をクリックしても (2,3) の td に対して処理が行われる。