Prototype

Prototype은 무엇인가?

Prototype은 무엇인가?
- Sam Stephenson에 의해 쓰여진 자바스크립트 라이브러리이다.
  > prototype.js
  > http://prototype.conio.net
- AJAX 유틸리티 함수 - Ajax.Request 를 포함한 유틸리티 자바스크립트 함수들을 지원한다.
  > $() - same as document.getElementById('someid');
  > $F() - working with Forms
  > $R()

Utility 함수들

$() function
- document.getElementById()와 같다.
  var d = $('myDiv');
- 사용자는 하나보다 더 많이 pass 할 수 있다. id 와 $()는 요청되어진 엘리턴트들 모두 포함한 array 객체를 리턴할 수 있다.
  > 사용자가 다중의 엘리먼트들을 수정할때 유용하다.
```
 
//$()을 통해 array 로 엘리먼트들을 구한다.
var divs = $('myDiv','myOtherDiv');

// array 안의 각 아이템의 차일드 노드를 디스플레이한다.
for(i=0; i<divs.length; i++){
    alert(divs[i].innerHTML);
}
```
$F() function
- 엘리먼트의 값을 구할때 사용된다. (input form field element)
```
 
var username = $F('userName')
...
<input type="text" id="userName" value="Joe Doe"><br>
```
- 다른 input fileld 와 함께 작업한다.
  > text
  > checkbox
  > button

$A() function

Array 객체로 반환되어 single argument로 변환한다.

 
<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>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >

$H() function

열거된 Hash 객체로 변환한다.

 
<script>
function testHash()
{

    //object를 생성한다.
    var a = {
        first: 10,
        second: 20,
        third: 30
    };

    //hash로 바꾼다.
    var h = $H(a);
    
    alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>

$R() function

새로운 ObjectRange로 작성되어 단축된다. (lowerBound, upperBound, excludeBounds)

 
<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();" >

Form and Element classes

Form Class
- getElements(form)
  > 배열처럼 폼안의 엘리먼트들을 모두 리턴한다.
- getInputs(form, typeName, name)
  > 엘리먼트 타입 또는 엘리먼트 이름에 의해 필터링된 결과들로부터 input 엘리먼트들을 모두 리턴한다.
- disable(form)
  > blur 이벤트가 발생했을때 폼의 모든 엘리먼트를 구한다. 그리고 모든 엘리먼트의 true를 위해 속성이 disabled로 설정한다.
- enable(form)
  > blur 이벤트가 발생했을때 폼의 모든 엘리먼트를 구한다. 그리고 모든 엘리먼트의 false를 위해 속성이 disabled로 설정한다.
- focusFirstElement(form)
  > 첫번째 non-hidden, non-disabled 된 폼 필드에 포커스를 둔다.
- reset(form)
  > 폼 엘리먼트의 reset을 호출한다.
- serialize(form)
  > elementname1=value1&elementname2=value2의 형태의 AJAX를 거쳐 서버로 폼을 posting 하기위해 string을 포맷한다.
Element Class - CSS Style
- addClassName(element, className)
  > 주어진 클래스 이름을 엘리먼트들의 클레스 이름으로 추가한다.
- classNames(element)
  > 주어진 엘리먼트와 함께 조합되어 CSS 클래스이름으로 나타내는 Element.ClassNames의 객체를 리턴한다.
- setStyle(element, cssPropertyHash)
  > cssPropertyHash 인자의 값들에 따라 주어진 엘리먼트안의 CSS 속성들의 값을 설정한다.
- getStyle(element, cssProperty)
  > 주어진 엘리먼트의 CSS 속성의 값을 리턴한다. 존재하지 않는 다면 null을 리턴한다.
Element Class - Visibility
- hide(elem1 [, elem2 [, elem3 [...]]])
  > style.display가 'none'으로 설정된 각 엘리먼트를 감춘다.
- show(elem1 [, elem2 [, elem3 [...]]])
  > style.display가 ' '로 설정된 각 엘리먼트를 보여준다.
- toggle(elem1 [, elem2 [, elem3 [...]]])
  > 각 눌려진 엘리먼트의 visibility를 토글한다.
- scrollTo(element)
  > 엘리먼트 위치를 위해 윈도우를 스크롤 한다.
Element Class
- remove(element)
  > 다큐먼트에서 엘리먼트를 삭제한다.
- update(element, html)
  > 주어진 html 인자를 엘리먼트의 inner html로 바꾼다.

Ajax.Request

Handles XMLHttpRequest handling

 
// Use Prototype's Ajax.Request for remoting
var url = 'http://localhost:8084/ajax-validation-prototype/validate';
var pars = "action=create&"+ "id=" + escape(target.value);
var myAjax = new Ajax.Request(
                 url,
                 // AJAX options
                 {
                   method: 'get', // HTTP method
                   parameters: pars, // Parameters
                   onComplete: processRequest // Callback function
                  }
                 );

Ajax.Request를 호출할때, AJAX 옵션들
- method: 'post'
  > HTTP request의 메소드. 디폴트는 'post'이다.
- parameters
  > request로 통과된 값들의 url-formatted 리스트
- postBody
  > HTTP POST 의 경우, request body 안에 통과된 content
- on<event>: Function(XMLHttpRequest, Object)
  > 사용자 함수는 각각의 event/status가 AJAX 호출동안 도착되었을때 호출된다.
- onException: Function(Ajax.Request, exception)
  > 사용자 함수는 AJAX를 호출시 클라이언트측에서 예외상황이 발생했을때, 호출된다. invalid 응답이나 invalid 인수처럼,

참고문헌

http://www.javapassion.com/ajax/Prototype.pdf

문서에 대하여

최초작성자 : 난다
최초작성일 : 2007년 6월 11일
버전 : 0.1
문서이력 :

2007년 6월 11일 난다 문서 최초 생성

ProtoType