- 追加された行はこの色です。
- 削除された行はこの色です。
[[html/JavaScriptのTIPS集]]
// 一覧用テンプレート
#topicpath
----
はやりのAJAXライブラリ Prototype を使ってみました。
はやりの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;}