티스토리 뷰

Daylogs/Javascript

prototypejs 간단 설명~

ohgyun 2008. 12. 18. 16:15

프로토타입은~

자바스크립트를 좀 쉽고 편하게 쓰기 위한 좋은 공통유틸(?) 정도로 생각하시면 될 것 같아요~

특히 DOM(Document Object Model:div, input 같은 것들) 객체 접근이랑 AJAX에 매우 유용해요~~

 

정식 명칭은 prototypejs 이고, 최신 버전은 1.6 버전이예요.

 

공식 사이트는 http://prototypejs.org 이구요~

API가 되게 잘 되어 있거든요~

http://prototypejs.org/api 에 가시면 JAVA API처럼 보실 수 있어요. (깔끔하니 보기 좋아요^^)

 

 

음~ 여기서는 객체 접근이랑 AJAX에 대한 부분, 간단한 유용한 함수에 대해서 소개해드리려구 하고요.

더 자세한 내용과 디테일한 사용법은 API를 참조하시면 될 것 같아요.^^

알아두시면 확실히 시간이 절약되고 에러도 적고~ 금방 쉽게 구현되니 바쁘시더라도 한 번 읽어주세요^^~

 

 

0. 설치?

 

페이지 상단에

 

    <script type="text/javascript" src="prototype.js(prototypejs 경로)"></script>

 

를 넣어주시면 되요.

 

 

1. 객체 접근 ($, $$, $F)

해당 API 문서: http://prototypejs.org/api/utility

 

prototypejs의 객체 접근 방식에 대해 소개할께요~

 

    <div id="divId">울랄라~</div>

 

위와 같은 객체가 있을 때에,

기존에는

 

    document.getElementById("divId")

 

와 같은 방식으로 가져와야 했는데,

 

prototypejs에서는

    

    $("divId")

 

와 같이 가져오시면 되요.

해당 객체의 id 값으로 가져와도 되고,

아래와 같이 이미 가져온 객체를 $를 이용해 확장(상속) 하셔도 됩니당~

 

    $(document.getElementById("divId"));

 

$를 이용해서 가져온 객체는 prototypejs의 유용한 함수들을 모두 쓸 수 있게 되거든요~

예를 들어 이런 것들이 있어요.

 

    $("divId").hide(); // 숨기기

    $("divId").toggle(); // show/off 변경

    $("divId").update("어쩌고"); // innerHTML 변경

 

$ 이외에 $$가 있는데 이것도 무진장 좋아요.

css에 표기하는 방식대로 객체를 가져오는데 배열로 가져와요~

tag명이나 class 명으로 구분지어 객체들을 가져올 수 있어서 되게 편해요.

예를 들어,

 

    <a href="#" class="link">어쩌고</a>

    <a href="#" class="link">저쩌고</a>

    <a href="#" class="link">꿍시렁</a>

 

이런 놈들을 다 가져오려면,

예전에는 가져오려는 객체들의 각각 가져오거나 또는 parentNode를 찾아서 childNodes로 가져왔어야 했는데,

 

    var links = document.getElementById(상위노드).childNodes;

    // 다음 type 검사 등등을 거쳐야 함

    

prototypejs에서는

 

    $$(".link");

    

와 같이 가져오면 되요. css에서 link 클래스를 설정할 때 .link 라고 하면 되니까~

 

만약, 아래와 같이 큰 문서 아래에 있는 특정 객체들을 주루룩 가져오고 싶다면,..

 

    ... (중략)

    <div id="divId">

        ... (중략)

        <a href="#" class="link">어쩌고</a>

        <a href="#" class="link">저쩌고</a>

        <a href="#" class="link">꿍시렁</a>

        ... (중략)

    </div>

    ... (중략)

 

이렇게 되어 있을 땐, divId 객체를 가져온 후에 class 명으로 가져올 수도 있어요.

이때엔 select라는 명령어가 있는데요~

 

    $("divId").select(".link");

    또는

    $$("#divId a");

    또는

    $$("#divId .link");

    

이렇게 가져오면 해당 객체들을 가져올 수 있어요.

 

 

그 외에도 $F 는 input 객체의 값을 가져옵니당~

 

    $F("input 객체 아이디 또는 이름")

 

form 아래에 있는 input 객체들의 value 값을 알아서 가져오기도 합니다.

 

예를 들어

    

    <form id="aForm">

        <input type="text" id="username" name="username" value="홍길동">

    </form>

    

의 value를 가져오려면,

 

    document.getElementById("username").value

    또는

    document.forms["aForm"].username.value

    

로 가져왔던 것을,

 

    $F("username")

    또는

    $("username").getValue()

    또는

     $("username").value

    

와 같이 가져올 수 있어요~

 

또한 AJAX 부분에서 보시면 아시겠지만,

요청을 보낼 패러미터를 작성할 때에

    

    a=b&c=d&e=f

    

형태로 parameter를 URI 형태로 변경하던 작업을

    

    $("폼이름").serialize()

    

를 사용하셔서 한 번에 해결하실 수 있어요~~

 

요론 식으로 쓰시면 매우 유용할 거예요~ ㅎㅎ

자세한 사용방법 API를 참조하세요^^

 

 

 

2. AJAX

해당 API 문서: http://prototypejs.org/api/ajax

 

이미 기존에 시스템에 적용되어 있는 부분들을 보셨겠지만~

prototypejs에서는 AJAX를 편하게 사용할 수 있어요.

기존에는 XMLHttpRequest 객체를 만들어서 보내고 어쩌고 해야했지만,

여기선 Ajax 객체를 이용할 수 있어요.

 

