プロトタイプ-概要

プロトタイプとは

プロトタイプは、動的なWebアプリケーションの開発を容易にすることを目的としたJavaScriptフレームワークです。プロトタイプは、サムスティーブンソンによって開発されました。

PrototypeはJavaScriptライブラリであり、非常に簡単で楽しい方法でDOMを操作できます。これは安全です（クロスブラウザ）。

_Scriptaculous_および_Rico_などの他のライブラリは、Prototypeの基盤の上に構築され、ウィジェットやその他のエンドユーザーのものを作成します。

プロトタイプ-

DOM要素と組み込み型を便利なメソッドで拡張します。
継承を含むクラススタイルのOOPの組み込みサポートがあります。
イベント管理の高度なサポートがあります。
強力なAjax機能を備えています。
完全なアプリケーション開発フレームワークではありません。
ウィジェットまたは標準アルゴリズムまたはI/Oシステムの完全なセットは提供しません。

プロトタイプのインストール方法

プロトタイプは、prototype.jsと呼ばれる単一のファイルとして配布されます。プロトタイプライブラリをセットアップするには、以下の手順に従ってください-

ダウンロードページhttp://prototypejs.org/download/[([[1]]]にアクセスして、便利なパッケージで最新バージョンを入手してください。
次に、prototype.jsファイルをWebサイトのディレクトリに配置します。/javascript。

これで、Webページで強力なPrototypeフレームワークを使用する準備が整いました。

プロトタイプライブラリの使用方法

今、次のように_Prototype_スクリプトを含めることができます-

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>

   <body>
      ........
   </body>
</html>

例

Prototypeの$（）関数を使用してJavaScriptのDOM要素を取得する方法を示す簡単な例を次に示します-

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p>
      </div>

      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>

      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

出力

このチュートリアルを選ぶ理由

Prototype Frameworkの非常に優れたドキュメントがhttp://prototypejs.org/[prototypejs.org]にあります。なぜこのチュートリアルを参照する必要があるのでしょうか。

答えは、このチュートリアルで最も一般的に使用されるすべての機能をまとめたということです。次に、すべての便利な方法と適切な例を説明しましたが、これらは公式サイトでは入手できません。

Prototype Frameworkの上級ユーザーの場合は、公式Webサイトに直接ジャンプできます。そうでない場合、このチュートリアルは参考になり、リファレンスマニュアルのように使用できます。

プロトタイプ-便利な機能

次に、動的Webアプリケーションを開発するためにPrototypeが具体的にできることを見てみましょう。

クロスブラウザのサポート

JavaScriptプログラミングを行っている間、異なるWebブラウザを異なる方法で処理する必要があります。 Prototype Libraryは、すべての互換性の問題を処理し、手間をかけずにクロスブラウザープログラミングを実行できるように作成されています。

ドキュメントオブジェクトモデル

プロトタイプは、DOMプログラミングの負担を軽減するヘルパーメソッドを提供します。 Prototypeを使用すると、DOMを非常に簡単に操作できます。

HTMLフォーム

Ajaxでは、ドラッグアンドドロップなどの他の入力メカニズムを、ブラウザーとサーバー間の会話の一部として使用できます。従来のJavaScriptプログラミングでは、これらの入力をキャプチャしてサーバーに渡すことは困難です。 Prototypeは、HTMLフォームを操作するための一連のユーティリティを提供します。

JavaScriptイベント

Prototypeは、イベントのコーディング中に優れたクロスブラウザサポートを提供し、Functionオブジェクトを拡張してイベント処理を簡単に操作できるようにします。

Ajaxユーティリティ

Prototypeの最も重要な機能は、Ajaxのサポートです。すべての主要なブラウザーは、ActiveXコンポーネントまたはネイティブJavaScriptオブジェクトとしてAjaxを可能にするXMLHttpRequestオブジェクトのバージョンをサポートしています。

ただし、XMLHttpRequestはHTTPプロトコルを非常に低いレベルで公開するため、開発者に大きな力を与えますが、単純なことを行うために多くのコードを記述する必要もあります。

プロトタイプは独自のオブジェクト継承システムを使用して、Ajaxヘルパーオブジェクトの階層を提供します。より一般的なベースクラスは、最も一般的なタイプのAjaxリクエストを1行でコーディングできる、より集中的なヘルパーによってサブクラス化されます。

プロトタイプ-ユーティリティメソッド

Prototypeライブラリには、多くの定義済みオブジェクトとユーティリティ関数が付属しています。 JavaScriptプログラミングでこれらの関数とオブジェクトを直接使用できます。

これらのメソッドは、効率的なプロトタイプベースのJavaScriptコーディングの基礎の1つです。時間をかけてそれらを研究し、メソッドに慣れるようにします。

この章では、これらの便利な方法をすべて例とともに詳しく説明します。

S.No.	Method & Description
1.	$() 文字列が指定されている場合、一致するIDを持つドキュメントの要素を返します。それ以外の場合は、渡された要素を返します。
2.	$$() 任意の数のCSSセレクター（文字列）を受け取り、それらのいずれかに一致する拡張DOM要素のドキュメント順配列を返します。
3.	$A() 受け取った単一の引数をArrayオブジェクトに変換します。
4.	$F() フォームコントロールの値を返します。これは、Form.Element.getValueの便利なエイリアスです。
5.	$H() オブジェクトを連想配列に似た列挙可能なハッシュオブジェクトに変換します。
6.	$R() 新しいObjectRangeオブジェクトを作成します。
7.	$w() 文字列を配列に分割し、すべての空白を区切り文字として扱います。
8.	Try.these 任意の数の関数を受け入れ、エラーをスローしない最初の関数の結果を返します。

document.getElementsByClassName

このメソッドは、_className_というCSSクラス名を持つすべての要素を取得（および拡張）します。

