About JavaScript and DOM

最近、javascriptを利用することが多くなったので、しっかり勉強しようと思い今日は調べてみました。いつも本を購入しようと思っているのですが、なかなか決められず今に至っています。それで、明日買いに行こうと思っているのですが、その前にもう一度ネットを利用して勉強してみようと思ったので、記しておくことにします。


私は主にPHPを使っているのですが、まだ簡単なことしかできず、任されたwebサービスもまだまだレベルが低いものなのです。そもそも人工言語を使おうと思ったのが1年前で、2週間ほどの学習。それからというものの勉強することが出来ていませんでした。再開したのは5月くらいになります。



私の人工言語を使う感覚は自然言語を使う感覚と同じで、しっかりとした文法など勉強していなかったのです。唯一していたのがPHPとC言語です。ほかは一切していませんでした。そのため、頻繁に利用するようになる言語は、だんだん要求レベルが高くなるものを使うようになっていくので、対応できなくなり、開発効率が悪くなり、次第にモチベーションもそがれていくのでした。


そしてそれを打開するために、残されている開発時間は少ないながらも勉強をしてみることにしました。検索した記事でおお、なるほど！！と私の中で思ったものがありました。

DOM と JavaScript - 何が何をしているのか?

このページのメインである「何が何をしているのか?」までようやく来ました。自分のウェブページに埋め込んだスクリプトのうち、いったい何が DOM で、何が JavaScript なのでしょうか? それでは簡単な例で見てみましょう。この例では "anchorTags" と名付けた NodeList 中の <a> タグを全て取得しています。そしてそれぞれのアンカータグ (anchorTags NodeList のそれぞれの要素) について、その "href" 属性の値をアラートダイアログで表示します。
青い部分が JavaScript で, 赤い部分が DOM です.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of this a element is : " + anchorTags[i].href + "\n");
} 

説明

このコードの断片は、なにがコア JavaScript で、何が DOM であるかを示しています.

var anchorTags =

"anchorTags" という名前の JavaScript の変数を作っています。

document.getElementsByTagName("a")

Document インターフェイス は DOM1 Core で定義されている最初のインターフェイスで、document は Document インターフェイスを実装している主たるオブジェクトです。document はあなたのページ内にあるあらゆるものを保持しています。

DOM1 Core は Document インターフェイスにおいて getElementsByTagName() メソッドを定義しています。このメソッドは NodeList (ノードを格納する DOM 特有の配列) の形で、関数の引数に合致する全てのタグをページのソースで現れる順に取って来るものです。anchorTags 変数はここではもう NodeList です。

;

基本的な命令の終了のセミコロンです。JavaScript のものです。

[https://developer.mozilla.org/ja/The_DOM_and_JavaScriptより引用]

 いままで自然言語と同じように適当に使ってて、よく意味がわかってなかっていませんでした。でも、考えてみれば、.（ドット）が使われているので、勘が良ければオブジェクトであることに気づきますよね。。それに加えて、DOM（Document Object Model)という名称です、ちょこっとでも調べていればわかっていたはずなのに

ということで、オブジェクトということが分かり、さらによくでてくるdocument.getElementBy~　のドキュメントの意味がようやくわかりました。

上にもあるようにページ内のあらゆるものを保持しているようです。

for (var i = 0; i <

プログラミング言語における典型的な "for" ループです。これによって anchorTags NodeList に含まれるそれぞれのノードにアクセスすることができます。変数 "i" の宣言にも注目してください。これも JavaScript です。

anchorTags.length

DOM1 Core は NodeList インターフェイスにおいて length プロパティを定義しています。length プロパティは NodeList に含まれる Node の数を整数値で返します。JavaScript の配列にも length プロパティがあることにも注目してください。

; i++) {

典型的な JavaScript における変数のインクリメント演算です。

alert(

alert() は引数の文字列が入ったダイアログをポップアップする DOM のメソッドです。これは DOM レベル 0 あるいは DOM 0 と呼ばれるものの一部であるということに留意してください。DOM 0 はいくつかのブラウザでサポートされているインターフェイスの集合ですが、いかなる DOM 仕様にも含まれていません。

"Href of this a element is : " +

文字列リテラルと文字列結合演算子。JavaScript です。

anchorTags[i].href

"href" は DOM1 HTML 仕様で定義された HTMLAnchorElement インターフェイスのプロパティです。アンカー要素に href 属性があれば、その値を返します。 またここで、anchorTags[i] という JavaScript で配列の i 番目の要素にアクセスするのに用いるのと同じ構文を使っています。言語中立な "DOM 方式" で NodeList の各要素にアクセスするには、NodeList インターフェイスで定義されている item() メソッドを anchorTags.item(1).href のように用います。しかし大抵の JavaScript 実装では、単純な配列的構文を用いることができるようになっており、実際多くの人はその方法でコードを書いています。

+ "\n");

更に文字列を結合しています。最後に改行を追加しています。

}

"for" ループの終了。

[https://developer.mozilla.org/ja/The_DOM_and_JavaScriptより引用]

そして、＋が文字列結合をしてくれる演算子です。また、文字列リテラルは””で囲むことで成立します。わかりやすい記事で勉強になりました。まだまだ初心者な私ですが、引き続き勉強させていただきます。