« インフルエンザ薬　タミフルの危険性 | メイン | Prototype.js を使ってみる（２） »

2005年11月16日

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

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 を使ってみる（２）へ

投稿者 ponpon : 2005年11月16日 23:57 | 【Prototype.js】

コメント

コメントしてください




保存しますか?



画像の中に見える文字を入力してください。