ただし、このメソッドは、Prototypeの最新バージョンでは非推奨になりました。

プロトタイプ-要素オブジェクト

_Element_オブジェクトは、DOM内の要素を操作するためのさまざまなユーティリティ関数を提供します。

すべてのユーティリティ関数のリストと例を示します。ここで定義されたすべてのメソッドは、$（）関数を使用してアクセスされる要素に自動的に追加されます。

したがって、Element.show（ 'firstDiv'）; $（ 'firstDiv'）。show（）;と書くのと同じです。

プロトタイプ要素法

注-少なくともバージョン1.6のprototype.jsがあることを確認してください。

S.No.	Method & Description
1.	absolutize() ページレイアウト内の位置を変更せずに、要素を絶対配置要素に変換します。
2.	addClassName() 指定されたCSSクラス名を要素のクラス名に追加します。
3.	addMethods() Elementオブジェクトに独自のメソッドを混在させることができます。これを後で拡張要素のメソッドとして使用できます。
4.	adjacent() 指定したセレクタに一致する現在の要素の兄弟をすべて検索します。
5.	ancestors() 要素のすべての祖先を収集し、それらを拡張要素の配列として返します。
6.	childElements() 要素のすべての子を収集し、それらを拡張要素の配列として返します。
7.	classNames() 廃止予定です。要素のCSSクラス名の読み取りと書き込みに使用されるEnumerableオブジェクトであるClassNamesの新しいインスタンスを返します。
8.	cleanWhitespace() 空白のみを含むすべての要素のテキストノードを削除します。要素を返します。
9.	clonePosition() オプションの引数オプションで定義されているように、ソースの位置や寸法を要素に複製します。
10.	cumulativeOffset() ドキュメントの左上隅からの要素のオフセットを返します。
11.	cumulativeScrollOffset() ネストされたスクロールコンテナ内の要素の累積スクロールオフセットを計算します。
12.	descendantOf() 要素が祖先の子孫であるかどうかを確認します。
13.	descendants() 要素のすべての子孫を収集し、それらを拡張要素の配列として返します。
14.	down() cssRuleに一致する要素の最初の子孫を返します。 cssRuleが提供されない場合、すべての子孫が考慮されます。これらの基準に一致する子孫がない場合、undefinedが返されます。
15.	empty() 要素が空（つまり、空白のみを含む）かどうかをテストします。
16.	extend() Element.MethodsおよびElement.Methods.Simulatedに含まれるすべてのメソッドで要素を拡張します。
17.	fire() 現在の要素をターゲットとしてカスタムイベントを発生させます。
18.	firstDescendant() 要素である最初の子を返します。これは、任意のノードを返すfirstChild DOMプロパティとは対照的です。
19.	getDimensions() 計算された要素の幅と高さを検索し、それらをオブジェクトのキー/値のペアとして返します。
20.	getElementsByClassName 廃止予定です。 classNameのCSSクラスを持つすべての要素の子孫を取得し、それらを拡張要素の配列として返します。 $$（）を使用してください。
21.	getElementsBySelector 廃止予定です。任意の数のCSSセレクター（文字列）を受け取り、それらのいずれかに一致する要素の拡張子の配列を返します。 $$（）を使用してください。
22.	getHeight() 計算された要素の高さを検索して返します。
23.	getOffsetParent() 要素の最も近い位置にある祖先を返します。何も見つからない場合、body要素が返されます。
24.	getStyle() 要素の特定のCSSプロパティ値を返します。プロパティは、CSSまたはキャメル形式のいずれかで指定できます。
25.	getWidth() 計算された要素の幅を検索して返します。
26.	hasClassName() 要素に特定のCSS classNameがあるかどうかを確認します。
27.	hide() 要素を非表示にして返します。
28.	identify() 要素のid属性が存在する場合はそれを返すか、一意の自動生成IDを設定して返します。
29.	immediateDescendants() 廃止予定です。要素の直接の子孫（つまり、子）をすべて収集し、それらを拡張要素の配列として返します。 childElements（）を使用してください。
30.	insert() 要素の前、後、上部、または下部にコンテンツを挿入します。
31.	inspect() 要素のデバッグ指向の文字列表現を返します。
32.	makeClipping() 要素のオーバーフロー値を「非表示」に設定することにより、サポートが不十分なCSSクリッププロパティをシミュレートします。要素を返します。
33.	makePositioned() 要素のCSS位置を初期位置が「静的」または「未定義」の場合に「相対」に設定することにより、ブロックを含むCSSを簡単に作成できます。要素を返します。
34.	match() 要素が指定のCSSセレクターと一致するかどうかを確認します。
35.	next() 指定されたcssRuleに一致する要素の次の兄弟を返します。
36.	nextSiblings() 要素の次の兄弟をすべて収集し、それらを拡張要素の配列として返します。
37.	observe() 要素にイベントハンドラを登録し、要素を返します。
38.	positionedOffset() 最も近い位置にある祖先に対する要素のオフセットを返します。
39.	previous () 指定されたcssRuleに一致する要素の前の兄弟を返します。
40.	previousSiblings() 要素の以前の兄弟をすべて収集し、それらを拡張要素の配列として返します。
41.	readAttribute() 要素の属性の値を返します。属性が指定されていない場合はnullを返します。
42.	recursivelyCollect() 関係がプロパティで指定されている要素を再帰的に収集します。
43.	relativize() ページレイアウト内の位置を変更せずに、要素を相対的に配置された要素に変換します。
44.	remove () ドキュメントから要素を完全に削除して返します。
45.	removeClassName() 要素のCSS classNameを削除し、要素を返します。
46.	replace () 要素をhtml引数のコンテンツで置き換え、削除された要素を返します。
47.	scrollTo () ビューポートの上部に要素が表示されるようにウィンドウをスクロールします。要素を返します。
48.	select() 任意の数のCSSセレクター（文字列）を受け取り、それらのいずれかに一致する要素の拡張子孫の配列を返します。
49.	setOpacity() さまざまなブラウザーの不整合を回避しながら、要素の視覚的不透明度を設定します。
50.	setStyle() 要素のCSSスタイルプロパティを変更します。
51.	show() 要素を表示して返します。
52.	siblings() 要素の兄弟をすべて収集し、それらを拡張要素の配列として返します。
53.	stopObserving() ハンドラーの登録を解除し、要素を返します。
54.	toggle() 要素の可視性を切り替えます。
55.	toggleClassName() 要素のCSS classNameを切り替えて要素を返します。
56.	undoClipping() 要素のCSSオーバーフロープロパティを、Element.makeClipping（）が適用される前の値に戻します。要素を返します。
57.	undoPositioned() Element.makePositionedが適用される前の状態に要素を戻します。要素を返します。
58.	up() 指定されたcssRuleに一致する要素の最初の祖先を返します。
59.	update() 要素のコンテンツを指定されたnewContent引数で置き換え、要素を返します。
60.	viewportOffset() ビューポートに相対的な要素のX/Y座標を返します。
61.	visible() 要素が表示されているかどうかを示すブール値を返します。
62.	wrap() 要素を別の要素にラップし、ラッパーを返します。
63.	writeAttribute() ハッシュまたは名前/値のペアとして渡された属性を追加、指定、または削除します。

