html/Prototype のバックアップの現在との差分(No.2)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
html/Prototype へ行く。
- 1 (2007-09-08 (土) 11:38:15)
- 2 (2007-09-08 (土) 11:54:32)
追加された行はこの色です。
削除された行はこの色です。
// 一覧用テンプレート
#topicpath
----
はやりのAJAXライブラリ [[Prototype>http://www.prototypejs.org/]] を使ってみました。通常AJAXでアプリを開発するにはJavaScriptのややこしい文法やブラウザ周りの互換性などをちゃんと理解する必要があるんだけど、このライブラリを使うことでクロスブラウザなAJAXアプリを作ることができます。

**ダウンロード [#fa5cc777]
[[Prototype>http://www.prototypejs.org/]] よりprototype.jsをダウンロードします。2007/09/08時点の最新版は1.5.1みたいです。

インストールはWEBでアクセス可能な適当なパスに配置して、AJAXアプリ中で
 <script type="text/javascript" src="prototype.js"></script>
と外部スクリプトをロードするだけですね。

**サンプル [#nf0b1eb6]
ボタンにイベントリスナを登録するサンプルです。
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>index2</title>
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
 <script type="text/javascript" src="prototype.js"></script>
 <script type="text/javascript">
 <!--
 Event.observe(window, 'load', page_loaded, false);
 function page_loaded(){
   Event.observe("hogeButton", "click", item_clicked, false);
 }
 
 function item_clicked(evt) {
     var child = Event.element(evt);
     alert('The child node with id=' + child.id + ' was clicked');
     Event.stop(evt); //avoid another call related to 'parent_node' itself
 }
 -->
 </script>
 </head>
 <body>
 <form>
 <p><input type="button" id="hogeButton" value="Click1"/></p>
 </form>
 </body>
 </html>
こんな感じで、ボタンにイベントリスナを登録することができました。

ボタンをクリックしたときになんか処理させるだけだったら普通にやってもできるわけですが、非同期でサーバに問い合わせを行ったり、色々便利な関数が定義されています。


***コンテンツ一覧 [#b387555d]
#ls2

***関連リンク [#a0e7d8bd]
-[[Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications>http://www.prototypejs.org/]]
-[[Japan.internet.com デベロッパー - PrototypeでAJAX開発を効率化>http://japan.internet.com/developer/20070320/27.html]]
-[[prototype.js v1.5.0 の使い方>http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html]]
-[[[ThinkIT] 第1回：Prototype.jsを使う準備 (2/2)>http://www.thinkit.co.jp/cert/article/0702/15/1/2.htm]]
-[[クロスブラウザを制する Part 1　クロスブラウザとは - ［JavaScript］All About>http://allabout.co.jp/internet/javascript/closeup/CU2000122201/index.htm]]
-[[WEBデザイン&AJAX JavaScriptのTIPSやDOMなどのカテゴリ>http://www.u-ziq.com/blog/javascript/]]

----
SIZE(10){[[FrontPage]]}~
SIZE(10){現在のアクセス:&counter;}