1. ショートカットやユーティリティ関数
prototype.jsでは、「$」で始まる幾つかのショートカット関数が提供されている(表1)。
例えば、「$()関数」は、document.getElementById関数のショートカット機能を提供する。つまり、次のような
<div id="result"></div>
div要素がある場合には、
$('result').innerHTML = "置換文字列";
このように記述して、その内容を置換できるのだ。
また入力フォームを構成するときに便利なのが「$F()関数」だ。
例えば、
<input type="text" id="field1">
のようなテキストボックスがある場合、
alert($F('field1'));
のように記述して、入力された文字列を取得できる。
表1■ショートカット関数
関数名 | 意味 |
---|---|
$() | 指定したid要素をもつ要素を返す |
$F() | 指定したid要素をもつ入力フィールドに入力されている値を返す |
$A() | イテレータを展開して、その配列をArrayオブジェクトとして返す |
$H() | オブジェクトのプロパティ/値のペアをHashオブジェクトに変換する |
$R() | 下限、上限を指定してループ構成を作るための構文を提供する |
prototype.jsでは、JavaScriptの組み込みクラスも拡張される。例えば、文字列を示すStringhオブジェクトには、HTML(XML)タグを取り除くstripTagsメソッドやHTMLエスケープするescapeHTMLなどのメソッドが追加される。
またDOMツリーを操作する便利なオブジェクトとして「Elementオブジェクト」が提供されている。Elementオブジェクトを用いると、要素を挿入・削除したり、表示/非表示の切り替え、そして特定のCSSを適用したり、要素の幅/高さを取得する操作ができる。
これらの操作については、「Developer Notes for prototype.js」を参照してほしい。
2. Ajax機能
prototype.jsにおいて、Ajax機能を提供するのが、Ajaxオブジェクトだ。
Ajaxオブジェクトは、XMLHttpRequestオブジェクトによるHTTP通信をラップするものだ(そしてブラウザの違いを適時吸収する)。
表2■prototype.jsで提供されるAjax関連のオブジェクト
オブジェクト | 内容 |
---|---|
Ajax.Request | XMLHttpRequestで通信する |
Ajax.Updater | XMLHttpRequestで通信をし、その結果をページの特定の要素内に差し込む |
Ajax.PeriodicalUpdater | Ajax.Updaterを用いて一定間隔でコンテンツを再取得し直す |
Ajax.Responders | Ajaxのイベントを管理する |
Copyright © ITmedia, Inc. All Rights Reserved.