- 2007-07-23 (月)
- JavaScript
話題 ( なのか？ ) の 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 のライセンスはどうなってるの？自由に使っても良いのかな？
関連する記事
- Newer: [ CSS ] 画面の中央にブロック要素を配置するサンプル
- Older: [ JavaScript ] 文法の覚え書き
Comments: 0
Trackback+Pingback: 0
- TrackBack URL for this entry
- http://bowz.info/1007/trackback
- Listed below are links to weblogs that reference
- [ JavaScript ] Prototype JavaScript Framework ( prototype.js ) を使ってみる from Bowz::Notebook