## とりあえずダウンロード
## prototype.js の設置方法
prototype.js を使う HTML の head 要素内へ次の様に記述します。
– スクリプトまでのパスは環境に合わせて適当に設定。
– 文字コードは UTF-8 ( BOM 付き ) で保存する事。
Dreamweaver CS3 では、[ 修正 ] – [ ページプロパティ ] – [ タイトル / エンコーディング ] で BOM 付きにできます。私の愛用しているテキストエディタ ｢ mi ｣ の場合は、[ モードの設定 ] – [ エンコーディング ] – [ UTF-8 保存時 BOM を付ける ] と言うチェックボックスがあるのでチェックしておく。
## ココから prototype.js 実践編
サンプルを作って試してみます。
### テキストファイルを読み込んで指定した要素内に表示する
以下のソースを HTML の body 要素内に記述。
ここの内容が書き換わります。
適当な文字列を書いたテキストファイルを用意し、UTF-8 ( BOM 付き ) で保存。ファル名は ｢ test.txt ｣ にする。HTML ファイルをブラウザで開き、フォームのボタンを押すと、`id=”display”` を指定した要素の中身が書き変わります。
– [サンプルファイル](https://bowz.info/wp-content/uploads/js/001/sample-01.html)
このサンプルでは、Ajax.Updater と言うクラスを使っています。パラメーターは左から…
– 書き換える要素の ID
– 読み込むファイルの URL
– GET メソッドを使用 ( オプション )
となっています。
参考にさせてもらったページは、[prototype.js を使ってみる 1](http://blog.webcreativepark.net/2006/06/11-142620.html) です。ありがとうございます。
### 指定 id のエレメントを取得
document.getElementById(id) を簡略化して書く事ができるみたい。
本来、上の様に書く所を、下の様に簡略化できる。
※ サンプルコード内で使われている innerHTML と言うのは、HTML の中身と言う意味らしい。
### Event.observe を使ってイベントを追加する
prototype.js の Event.observe を使えば、
とかいちいち書かなくても onload イベントなどを追加する事ができるらしい。ちなみに、prototype.lite.js では、Event.observe が使えないみたい。
#### HTML ( sample-03.html )
#### JavaScript ( sample-03.js )
// ページを読み込んだ時にスクリプトを実行
Event.observe(window, “load”, test_msg, false);
// メッセージを表示する
function test_msg () {
alert(“テストのメッセージ”)
}
– [サンプルファイル](https://bowz.info/wp-content/uploads/js/001/sample-03.html)
参考 : prototype.js を使ってみる 2-Event.observe [ to-R ]
## 詳しい説明のあるページ
– [prototype.js v1.5.0 の使い方](http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html)
## 雑感
– prototype.js のライセンスはどうなってるの？自由に使っても良いのかな？