プロトタイプ-数値処理

プロトタイプは、提供するためにネイティブJavaScript番号を拡張します-

Number＃succによるObjectRangeの互換性。
Number＃timesのRubyのような数値ループ。
Number＃toColorPartやNumber＃toPaddedStringなどの単純なユーティリティメソッド。

以下は、すべての関数と、数値を扱う例のリストです。

プロトタイプ番号法

注-prototype.jsバージョンが1.6であることを確認してください。

S.No.	Method & Description
1.	abs() 数値の絶対値を返します。
2.	ceil() 数値以上の最小の整数を返します。
3.	floor() 数値以下の最大の整数を返します。
4.	round() 数値を最も近い整数に丸めます。
5.	succ() 現在の＆plus;で定義されている現在のNumberの後継を返します。 1。 ObjectRangeと互換性のある番号を作成するために使用されます。
6.	times() 通常の[0..n]ループをRubyスタイルでカプセル化します。
7.	toColorPart() 数値の2桁の16進数表現を生成します（したがって、[0..255]の範囲にあると想定されます）。 CSSカラー文字列を作成するのに便利です。
8.	toJSON() JSON文字列を返します。
9.	toPaddedString() 文字列の長さが少なくともlengthと等しくなるように、数値を0で埋められた文字列に変換します。

プロトタイプ-文字列処理

Prototypeは、単純なものから複雑なものまで、一連の便利なメソッドでStringオブジェクトを強化します。

以下は、すべての関数のリストと、Stringを扱う例です。

プロトタイプ文字列メソッド

注-prototype.jsバージョンが1.6であることを確認してください。

S.No.	Method & Description
1.	blank() 文字列が空であるか、空白のみを含むかを意味する「空白」かどうかをチェックします。
2.	camelize() ダッシュで区切られた文字列をcamelCaseに変換します。たとえば、「foo-bar」は「fooBar」に変換されます。
3.	capitalize() 文字列の最初の文字を大文字にし、他のすべてを小文字にします。
4.	dasherize() アンダースコア文字（ "_"）のすべてのインスタンスをダッシュ（ "-"）に置き換えます。
5.	empty() 文字列が空かどうかを確認します。
6.	endsWith() 文字列が部分文字列で終わるかどうかを確認します。
7.	escapeHTML() HTMLの特殊文字を対応するエンティティに変換します。
8.	evalJSON() 文字列内のJSONを評価し、結果のオブジェクトを返します。
9.	evalScripts() 文字列に存在するスクリプトブロックの内容を評価します。各スクリプトによって返された値を含む配列を返します。
10.	extractScripts() 文字列に存在するスクリプトブロックのコンテンツを抽出し、文字列の配列として返します。
11.	gsub() 指定されたパターンが出現するたびに、通常の文字列、関数の戻り値、またはテンプレート文字列で置き換えられた文字列を返します。
12.	include() 文字列に部分文字列が含まれているかどうかを確認します。
13.	inspect() 文字列のデバッグ指向バージョンを返します。
14.	interpolate() 文字列をテンプレートとして扱い、オブジェクトのプロパティで埋めます。
15.	isJSON() 正規表現を使用して、文字列が有効なJSONかどうかを確認します。このセキュリティメソッドは内部的に呼び出されます。
16.	parseQuery() URIに似たクエリ文字列を解析し、パラメーター/値のペアで構成されるオブジェクトを返します。
17.	scan() 指定されたパターンのすべての出現を反復処理できます。
18.	startsWith() 文字列が部分文字列で始まるかどうかを確認します。
19.	strip() 文字列から先頭と末尾の空白をすべて削除します。
20.	stripScripts() HTMLスクリプトブロックのように見える文字列を取り除きます。
21.	stripTags() HTMLタグの文字列を取り除きます。
22.	sub() パターンの最初のカウントオカレンスを通常の文字列、関数の戻り値、またはテンプレート文字列に置き換えた文字列を返します。
23.	succ() ObjectRangeによって内部的に使用されます。文字列の最後の文字をUnicodeアルファベットの次の文字に変換します。
24.	times() 文字列をcount回連結します。
25.	toArray() 文字列を文字ごとに分割し、結果を含む配列を返します。
26.	toJSON() JSON文字列を返します。
27.	toQueryParams() URIに似たクエリ文字列を解析し、パラメーター/値のペアで構成されるオブジェクトを返します。
28.	truncate() 文字列を指定された長さに切り捨て、接尾辞を追加します（抜粋のみであることを示します）。
29.	underscore() ラクダ化された文字列を、アンダースコア（ "_"）で区切られた一連の単語に変換します。
30.	unescapeHTML() タグを削除し、特殊なHTML文字のエンティティ形式を通常の形式に変換します。
31.	unfilterJSON () Ajax JSONまたはJavaScript応答の周りのコメント区切りを取り除きます。このセキュリティメソッドは内部的に呼び出されます。

