JAVASCRIPTの勉強（１）

JAVASCRIPTを速習しようとしている。

お題としては、HTMLの表に、編集機能を足すところ

これまで本を色々見てきたが、やっぱり自分の必要な機能を
どうやって再現するのかと言う、事例を習得することが一番いい。

ソースの入手は、とりあえずGITHUBで調べまくった。
とりあえず、ワンライナーで実施しているようなライブラリ、
もしくは、自分と近いアマチュアプログラマなどを
見つけて行くのが大事だと思われる。

そうこうしている、うちにソースを発見する。

HTMLのTABLEをJSで操作する

さて、さっそくコードを読んでいくことにする。

$(document).ready(function(){
    var tdNods = $("td.edit");
    tdNods.click(tdClick);
});

おっと、いきなり$から始まっているやん。。。
この＄がついているところで、はあ？
って、つまずく以前の自分。

今となっては、＄自身がjQueryの省略形で、
このソースはjQuery.documentという風に
HTML本体を指すところは、さらっと分かるようになった。
（しかし、初めて見たら、何やこれで躓くと思う）

次のところは、関数が関数を引数とするところ・・・
これは、入れ子構造というやつで、
例えていうなら、ロシア人形のマトリョーシカみたいに
蓋を開けたら、中にもう一個蓋が入っていて、
実は最後は、もの凄い小さい人形だったりする。

プログラミングで言えば、それは変数や定数の
単一のオブジェクトになるのであるが。

JAVASCRIPTはC系の言語のため、この入れ子構造は
｛｝と（）の繰り返しオンパレードということになる。
もちろん、行の最後は；で判断する。

最近になってＰＹＴＨＯＮがもてはやされるようになったのは、
インデントで分かりやすく構造をとらえられるためであり、
やはりプログラムの解読においては、
いち早くその構造を把握することが重要である。

つまり、最初に上げたプログラム部分の構造を理解するには、
次のように書き換えてしまえば分かりやすい
（本当は脳内変換が望まれるが、最初はそこまでできないので）

jQuery.document.ready(関数);
function　関数()
{
    var tdNods = $("td.edit");
    tdNods.click(tdClick);
}

つまり文書が読めたら、関数を実行しなさい
関数の中身は、｛｝に書いてありますよ・・・
ということになる。

その次の中にも、＄が出てくるので、いちいち変換してられないので、
とりあえず＄の必要性は理解できた。

ここからは$()　→　jQuerry.()の部分で、
どのオブジェクトを選択しますか？ということだが
この（）の中を、セレクターと呼ぶ。

もともとJavascript自体が、HTML文書をDOMという
文書構造のオブジェクトで解釈しているので、
.を繋いでいくと、HTML上のどこかの場所を指すことになる。

””で囲んだ場合は、これは要素セレクタと言って、
htmlで言えば<>で囲まれる部分になる。

今回の場合は"td.edit"なので、これは＜td＞という
表の中の行を表すタグであって、
つまりは、HTMLの文書の中で、＜td＞を指す。

その後の.editというのは、.で始まる場合は、
CLASSを指すので、どこかに＜class="edit"＞というのが
あるのだろう・・・

つまりeditというクラスが設定された要素全部が、変数に入ることになる。
つまり変数は複数形の名称になっている

var tdNods = jQuery.td.edit;

その後のclickというのが、メソッドであって、このオブジェクトの上で
クリックがされたらということになる。
（）に入っているのは、引数であって

tdNods.click(tdClick);

次の行に書かれた関数を実行しなさい、ということになる。

function tdClick(){
    var td = $(this);
    var tdText = td.text();
    td.empty();
・・・
}

さてさて、こんな感じで読んでいくと、だいぶん分かりやすくなってきた。

お次は、$(this)というところだが、先ほど呼び出した関数は、
editクラス全部に反応するため、どの場所から呼ばれたのか？
を特定することはできない。

そこでthisを書くことで、呼び出し元の＜TD＞が一意に決まることになる。
td.text()は、＜TD＞要素からテキストを持ってくるメソッド
td.empty()は、＜TD＞要素を空にするメソッドである。

こんな感じで、プログラム読み取り作業は、第二部に続く。。。