prototype.jsの概要

この素晴らしいjsフレームワークを使用するプロジェクトの開発につながっています。 それ以前は、jQueryのみを使用していたため、このライブラリを勉強しなければなりませんでした。



私が情報を求めに行った2番目の場所は、ウィキペディアの後、Habrでした。 ここで、Prototypeに特化したブログを見つけられず、さらに「初心者向け」の情報も見つけられなかったことに驚きました。 この欠陥を修正することにしました。



すべての興味-私はカットをお願いします

はじめに

まず、このトピックは「XはYよりも涼しい」など、ホリバーの場所ではないことに注意してください。 他に影響を与えることなく、このフレームワークの機能についてのみ話したいと思います。



このフレームワークは、Internet Explorer 6.0以降、Mozilla Firefox 1.5以降、Apple Safari 2.0以降、およびOpera 9.25以降でサポートされています。 したがって、99％のプロジェクトで使用できます。



現在、最新バージョンは2010年11月22日にリリースされた1.7です。



そのため、ライブラリのソースコードをダウンロードし、それをHTMLドキュメントに含めました。

<script src="prototype.js" type="text/javascript"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、私たちが利用できるようになった機会を検討します

基本機能

実際、フレームワークのすべての機能は5つの関数で示されています。 それらについては以下。



$（）

ここではすべてが簡単です。 いま

 document.getElementById('elementId');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に置き換えることができます

 $("elementId");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、関数に複数のパラメーターを渡すと、要素の配列が返されます

 var array = $('elementId-1', 'elementId-2', 'elementId-3');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この配列は、たとえば、ループで処理できます。

 for (i=0; i<array.length; i++) { alert(array[i].innerHTML); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

$$（）

この関数は、入力である1つ以上のCSSセレクターを分割し、これらのフィルターに一致する要素を返します

 <div id='loginForm'> <div class='field'> <label class='black'>User name:</label> <input type='text' id='name' value='My name'/> </div> <div class='field'> <label class='red'>Password:</label> <input type='password' id='pass' value='pass' /> </div> <input type='submit' value='login' /> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var array = $$('div#loginForm .field input'); for(var i=0; i<array.length; i++){ alert(array[i].value); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは次を出力します：

私の名前

合格する



複数のフィルターが関数に入力される場合、より複雑な方法で例を考えてみましょう

  array = $$('div#loginForm .field input', 'div#loginForm .red'); s = ''; for(var i=0; i<array.length; i++){ s = ( array[i].value ? array[i].value : array[i].innerHTML ); alert(s); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、次の結果が表示されます。

私の名前

合格する

パスワード



$ F（）

上記のコードの場合、次のようにフォーム要素の値を取得できます。

  alert($F('name')); alert($F('pass'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらく既に推測したように、結果は

私の名前

合格する



理解を深めるために、次の3つの設計は似ています。

 var a = document.getElementById('name').value; var b = $('name').value; var c = $F('name');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

値a、b、cは等しくなります



$ A（）

$ A（）関数は、受け取った1つの引数をArrayオブジェクトに変換します。

 <select id="list" > <option value="3">Test 1</option> <option value="2">Test 2</option> <option value="4">Test 3</option> </select>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 var someNodeList = $('list').getElementsByTagName('option'); var nodes = $A(someNodeList); //      nodes.each(function(node){ alert(node.nodeName + ': ' + node.innerHTML); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

取得します

3：テスト1

2：テスト2

4：テスト3



$ H（）

$ H（）関数は、オブジェクトを連想配列のように見える列挙型ハッシュオブジェクトに変換します。



ハッシュオブジェクトの各要素は、キーと値の2つの要素の配列です。 さらに、オブジェクトには5つのメソッドがあります

keys（） -すべてのキーの配列を返します

値（） -すべての値の配列を返します

merge（ハッシュ） -ハッシュタイプのオブジェクトを受け入れ、1つのオブジェクトのみを返し、それらを結合した結果

toQueryString（） -オブジェクトをクエリ文字列に変換します。 つまり、「key1 = value1＆key2 = value2＆key3 = value3」という形式の行

inspect（） -「key：value」形式のオブジェクトを配列形式で返します

 //  var a = { first: 10, second: 20, third: 30 }; // hash var h = $H(a); alert(h.toQueryString()); // "first=10&second=20&third=30"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いいですね

便利な機能

そして、それがなければ人生はそんなに美しくないだろういくつかの機能を検討してください



getElementsByClassName（）

getElementsByTagName（）関数と同様に機能します。 唯一の違いは、タグ名ではなくクラス名を送信する必要があることです。 指定されたクラスに一致するすべての要素が配列に返されます。 この機能は、要素に対して複数のクラスが定義されている場合でも機能します。

例がなければ、すべてが明確だと思います。



Try.these（）

 return Try.these( function() { alert(""); jkgjhgjhg //  alert(" "); return 1; }, function() { alert(""); return 2; } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、印刷​​されます

最初の

第二



そして、関数自体は2を返します。

ここではすべてが明確だと思います。 デバッグに不可欠なツール



ライブラリのもう1つの便利な機能は、テキストテンプレートでの作業です。

  //  var cart = new Object(); cart.items = [ ]; //  cart.items.push({product: '', price: 24.50, quantity: 1}); cart.items.push({product: '', price: 5.44, quantity: 3}); cart.items.push({product: '', price: 10.00, quantity: 4}); //  Template var itemFormat = new Template( '  #{quantity} . ' + ' #{product}  #{price}. ' ); for(var i=0; i<cart.items.length; i++){ var cartItem = cart.items[i]; alert(itemFormat.evaluate(cartItem)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

取得するもの：

1個注文します。 24.50rの製品ブック。 それぞれ

3個注文します。 5.44rの製品ペン。 それぞれ

4個注文します。 10.00こするためのノート。 それぞれ



もちろん、現代の世界では、AJAXの話をせずに終わらせることはできません。 これで、AJAXリクエストを次のように実行できます。

 var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メソッドはgetまたはpostです。

パラメーター-クエリ文字列で結合されたkey = valueの形式。

OnComplete-AJAXリクエストの完了後に呼び出される関数



例：

 var url = 'http://yourserver/app/get_sales'; var pars = 'id=123&value=456'; var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse }); } function showResponse(originalRequest) { alert(originalRequest.responseText); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

prototype.jsライブラリには多くの優れた機能があり、開発者の作業が楽になり、短い記事では説明できません。



この場所を読んでくれてありがとう。

便利なリンク

プロジェクトの公式サイト 。 ここでは、フレームワークの最新バージョンをダウンロードして、公式ドキュメントに慣れることができます。



他のすべてのために、 Googleがあります