プロトタイプ-配列処理

プロトタイプは、非常に少数の強力なメソッドを使用して、すべてのネイティブJavaScript配列を拡張します。

これは2つの方法で行われます-

Enumerableモジュールが混在しているため、すでに多くのメソッドが組み込まれています。
このセクションに記載されている追加のメソッドがかなり追加されます。

イテレータを使用する

Prototypeが提供する重要なサポートの1つは、JavaScriptでイテレーターのようなjavaを使用できることです。以下の違いを参照してください-

*for* ループを記述する従来の方法-

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
  //Your code working on item here...
}

プロトタイプを使用している場合、次のように上記のコードを置き換えることができます-

myArray.each(function(item) {
  //Your code working on item here...
});

以下は、配列を扱う例とともにすべての関数のリストです。

プロトタイプ配列メソッド

注-prototype.jsバージョンが1.6であることを確認してください。

S.No.	Method & Description
1.	clear() 配列をクリアします（空にします）。
2.	clone() 元の配列をそのまま残して、配列の複製を返します。
3.	compact() null/未定義の値なしで、配列の新しいバージョンを返します。
4.	each() 数値インデックスの昇順で配列を反復処理します。
5.	first() 配列の最初のアイテムを返します。配列が空の場合は未定義です。
6.	flatten() 配列の「フラット」（1次元）バージョンを返します。
7.	from() 既存の配列を複製するか、配列のようなコレクションから新しい配列を作成します。
8.	indexOf() 配列内で引数が最初に現れる位置を返します。
9.	inspect() 配列のデバッグ指向の文字列表現を返します。
10.	last() 配列の最後のアイテムを返します。配列が空の場合は未定義です。
11.	reduce() 配列を削減します。1要素配列は一意の要素に変換され、複数要素配列はそのまま返されます。
12.	reverse() 配列の逆バージョンを返します。デフォルトでは、オリジナルを直接反転します。 inlineがfalseに設定されている場合、元の配列のクローンを使用します。
13.	size() 配列のサイズを返します。
14.	toArray() これは、Enumerableからの混合されたtoArrayのローカル最適化にすぎません。
15.	toJSON() JSON文字列を返します。
16.	uniq() 配列の重複のないバージョンを作成します。重複が見つからない場合、元の配列が返されます。
17.	without() 指定された値のいずれも含まない新しいバージョンの配列を生成します。

プロトタイプ-ハッシュ処理

ハッシュは、一意のキーを値にバインドする連想配列と考えることができます。唯一の違いは、インデックスとして数字を使用する代わりに、任意の文字列をインデックスとして使用できることです。

ハッシュを作成する

ハッシュインスタンスを構築するには2つの方法があります-

JavaScriptキーワード_new_を使用します。
Prototype Utility関数_ $ H_を使用します。

空のハッシュを作成するには、引数のないコンストラクターメソッドも呼び出します。

以下は、ハッシュを作成し、値を設定し、簡単な方法で値を取得する方法を示す例です-

//Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

//Set values in terms of key and values.
myhash.set('name', 'Bob');

//Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

//Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

プロトタイプには、ハッシュを簡単に評価するための幅広い方法が用意されています。このチュートリアルでは、適切な例を使用してすべての方法を詳細に説明します。

以下は、ハッシュに関連するすべてのメソッドの完全なリストです。

プロトタイプハッシュメソッド

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	clone() ハッシュのクローンを返します。
2.	each() ハッシュ内の名前/値のペアを反復処理します。
3.	get() ハッシュキーのプロパティの値を返します。
4.	inspect() ハッシュのデバッグ指向の文字列表現を返します。
5.	keys() ハッシュのキーの配列（つまり、プロパティ名）を提供します。
6.	merge() オブジェクトをハッシュにマージし、そのマージの結果を返します。
7.	remove() ハッシュからキーを削除し、その値を返します。このメソッドはバージョン1.6で非推奨になりました。
8.	set() ハッシュキーのプロパティを値に設定し、値を返します。
9.	toJSON() JSON文字列を返します。
10.	toObject() 複製されたバニラオブジェクトを返します。
11.	toQueryString() ハッシュをURLエンコードされたクエリ文字列表現に変換します。
12.	unset() ハッシュキーのプロパティを削除し、その値を返します。
13.	update() オブジェクトのキー/値ペアでハッシュを更新します。元のハッシュが変更されます。
14.	values() ハッシュの値を収集し、配列で返します。

プロトタイプ-基本オブジェクト

_Object_は、Prototypeで名前空間として使用され、_Object_オブジェクトを使用して関連する関数を呼び出します。これは、次の2つの方法で使用されます-

単純な開発者であれば、_inspect_や_clone_などの既存の関数を使用できます。
Prototypeのように独自のオブジェクトを作成する場合、またはオブジェクトをハッシュであるかのように探索する場合は、extend _、 keys_、および_values_を使用します。

