prototype.jsを使おう - 超コンピ研 - コンピュータ&クッキング研究会＠中京大学豊田キャンパス

「あんなんAjaxやったうちに入らん」 - 某LゼミのK君

prototype.jsを使うとちょっとはAjaxやったつもりになれます。
使いこなせばほんとにAjaxができます。

準備

開発環境

みみなしが使っているのは、

コーディング	NetBeans
Webサーバ	WEBRick
動作確認	Firefox
デバッガ	Firebug

この4つ。
コーディングはTeraPadやEmacsでもいいし、ブラウザはIEでも、デバッガも無くても何とかなるだろうけど、私はそんな環境ではコード書きたくないです。
特に、FirebugならJavaScriptが再構築したHTMLも表示してくれるので表示が崩れているときなどに容易に確認可能ですが、表示のみを頼りにコーディングの間違いを発見するのは困難を極めます。
WebサーバがWEBRickなのは、サーバーサイドのプログラムがWEBRickのサーブレットだから。
ApacheでCGI動かすよりデバッグは楽だと思います。
私よりPerlを書ける人はこのチュートリアルを読む必要は全く無いでしょう。むしろ私に指導してください(>_<)

prototype.jsのダウンロード

コーディング開始

• JavaScriptはよほどの理由が無い限りhtmlに埋め込むのは避けたほうが無難です。外部ファイルに隔離しましょう
• HTMLのエンコーディングはutf-8で。これはJavaScriptが内部的にutf-8で文字列を扱うためです。

Methods

Object.toQueryString()

JavaScriptオブジェクトからGET形式のクエリ文字列を生成するメソッド。
たとえば、

var hogeObject = {"id":"1", "name":"k-roku"};

このJavaScriptオブジェクトからクエリ文字列を生成したい場合。
Ruby厨の私は、はじめ

querystr = hogeObject.toQueryString();

みたいなことをやって失敗していました。
正しくは、

querystr = Object.toQueryString(hogeObject);

こうです。
これで、

id=1&name=k-roku

というクエリ文字列が生成されます。
2バイト文字はエンコード済み文字列になるので便利。
GETリクエストを書いてみるとわかると思うのですが、"まとも"なGETリクエストを書くのはかなり骨の折れる作業です。だからこのメソッドがあるんだよね。
参考

Prototype Window

http://prototype-window.xilinus.com/
prototype.jsを利用したWindow関連の拡張クラスのようですが、無駄にすごい・・・。