Prototype.js を使ってみる（１）

Posted on by

Prototype という JavaScript フレームワークが人気ですね。

私のブログにも一つ Prototype に関するエントリーがあるのですが、
最近もっとも人気のエントリーになっています。
まぁ、解説とかしていないので、役に立ちませんが。
Prototype の解説がほとんど無いというのが原因なのかなぁ～と思いました。

そんなわけで、役に立つエントリーを書いておこうかなと思いました。


まず、初めに、Prototype について知らない人の為に簡単に説明しますと、
動的なWebサイトを容易に作るための部品で、
JavaScript で作成されています。
ファイルは prototype.js という一つのファイルのみです。
今も改良が加えられていて、時々バージョンアップしています。
その時は、prototype-1.3.1.js などのようにバージョンの名前がついていたりします。
Prototype のサイトでダウンロード出来ます。

一応、英語ですが、非公式の解説サイトもあります。

この解説の通りにやれば使えるはずですが、
検証がてら、順番にやってみようかなと思います。
そのうち、解説の和訳版を作るのもいいかなぁ～と思ったり。

まずは、Prototype のサイトへの組み込み方です。
微妙にアレンジを加えました。

<script src=”prototype.js” type=”text/javascript”></script>

src には自分のサイトの prototype.js の URL を記述すればよいです。
prototype.js にバージョン名が付いている時は、それに合わせるか、
ファイル名を変更してくださいね。
なんとなくですが、 type=”text/javascript” を加えてみました。

prototype.js を組み込むと、そのページ内では
“id” 属性で指定した名前で要素を参照する為の document.getElementById を
$ と書き換えることが出来ます。

以下のサンプルでは、
document.getElementById(‘myDiv’) と $(‘myDiv’) は同じものを示しています。
どちらも、id 属性 “myDiv” である

<div id=”myDiv“>…</div>

の内容である

<p>TEST</p>

が表示されます。

alert(div.innerHTML);

を、

alert($(‘myDiv’).innerHTML);

とすることも可能です。

複数の “id” 属性を指定したい場合は、以下のサンプルのように

var divs = $(‘myDiv’, ‘myVal’);

と複数していすれば、divs は配列として作成されるので、

divs[0].innerHTML

のように指定することが出来ます。

また、以下のサンプルのように

$F(‘userName’)

とすることで、”id” 属性 “userName” の値（value）を取得できます。

document.getElementById(‘userName’).value

と同等の意味を持ちます。

ただし、$F は配列にすることは出来ませんでした。

このように省略して書けるだけでも、だいぶ違うと思います。
Microsoft の Ajax フレームワーク Atlas でも $ が同じ意味で使えるようですよ。

以上、とりあえず１回目ということでかなり初歩的なことの説明でした。

→ Prototype.js を使ってみる（２）へ

Comments are closed.