プロトタイプオブジェクトメソッド

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	clone() 浅いコピーを使用して、渡されたオブジェクトを複製します（すべての元のプロパティを結果にコピーします）。
2.	extend() すべてのプロパティをソースから宛先オブジェクトにコピーします。
3.	inspect() オブジェクトのデバッグ指向の文字列表現を返します。
4.	isArray () objが配列の場合はtrueを返し、そうでない場合はfalseを返します。
5.	isElement() objがタイプ1のDOMノードである場合はtrueを返し、そうでない場合はfalseを返します。
6.	isFunction() objが関数型の場合はtrue、そうでない場合はfalseを返します。
7.	isHash() objがHashクラスのインスタンスである場合はtrueを返し、そうでない場合はfalseを返します。
8.	isNumber() objが数値型の場合はtrueを返し、そうでない場合はfalseを返します。
9.	isString() objが文字列型の場合はtrue、そうでない場合はfalseを返します。
10.	isUndefined() objのタイプが未定義の場合はtrue、そうでない場合はfalseを返します。
11.	keys() オブジェクトをハッシュとして扱い、そのプロパティ名のリストを取得します。
12.	toHTML() objのtoHTMLメソッドの戻り値が存在する場合はそれを返し、そうでない場合はString.interpretを介してobjを実行します。
13.	toJSON() JSON文字列を返します。
14.	toQueryString() オブジェクトをそのURLエンコードされたクエリ文字列表現に変換します。
15.	values() オブジェクトをハッシュとして扱い、そのプロパティ値のリストを取得します。

プロトタイプ-テンプレート

テンプレートは、類似したオブジェクトのグループをフォーマットし、これらのオブジェクトのフォーマットされた出力を生成するために使用されます。

プロトタイプは、2つのメソッドを持つ_Template_クラスを提供します-

* Template（）*-これは、テンプレートオブジェクトを作成し、_evaluate（）_メソッドを呼び出してテンプレートを適用するために使用されるコンストラクターメソッドです。
* evaluate（）*-このメソッドは、オブジェクトをフォーマットするためにテンプレートを適用するために使用されます。

フォーマットされた出力を作成するには、3つの手順が必要です。

テンプレートの作成-これには、事前にフォーマットされたテキストの作成が含まれます。このテキストには、＃\ {fieldName} *値とともにフォーマットされたコンテンツが含まれます。これらの＃\ {fieldName} *の値は、_evaluate（）_メソッドが実際の値で呼び出されるときに実際の値に置き換えられます。
実際の値の定義-これには、キーと値の形式で実際の値を作成することが含まれます。これらのキーはテンプレートにマッピングされ、対応する値に置き換えられます。
キーのマッピングと値の置換-これは_evaluate（）_が呼び出され、フォーマットされたオブジェクトで利用可能なすべてのキーが定義された値で置換される最終ステップです。

例1

ステップ1

テンプレートを作成します。

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

ステップ2

値のセットを準備します。これらの値は、上記のオブジェクトに渡され、フォーマットされた出力を取得します。

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

ステップ3

最終ステップは、テンプレート内のすべての値を埋めて、次のように最終結果を生成します-

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

だから、これらの3つのステップをすべてまとめましょう-

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function showResult() {
           // Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

           //Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

           //Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br/>
      <br/>
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

これは、次の結果を生成します-

出力

プロトタイプ-列挙

列挙可能なクラスは、列挙に役立つ多数の便利なメソッドを提供します。列挙は、値のコレクションとして機能するオブジェクトです。

列挙メソッドは、主に_arrays_と_hashes_を列挙するために使用されます。 _ObjectRange_や、列挙メソッドを使用できるさまざまなDOMまたはAJAX関連オブジェクトのような他のオブジェクトもあります。

コンテキストパラメータ

イテレータを取得するEnumerableのすべてのメソッドは、次の（オプションの）パラメータとしてコンテキストオブジェクトも取得します。コンテキストオブジェクトはイテレータがバインドされるものであるため、その内部の this キーワードはオブジェクトを指します。

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject);//we have specified the context

myObject;

これは、次の結果を生成します-

出力

{ foo: 0, bar: 1, baz: 2}

効率的に使用する

すべての要素で同じメソッドを呼び出す必要がある場合は、_invoke（）_メソッドを使用します。
すべての要素で同じプロパティを取得する必要がある場合は、_pluck（）_メソッドを使用します。
_findAll/select_メソッドは、指定された述語に一致するすべての要素を取得します。逆に、_reject（）_メソッドは、述語と一致しないすべての要素を取得します。両方のセットが必要な特定のケースでは、2回のループを避けることができます：_partition（）_メソッドを使用するだけです。

以下は、Enumerableに関連するすべてのメソッドの完全なリストです。

