빠른 시간내 Prototype을 사용하기 위한 가이드 문서

By Ryan Campbell · Nov 28, 2005

http://particletree.com/features/quick-guide-to-prototype/

소개

웹 도처에 사용되는 자바스크립트의 늘어가는 인기는 클라이언트측 코드가 안정성, 속도, 재사용성등이 혼합으로 구현되도록 하는것이 좀더 중요하게 되었다. 이것을 달성하기 위한 가장 좋은 방법중 하나는 간단한 라이브러리와 모든 프로젝트를 위한 기본사항처럼 사용하기 위한 문법이다. 고맙게도 Sam Stephenson 는 우리의 자바스크립트 개발을 쉽게 하기 위한 Prototype.js 라 불리는 놀라운 함수들의 라이브러리를 만들었다.

우리의 독자들이Prototype 문법을 사용하는 문서 를 읽은 후 크게 놀랐고, 우리는 많은 개발자를 위해 좀더 쉽게 배울수 있도록 도와주는 라이브러리를 위한 참조문서를 만드는게 좋겠다는 결심을 했다. 다음의 튜토리얼은 Particletree프로젝트에서 사용된 가장 공통적인 함수들을 사용하는 간단한 예제와 함께 설명할 것이다. 이 문서는 Sergio Pereira에 의해 좀더 많은 내용을 가진 비공식적인 프로토타입 문서 와 함께 사용되었음을 의미한다. 그리고 script.aculo.us 문서 위키는 모든 자바스크립트/프로토타입 개발자들이 읽기를 매우 추천한다.

시작하기

파일을 다운로드 한 후에, 당신이 선호하는 디렉토리에 그 파일들을 넣어둬라. 당신이 해야할 일은 html문서에 다음처럼 추가를 하는 것이다.

<script src="/scripts/prototype.js" type="text/javascript"></script>

이것으로 자바 스크립트를 개발하는게 10배는 쉬워진다. 지금, 당신이 획득한 새롭고 멋진 무기를 보자.

알림 - 이 튜토리얼은 1.3.1버전을 기반으로 작성되었다.

$() 함수

가장 자주 사용되고 편리한 함수인, $()는 DOM요소를 다루기 위한 쉬운 방법을 제공한다. 일반적으로, 당신이 DOM내 특정 요소에 접근하고자 한다면, 다음처럼 작성할것이다.

node = document.getElementById("elementID");

$()를 사용하면, 다음처럼 간단히 작성할수 있다.

node = $("elementID");

간단하고 멋지지만 이러한 장점보다, $()함수는 다중 요소를 함수안으로 가져오는 기능을 가지고 있기 때문에 document.getElementById()보다 좀더 강력하다.

allNodes = $("firstDiv", "secondDiv"); for(i = 0; i < allNodes.length; i++) {     alert(allNodes[i].innerHTML); }

이 예제에서, 우리는 루프를 통해 간단히 접근할수 있는 요소들의 배열을 가지고 오는 것을 볼수 있다.

폼 헬퍼(Form Helper) 함수

폼은 HTML과 CSS관점에서 근심거리일뿐 아니라, 자바스크립트의 측면에서도 그렇다. Prototype.js는 폼을 다루는 유용하고 독창적인 함수를 제공한다.

$F() 함수 는 폼 요소의 값과 전달하는 ID를 반환한다. 만약 우리가 다음처럼 HTML필드를 둔다면,

<input type="text" id="textfield" name="textfield" /> <textarea rows="5" cols="5" id="areafield" name="areafield"></textarea> <select id="selectfield" name="selectfield">     <option value="1" selected>One</option>     <option value="2">Two</option> </select> <input type="checkbox" id="checkfield" name="checkfield" value="1" checked />

우리는 $F()함수를 사용하여 폼내의 값들에 쉽게 접근할수 있다.

$F("textfield");      // returns the value of the text input $F("areafield");      // returns the value of the textarea $F("selectfield");    // returns the selected value of the select $F("checkfield");     // returns undefined if not checked, or the value

