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

とりあえずダウンロード

がタイムアウトで繋がらないので、 から 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 v1.5.0 の使い方

雑感

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です