プロトタイプ列挙可能メソッド

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	all() すべての要素がブール値と真であるかどうかを、直接または指定された反復子による計算によって決定します。
2.	any() 少なくとも1つの要素がブール値と真であるかどうかを、直接または指定された反復子による計算によって決定します。
3.	collect() 反復子を各要素に適用した結果を返します。 map（）としてエイリアスされます。
4.	detect() 反復子がtrueを返す最初の要素を見つけます。 find（）メソッドによってエイリアスされます。
5.	each() これにより、すべての要素を一般的な方法で繰り返し処理し、Enumerableを返すことで、チェーン呼び出しが可能になります。
6.	eachSlice() 指定されたサイズに基づいてアイテムをチャンクにグループ化します。最後のチャンクはより小さくなる可能性があります。
7.	entries() より汎用的なtoArrayメソッドのエイリアス。
8.	find() 反復子がtrueを返す最初の要素を見つけます。 detect（）の便利なエイリアス。
9.	findAll() 反復子がtrueを返したすべての要素を返します。 select（）としてエイリアスされます。
10.	grep() フィルターに一致するすべての要素を返します。反復子が提供されている場合は、選択された各要素の戻り値を生成するために使用されます。
11.	inGroupsOf() 必要に応じて特定の値を使用して最後のチャンクを埋め、固定サイズのチャンクでアイテムをグループ化します。
12.	include() ==比較演算子に基づいて、指定されたオブジェクトがEnumerableにあるかどうかを決定します。 member（）としてエイリアスされます。
13.	inject() 反復子の連続した結果に基づいて、結果値を増分的に構築します。
14.	invoke() each（）またはcollect（）の一般的なユースケースの最適化：すべての要素に対して、同じ潜在的な引数を使用して同じメソッドを呼び出します。
15.	map() 反復子を各要素に適用した結果を返します。 collect（）の便利なエイリアス。
16.	max() 最大要素（または要素ベースの計算）を返します。列挙が空の場合はundefinedを返します。要素は直接比較されるか、最初にイテレータを適用して戻り値を比較することにより比較されます。
17.	member() ==比較演算子に基づいて、指定されたオブジェクトがEnumerableにあるかどうかを決定します。 include（）の便利なエイリアス。
18.	min() 最小要素（または要素ベースの計算）を返します。列挙が空の場合はundefinedを返します。要素は直接比較されるか、最初にイテレータを適用して戻り値を比較することにより比較されます。
19.	partition() 要素を2つのグループに分割します：trueと見なされるグループとfalseと見なされるグループ。
20.	pluck() collect（）の一般的なユースケースの最適化：すべての要素に対して同じプロパティを取得します。プロパティ値を返します。
21.	reject() イテレータがfalseを返したすべての要素を返します。
22.	select() findAll（）メソッドのエイリアス。
23.	size() 列挙のサイズを返します。
24.	sortBy() イテレータによって要素ごとに計算された基準に基づいて、要素のカスタムソートされたビューを提供します。
25.	toArray() 列挙の配列表現を返します。 entries（）としてエイリアスされます。
26.	zip() 一緒にジッパー（ズボンのジッパーを考えてください）2＆plus;タプルの配列を提供するシーケンス。各タプルには、元のシーケンスごとに1つの値が含まれます。

プロトタイプ-イベント処理

イベント管理は、クロスブラウザスクリプティングを達成するための最大の課題の1つです。すべてのブラウザには、キーストロークを処理するさまざまなアプローチがあります。

Prototype Frameworkは、すべてのブラウザー間互換性の問題を処理し、イベント管理に関連するすべてのトラブルから解放します。

Prototype Frameworkは_Event_名前空間を提供します。この名前空間にはメソッドが豊富で、すべてが現在のイベントオブジェクトを引数として取り、すべての主要なブラウザーで要求する情報を喜んで生成します。

イベント名前空間は、キーボード関連のイベントで使用できるキーコードの標準化されたリストも提供します。次の定数は、名前空間で定義されています-

S.No.	Key Constant & Description
1.	KEY_BACKSPACE バックスペースキーを表します。
2.	KEY_TAB タブキーを表します。
3.	KEY_RETURN リターンキーを表します。
4.	KEY_ESC ESCキーを表します。
5.	KEY_LEFT 左キーを表します。
6.	KEY_UP キーを表します。
7.	KEY_RIGHT 正しいキーを表します。
8.	KEY_DOWN ダウンキーを表します。
9.	KEY_DELETE 削除キーを表します。
10.	KEY_HOME ホームキーを表します。
11.	KEY_END 終了キーを表します。
12.	KEY_PAGEUP ページアップキーを表します。
13.	KEY_PAGEDOWN ページダウンキーを表します。

イベントを処理する方法

開始する前に、イベントメソッドの使用例を見てみましょう。この例は、イベントが発生したDOM要素をキャプチャする方法を示しています。

例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
        //Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);

        //Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

出力

以下は、*イベント*に関連するすべてのメソッドの完全なリストです。頻繁に使用する可能性が最も高い関数は、observe _、 element_、および_stop_です。

プロトタイプイベントメソッド

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	element() イベントが発生したDOM要素を返します。
2.	extend() _event_を、Event.Methodsに含まれるすべてのメソッドで拡張します。
3.	findElement() イベントが発生したタグ名から、指定されたタグ名を持つ最初のDOM要素を返します。
4.	isLeftClick() ボタン関連のマウスイベントが「左」（実際にはプライマリ）ボタンに関するものであったかどうかを判断します。
5.	observe() DOM要素にイベントハンドラーを登録します。
6.	pointerX() マウスイベントの絶対水平位置を返します。
7.	pointerY() マウスイベントの絶対垂直位置を返します。
8.	stop() イベントの伝播を停止し、デフォルトのアクションが最終的にトリガーされるのを防ぎます。
9.	stopObserving() イベントハンドラーの登録を解除します。
10.	unloadCache() observeを通じて登録されたすべてのイベントハンドラーを登録解除します。自動的に配線されます。 1.6以降では使用できません。

プロトタイプ-フォーム管理

プロトタイプを使用すると、HTMLフォームを簡単に管理できます。 PrototypeのFormは、名前空間であり、フォームに関連するすべてのもののためのモジュールであり、フォーム操作とシリアライゼーションの良さが詰まっています。

全体としてフォームを処理するメソッドを保持しますが、サブモジュールlink：/prototype/prototype form_element [Form.Element]は特定のフォームコントロールを処理します。

以下は、*フォーム要素*に関連するすべてのメソッドの完全なリストです。

プロトタイプフォームメソッド

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	disable() フォーム全体を無効にします。フォームコントロールは表示されますが、編集できません。
2.	enable() 完全または部分的に無効化されたフォームを有効にします。
3.	findFirstElement() 最初の非表示、非無効のフォームコントロールを検索します。
4.	focusFirstElement() フォームの最初の要素にキーボードフォーカスを与えます。
5.	getElements() フォーム内のすべてのフォームコントロールのコレクションを返します。
6.	getInputs() フォーム内のすべてのINPUT要素のコレクションを返します。オプションのtype引数とname引数を使用して、これらの属性の検索を制限します。
7.	request() Ajax.Requestを介してフォームのアクション属性のURLにフォームをシリアル化して送信するための便利なメソッド。 optionsパラメーターはAjax.Requestインスタンスに渡され、HTTPメソッドをオーバーライドし、追加のパラメーターを指定できます。
8.	reset() フォームをデフォルト値にリセットします。
9.	serialize() フォームデータをAjaxリクエストに適した文字列にシリアル化する（デフォルトの動作）、またはオプションのgetHashがtrueと評価される場合、キーがフォームコントロール名で値がデータであるオブジェクトハッシュ。
10.	serializeElements() フォーム要素の配列をAjaxリクエストに適した文字列にシリアル化します（デフォルトの動作）。または、オプションのgetHashがtrueと評価される場合、キーがフォームコントロール名で値がデータであるオブジェクトハッシュ。

