본문 바로가기
Framework/AJAX

prototype.js

by windrises 2008. 7. 25.

Prototype은 무엇인가.?

prototype.jsSam Stephenson에 의해 작성된 자바스크립트 라이브러리이며 웹2.0의 특성에 따라 작성된 코드들은 비동기적 웹페이지 구현시 많은 도움을 줄 수 있을 것입니다



ProtoType의 사용


prototype은 http://prototype.conio.net/에서 다운 받을 수 있으며 구현하고자 하는 페이지에서 다음과 같은 구문을 추가하면 prototype framework를 사용할 수 있다


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

라이브러리를 사용하는 것은 반복적인 타이핑과 어구를 많이 줄일수 있게 됨으로서 작업 생산성 및 효율성을 높이는 데 있다

당연히 prototype.js에도 미리 정의된 많은 수의 객체와 유틸리티 함수를 가지게 되는데 어떤 것들이 있는지 살펴보도록 한다

 

유틸리티 함수들(utility functions)


$() 함수 사용하기

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키라고 할 수 있다. 예를 들면 DOM함수를 통해 특정id를 가진 요소 하나를 가져온다고 하자


 node = document.getElementById("elementID");


위의 식은 $()를 사용하여 다음과 같이 바꿀수 있다


 node = $("elementID");


하지만 $()함수는 DOM함수와는 달리 여러개의 id를 사용할수 있다는 장점이 있다 이 때 반환하는 값은 Array객체를 반환한다


 allNodes = $("firstDiv", "secondDiv");


 for(i = 0; i < allNodes.length; i++) {

    alert(allNodes[i].innerHTML);

 }


이 함수의 또 다른 장점은 이 함수를 통하여 id문자열이나 요소객체 자체를 전달할 수 있기

때문에 인자타입을 가지는 다른 함수를 생성할때 매우 유용하다

$F() 함수 사용하기

$F() 함수는  DOM의 document.getElementById()함수에 대한 또 다른 단축키라 할 수 있다.

이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다.

마찬가지로 요소 id나 요소객체 자체를 인자로 가질수 있다.


예를 들면 다음과 같은 Form필드가 존재한다고 하자

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

 

$F()을 통해 쉽게 입력컨트롤의 값을 쉽게 가져올 수 있지만

라디오그룹에서는 사용하기 힘들다는 점과 $()와 같이 다수의 인자를 가질수 없다

$A() 함수 사용하기

$A() 함수는 인자들을 하나의 인자로 받아들여 Array객체로 변환한다


Array Class상속을 겸한 이 함수는 어떠한 enumerable list 형태도 Array객체로 변환 또는 복사 할 수 있다는 장점이 있다

예를 들면 다음과 같이 DOM의 NodeLists를 regular Arrays로 변환하기에 유용하다

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



$A() 의 또 하나의 장점은 함수생성시 인자의 수를 유연하게 받아들이게 한다는 점이다

 <script>

   function shoutOut(){

       sayHi('Hello, ', 'Homer', 'Bart', 'Marge', 'Snowball');

   }


   function sayHi(){

      var names = $A(arguments).slice(1);

      var phrase = arguments[0];

      for(i=0; i<names.length; i++)

          alert(phrase + names[i]);

   }

 </script>

 <input type="button" value="Say hi to everybody" onclick="shoutOut();" >

$H() 함수 사용하기

$H() 함수는 결합된 배열처럼 보이는 Hash객체로 변환한다.

 <script>

    function testHash() {

        var a = []; //let's populate the associative array

        a['first'] = 10;

        a['second'] = 20;

        a['third'] = 30;


        //now transform it into a hash

       var h = $H(a);

       alert(h.toQueryString());

       //displays: first=10&second=20&third=30 }

 </script>

$R() 함수 사용하기

$R() 함수는 new ObjectRange(lowerBound, upperBound, excludeBounds) 형태의 다른 표현이다. 이 클래스에 대하여는 ObjectRange 클래스 문서를 통해 확인해보시길 바라며. 다음은 each 메소드를 통해 반복(iterators)의 사용법을 보여주는 간단한 예제입니다.

더 많은 메소드는 Enumerable 클래스 문서에서 보실 수 있습니다.

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

Try.these() 함수 사용하기

Try.these()함수는 개발자가 across Browser구현시 서로 다른 javascript등을 작성할 필요가 있는 코드생성시 도움을 주는 중요한 함수입니다

이 함수는 인자처럼 많은 수의 함수를 가지고 그것들을 순차적으로 호출하도록 해준다. 이것은 함수중에 하나씩 수행하고 성공적인 함수호출의 결과를 반환할때까지 순차적으로 수행된다.

 <script>

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

 </script>


 <input type="button" value="Try_these_test" onclick="test();" >

[출처] Prototype.js 가이드 01|작성자 시반

'Framework > AJAX' 카테고리의 다른 글

SwfUploadPanel  (0) 2008.01.11
새로운 자바스크립트 압축기 "ShrinkSafe"  (0) 2008.01.11
Object 와 Json 상호변환  (0) 2008.01.02
AJAX 보안  (0) 2007.12.24
Ajax와 XML: 다섯 개의 일반적인 Ajax 패턴  (0) 2007.11.14