아래와 같은 방식으로 호출하시면 되요.

 

    new Ajax.Request(url, {

        method: 'post', // 옵션~ 디폴트는 post이고 'get'으로 하셔도 되요~

        parameters: params, // URI 방식(예: a=b&c=d&e=f)의 패러미터

        onSuccess: function(transport) { // 성공 시 호출할 함수

            alert(transport.responseText); // 결과로 가져오는 응답텍스트

        },

        onFailure: function() { // 실패 시 호출할 함수

            alert("fail!");

        }

    });

    

 

url 이후에 쓰는 { a:b, c:d } 형태가 익숙하지 않으실 텐데요~

요곤 JSON(Javascript Object Notation)라는 자바스크립트 객체 전달을 위한 표기법이예요.

(JSON에 대한 자세한 사항은 http://placebo4me.egloos.com/1062935 를 참조하세요~)

아래와 같은 패러미터를

 

    a=b&c=d&e=f

 

JSON 형태로 변환하면,

 

    {a:b, c:d, e:f}

    

이렇게 되는 거지요.

{ name:value, name:value, name:value } 와 같이 되는 거예요~

JSON의 객체 자체는 독립된 객체로 만들 수 있고(javascript 객체 지향, MVOC main에 자동으로 모델 돌아가는 부분처럼...)

value는 nubmer, text, hash, array, function 등 다 될 수 있고요~

처음엔 좀 알아보기 힘든데 좀 보시면 금방 익숙해지실 거예요~

 

 

주로 action 또는 jsp로 요청을 보내서

받아온 값을 원하는 부분에 innerHTML로 넣어주는 용도로 많이 쓰고 있는데요~

 

예를 들어,

xxx.do 액션을 호출해서 뿌려진 html 값을 result라는 div 객체 아래에 innerHTML로 결과로 뿌려주고 싶으면-

아래와 같이 하면 되요.

 

    var url = "xxx.do"; // .do 로 가서 action에서 로직을 수행하고 xxx_aj.jsp 페이지에 목록 테이블을 그린다고 가정합니다.

    new Ajax.Request(url, {

        paramters: $F("xxForm").serialize(),

        onSuccess: function(req) {

            $("result").update(req.responseText);

        },

        onFailure: function() {

            alert("fail!");

        }

    });

    

 

단순히 위와 같이 결과로 가져온 값을 원하는 객체 아래에 넣는 거라면,

아래와 같이 Updater를 써도 깔끔하고 효율적이예요.

 

    var url = "xxx.do";

    new Ajax.Updater("result", url, {

        paramters: $F("xxForm").serialize()

    });

    

 

훨씬 깔끔하지요~

 

시스템 내에선 대부분 저정도면 충분히 사용 가능하실 것 같고요,

더 자세한 사항은 API를~~ ㅎㅎ

 

 

 

3. Enumerable, Array

해당 API 문서: http://prototypejs.org/api/array

 

프로토타입을 추가할 경우,

일반 자바스크립트 배열을 자동적으로 프로토타입의 배열 메서드를 사용할 수 있어요~

 

예를 들어,

 

    var myArray = ['apple', 'banana', 'grape'];

    myArray.each(function(el) {

        alert(el);

    });

 

이렇게 일반 배열이 기본적으로 프로토타입 배열을 상속받습니당~~

 

 

3-1. $A

해당 리스트를 '실제 배열'처럼 바꿔주고, 프로토타입 배열의 메서드를 사용할 수 있게 합니다.

예를 들어,

 

    document.getElementsByTagName("img")

    또는

    $$("img")

    

같은 경우, 일반 array가 아닌 nodeList를 가져오는데 이를

 

    $A(document.getElementByTagName("img"))

    

와 같이 하여 실제 배열로 바꿀 수 있어요~

 

 

3-2. iterator

프로토타입에서는 배열에 loop을 돌면서 수행하는 것들 좀더 간단하게 구현할 수 있어요.

예를 들어,

 

     for (var index = 0; index < myArray.length; index++) {

        var item = myArray[index];

        // 어쩌고 저쩌고...

     }

    

하던 것을,

 

    myArray.each(function(item) {

        // 어쩌고 저쩌고...

    });

 

와 같이 할 수 있어요.

each 구문을 통해 myArray의 각 아이템을 돌면서 설정한 함수를 실행하게끔 하는 거예요.

만약 index의 값이 필요하다면,

 

    var result = 0;

    myArray.each(function(el, idx) { // 함수의 인자 이름은 자유롭게 쓸 수 있어요~

        result += idx;

        // 어쩌고 저쩌고

    });

 

와 같이 쓰면 되요~

 

 

 

3-3. 기타 주요 함수

 

    myArray.first(); // first item

    myArray.last(); // last item

    myArray.size(); // myArray.length 와 동일

    myArray.indexOf(value); // indexOf~

    myArray.reverse(); // 순서를 바꿉니다~

    myArray.clear(); // 초기화~

    myArray.min(); // 최소값

    myArray.max(); // 최대값

    

 

자세한 사항은 API 참조~~

 

 

 

뭐 이 외에도 String이나  Date, Number 에 유용한 함수들이 많아요~~

API를 참조해보시면 좋을 듯.^^

 

 

첨부는 프로토타입 예제 파일이예요~

간단한 기능을 일반 javascript로 구현하고, 똑같이 prototypejs를 써서 구혔했어요~

 


sample_before.html: 일반

sample_after.html: prototypejs 사용~

(같은 폴더 내에 prototype-1.6.0.2.js 파일이 있어야 합니다~
prototype.js 파일을 받으셔서 소스나 파일 이름을 적당히 변경하여서 참조해보세요^^)
 

한 번 참조해보세용^^


반응형
댓글
공지사항