prototype.js
1. 개요
prototype는 Ajax의 성장에 기여한 라이브러리이다. 샘스테판이 제작하였으며 prototypejs.org에서 다운로드 받을 수 있다.
prototype 라이브러리는 자바스크립트 프로토타입을 기반으로 클래스를 에뮬레이션하는 방법을 제공한다. 또한, 자바스크립트에서 페이지 내의 여러 엘리먼트에 접근하는 유용한 기능을 제공한다. javascript의 실제 동작을 Wrapping하고 있기 때문에 javascript에 익숙하지 않은 개발자에게는 오히려 혼란을 줄 수도 있다.
2. 설치
다운로드 받은 prototype.js 파일을 웹페이지 에서 아래와 같이 코드 하는 것만으로 설치는 끝이다. 물론 해당 경로에 prototype.js를 복사해 두는 것을 잊지 말자.
| <script type="text/javascript" src="prototype.js" ></script> |
3. 사용
3.1 헬퍼 함수와 스크립트 확장
Prototype에서 제공하는 헬퍼함수는 대부분 $로 시작한다. 가장 자주 사용하는 함수는 $()로 document.getElementById 대신 사용한다. 다만 엘리먼트 리스트를 지정하면, 엘리먼트의 배열을 반환한다.
| var theDivs = $('div1', 'div2', div3' ); |
$F는 폼 필드의 값을 반환한다. $H 함수는 객체를 열거형 Hash로 반환해 준다.
아래 코드는 객체를 prototype의 Hash객체로 변환하고 Hash함수중에 하나인 values를 이용해서 자바스크립트 배열에 저장한다.
| var obj = { partA : one, partB : two, partC : three }; var hashObj = $H(obj); var arr = hashObj.values(); |
$R함수는 new ObjectRange(lowerBound, upperBound, excludeBounds) 를 작성하기 위한 짧은 형태이다. ObjectRange의 each 메소드를 이용하여 iterator 로서의 기능을 지원한다.
| var range = $R(10, 20, false); range.each( function(value, index){ alert(value ); }); |
댓글