[ JavaScript ] Prototype JavaScript Framework ( prototype.js ) を使ってみる

スポンサードリンク

話題 ( なのか? ) の Prototype JavaScript Framework ( prototype.js ) を使ってみました。

とりあえずダウンロード

http://prototype.conio.net/ がタイムアウトで繋がらないので、http://www.prototypejs.org/ から version 1.5.1.1 をダウンロード。こっちが本家なんだろうか?

prototype.js の設置方法

prototype.js を使う HTML の head 要素内へ次の様に記述します。

<script src="prototype.js" type="text/javascript"></script>
  • スクリプトまでのパスは環境に合わせて適当に設定。
  • 文字コードは UTF-8 ( BOM 付き ) で保存する事。

Dreamweaver CS3 では、[ 修正 ] – [ ページプロパティ ] – [ タイトル / エンコーディング ] で BOM 付きにできます。私の愛用しているテキストエディタ 「 mi 」 の場合は、[ モードの設定 ] – [ エンコーディング ] – [ UTF-8 保存時 BOM を付ける ] と言うチェックボックスがあるのでチェックしておく。

ココから prototype.js 実践編

サンプルを作って試してみます。

テキストファイルを読み込んで指定した要素内に表示する

以下のソースを HTML の body 要素内に記述。

<input type="button" value="読み込み" onclick="new Ajax.Updater('display','test.txt',{method: 'get'});" />
<p id="display">ここの内容が書き換わります。</p>

適当な文字列を書いたテキストファイルを用意し、UTF-8 ( BOM 付き ) で保存。ファル名は 「 test.txt 」 にする。HTML ファイルをブラウザで開き、フォームのボタンを押すと、id="display" を指定した要素の中身が書き変わります。

このサンプルでは、Ajax.Updater と言うクラスを使っています。パラメーターは左から…

  • 書き換える要素の ID
  • 読み込むファイルの URL
  • GET メソッドを使用 ( オプション )

となっています。

参考にさせてもらったページは、prototype.js を使ってみる 1 です。ありがとうございます。

指定 id のエレメントを取得

document.getElementById(id) を簡略化して書く事ができるみたい。

<body onLoad="alert(document.getElementById('test').innerHTML);">
<div id="test">サンプルテキスト</div>
</body>

本来、上の様に書く所を、下の様に簡略化できる。

<body onLoad="alert($('test').innerHTML);">
<div id="test">サンプルテキスト</div>
</body>

※ サンプルコード内で使われている innerHTML と言うのは、HTML の中身と言う意味らしい。

Event.observe を使ってイベントを追加する

prototype.js の Event.observe を使えば、 とかいちいち書かなくても onload イベントなどを追加する事ができるらしい。 ちなみに、prototype.lite.js では、Event.observe が使えないみたい。

HTML ( sample-03.html )

<script src="prototype.js" type="text/javascript"></script>
<script src="sample-03.js" type="text/javascript"></script>

JavaScript ( sample-03.js )

// ページを読み込んだ時にスクリプトを実行
Event.observe(window, "load", test_msg, false);
// メッセージを表示する
function test_msg () {
    alert("テストのメッセージ")
}

参考 : prototype.js を使ってみる 2-Event.observe [ to-R ]

詳しい説明のあるページ

雑感

  • prototype.js のライセンスはどうなってるの?自由に使っても良いのかな?

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。