1) Detecting key events easily

How do we detect which key was pressed? Prototype provides set of
key event aliases so that we don’t have to remember that return is “13″
and escape is “27″. Almost all major keys are aliased: KEY_RETURN,
KEY_ESC, KEY_TAB, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN. See full list in API docs

$('myInput').observe('keyup', function(e){
if (e.keyCode == Event.KEY_TAB)
doSomethingCoolWhenTabIsPressed();
})

2) You won’t need event capturing (most likely)

Sometimes I see capturing phase being explicitly set to false in
Event’s observe method. The good thing is that it’s set to false by
default and you would rarely need to use it. The following 2 lines are
fully identical so we can just skip this last argument:

Event.observe('productInfo', 'click', displayProductInfo, false); // 'false' could be skipped
Event.observe('productInfo', 'click', displayProductInfo);

or a short way:

$('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped
$('productInfo').observe('click', displayProductInfo);

3) insert() wisely

Another one of those “it’s-there-by-default” values is a position
argument of Element’s insert method. Surprisingly it’s not mentioned
anywhere in the docs – I accidentally found it wondering through the
source one day. insert accepts one of four position values: top, bottom, before, and after. If we omit this argument, it defaults to bottom (and luckily this happens to be the most common case). The following lines behave identically:

new Insertion.Bottom('blogEntry',
new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}));
 
// Insertion class is deprecated - it's recommended to use Element's insert method:
 
$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}), 'bottom' ); // "bottom" can be skipped
 
$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}));

4) Forms gone wild

Plain form submission is quite easy but what if we want to prevent
certain elements from being serialized before submitting form via ajax?
Let’s take a look at few ways to do this:

Plain form submission using .request

$('register').observe('submit', function(e){
Event.stop(e);
$(this).request();
})

Using .getInputs makes it easy to filter out elements based on type
and name attributes. In this example we’re serializing elements with
name ‘email’ and submitting result to the URI contained in form’s
“action” attribute

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request($(this).readAttribute('action'), {
parameters: Form.serializeElements($(this).getInputs('', 'email'))
})
})

Using .getInputs could help most of the time but what if we want to
exclude elements that have “multiple” attribute? We might try something
like this:

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request(this.readAttribute('action'), {
parameters: Form.serializeElements($(this).getElements()
.reject(function(el){return el.hasAttribute('multiple')})
);
})
})

Wow, what’s going on over here?!

When submit event occurs, we prevent default submit action Event.stop(e), get all form’s elements this.getElements(), iterate over them REJECTING those that have “multiple” attribute .reject(function(el){return el.hasAttribute('multiple')}). The filtered collection is then serialized Form.serializeElements() and is submitted via ajax new Ajax.Request()

This is all very cool but here’s the reason why learning CSS3
selectors might be a good thing (the results from both – reject-based
and selector-based filtering are the same):

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request($(this).readAttribute('action'), {
parameters: Form.serializeElements($$('#register input:not([multiple])'))
})
})

Enjoy prototyping!

http://thinkweb2.com/projects/prototype/?p=3

$()함수는 가장 많이 사용되는 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