とりあえずダウンロード
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 のライセンスはどうなってるの?自由に使っても良いのかな?