ProtoType

Toggle Space Navigation Tree
Space Map

Prototype

Table of Contents

Prototype은 무엇인가?

  1. Prototype은 무엇인가?
    • Sam Stephenson에 의해 쓰여진 자바스크립트 라이브러리이다.
      > prototype.js
      > http://prototype.conio.net
    • AJAX 유틸리티 함수 - Ajax.Request 를 포함한 유틸리티 자바스크립트 함수들을 지원한다.
      > $() - same as document.getElementById('someid');
      > $F() - working with Forms
      > $R()

Utility 함수들

  1. $() function
    • document.getElementById()와 같다.
      var d = $('myDiv');
    • 사용자는 하나보다 더 많이 pass 할 수 있다. id 와 $()는 요청되어진 엘리턴트들 모두 포함한 array 객체를 리턴할 수 있다.
      > 사용자가 다중의 엘리먼트들을 수정할때 유용하다.
       
      //$()을 통해 array 로 엘리먼트들을 구한다.
      var divs = $('myDiv','myOtherDiv');
      
      // array 안의 각 아이템의 차일드 노드를 디스플레이한다.
      for(i=0; i<divs.length; i++){
          alert(divs[i].innerHTML);
      }
      
  2. $F() function
    • 엘리먼트의 값을 구할때 사용된다. (input form field element)
       
      var username = $F('userName')
      ...
      <input type="text" id="userName" value="Joe Doe"><br>
      
    • 다른 input fileld 와 함께 작업한다.
      > text
      > checkbox
      > button
  3. $A() function
    • Array 객체로 반환되어 single argument로 변환한다.
       
      <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>
      </select>
      <input type="button" value="Show the options" onclick="showOptions();" >
      
  4. $H() function
    • 열거된 Hash 객체로 변환한다.
       
      <script>
      function testHash()
      {
      
          //object를 생성한다.
          var a = {
              first: 10,
              second: 20,
              third: 30
          };
      
          //hash로 바꾼다.
          var h = $H(a);
          
          alert(h.toQueryString()); //displays: first=10&second=20&third=30
      }
      </script>
      
  5. $R() function
    • 새로운 ObjectRange로 작성되어 단축된다. (lowerBound, upperBound, excludeBounds)
       
      <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();" >
      
      

Form and Element classes

  1. Form Class
    • getElements(form)
      > 배열처럼 폼안의 엘리먼트들을 모두 리턴한다.
    • getInputs(form, typeName, name)
      > 엘리먼트 타입 또는 엘리먼트 이름에 의해 필터링된 결과들로부터 input 엘리먼트들을 모두 리턴한다.
    • disable(form)
      > blur 이벤트가 발생했을때 폼의 모든 엘리먼트를 구한다. 그리고 모든 엘리먼트의 true를 위해 속성이 disabled로 설정한다.
    • enable(form)
      > blur 이벤트가 발생했을때 폼의 모든 엘리먼트를 구한다. 그리고 모든 엘리먼트의 false를 위해 속성이 disabled로 설정한다.
    • focusFirstElement(form)
      > 첫번째 non-hidden, non-disabled 된 폼 필드에 포커스를 둔다.
    • reset(form)
      > 폼 엘리먼트의 reset을 호출한다.
    • serialize(form)
      > elementname1=value1&elementname2=value2의 형태의 AJAX를 거쳐 서버로 폼을 posting 하기위해 string을 포맷한다.
  2. Element Class - CSS Style
    • addClassName(element, className)
      > 주어진 클래스 이름을 엘리먼트들의 클레스 이름으로 추가한다.
    • classNames(element)
      > 주어진 엘리먼트와 함께 조합되어 CSS 클래스이름으로 나타내는 Element.ClassNames의 객체를 리턴한다.
    • setStyle(element, cssPropertyHash)
      > cssPropertyHash 인자의 값들에 따라 주어진 엘리먼트안의 CSS 속성들의 값을 설정한다.
    • getStyle(element, cssProperty)
      > 주어진 엘리먼트의 CSS 속성의 값을 리턴한다. 존재하지 않는 다면 null을 리턴한다.
  3. Element Class - Visibility
    • hide(elem1 [, elem2 [, elem3 [...]]])
      > style.display가 'none'으로 설정된 각 엘리먼트를 감춘다.
    • show(elem1 [, elem2 [, elem3 [...]]])
      > style.display가 ' '로 설정된 각 엘리먼트를 보여준다.
    • toggle(elem1 [, elem2 [, elem3 [...]]])
      > 각 눌려진 엘리먼트의 visibility를 토글한다.
    • scrollTo(element)
      > 엘리먼트 위치를 위해 윈도우를 스크롤 한다.
  4. Element Class
    • remove(element)
      > 다큐먼트에서 엘리먼트를 삭제한다.
    • update(element, html)
      > 주어진 html 인자를 엘리먼트의 inner html로 바꾼다.

Ajax.Request

  1. Ajax.Request
    • Handles XMLHttpRequest handling
       
      // Use Prototype's Ajax.Request for remoting
      var url = 'http://localhost:8084/ajax-validation-prototype/validate';
      var pars = "action=create&"+ "id=" + escape(target.value);
      var myAjax = new Ajax.Request(
                       url,
                       // AJAX options
                       {
                         method: 'get', // HTTP method
                         parameters: pars, // Parameters
                         onComplete: processRequest // Callback function
                        }
                       );
      
  2. Ajax.Request를 호출할때, AJAX 옵션들
    • method: 'post'
      > HTTP request의 메소드. 디폴트는 'post'이다.
    • parameters
      > request로 통과된 값들의 url-formatted 리스트
    • postBody
      > HTTP POST 의 경우, request body 안에 통과된 content
    • on<event>: Function(XMLHttpRequest, Object)
      > 사용자 함수는 각각의 event/status가 AJAX 호출동안 도착되었을때 호출된다.
    • onException: Function(Ajax.Request, exception)
      > 사용자 함수는 AJAX를 호출시 클라이언트측에서 예외상황이 발생했을때, 호출된다. invalid 응답이나 invalid 인수처럼,

참고문헌

문서에 대하여

최초작성자 : 난다
최초작성일 : 2007년 6월 11일
버전 : 0.1
문서이력 :

  • 2007년 6월 11일 난다 문서 최초 생성
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.