제어와는 관계없이 값을 얻는 기능은 대부분의 환경에서 좀더 쉽게 폼을 처리하도록 해준다. 여기에 이 함수를 사용할때 찾을수 있는 두가지 결점이 있다. 1) radio그룹의 선택된 값에 접근하는 쉬운 방법이 없다(하나의 radio요소의 값만 처리). 2) $()함수를 사용할때처럼 다중 ID를 전달하는 것이 불가능하다.

*다른 함수인, Form.getElements() 는 타입에 관계없이 모든 폼 요소의 배열을 반환한다.

allNodes = Form.getElements("myform"); for(i = 0; i < allNodes.length; i++) {     //do something to each form field }

이 예제에서, 우리는 myform이라는 id를 가진 폼으로 부터 모든 요소를 가져온다. 만약 당신이 onclick을 추가하고 싶거나 각각의 폼필드에 도움말 팝업을 추가하기를 원한다면, 당신은 위와 같은 형식을 통해 할수 있다.

우리가 볼 다음 메소드는 Form.serialize()이다. Ajax요청을 빌드할때, 당신은 데이터를 전달하기 위해 당신 자신만의 문자열을 포맷팅하기를 원한다. 폼이 서브밋되었을때, 문자열은 빌드되고, serialize()는 처리를 쉽게 만든다.

allNodes = Form.serialize("myform"); // returns field1=value1&field2=value2&field3=value3 and so on...

우리를 돕기 위해 문자열을 빌드하라. 하지만 메소드를 좀더 좋게 만드는 것은 이것은 필드의 타입에 기초를 두지 않는 것이다. 우리는 이전에 $F()가 radio그룹에서 몇가지 문제점을 가지는 것을 봤다. 하지만 serialize()는 어떠한 필드 타입을 위해서도 값을 정확하게 처리한다. 사용가능한 폼 메소드만 있는 것은 아니다, 나머지것들을 보기 위해서는 Sergio의 문서 를 보라.

getElementsByClassName

getElementsByClassName()가 아직도 자바스크립트로 빌드되지 않은 이유는 뭔가.? 이것은 프로토타입이 아니고 그래서 프로토타입은 문서객체의 확장처럼 저장소(arsenal)로 이것을 추가했다. 이것은 document.getElementsByTagName()처럼 정확하게 작동한다. 단지 차이점은 className을 체크하는 것이다.

allNodes = document.getElementsByClassName("red"); for(i = 0; i < allNodes.length; i++) {     alert(allNodes[i].innerHTML); }

반환되는 배열은 주어진 className과 일치하는 모든 요소를 포함한다. 이것은 다중 className을 가진 요소들과도 잘 작동한다. getElementsByClassName()는 도처에서 모든 프로젝트에서 사용되는 함수가 되었다. 주로 DOM이벤트에 붙기 때문에 나는 모든 개발자가 이것을 사용하도록 제안한다.

요소 헬퍼(Element Helper) 함수

요소객체는 공통적으로 DOM조작을 돕는 많은 수의 헬퍼 함수를 제공한다. 몇몇 이러한 함수는 하나의 호출에 10줄 이상의 코드를 단순화하는동안 어떤 새로운 것도 생성하지 않는다. 그럼 몇몇 예제를 보자.

헬퍼 없이 요소의 높이를 가져오자.

$("first").offsetHeight

그리고 지금은 헬퍼를 사용하는 경우이다.

Element.getHeight("first")

이 경우, 헬퍼는 어떠한 잇점도 제공하지 않는다. 지금 우리가 요소로부터 className을 제거하길 원하는가.? 이것은 (Prototype.js소스코드로 부터 얻어진) 다소 긴 방법이다.

element = $(element); if (!element)     return; var newClassName = ''; var a = element.className.split(' '); for (var i = 0; i < a.length; i++) {     if (a[i] != className) {         if (i > 0)             newClassName += ' ';         newClassName += a[i];     } } element.className = newClassName;

그리고 지금은 헬퍼 함수를 사용하는 경우이다.

Element.removeClassName("elementID", "red");

멋진가.? 첫번째 예제와는 달리, 대부분의 헬퍼 함수는 공통적인 작업을 쉽게 수행하여 시간과 수고를 아낀다. 그리고 일관성을 위해, 이것은 프로젝트 도처에 Element문법을 사용하는 것이 가장 좋은 방법이 될것이다. 헬퍼 함수의 전체 목록과 그것들을 사용하는 방법을 보기 위해서, Sergio의 프로토타입 문서를 보라.

Try.these 함수

Try.these()는 다른 자바스크립트 구현물과 관계없이 브라우저를 종속되지 않고 작동하는 코드를 생성하도록 개발자를 도와주기 위한 멋진 함수이다. 객체와 브라우저 인식의 자신만의 방법대신에, 이 함수는 에러를 발생할때까지 코드의 하나의 경로를 수행하도록 시도하고 다음 경로로 교체한다.

return Try.these(     function() {         alert("first");         jkgjhgjhg        //intentional error         alert("firsterror");         return 1;     },     function() {         alert("second");         return 2;     } );

위 예제에서, 첫번째 경로는 내부 에러발생시 수행을 멈출것이다. 이것을 알라. 모든것은 에러가 발생되지 전에 수행되어야 하기 때문에 이것은 우리의 코드가 신중하도록 하기 위해 중요하다. 우리는 코드가 두번 수행되지 않도록 주의해야만 한다. 전체적으로, Try.these()는 우리가 종종 사용하는 함수일뿐 아니라, 이것이 존재하고 어떻게 사용해야 하는지 아는것은 멋진 일이다.

Ajax 지원

이 라이브러리에서 Ajax지원 함수는 부족하지 않다. 그리고 나는 Prototype.js의 도움으로 Ajax애플리케이션을 생성하는 방법을 보여줄것이다. 문서로부터 우리는 다음처럼 일반적인 Ajax요청을 볼수 있다.

var myAjax = new Ajax.Request(     url,     {method: 'post', parameters: data, onComplete: ajax_response} );

메소드가 post이거나 get인 지점에서, 파라미터는 이름/값 형태의 문자열이고, onComplete은 모든것이 종료되었을때 호출되어야 하는 함수이다. 핵심기능을 이해했을때, 라이브러리를 도구화하는 자신만의 함수를 생성하여 반복적인 Ajax호출을 만드는 것이 쉽다. 먼저, Ajax요청을 처리하는 간단한 함수이다.

function ajax_request(url, data) {     var myAjax = new Ajax.Request(         url,         {method: 'post', parameters: data, onComplete: ajax_response}     ); }

요청이 종료된후, 이것을 ajax_response()로 보낸다.

function ajax_response(originalRequest) {     if(!bHasRedirect) {         //process originalRequest.responseText;     }     else {         bHasRedirect = false;         ajax_request(originalRequest.responseText, "");     } }

당신이 Ajax요청을 만든후, 응답은 언제나 ajax-response()로 보내진다. 여기서 다른 Ajax요청은 bHasRedirect(전역변수)가 true로 셋팅된 경우에만 만들어질것이고 true가 아니라면 아마 코드는 함수와 originalRequest.responseText()의 전역 배열에 기반하여 수행될것이다.

PeriodicalExecuter

PeriodicalExecuter객체가 초기화되면, 이것은 주어진 기간에 특정 함수를 반복적으로 호출한다. 이것은 당신이 사이트의 Ajax부분을 자동으로 수정하길 바랄때 유용할것이다.

function periodicalUpdate() {     new PeriodicalExecuter(refreshNews, 10); } function refreshNews() {     //Ajax code to grab news and update DOM }

PeriodicalExecuter 생성자는 첫번째 파라미터처럼 호출하기 위한 함수를 예상한다. 그리고 이것은 시간간격(초단위)이다. 비록 공통적인 setInterval()가 밀리세컨드를 다루지만 시간을 혼동하지 말라. 하지만 이 함수에서 우리는 초 단위로 다룬다. 예제는 Ajax가 복잡하다고 가정하지만, 이것은 어떤 이유로 페이지를 수정할수 있다. Prototype.js는 또한 Ajax를 다룰때 쉽게 처리할수 있는 Ajax.PeriodicalUpdater클래스를 가진다.

추가적인 고급기능.

우리가 Prototype.js가 제공하는 모든 함수와 메소드를 다룰수는 없지만, 이것은 여기서 다룰수 없는 것중에 몇몇을 강조해두는 것은 중요하다고 볼수 있다.

감독(observe) - 이 메소드 함수는 addEvent()와 비슷하고, DOM에 이벤트를 붙이기 위해 사용된다.

사용자 상호작용(User Interaction) - 당신은 사용자를 처리하는 key가 무엇을 만드는지 알기 위해 KEY_TAB와 같은 전역값내 빌드된것을 찾을수 있다. 추가적으로, 당신은 마우스를 클릭할때 위치를 찾을수 있다.

클래스 생성(Class Creation) - Prototype.js가 제공하는 것이 무엇인지 왜 멈추는가.? 같은 문법과 함수를 사용하여, 우리는 일관성을 유지하기 위해 자신만의 클래스를 빌드할수 있다. 생성자와 추가적인 메소드를 추가하는 것은 결코 쉽지 않다. 이것을 포장하기 위해 문서에서 Class.create() 를 보라.

당신이 저자를 알지못하고 무엇인가 발생한것을 제대로 이해하지 못할때 일반적인 코드/라이브러리를 사용하는 것을 받아들일수 있는가.? 당신이 코드를 테스트하고 사람/커뮤니티를 신뢰하는 만큼 나의 대답은 예이다. Prototype.js의 경우, 신뢰는 두개의 소스로부터 빌드된다. 먼저, Ruby on Rails 은 프로토타입 지원과 통합되었다. Ruby on Rails이 훌륭한 개발 기본이 된 이후로, 많은 버그가 발견되었고 Prototype.js가 좀더 안정화되도록 많은 문제가 해결되었다. 두번째, 개발자는 Ruby on Rails의 creator 를 고용하는 37시그널에서 근무한다. 나는 회사의 개발 환경을 신뢰할 뿐 아니라, Prototype.js가 테스트가 지속되고 지속적으로 발전하리라고 생각한다. 주어진 것으로 나의 프로젝트를 테스트하고, 나는 나의 모든 프로젝트에 이 라이브러리를 자신있게 사용한다.

Prototype.js는 이 튜토리얼에서 목록화된 것보다 두배 이상의 함수를 가지고 명백히 체크아웃할 가치가 있다. 만약 당신이 파일 사이즈(약 30K)가 꺼려진다면, 당신이 사용하지 않는 클래스는 뺄수 있고 사용자에게 제공하기 전에 PHP와 함께 자바스크립트 파일을 압축할수 있다는 것을 기억하라. 또한 당신이 약간의 메소드를 사용했다면 나머지는 배우기 쉽다. 그래서 배우는 과정은 매우 간단하다. 기본적으로 이것을 시도하기 위한 핑계거리는 없다. 위에서 본 예제는 Particletree에서 이것들을 다룬 방법이고 테스트없이 사용된 것은 없다. 기억하라. 이것은 Prototype.js에 대한 소개이고 그래서 비공식적인 프로토타입 문서를 참조하고 신뢰해야 하며 다양한 메소드를 찾는 어려운 작업을 위해 script.aculo.us 문서 위키 wiki를 보라. 언제나 처럼, 당신이 실수나 가능한 개선사항이 있다면, 우리에게 알려달라.