prototype.js のバックアップ(No.1) - TRANCE ARTS 技術情報Wiki

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
prototype.js へ行く。
- 1 (2007-05-02 (水) 20:02:09)

prototype.js †

prototype.js

prototype.jsとは？ †

公式サイトより(http://www.prototypejs.org/)

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

「Prototypeとは、動的Webアプリケーションを簡単に開発することを目的としたJavaScriptフレームワーク」ということである。
中身は、Ajax用クラス、DOM操作等のユーティリティ関数、基本クラスの拡張関数が用意されている。
感覚はフレームワークと言うようライブラリに近い。

具体的には、以下の操作等が簡単にできる。

Ajax(または、Sjax)をする
DOM操作をする
テンプレートを利用する

↑

ダウンロード †

http://www.prototypejs.org/download
から最新版をダウンロードする。
2007/04/27現在　version―1.5.0

↑

サンプル †

↑

Ajax - new Ajax.Request() †

もっとも簡単なAjaxのサンプルを作成する。
非同期通信を行うには、Ajax.Requestクラスを使用する。
サンプルの実行　サンプルファイルダウンロードもこちら

ソース
»HTML - hello.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
	<script language="JavaScript" type="text/javascript" src="./hello.js"></script>
	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
</head>
<body>
	<h1>prototype.js</h1>
	<p onclick="hello()">ここをクリックすると</p>
	<p id="message">ここにメッセージが表示されます</p>
	<hr>
	<h2>サンプルコードファイルダウンロード</h2>
	<ul>
		<li><a href="./hello.html">HTML - hello.html</a></li>
		<li><a href="./hello.js">JavaScript - hello.js</a></li>
		<li><a href="./hello.php">サーバ側PHP - hello.php</a></li>
	</ul>
</body>
</html>

»JavaScript - hello.js

function hello() {
	new Ajax.Request(
		'hello.php', 
		{
			method:'get', 
			onSuccess:function(req){
				document.getElementById('message').innerHTML = req.responseText;
			}
		});

}

»サーバサイド(PHP) - hello.php

<?php
	header( "Content-Type: text/html; charset=EUC-JP");
	// クライアントに返す値
	echo "Hello Ajax!!";
?>

解説

»JavaScript - hello.js

new Ajax.Request(
	'hello.php', 
	{
		method:'get', 
		onSuccess:function(req){
			$("message").innerHTML = req.responseText;
		}
	});

Ajax.Requestオブジェクトを生成する.

引数

第1引数：リクエスト先のURL

第2引数：オプション

オプション名	説明
method	通信方式(GET送信：get、POST送信：post)
onSuccess	レスポンスが受信が完了し、HTTPステータスコードが2xx系時に呼び出される関数

その他指定できるオプションの一部

オプション名	説明
asynchronous	非同期通信か(true：Ajax、false：Sjax)
postBody	POST送信時のボディ部(パラメータ変数=値&パラメータ変数=値)
onFailure	レスポンスが受信が完了し、HTTPステータスコードが2xx系以外の時に呼び出される関数
onException	XMLHttpRequestオブジェクト内でエラーが発生した際に呼び出される関数
onXYZ	「XYZ」にHTTPステータスコード(正常終了:200,ファイルが見つからない404)を記述し、記述したHTTPステータスコードが返された時に呼び出される関数

↑

Ajax - new Ajax.Request() パラメータ送信 †

上記のサンプルでパラメータ付き送信するサンプルを作成する。
サンプルの実行　サンプルファイルダウンロードもこちら

ソース
»HTML - hello.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
	<title>もっともシンプルなAjax通信 - 株式会社トランスアーツ</title>
	<script language="JavaScript" type="text/javascript" src="./hello.js"></script>
	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
</head>
<body>
	<h1>prototype.js - パラメータ送信</h1>
	<p>言語を選択すると</p>
	<form name="helloForm">
		<input type="radio" name="lang" value="ja" onclick="hello()">日本語
		<input type="radio" name="lang" value="en" onclick="hello()">英語
	</form>
	<p id="message">ここにメッセージが表示されます</p>
	<hr>
	<h2>サンプルコードファイルダウンロード</h2>
	<ul>
		<li><a href="./hello.html">HTML - hello.html</a></li>
		<li><a href="./hello.js">JavaScript - hello.js</a></li>
		<li><a href="./hello.php">サーバ側PHP - hello.php</a></li>
	</ul>
</body>
</html>

»JavaScript - hello.js

function hello() {
	var lang = getRadioValue(document.helloForm.lang);
	var reqParam = 'lang=' + lang;
	new Ajax.Request(
		'hello.php', 
		{
			method:'get', 
			parameters:reqParam,
			onSuccess:function(req){
				document.getElementById('message').innerHTML = req.responseText;
			}
		});
}
 
/**
* 選択されているラジオボタンの値を取得する.
* @param {Object} radioButton
*/
function getRadioValue(radioButton) {
	var radioNum = radioButton.length;
	for (var i = 0; i < radioNum; i++) {
		if (radioButton[i].checked) {
			return radioButton[i].value;
		}
	}
	return "";
}

»サーバサイド(PHP) - hello.php

<?php
	
	$lang = $_GET['lang'];
	
	$message = null;
	if ("ja" == $lang) {
		$message = "こんにちは、Ajax";
	} else if ("en" == $lang){
		$message = "Hello Ajax!!";
	} else {
		$message = "言語を選択してください";
	}
	
	header( "Content-Type: text/html; charset=EUC-JP");
	echo $message;
?>

解説

»JavaScript - hello.js

	new Ajax.Request(
		'hello.php', 
		{
			method:'get', 
			parameters:reqParam,
			onSuccess:function(req){
				document.getElementById('message').innerHTML = req.responseText;
			}
		});

Ajax.Requestクラスのコンストラクタのオプション指定の中で、「parameters」を定義し、パラメータを設定する。

↑

prototype.jsの便利関数を使ってみる - $() †

$(): オブジェクトの値を取得する(document.getElementById()のショートカット)
$()の引数にid名を渡すことでオブジェクトを取得することができる。

サンプルの実行　サンプルファイルダウンロードもこちら

ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
	<script>

function func1 () {
	var message = $('message').innerHTML;
	alert(message);
}
	</script>
</head>
<body>
	<h1>便利な関数</h1>
	<h2>$()</h2>
	<p onclick="func1()">ここをクリックすると</p>
	<p id="message">ここに書かれている文字がメッセージウィンドウに表示されます。</p>
	<hr>
	<h2>サンプルコードファイルダウンロード</h2>
	<ul>
		<li><a href="./function1.html">HTML&JavaScript - function1.html</a></li>
	</ul>
</body>
</html>

↑

prototype.jsの便利関数を使ってみる - $F() †

$F()

フォームフィールドの値を取得する
取得可能な入力フォーム
■<input> - value属性値を取得 [type属性値]

button：ボタン
checkbox：チェックボックス
- チェック有り：value値
- チェック無し：null
file:ファイル選択フィールド
hidden：不可視フィールド
image：画像
password：パスワードフィールド
radio：ラジオボタン
- チェック有り：value値
- チェック無し：null
reset：リセットボタン
submit：サブミットボタン
text:テキストフィールド

■タグで囲まれた値を取得
textarea：テキストエリア
select option：プルダウンメニュー

サンプルの実行　サンプルファイルダウンロードもこちら

ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
	<script>

function func21 () {
	var text = $F('text');
	alert(text);
}

function func22 () {
	var text = $F('test');
	alert(text);
}

	</script>
</head>
<body>
	<h1>便利な関数</h1>
	<h2>$F()</h2>
	<h3>テキストフィールド</h3>
	<p onclick="func21()">ここをクリックすると</p>
	<p id="message">テキストボックスに書かれている文字がメッセージウィンドウに表示されます。</p>
	<form>
		<input id="text" type="text" value="test"/>
	</form>
	<br />
	<br />
	<h3>プルダウンメニュー</h3>
	<p onclick="func22()">ここをクリックすると</p>
	<p id="message">テキストボックスに書かれている文字がメッセージウィンドウに表示されます。</p>
	<form>
		<select id="test">
			<option>項目A</option>
			<option>項目B</option>
			<option>項目C</option>
			<option>項目D</option>
		</select>		
	</form>
	<hr>
	<h2>サンプルコードファイルダウンロード</h2>
	<ul>
		<li><a href="./function2.html">HTML&JavaScript - function2.html</a></li>
	</ul>
</body>
</html>