Dive Into Prototype.js(1)--＄系変数

Ajax
$( )

DOMのdocument.getElementById()関数のショートカットです。
DOMより進化しています。メソッドが拡張されました。
（ELEMENTオブジェクトのリファレンスを参照）

<!-- test-1.html -->
<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"> </script>
<script type="text/javascript">

function test$(){
   var div = $('target');
   alert(div.innerHTML);
   div.hide();
}
/////////////////
// MAIN //
/////////////////

</script> </head>
<body >
 <div id="target">test</div>

<input type='button' onClick="test$();" value="TEST"/>

</body>
</html>
$$( )

CSSタグからオブジェクトを受け取る関数です。
マッチする要素の配列を返します。

<!-- test-2.html -->
<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"> </script>
<script type="text/javascript">

function test$$(){
   // Note: #->id, .->class
   //   div#idName : タグがdivでid=idName
   //   .field : class=field
   //   input : タグがinput
   var form = $$('div#idName .field input', 'div#idName .fieldName');
   var str = "";
   for(var i=0;i<form.length; i++){
      str += (form[i].value ? form[i].value : form[i].innerHTML) + ":";;
   }
   alert(str);

}
/////////////////
// MAIN //
/////////////////

</script> </head>
<body >

<div id="idName">
   <div class="field">
      <span class="fieldName">UserName:</span>
      <input type="text" id="txtName" value="Roka" />
   </div>
   <div class="field">
      <span class="fieldName">Password:</span>
      <input type="password" id="txtPass" value="secret" />
   </div>
   <input type="submit" value="login">
</div>
<input type="button" value="TEST$$" onclick="test$$();" />

</body>
</html>
$F( )

テキストボックスやドロップダウンリストなどの入力フォーム値返します。

function test$F(){
   alert($F('UserName'));
}
......
<input type="text" id="UserName" value="Roka" />
<input type="button" value="TEST$F" onclick="test$F();" />
$A( )

列挙可能なリストを配列に変換し、コピーします。
DOMのNodeListsから通常配列へ変換する場合よく使用します。

function test$A(){
   var nodeList = $('names').getElementsByTagName('option');
   var nodes = $A(nodeList);
   nodes.each(function(memberNode){
                  alert(memberNode.nodeName + ":" + memberNode.value + "," + memberNode.innerHTML);
               });
}
......
<select id="names" size="10">
   <option value="1">Roka</option>
   <option value="2">Lee</option>
   <option value="3">Betty</option>
</select>
<input type="button" value="Show" onclick="test$A();" />
$H( )

列挙可能なHASHオブジェクト（連想配列）に変換します。
連想配列からGETパラメータを作成する場合よく使用します。

function test$H(){
   var obj = { "1st":1, "2nd":2, "3rd":3 };
   var hash = $H(obj);
   alert(hash.toQueryString());
   // Shows: 1st=1&2nd=2&3rd=3
}

......
<input type="button" value="TEST$H" onclick="test$H();" />
$R( )

new ObjectRange(lowerBound, upperBound, excludeBounds)のショートカットです。

$w( )

空白はデリミタとして文字列を配列に変換する。

>>> $w("a b c");
["a", "b", "c"]

$w("a b c").echo(function...);