2005年12月12日
Prototype.js の結構良さそうな解説を見つけたので、
メモがてらエントリー。
http://d.hatena.ne.jp/amachang/20051123
http://d.hatena.ne.jp/amachang/20051124
http://d.hatena.ne.jp/amachang/20051125
最近、Prototype.js でどうやって JSON 使うのか調べてるけどよくわからない。
上のサイトを見てもそれはよくわからない。
Ruby とかで、サーバ側から JSON を出力するようなのだけど、
Ruby もわからないので、どうにも出来ず。
Ruby を勉強しないとな～。
ちなみに、JSON ってのは、JavaScript Object Notation の略で、
簡単に言うと JavaScript でのデータ記法のことだ。
≪ "Prototype.js の解説サイト"の続きを隠す
投稿者 ponpon : 23:24
| コメント (0)
| 【Prototype.js】
2005年11月22日
今回は、たぶんここを見に来たみんなが知りたいことだと思うので、
Prototype.js で Ajax してみます。
と言っても、非常に簡単です。
var myAjax = new Ajax.Request(url, {method: 'get', onComplete: innerResponse});
の箇所で、Ajax を使用してページを読み込んでいます。
url には、あらかじめ、
var url = '読み込みたいページのURL';
に記述しておいても良いし、以下のように直接記述してもよい。
var myAjax = new Ajax.Request('読み込みたいページのURL', {method: 'get', onComplete: innerResponse});
url の後にある、{...} の箇所は、オプションを設定できるようになっている。
いろいろあるが、今回は一番よく使うと思われるものを紹介する。
method: 'get'
の箇所で、データの送信方式を設定している。
get と post を設定出来て、初期設定では post になっている。
onComplete: innerResponse
では、読み込み完了時に、
function innerResponse()
を実行するということを意味している。
innerResponse には、読み込んだデータが与えられ実行されるので、
それを受け取るために
function innerResponse(response)
としている。
受け取った reponse を
$('myDiv').innerHTML = request.responseText;
としてページ内に出力している。
とりあえずこんなかんじです。
≪ "Prototype.js を使ってみる（２）"の続きを隠す
投稿者 ponpon : 17:09
| コメント (0)
| トラックバック(0)
| 【Prototype.js】
2005年11月16日
Prototype という JavaScript フレームワークが人気ですね。
私のブログにも一つ Prototype に関するエントリーがあるのですが、
最近もっとも人気のエントリーになっています。
まぁ、解説とかしていないので、役に立ちませんが。
Prototype の解説がほとんど無いというのが原因なのかなぁ～と思いました。
そんなわけで、役に立つエントリーを書いておこうかなと思いました。
まず、初めに、
Prototype について知らない人の為に簡単に説明しますと、
動的なWebサイトを容易に作るための部品で、
JavaScript で作成されています。
ファイルは prototype.js という一つのファイルのみです。
今も改良が加えられていて、時々バージョンアップしています。
その時は、prototype-1.3.1.js などのようにバージョンの名前がついていたりします。
Prototype のサイトでダウンロード出来ます。
一応、英語ですが、非公式の
解説サイトもあります。
この解説の通りにやれば使えるはずですが、
検証がてら、順番にやってみようかなと思います。
そのうち、解説の和訳版を作るのもいいかなぁ～と思ったり。
まずは、Prototype のサイトへの組み込み方です。
微妙にアレンジを加えました。
<script src="prototype.js" type="text/javascript"></script>
src には自分のサイトの prototype.js の URL を記述すればよいです。
prototype.js にバージョン名が付いている時は、それに合わせるか、
ファイル名を変更してくださいね。
なんとなくですが、 type="text/javascript" を加えてみました。
prototype.js を組み込むと、そのページ内では
"id" 属性で指定した名前で要素を参照する為の document.getElementById を
$ と書き換えることが出来ます。
以下のサンプルでは、
document.getElementById('myDiv') と $('myDiv') は同じものを示しています。
どちらも、id 属性 "myDiv" である
<div id="myDiv">...</div>
の内容である
<p>TEST</p>
が表示されます。
alert(div.innerHTML);
を、
alert($('myDiv').innerHTML);
とすることも可能です。
複数の "id" 属性を指定したい場合は、以下のサンプルのように
var divs = $('myDiv', 'myVal');
と複数していすれば、divs は配列として作成されるので、
divs[0].innerHTML
のように指定することが出来ます。
また、以下のサンプルのように
$F('userName')
とすることで、"id" 属性 "userName" の値（value）を取得できます。
document.getElementById('userName').value
と同等の意味を持ちます。
ただし、$F は配列にすることは出来ませんでした。
このように省略して書けるだけでも、だいぶ違うと思います。
Microsoft の Ajax フレームワーク Atlas でも $ が同じ意味で使えるようですよ。
以上、とりあえず１回目ということでかなり初歩的なことの説明でした。
→
Prototype.js を使ってみる（２）へ
≪ "Prototype.js を使ってみる（１）"の続きを隠す
投稿者 ponpon : 23:57
| コメント (0)
| 【Prototype.js】
2005年9月13日
prototype.js というものがあります。
JavaSctipt でクラスベースのプログラミングを
可能にするライブラリだとかどうとか。
オブジェクト指向の「継承」を簡単に実現出来るようにもなっています。
それ以外にも便利なクラスが含まれていて、Ajax も出来るみたい。
ふむ、Ajax か。
とりあえずチェックせねばとダウンロードして中をのぞいてみた。
ダウンロードした prototype.js をテキストエディタで開いて、
しばらくスクロールさせるとありました、Ajax 。
しかし、IE 用には Msxml2.XMLHTTP と Microsoft.XMLHTTP しかありません。
まぁ、Google Maps は Microsoft.XMLHTTP だけだし、これで十分なのかもしれませんが。
ちなみに、Microsoft の Atlas では、Msxml2.XMLHTTP.4.0 もありました。
私は Ajax を始めた頃から、、Cross-Browser XMLHttpRequest を参考にしていたこともあり、
Msxml2.XMLHTTP.5.0 とかでも動くようにしておきたいので、
prototype.js ではちょっと物足りない気分になりました。
おまけに、Collection & Copy さんに、
「 AJAX のレスポンスの XML ドキュメントにアクセスする手段は含まれていません。 」
との解説がありました。
どういう意味かというと、Ajax で取得したドキュメントを操作する方法は
prototype.js には含まれていないから、自分でがんばって作りなさいということ。
結構切ないです。
Ajax で取得した XML データを操作する部分は、
自分で作りこむ必要がありますし、
どんな仕組みでデータを取ってくるのかとか理解する為にも、
初めて Ajax をする人には、私のサイトとかを参考にして、
自分で作って頂きたいな～と思いました。
そのあとで prototype.js を使っても遅くないですよ。
最近は、prototype.js を拡張するスクリプトを作成しようかなぁ～とか考え中。
というか、いろいろ試している。
→ Prototype.js を使ってみる（１） へ
≪ "prototype.js"の続きを隠す
投稿者 ponpon : 11:48
| コメント (3)
| 【Prototype.js】
