prototype.js utility functions

$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키이다. DOM함수처럼, 이것은 인자로 던져진 id를 가진 요소를 하나 반환한다.

하지만 DOM함수와는 달리, 이것은 여러개의 id를 사용할수 있고 $()는 요청된 요소를 가진 Array객체를 반환할것이다. 예제는 아래와 같다.


<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script>
 function test1()
 {
  var d = $('myDiv');
  alert(d.innerHTML);
 }
 function test2()
 {
  var divs = $('myDiv','myOtherDiv');
  for(i=0; i<divs.length; i++)
  {
   alert(divs[i].innerHTML);
  }
 }
</script>
</HEAD>
<BODY>
 <div id="myDiv">
  <p>This is a paragraph</p>
 </div>
 <div id="myOtherDiv">
  <p>This is another paragraph</p>
 </div>
 <input type="button" value=Test1 onclick="test1();"><br>
 <input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

이 함수의 다른 좋은 점은 이것은 인자형태를 가질수 있는 다른 함수를 생성할때 매우 유용하도록 만들어주는 id문자열이나 요소객체 자체를 던질수 있다는 것이다.

$F() 함수 사용하기

$F() 함수는 다른 단축키이다. 이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 이 함수는 요소 id나 요소객체 자체를 인자로 가질수 있다.

<script>
 function test3()
 {
  alert(  $F('userName')  );
 }
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

$A() 함수 사용하기

$A() 함수는 이것을 받아들이는 하나의 인자를 Array객체로 변환한다.

Array 클래스를 위한 확장과 조합된 이 함수는 이것을 더욱 쉽게 만든다. 예를 들면, 작성한 함수는 인자의 수를 유연하게 받아들인다.

<script>
 function showOptions(){
  var someNodeList = $('lstEmployees').getElementsByTagName('option');
  var nodes = $A(someNodeList);
  nodes.each(function(node){
    alert(node.nodeName + ': ' + node.innerHTML);
   });
 }
</script>
<select id="lstEmployees" size="10" >
 <option value="5">Buchanan, Steven</option>
 <option value="8">Callahan, Laura</option>
 <option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >

$H() 함수 사용하기

$H() 함수는 결합된 배열을 열거할수 있는 Hash객체로 변환한다.

<script>
 function testHash()
 {
  //let's create the object
  var a = {
   first: 10,
   second: 20,
   third: 30
   };
  //now transform it into a hash
  var h = $H(a);
  alert(h.toQueryString()); //displays: first=10&second=20&third=30
 }
</script>

$R() 함수 사용하기

$R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds)를 작성하기 위한 짧은 형태이다.

이 클래스의 완전한 설명을 보기 위해 ObjectRange 클래스 문서를 보라. each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제를 보자. 더 많은 메소드는 Enumerable 클래스 문서에서 볼수 있을것이다.

<script>
 function demoDollar_R(){
  var range = $R(10, 20, false);
  range.each(function(value, index){
   alert(value);
  });
 }
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >

Try.these() 함수 사용하기

이것은 인자처럼 많은 수의 함수를 가지고 그것들을 순서대로 차례차례 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.

예제는 아래와 같다. xmlNode.text는 몇몇 브라우저에서 작동하고 xmlNode.textContent는 다른 브라우저에서 작동한다. Try.these()함수를 사용하면 당신은 작동하는 것중 하나를 반환할수 있다.

<script>
function getXmlNodeValue(xmlNode){
 return Try.these(
  function() {return xmlNode.text;},
  function() {return xmlNode.textContent;}
  );
}
</script>

예제 : http://overflow.berrybox.com/ajax/test/index.html
출처 : http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html