Prototype.js 는 가장 많이 쓰이는 자바스크립트 라이브러리 중 하나로, Sam Stephenson에 의해 만들어져서 현재는 오픈소스로 계속 개발/관리되고 있다.
Prototype.js는 하나의 파일로 만들어진 JS 라이브러리이지만, 자바스크립트 및 Ajax, JSON을 위한 프레임워크라 할 수 있을 정도로 강력하다. 또한, Ruby on Rails, script.aculo.us, Rico 등과 같은 다른 강력한 라이브러리의 기반 혹은 일부가 되어 있다.
Prototype.js 홈페이지(http://prototypejs.org/)에서 파일 다운 및 관련 정보를 확인할 수 있고, Github(https://github.com/sstephenson/prototype)에서 소스코드가 관리되고 있다.
설치 및 사용법 : 프로젝트에 prototype.js를 복사한 후 외부 스크립트 추가
<script type="text/javascript" src="/경로/prototype.js"></script>
Prototype.js의 강력한 특징은 아래와 같다.
- 클래스와 상속 정의 : 클래스와 서브클래스 정의 및 부모 호출 등
- DOM 확장 : DOM 엘리먼트를 위해 추가된 메소드 제공
- Ajax 활용 용이 : Ajax 호출의 단순화
- JSON 활용 용이 : JSON 인코딩과 디코딩 지원
- 이벤트 Delegation(임명) : 이벤트-드리븐 프로그래밍을 위한 향상된 기술 제공
- 엘리먼트의 너비와 간격 측정 : 엘리먼트의 픽셀값 측정
간략하게 몇가지를 소개해 본다면,,
스크립트에서 $(), $F(), $$()와 같은 표현법을 본적이 있을 것이다. 이들은 특정 요소를 선택하는 기능을 수행하는데, 자주 사용되는 문법을 간단하게 줄여서 편리하게 사용할 수 있게 해놓은 것이다.
- $() : getElementById() 함수의 단축형을로 해동 엘리먼트를 참조
document.getElementById("id_of_element").style.color = "#000000";
// 동일
$("id_of_element").setStyle({color: '#000000'});
- $F() : 해당 엘리먼트의 값을 참조 (보통 value에 해당)
$F("id_of_input_element")
- $$() : CSS 셀렉터
$$("a.pulsate").each(Effect.Pulsate);
클래스를 정의하고, 부모 클래스 상속받는 기능은 아래 코드를 참고하면 이해하기 쉬울 것이다.
- 클래스 정의와 상속
// properties are directly passed to `create` method
var Person = Class.create({
initialize: function(name) {
this.name = name;
},
say: function(message) {
return this.name + ': ' + message;
}
});
// when subclassing, specify the class you want to inherit from
var Pirate = Class.create(Person, {
// redefine the speak method
say: function($super, message) {
return $super(message) + ', yarr!';
}
});
var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"
Ajax를 활용하여 요청(request)과 응답(response)하는 표현도 매우 간결하게 정의되어있다.
- Ajax request & response callback
new Ajax.Request('/some_url', {
method:'get',
onSuccess: function(transport) {
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function() { alert('Something went wrong...'); }
});
살펴본 바와 같이 Prototype.js 는 웹 프로젝트에 필수적인 라이브러리인 만큼, 깊이있는 이해가 필요하겠다. 특히, 1.6.0 버전을 기점으로 표현법이 상당히 많이 바뀌었기 때문에, 버전에 따란 다른 사용법을 어느정도 숙지할 필요가 있겠다.