プロトタイプとJSONチュートリアル

JSONの概要

JSON（JavaScript Object Notation）は、軽量のデータ交換形式です。

JSONは人間にとって読み書きが簡単です。
JSONはマシンにとって簡単に解析および生成できます。
JSONはJavaScriptプログラミング言語のサブセットに基づいています。
JSONはWeb上のAPIで特に使用されており、AjaxリクエストのXMLの高速な代替手段です。
JSONは、完全に言語に依存しないテキスト形式です。

プロトタイプ1.5.1以降のバージョンは、JSONエンコードおよび解析サポートを備えています。

JSONエンコード

プロトタイプは、エンコードのために以下の方法を提供します-

注-少なくともprototype.jsのバージョン1.6がインストールされていることを確認してください。

S.No.	Method & Description
1.	Number.toJSON() 指定された数値のJSON文字列を返します。
2.	String.toJSON() 指定された文字列のJSON文字列を返します。
3.	Array.toJSON() 指定された配列のJSON文字列を返します。
4.	Hash.toJSON() 指定されたハッシュのJSON文字列を返します。
5.	Date.toJSON() 日付をJSON文字列に変換します（JSONで使用されるISO形式に従います）。
6.	Object.toJSON() 指定されたオブジェクトのJSON文字列を返します。

エンコードする必要があるデータのタイプが不明な場合、最善の方法はObject.toJSONを使用することです-

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

これは、次の結果を生成します-

'{"name": "Violet", "occupation": "character", "age": 25}'

