prototype.js のバックアップの現在との差分(No.1)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
prototype.js へ行く。
- 1 (2007-05-02 (水) 20:02:09)
追加された行はこの色です。
削除された行はこの色です。
[[HOME>http://www.trance.co.jp/]] > [[技術情報]] > [[Ajax>http://www.trance.co.jp/wiki/index.php?%B5%BB%BD%D1%BE%F0%CA%F3#e5053d02]] > prototype.js
* prototype.js [#vdbd790e]
#contents

** prototype.jsとは？ [#y0640337]
公式サイトより(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操作をする
- テンプレートを利用する

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

** サンプル [#ne39b306]
*** Ajax - new Ajax.Request()[#nb70d0b9]
もっとも簡単なAjaxのサンプルを作成する。
非同期通信を行うには、Ajax.Requestクラスを使用する。
[[サンプルの実行　サンプルファイルダウンロードもこちら>http://www.trance.co.jp/technology/sample/ajax/prototype/sample1/hello.html]]
- ''ソース''
&#187;'''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>
&br;&#187;'''&#74;avaScript - hello.js'''
 function hello() {
	new Ajax.Request(
		'hello.php', 
		{
			method:'get', 
			onSuccess:function(req){
				document.getElementById('message').innerHTML = req.responseText;
			}
		});
 
 }
&br;&#187;'''サーバサイド(PHP) - hello.php'''
 <?php
	header( "Content-Type: text/html; charset=EUC-JP");
	// クライアントに返す値
	echo "Hello Ajax!!";
 ?>
- ''解説''
&br;&#187;'''&#74;avaScript - 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() パラメータ送信 [#d6f6a6f9]
上記のサンプルでパラメータ付き送信するサンプルを作成する。
[[サンプルの実行　サンプルファイルダウンロードもこちら>http://www.trance.co.jp/technology/sample/ajax/prototype/sample2/hello.html]]
- ''ソース''
&#187;'''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>
&br;&#187;'''&#74;avaScript - 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 "";
 }
&br;&#187;'''サーバサイド(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;
 ?>

- ''解説''
&br;&#187;'''&#74;avaScript - 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の便利関数を使ってみる - $() [#c43875de]
:$()|
オブジェクトの値を取得する(document.getElementById()のショートカット)
$()の引数にid名を渡すことでオブジェクトを取得することができる。

[[サンプルの実行　サンプルファイルダウンロードもこちら>http://www.trance.co.jp/technology/sample/ajax/prototype/sample3/function1.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="../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() [#vda0e9a0]
:$F()|
フォームフィールドの値を取得する
''取得可能な入力フォーム''
'''■<input> - value属性値を取得 [type属性値]'''
-- button：ボタン
-- checkbox：チェックボックス
--- チェック有り：value値
--- チェック無し：null
-- file:ファイル選択フィールド
-- hidden：不可視フィールド
-- image：画像
-- password：パスワードフィールド
-- radio：ラジオボタン
--- チェック有り：value値
--- チェック無し：null
-- reset：リセットボタン
-- submit：サブミットボタン
-- text:テキストフィールド~
'''■タグで囲まれた値を取得'''
-- textarea：テキストエリア
-- select option：プルダウンメニュー

[[サンプルの実行　サンプルファイルダウンロードもこちら>http://www.trance.co.jp/technology/sample/ajax/prototype/sample3/function2.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="../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>