![[ARK-Web SandBox]](image/sandbox.gif "[ARK-Web SandBox]")
- バックアップ一覧
- ソース を表示
- Prototype.jsとは何か は削除されています。
- 1 (2006-02-14 (火) 21:33:20)
- 2 (2006-02-14 (火) 21:37:50)
- 3 (2006-03-05 (日) 11:16:23)
- 4 (2006-03-05 (日) 15:26:04)
- 5 (2006-03-07 (火) 14:20:45)
- 6 (2006-07-05 (水) 13:23:47)
- 7 (2006-07-26 (水) 23:29:59)
- 8 (2006-10-03 (火) 20:32:28)
- 9 (2006-10-11 (水) 16:19:03)
- 10 (2007-02-08 (木) 14:03:58)
- 11 (2007-03-19 (月) 09:32:10)
- 12 (2007-04-01 (日) 18:34:39)
- 13 (2007-10-23 (火) 14:41:10)
prototype.jsとは何か。
prototype.jsとは何か †
- Ajaxを利用する際にコレを使うと便利みたいな風に言われている prototype.jsだけど
コレの本質はなんだろう？ということを説明していこうと思う。
prototype.jsのオフィシャル †
- http://prototype.conio.net/
- 動的Webアプリの開発に緩和することを目標としたJavaScriptのフレームワークなんだ!
- 具体的に何をしてくれるのかを見ていく。
Ajaxをラップしてくれる †
手動でAjaxを使った例 †
- http://staff.ark-web.jp/~takemura/public/js/ajax/simple/
- 普通にAjaxを使ったアプリを作るんならこうするでしょう
prototype.jsを利用した例 †
- http://staff.ark-web.jp/~takemura/public/js/ajax/use_prototype_js/
- prototype.jsを利用するといくつかの利点が見つかる
それを以下でまとめた
- prototype.jsを利用するといくつかの利点が見つかる
ここで分かったこと †
- クラスの定義を行える
- Ajax.Requestメソッドでブラウザに関係なくリクエストを送れる
- IE系では new ActiveXObject('Msxml2.XMLHTTP')とかnew ActiveXObject('Microsoft.XMLHTTP')とか使うんでしたね
- 状態によって実行する関数を変更できる
- 状態は、Loading, Loaded, Interactive, Completeの4つ＋onSuccess, onFailureの計6つ
- document.getElementById('id')は、$('id')と短縮して書ける
リクエスト先で処理した結果だけを指定IDのタグ中に入れる場合 †
- Ajax.Updaterメソッドを利用する
- 実は、先ほどのprototype.jsを利用した例で使っていました
<h4>送信側クラスの変更点</h4> <textarea cols="100" rows="20" id="send_changeCode"></textarea> <script> <!-- new Ajax.Updater('send_changeCode', './Sender.js', {method: 'get'}); //--> </script>
- 実は、先ほどのprototype.jsを利用した例で使っていました
- send_changeCodeというIDが付けられた<textarea>タグ中にSender.jsの中身を出力するには上記コードだけでいいんです！
HTMLの編集などに役立つ †
Elementを操作するユーティリティ †
- 通常はAjaxでレスポンスが帰ってきたら、そのXMLの内容をHTMLの任意のタグを操作して出力するが、
prototype.jsには、その場合のいくつかのユーティリティを定義している
- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Element
- 以下は抜粋
- toggle: Elementのvisibleをshow / hideする
- 注意：JSの常識だが、visibleをshow / hideしてもレイアウトが変わらないので、非表示するなら通常はstyle.displayを使う
- hide: style.displayで非表示にする
- show: style.displayで表示にする
内容を追記する時のユーティリティ †
- HTMLの操作としてよく使うのは、innerHTMLだと思う。これはタグ内の内容を書き換えるわけだが、
内容を追記する時のユーティリティが用意されている
- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Insertion
- 指定したIDタグの前後、IDタグの内容の前後にそれぞれセットできる
イベントの制御がしやすい †
- JavaScriptはイベントハンドラの制御がブラウザ依存している箇所がある
prototype.jsはそのラッパーを持っている
イベントのハンドラ側のthis †
- 通常、イベントを実行するとハンドラ側のthisはハンドラ自身となるので
イベントを呼んだ側のメソッドやメンバ変数が使えなくて困るが、
prototype.jsにはイベントを呼んだ側のthisを見えるようにする仕組みがある
- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
- bindAsEventListenerがソレ
イベントハンドラの追加 †
- 通常の <body onLoad="hogehoge"> のonLoadはイベントなわけだが、
これに独自のイベントハンドラを追加することができる
- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Event
- observe: イベントに対して、イベントハンドラを追加
- 上記資料では、Event.observe(window, 'load', function() {...}, false);の部分など
フォームの制御が簡単 †
入力フィールドの制御 †
- フォームのある入力項目にフォーカスを当てたいとか、フォームの内容を消したいときなどの
ユーティリティを提供している
Formタグ系の制御 †
- Form内容のシリアライズ（これ、はてなのヒト絶賛）や、入力の許可/不許可の設定するなどの
ユーティリティを提供している
Formタグ系のイベント操作 †
- ラジオボタンやチェックボックスをonClickした場合のイベントとコールバック関数を定義できる
- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Form.Element.EventObserver
- 詳しい資料などが無いのでちょっと詳細は不明。。
謎のPositionオブジェクト †
- 参考にしているドキュメントが仮ドキュメントなので、詳しくはわからないが、
座標配置に便利なユーティリティらしい
- はてなの勉強会でもここはうやむやだった。。
まとめ †
- Ajaxに使われるイメージが強かったprototype.jsだが、実はいろんなユーティリティを提供している
シンプルな関数群なんだ…ということが分かった
- これを使った利点として、ブラウザ依存をある程度ラップしているのでブラウザテストが楽になる
- また、ブラウザ依存の箇所が出てきても、prototype.jsはバージョンがあがっていくので
使う側としてはこのファイルの最新版をアップデートするだけで済むのでメンテナンス性が上がる