さらに、カスタムオブジェクトを使用している場合は、_Object.toJSON_で使用される独自のtoJSONメソッドを設定できます。たとえば-

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },
   toJSON: function() {
      return ('My name is ' + this.name +
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

これは、次の結果を生成します-

'"My name is John and I am 49 years old."'

JSONの解析

JavaScriptでは、JSONの解析は通常、JSON文字列のコンテンツを評価することによって行われます。プロトタイプはこれに対処するためにlink：/prototype/prototype_string_evaljson [String.evalJSON]を導入しています。たとえば-

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

これは、次の結果を生成します-

"Violet"

AjaxでJSONを使用する

AjaxでJSONを使用するのは非常に簡単です。トランスポートのresponseTextプロパティでlink：/prototype/prototype_string_evaljson [String.evalJSON]を呼び出すだけです-

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

あなたのデータが信頼できないソースから来た場合、それを必ずサニタイズしてください-

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

プロトタイプとAJAXチュートリアル

AJAXの概要

AJAXは* A synchronous Ja * vaScriptおよび* X * MLの略です。 AJAXは、XML、HTML、CSS、およびJavaスクリプトの助けを借りて、より良く、より速く、よりインタラクティブなWebアプリケーションを作成するための新しい手法です。

AJAXの完全な理解については、単純なリンク：/ajax/index [AJAXチュートリアル]を参照してください。

AJAXのプロトタイプサポート

プロトタイプフレームワークを使用すると、非常に簡単で楽しい方法でAjax呼び出しを処理することができ、これも安全です（クロスブラウザー）。また、プロトタイプは、サーバーから返されたJavaScriptコードをスマートに処理し、ポーリング用のヘルパークラスを提供します。

Ajax機能はグローバル_Ajaxオブジェクト_に含まれています。このオブジェクトは、AJAXリクエストとレスポンスを簡単な方法で処理するために必要なすべてのメソッドを提供します。

AJAXリクエスト

実際のリクエストはlink：/prototype/prototype_ajax_request [Ajax.Request（）]オブジェクトのインスタンスを作成することによって行われます。

new Ajax.Request('/some_url', { method:'get' });

最初のパラメーターはリクエストのURLです。 2番目はオプションハッシュです。 methodオプションは、使用されるHTTPメソッドを指します。デフォルトのメソッドはPOSTです。

AJAX応答コールバック

Ajaxリクエストはデフォルトでは非同期です。つまり、応答からのデータを処理するコールバックが必要です。コールバックメソッドは、リクエストを行うときにオプションハッシュで渡されます-

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

ここでは、2つのコールバックがハッシュで渡されます-

onSuccess
onFailure

上記の2つの呼び出しのいずれかは、応答のステータスに基づいて適宜呼び出されます。両方に渡される最初のパラメーターは、それぞれ_responseText_および_responseXML_プロパティを使用できるネイティブ_xmlHttpRequest_オブジェクトです。

両方のコールバックを指定できますが、1つでもなしでもかまいません-あなた次第です。他の利用可能なコールバックは-

onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

これらはすべて、_xmlHttpRequest_トランスポートの特定の状態に一致しますが、onExceptionは例外です。onExceptionは、他のコールバックのディスパッチ中に例外が発生したときに起動します。

注-onUninitialized、onLoading、onLoaded、およびonInteractiveコールバックは、すべてのブラウザーで一貫して実装されているわけではありません。一般的に、これらの使用は避けるのが最善です。

プロトタイプAJAXメソッド

_Ajaxオブジェクト_は、AJAXリクエストとレスポンスを簡単な方法で処理するために必要なすべてのメソッドを提供します。 AJAXに関連するすべてのメソッドの完全なリストを次に示します。

注-少なくともprototype.jsのバージョン1.6を使用していることを確認してください。

S.No.	Method & Description
1.	Ajax Options これはメソッドではありませんが、すべてのAJAXリクエスターとコールバックによって共有されるすべてのコアオプションを詳しく説明します。
2.	Ajax.PeriodicalUpdater() 定期的にAJAX要求を実行し、応答テキストに基づいてコンテナのコンテンツを更新します。
3.	Ajax.Request() AJAXリクエストを開始および処理します。
4.	Ajax.Responders() プロトタイプベースのAJAXリクエストのすべてのステップについて通知されるグローバルリスナーのリポジトリ。
5.	Ajax.Response() すべてのAjaxリクエストコールバックの最初の引数として渡されたオブジェクト。
6.	Ajax.Updater() AJAXリクエストを実行し、応答テキストに基づいてコンテナのコンテンツを更新します。

プロトタイプ-表現範囲

プロトタイプ範囲は、値の間隔を表します。範囲を取得する好ましい方法は、 $ R ユーティリティ関数を使用することです。

次のような単純な構文を使用して、値の広い範囲を作成できます-

$R(1, 10).inspect();

$R('a', 'e').inspect();

これは、次の結果を生成します-

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

include（）メソッド

このメソッドは、値が範囲に含まれているかどうかを決定します-

構文

Range.include(value);

戻り値

値が含まれている場合はtrueを返し、そうでない場合はfalseを返します。

例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
           //Returns true

            alert ( "Test 2 : " + $R('a', 'h').include('x'));
           //Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br/>
      <br/>
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

出力

プロトタイプ-定期的な実行

多くの場合、一定の期間の後、関数を何度も実行する必要があります。たとえば、一定時間後に画面を更新することができます。プロトタイプは、_PeriodicalExecuter_オブジェクトを使用して実装するための簡単なメカニズムを提供します。

_PeriodicalExecuter_によって提供される利点は、コールバック関数の複数の並列実行から保護されることです。

PeriodicalExecuterの作成

コンストラクタは2つの引数を取ります-

コールバック関数。
実行の間隔（秒単位）。

起動すると、_stop（）_メソッドを使用してページがアンロードされるか実行者が停止されるまで、PeriodicalExecuterが無期限にトリガーされます。

例

以下は、「キャンセル」ボタンを押して停止するまで、5秒ごとにダイアログボックスを表示する例です。

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>

      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br/>
      <br/>
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

出力

プロトタイプ-便利なリソース

以下のリソースには、プロトタイプに関する追加情報が含まれています。これについての詳細な知識を得るためにそれらを使用してください。

プロトタイプに関する便利なリンク

Prototype Wiki-プロトタイプのWikipediaリファレンス
http://prototypejs.org [Prototype-Official Websites]-これにはリファレンスAPIドキュメントが含まれており、例と相互参照が豊富にあります。また、さまざまなチュートリアルを見つけて、Prototype Coreメンバーを知ることができます。
https://script.aculo.us [script.aculo.us-公式ウェブサイト]-リファレンスAPIドキュメントの完全なセット、インストールスクリプト
Tobie Langel-最もアクティブなコアメンバーの1人であるTobieは、PrototypeとJavaScriptのすべてについて定期的に投稿しています。ヒント、書籍、新バージョン、他のフレームワーク、クールな機能、チュートリアル記事
John Resig − John Resigの公式Webサイト。 JohnはjQueryライブラリの作成者です。jQueryライブラリは、HTMLドキュメントの走査、イベントの処理、アニメーションの実行、WebページへのAjaxインタラクションの追加を簡単にする、高速で簡潔なJavaScriptライブラリです。
Ajaxian − [JG06]を作成したDion AlmaerとBen Galbraithは、Ajax/Web 2.0の世界の活発な概要を維持し、フレームワーク、ライブラリ、書籍、記事のレビューを数多く行っています。ウェブ。

プロトタイプに関する有用な本

このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。

Prototype-quick-guide

プロトタイプ-概要

プロトタイプとは

プロトタイプのインストール方法

プロトタイプライブラリの使用方法

例

出力

このチュートリアルを選ぶ理由

プロトタイプ-便利な機能

クロスブラウザのサポート

ドキュメントオブジェクトモデル

HTMLフォーム

JavaScriptイベント

Ajaxユーティリティ

プロトタイプ-ユーティリティメソッド

document.getElementsByClassName

プロトタイプ-要素オブジェクト

プロトタイプ要素法

プロトタイプ-数値処理

プロトタイプ番号法

プロトタイプ-文字列処理

プロトタイプ文字列メソッド

プロトタイプ-配列処理

イテレータを使用する

プロトタイプ配列メソッド

プロトタイプ-ハッシュ処理

ハッシュを作成する

プロトタイプハッシュメソッド

プロトタイプ-基本オブジェクト

プロトタイプオブジェクトメソッド

プロトタイプ-テンプレート

例1

ステップ1

ステップ2

ステップ3

出力

プロトタイプ-列挙

コンテキストパラメータ

出力

効率的に使用する

プロトタイプ列挙可能メソッド

プロトタイプ-イベント処理

イベントを処理する方法

例

出力

プロトタイプイベントメソッド

プロトタイプ-フォーム管理

プロトタイプフォームメソッド

プロトタイプとJSONチュートリアル

JSONの概要

JSONエンコード

JSONの解析

AjaxでJSONを使用する

プロトタイプとAJAXチュートリアル

AJAXの概要

AJAXのプロトタイプサポート

AJAXリクエスト

AJAX応答コールバック

プロトタイプAJAXメソッド

プロトタイプ-表現範囲

include（）メソッド

構文

戻り値

例

出力

プロトタイプ-定期的な実行

PeriodicalExecuterの作成

例

出力

プロトタイプ-便利なリソース

プロトタイプに関する便利なリンク

プロトタイプに関する有用な本