Help us understand the problem. What is going on with this article?

JAVASCRIPTの勉強(1)

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

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

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

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

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

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

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

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

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

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

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

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

最近になってPYTHONがもてはやされるようになったのは、
やはりプログラムの解読において、
その構造をいち早く把握することが重要となる。

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

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>要素を空にするメソッドである。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした