다타만의 개인 블로그입니다.

* Ajax 객체
이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root와 명명공간(namespace)처럼 제공한다


+ 프라퍼티
- activeRequestCount
   진행중인 AJAX요청의 수


+ 메소드
- getTransport()
   새로운 XMLHttpRequest 객체를 반환


* Ajax.Responders 객체
Enumerable를 상속하였다.
Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다.
당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.
Ajax 를 컨트롤하기 위해서 내부적으로 사용되어 지는것 같다.
음.. 어디까지 나 추측이다.
난 써본적이없다.


+ 프라퍼티
- responders
  객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다

+ 메소드

- register(responderToAdd)
   responderToAdd: 호출될 메소드를 가진 객체
   responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다.
  메소드를 등록하는것이다.
  미리 정의된 이벤트에 대응하는 모든 메소드가 호출된다.

- unregister(responderToRemove)
  responderToRemove: list로부터 제거될 객체
  메소드 목록에서 responderToRemove객체를 지운다.

- dispatch(callback, request, transport, json)
  callback: 보고되는 AJAX이벤트 이름
  request: 이벤트를 책임지는 the Ajax.Request 객체
  transport: AJAX호출을 가지는 XMLHttpRequest 객체
  json: 응답의 X-JSON 헤더(존재할때만)

등록된 객체의 목록을 통해 실행하는 것은 callback 인자내 결정된 메소드를 가지는 것을 찾는다.
호출되는 각각의 메소드는 다른 3개의 인자를 전달한다.
AJAX응답이 몇몇 JSON컨텐츠를 가지는 X-JSON HTTP 헤더를 포함한다면, 이것은 평가되고 json인자로 전달될것이다.
만약 이벤트가 onException라면, transport인자는 대신에 예외를 가질것이고 json은 전달되지 않을것이다.

무슨 말인지 잘 몰르겠다.. ㅡ.,ㅡ


* Ajax.Base 클래스
이 클래스는 Ajax객체내 정의된 다른 대부분의 클래스를 위한 기본(base)클래스처럼 사용된다.

- setOptions(options)
  options: AJAX 옵션
  AJAX작업을 위해 필요한 옵션 셋팅

- responseIsSuccess()
  만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환

- responseIsFailure()
  responseIsSuccess()와는 반대.

* Ajax.Request 클래스
Ajax.Base로 부터 상속
Ajax 작업을 캡슐화한다.
즉 지저분한 코드를 숨기고 포장하여 코드를 깔끔하게 만든다.
Prototype Ajax 의 핵심일것이다.


+ 프로퍼티

- Events
  Array  타입이다.
  AJAX작업중 보고되는 가능한 이벤트/상태의 목록.
  목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.

- transport
  XMLHttpRequest 타입이다.
  AJAX작업을 가지는 XMLHttpRequest 객체

- url
  String 타입이다.
   요청에 의해 대상이 되는 URL

+ 메소드

- [ctor](url, options)
   url: ajax 호출에 응답하여 결과를 주기위한 서버측 url
  options: AJAX 옵션
   주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
  중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다.
  많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다.
  당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.

- evalJSON()
   이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
  이것은 AJAX응답내 존재하는 X-JSON HTTP헤더의 컨텐츠를 평가하기 위해 내부적으로 호출된다.

- evalReponse()
  이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
  AJAX응답이 text/javascript의 Content-type헤더를 가진다면, 응답 몸체는 평가되고 이 메소드는 사용될것이다. 

- header(name)
  name: HTTP 헤더명
   이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
   이것은 AJAX응답의 HTTP헤더의 컨텐츠를 가져오기 위해 내부적으로 호출된다.

- onStateChange()
  이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
   이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.

- request(url)
  url: AJAX호출을 위한 url
   이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
  이것은 생성자를 호출하는 동안 벌써 호출되었다.

- respondToReadyState(readyState)
  readyState: 상태 숫자값(1 에서 4)
  이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
  이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.

- setRequestHeaders()
  이메소드는 내부호출용으로 사용되어지고 사용자는 사용하지 않을것이다.
  이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.


* options 인자 객체

AJAX작업의 중요한 부분은 options 인자이다.
이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다.
이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.

  + 프라퍼티
 
- method
  String 타입이고 'post'값을 초기값으로 갖는다.
  HTTP요청의 메소드

- parameters
  String 타입이고 ''값을 초기값으로 갖는다.
  요청에 전달한 값들의 url형태의 목록

- asynchronous
  Boolean 타입이며 true 값을 초기값으로 갖는다.
  AJAX호출이 비동기적으로 만들어지는지 표시

- postBody
  String 타입이다.
  HTTP POST의 경우 요청의 몸체내 전달되는 내용

- requestHeaders
  Array 타입이다.
  요청과 함께 전달되기 위한 HTTP헤더의 목록.
  이 목록은 많은 수의 항목을 가져야 한다.
  나머지 항목은 사용자 정의 헤더의 이름이다.
  그리고 다음의 항목은 헤더의 문자열 값이다.
  예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']

- onXXXXXXXX
  Function(XMLHttpRequest) 타입이다.
  각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수.
  예제 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};.
  사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.

- onSuccess
  Function(XMLHttpRequest) 타입이다.
  AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.

- onFailure
  Function(XMLHttpRequest) 타입이다.
  AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.

- insertion
  Function(Object, String) 타입이다.
  null 삽입하기 위해 호출되는 함수는 텍스트를 요소로 반환한다.
  함수는 수정되기 위한 요소객체와 Ajax.Updater객체에만 적용되는 응답 텍스트의 두개의 인자를 가지고 호출된다.

- evalScripts
  Boolean 타입이며 false 값을 기본값으로 가진다.
  스크립트 블럭이 응답이 도착했을때 평가할지를 판단.
  Ajax.Updater객체에만 적용.

- decay
  Number 타입이며 1 값을 기본값으로 가진다.
  Ajax.PeriodicalUpdater 객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정.
  예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다.
  이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.

- frequency
  Number 타입이며  2 의 기본값을 가진다.
  초단위의 갱신간격(횟수가 아닌), Ajax.PeriodicalUpdater객체에만 적용. 

* Ajax.Updater 클래스
Ajax.Request로 부터 상속

요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다.
당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다.
스크립트로 작업하기 위해 evalScripts 옵션을 사용하라.

+ 프라퍼티
- containers
  Object 타입이다.
  이 객체는 두개의 프라퍼티(containers.success 는 AJAX호출이 성공할때 사용될것이다. 그리고 AJAX호출이 실패한다면 containers.failure가 사용될것이다.)를 포함한다.

prototype.js에 새롭게 정의된 객체와 클래스

* PeriodicalExecuter 객체

이 객체는 주어진 함수를 주어진 시간간격으로 반복적으로 호출하기 위한 로직을 제공한다.

- [ctor](callback, interval)
  callback : 파라미터 성격이 아닌 함수
  interval: 호출할 초단위 시간간격 
  함수를 반복적으로 이 객체의 하나의 인스턴스를 생성

  var tm = new PeriodicalExecuter(function(){alert("열려라 참깨~~!");},2);

  위 tm 객체는 2 초에 한번식 "열려라 참깨~~!" 라는 alert 창을 띄웁니다.
  함수는 외부에 정의가 되도 당연히 되겠죠.
  alert 창을 닫은후 2초 후에 다시 띄웁니다.
  중복 수행되지 않는 다는말이죠.

- currentlyExecuting
  이 프로퍼티는 객체에서 호출된 함수가 진행중인가에 대한 Boolean 값입니다.


* Prototype 객체

이 객체는 라이브러리의 버전을 가지고 있고 특별한 기능은 없다.

- Version
  Prototype 의 버전을 String 로 가지고있다.

- emptyFunction
  비어있는(empty) 함수 객체

- K
  주어진 파라미터를 되돌리는 함수 객체

- ScriptFragment
  스크립트를 확인하는 정규식 표현

이 객체는 그냥 넘어가겠다. 별로 중요하지 않다고 하니..


* Enumerable 객체

이 객체는 LIST 유형의 객체이고 반복구조에 적함하도록 되어고 유용한 속성을 많이 가지고있어서 만은객체들이 이를 계승받아서 작성된다.

+  프로퍼티

- Version
  라이브러리의 버전

+ 메소드

- each(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  주어진 iterator함수를 호출하고 그것은  첫번째 인자로 목록의 각각의 요소와
  두번째 인자로 요소의 인덱스 전달한다.

- all([iterator])
  iterator: Function(value, index)를 충족하는 함수 객체
   주어진 함수를 사용하여 전체 값을  테스트한다.
   전체의값중 하나라도 null 이나 false 를 리턴하면 이 함수는 false 를리턴 하고 전체가
  true 인 경우 true 를 리턴한다.
   iterator가 주어지지 않는다면, 요소 자체가 false 나 null이 아닌지 체크 할 것이다.

- any(iterator)
   iterator: Function(value, index)를 충족하는 함수 객체(선택사항)
  이 함수는 all 과 비슷하나 전체값 중 어느 하나만 true 인 경우 true 를 반환한다.
   all 함수가 전체 요소에 대해서 and 관계연산을 한다고 하면 any 함수는 전체 요소에 대해
  OR 관계연산을 한다고 볼 수 있다.

- collect(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다.
  집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다. 

- detect(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  집합내 요소중 최초로 true 결과를 주는 첫 요소를 리턴한다.
   true를 반환하는 요소가 없다면, detect는 null을 반환한다. 

- entries()
   array 로 값들을 추출해낸다. 

- find(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  detect()와 같다. 

- findAll(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  집합내 요소중 최초로 true 결과를 주는 모든  값을 Array을 반환한다.
  이 함수는 reject()와는 반대의 함수이다. 

- grep(pattern [, iterator])
   pattern: 요소를 일치시키기 위해 사용되는 정규식 표현(RegExp객체 - 정규식은 어렵다 )
  iterator: Function(value, index)를 충족하는 함수 객체
  유닉스의 grep 명령어 와 비슷하다.
  집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 체크하고 정규표현식에
  대응되는 모든 요소를 포함하는 Array 를 반환한다.
   iterator함수를 사용하면 정규식에 대응되는 값들을 찾아서 iterator 함수에 넣고
   그 결과값을 Array 에 저장한다.

- include(obj)
  obj: 집합내 주어진 객체를 찾도록 시도한다.
  객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다. 

- inject(initialValue, iterator)
   initialValue: 초기화 값처럼 사용되는 객체
  iterator: Function(accumulator, value, index)를 충족하는 함수 객체
   잡합의 모든 요소를 accumulator 아규먼트에 initialValue 를 초기값으로 누적한다. 

- invoke(methodName [, arg1 [, arg2 [...]]])
  methodName: 각각의 요소내에서 호출될 메소드의 이름
  arg1..argN: 메소드 호출로 전달될 인자.
  집합의 각각의 요소내의 값을 methodName함수를 (arg1에서 argN)인자로 호출하고
   그 결과를 Array객체에 담아 반환한다. 

- map(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체 collect()과 같다. 

- max([iterator])
  iterator: Function(value, index)를 충족하는 함수 객체
  집합내 가장 큰 값이나 iterator가 있으면 iterator호출 결과중 가장 큰 값을 반환한다.  

- member(obj)
   obj: 객체 include()과 같다. 

- min([iterator])
  iterator: Function(value, index)를 충족하는 함수 객체
   max 와 반대로 가장 작은값이나 가장 작은 iterator 결과를 반환한다.

- partition([iterator])
   iterator: Function(value, index)를 충족하는 함수 객체
   true 를 반환하거나 iterator결과가 true 인 모든 요소 배열과,  나머지 모든 요소들의  배열
  2 개의 배열을 반환한다.

- pluck(propertyName)
   propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름.
                        이것은 요소의 인덱스를 포함할수 있다.
  집합에서 propertyName과 같은 프라퍼티의 값을 Array객체로 반환한다. 

- reject(iterator)
   iterator: Function(value, index)를 충족하는 함수 객체
  집합에서 iterator함수의 결과가  false인 모든 요소를 Array로 반환한다.
  이 함수는 findAll()과는 반대되는 함수이다.

- select(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  findAll()과 같다.  ( reject 와반대이다. ㅎㅎㅎ)

- sortBy(iterator)
  iterator: Function(value, index)를 충족하는 함수 객체
  iterator함수호출결과를 정렬하여 Array로 반환. 

- toArray()
   집합의 모든 요소를 Array로 반환.  

- zip(collection1[, collection2 [, ... collectionN [,transform]]])
   collection1 .. collectionN: 병합될 목록
  transform: Function(value, index)를 충족하는 함수 객체
  여러개의 집합을 인수로 받아서 인댁스가 동일한 값끼리 배열로 만들고
  그 배열들을 모아서 2 차원 배열로 반환한다.
  transform함수가 있으면 각각의 내부 배열은 transform함수에 의해서 변형된다.
   예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.


* Hash 객체

해시구조를 구현한다.
해시는 자료구조중 키로 주소를 연산해내는 방법으로 부고 키와 키값 쌍으로 파라메타를 넘기는따위에 많이 사용된다.

Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다.

- keys()
   모든 항목의 key를 가진 Array을 반환

- values()
   모든 항목의 value를 가진 Array을 반환 

- merge(otherHash)
  otherHash: Hash 객체
  hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환 

- toQueryString()
   쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환한다.
   'key1=value1&key2=value2&key3=value3'  이런 형식으로 반환하므로 url 의 파라메타 등으로
  사용하기 적당하다.

- inspect()
   key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)


* ObjectRange 클래스

Enumerable으로부터 상속
상위 경계나 하위 경계로 값들의 범위를 표시 한다.
반복을 위해서 사용되어지는것 같다. 범위 내의 값은 기억하고 있지않고 단지 처음과 끝 그리고 처음값과 끝값이 포함되는디( > 인지, >= 인지 )에 대한 정보만을 가지고있다.


+ 프로퍼티

- start (any)
  범위의 시작값

- end (any)
  범위의 마지막값

- exclusive
  instance 경계자체가 범위의 일부인지 판단


+ 메소드

- [ctor](start, end, exclusive)
  start: 시작값
  end: 마지막값
   exclusive: 경계가 범위내 포함되는가 ?
  하나의 range객체를 생성한다.
  start 에서 end로 범위를 지정한다.
  start 와 end가 같은 타입의 객체이고 succ()메소드를 가져야만 한다. 

- include(searchedValue)
  searchedValue: 검색할 값
  주어진 값이 범위내 값인지 체크. true 나 false값을 반환한다. 


* Class 객체

Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다.
클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.  (어렵다..ㅠ.ㅠ)

//새로 생선한 클레스를사용하여보자
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //메세지가 alert 창으로 뜰것이다.

- create(*)
   새로운 클래스를 위한 생성자를 정의

JavaScript 의 확장

prototype.js 는 JavaScript의 객체를 확장하여 파워풀한 개발(?)환경을 사용자에게 제공한다.


* Object 클래스

- extend(destination, source)
  객체를 계승(Inherit) 하기 위해서 source객체의 속성과 메소드를 destination객체로 복사한다.

- inspect(targetObj)
  객체를 읽을수있는 text 형태로 변환한다.


* Number 클래스

- toColorPart()
  색상등에 사용하기 위해서 숫자를 16 진수로 변환한다.

- succ()
   로비온 레일즈 루프등을 사용하기 위해서 다음숫자를 반환한다.(내부적으로 사용되는것 같다.)

- times(iterator)
  Function(value, index) 함수등을 정의하여 반복적인 함수로 사용한다.
  아래 예제는 0 부터 9 까지 10 번 alert 창을 띄운다.

var n = 10;
n.times(function(index){
alert(index);
});


* Function 클래스
- bind(object)
  메소드의 인스턴스를 반환한다. 함수의 메소드를 수정할 수 있다(?)

- bindAsEventListener(object)
  객체의 이밴트 핸들러의 인스턴스를 반환한다. 함수의 이밴트 핸들러를 수정할 수 있다.

<input type=checkbox id=myChk value=1> Test?
<script>
//클래스선언
var CheckboxWatcher = Class.create();

//클래스를 정의한다.
CheckboxWatcher.prototype = {

  initialize: function(chkBox, message) {
  this.chkBox = $(chkBox);
  this.message = message;
  //우리 매서드를 이벤트에 할당한다.  -- 우리메서드는 무엇인가.. 덴장
  this.chkBox.onclick =
     this.showMessage.bindAsEventListener(this);
 
  },

  showMessage: function(evt) {
  alert(this.message + ' (' + evt.type + ')');
  }
};

var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>


* String 클래스

- stripTags()
   HTML이나 XML태그가 삭제된 문자열을 반환

- stripScripts()
  삭제된 <script /> 블럭을 가진 문자열을 반환

- escapeHTML()
    HTML마크업 문자들이 escaped된 문자열 반환

- unescapeHTML()
    escapeHTML() 의 반대

- extractScripts()
  문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환

- evalScripts()
  문자열내에서 발견되는 각각의 <script />블럭을 평가하기

- toQueryParams()
  쿼리문자열(querystring)을 파라미터 이름에 의해 인덱스화되는 결합된 Array로 쪼개기

- parseQuery()
   toQueryParams() 와 같음.

- toArray()
  문자열을 이것의 문자들의 Array로 쪼개기

- camelize()
  -(하이픈)으로 분리된 문자열을 camelCaseString으로 변환하기.
  이 함수는 예를 들면, 프라퍼티 스타일을 다루는 코드를 작성할때 유용하다



* Array 클래스

Array는 Prototype 고유객체인 Enumerable를 확장한다.
자바스크립트의 array 를 확장한것 처럼 보이지만 기존객체를 재정의 한것이다.
뭐 달라진것은 없다.

- clear()
   배열을 비우고 자체를 반환한다.

- compact()
   null 이거나 undefined인 요소를 제외하고 배열을 반환한다.
  이 메소드는 배열자체를 변경하지 않는다. 즉 새로운 배열을 돌려준다.

- first()
   배열의 첫번째 요소를 반환한다.

- flatten()
  배열이 일차원적 형태를 리턴한다.
  이런 일차원형 변환은 각각의 배열요소를 찾음으로써 발생한다.
  근데 그 각각의 배열요소가 어떤 거냐면 그 자체가 배열이면서 리턴된 배열안에 그 배열요소가
  다시 포함된 것을 의미한다

- indexOf(value)
   원하는 값을(value) 배열 내부에서 찾아 배열의 인자를 돌려준다.
  결과가없으면 -1 을 돌려준다.

- inspect()
   배열전체를 보여줄 수 있는 문자열로

- last()
   배열의 마지막 요소를 반환한다.

- reverse([applyToSelf])
  배열 자체가 반전되는지 표시 역순서로 배열을 반환.
   인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다.
  그렇지 않으면 변경되지 않고 남는다.

- shift()
  첫번째 요소를 반환하고 배열로부터 이것을 제거한다.
  배열의 길이는 1 감소한다.
   마치 스택의 pop 와 같다. ^^;;

- without(value1 [, value2 [, .. valueN]])
   배열내 존재한다면 제외될 값 인자로 주어진 요소를 제외한 배열을 반환


* document DOM 객체

  - getElementsByClassName(className [, parentElement])
  주어진 CSS클래스명과 연관된 모든 요소를 반환.
  parentElement id가 주어졌다면, 전체 문서가 검색될것이다.  
  ( parentElement 는 자바스크립트 에 표준 속성으로 상위 엘리먼트를 지칭하는 속성이다.)


* Event 객체

+ 프라퍼티 타입 

-  KEY_BACKSPACE (Number 8)
     되돌리기(<-) 키를 위한 상수 코드.

-  KEY_TAB (Number 9)
    탭키를 위한 상수코드.

-  KEY_RETURN (Number 13)
   리턴키를 위한 상수코드.

-  KEY_ESC (Number 27)
    Esc키를 위한 상수코드.

-  KEY_LEFT (Number 37)
    왼쪽 화살표 키를 위한 상수코드

-  KEY_UP (Number 38)
     위쪽 화살표 키를 위한 상수코드.

-  KEY_RIGHT (Number 39)
    오른쪽 화살표 키를 위한 상수코드.

-  KEY_DOWN (Number 40)
   아래쪽 화살표 키를 위한 상수코드.

-  KEY_DELETE (Number 46)
    Delete키를 위한 상수코드.


+ 메소드 타입

- element(event)
   event: 이벤트 객체
   이벤트를 일으키는 요소를 반환

- isLeftClick(event)
   event: 이벤트 객체
   마우스 왼쪽 버튼을 클릭시 true값 반환

- pointerX(event)
    event: 이벤트 객체
   페이지에서 마우스 포인터의 x측 좌표값 반환

- pointerY(event)
   event: 이벤트 객체
    페이지에서 마우스 포인터의 y측 좌표값 반환

- stop(event)
   event: 이벤트 객체
   이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
  이밴트 발생 후 그 이벤트 처리를 스탑시킨다.

- findElement(event, tagName)
   event: 이벤트 객체
   tagName: 원하는 태그명 DOM트리 위쪽으로 가로지른다.
   주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.

- observe(element, name, observer, useCapture)
   element: 객체 또는 아이디
   name: 이벤트 명 (like 'click', 'load', etc)
   observer: 이벤트를 다루는 함수
   useCapture: true라면, capture내 이벤트를 다루고 false라면 bubbling 내 이벤트를 다룬다.
   이벤트를 위한 이벤트 핸들러 함수를 추가
  useCapture 는 정확하게 뭔지 잘 모르겠다.

- stopObserving(element, name, observer, useCapture)
   element: 객체 또는 아이디
   name: 이벤트 명 ('click' 처럼)
   observer: 이벤트를 다루는 함수
  useCapture: true라면 capture내 이벤트를 다루고, false라면 bubbling내에서 다룬다.
   이벤트로부터 이벤트 핸들러를 제거

- _observeAndCache(element, name, observer, useCapture)
  private메소드, 이것에 대해 걱정하지말라.

- unloadCache()
   (none) private메소드, 이것에 대해 걱정하지말라.
    메모리로부터 캐시된 모든 관찰자(observer)를 지운다.


window객체의 이벤트를  로그하기 위한 이벤트 핸들러를 추가하는 방법을 보자.

<script>
Event.observe(window, 'load', showMessage, false);

function showMessage() {
  alert('Page loaded.');
}
</script>

(열거) Enumerating ..


Prototype.js 에서는 배열을 처리하기 위해서 루프제어구조를 생성하고 수치로 구성된 인댁스 로 배열을 처리하는것 보다 더 향상된(?) 기법을 제시한다.

일반적인 아래 배열을

for(i=0;i<simpsons.length;i++){
alert(simpsons[i]);
}

루비온 레일즈 방식으로 변환하여 아래와 같이 사용할 수 있다.

simpsons.each( function(familyMember){
alert(familyMember);
});

음.. 뭐 멋있어 보인다.
그럼됐지... 그러나.

생소하고 별로 편해보이지도 않고 기존 c 스타일에 익숙한 나에겐 더 편해 보이지 않는다.
오류의 소지는 적어 보인다.
for in 과 문법이 비슷해보인다.

이 문법에 적합한 아래 예제가 있다.
Prototype 의 루비온 레일즈 루프 제어구조는 Prototype 객체들과 같이 기존의 배열 루프보다 더욱 향상된 방법을 제시할 것이다.

var options = A$($('lstEmployees').getElementsByTagName('option'));
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML);

와 같이 사용하거나

var links = $A($(paragraph).getElementsByTagName('a'));
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});

등등 위와같이 사용하게 된다.
익숙하지 않지만 익혀 두는것이 좋을것 같다.

Ajax 객체

Prototype 기능중 AJAX 를 지원하며 AJAX 가 무엇이고 WEB 2.0 이 왜 중요한지 등에 대한 언급은 여기서 피하겠다.

이미 알고있다고 전제한다는 것이다.
글 범위를 벗어나서 다루지 않는 부분이라기 보다 그 부분을을 설명한 능력이 없다 이 다음 부분은 그것과 연관이있는부분이다.
만약 그부분에 대해 모른다면 이 부분은 도움이 안될것이며 AJAX 에 관심이 있다면 다른곳에서 그 부분에 대한 정보를 구하면 될것 같다.
Ajax 위키위키

어쩌면 나도 AJAX 때문에 Prototype 에 관심을 가졌을 것이다.

AJax 객체는 익스플로러, 파이어폭스, 사파리 등 여러 브라우저에서 다 사용할 수 있는 쉬운 방법을 제시한다.
떠 캡슐화된 많은 Ajax 처리에 적함한 로직을 담은 클레스들을 가지고 있다.

우리나라는 대부분 익스 를 사용하므로 필요성이 적을수 있다고 생각할수 있지만 전혀 그렇지 않다.
예를 들어 비주얼 베이직으로 작성된 웹 프라우징이 가능한 프로그램을 사용한다고 하면(게임시작 공지사항을 보여주는 화면들) 내장 브라우저는 시스템 디폴트 브라우저를 사용할 수 도있지만 자체적으로 브라우저를 내장할수도 있는것이다. 그러면 여러분은 호환되지 않는 버전의 브라우저를 사용하게 될수도 있는것이다.

* Ajax.Request 클래스
Ajax 에서 사용되어지는 XMLHttpRequest 객체는 불행히도 모든 브라우저에서 선언 할수있는방법이 동일하지 않다.
Ajax.Request 는 이 문제점을 간단히 해결해준다.

var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});

와 같이 ajax 객체를 손쉽게 우리는 얻을수있다.

- url : 수행될 Ajax 서버측 주소 (서버측에서는 단순히 ajax 요청에 댛산 결과를 돌려주면 된다. )

- {method: 'get', parameters: pars, onComplete: showResponse}  : 파라메터.
  ㅇ method : 호출방식 (post 도 사용가능한걸까.. ??)
  ㅇ parameters : get 파라메타 (emp_id=200392&user_id=000293 -- "?" 는 쓰지 않았다)
  ㅇ onComplete : 성공했을때 수행할 콜빽함수
위에서 "-" 로 정의된 항목을 프로퍼티라고 한다.
Ajax.Request 클레스는 위에서 언급한 프로퍼티 외에 Ajax 를 동기호출 할것인지 비동기호출할것 인지 에 관한 프로퍼티 등이 그 예이다.
자세한 내용은 라이브러리 쪽에 명시 될것이다.
두번째 프로퍼티 파라메터는 AJAX 호출 할때 사용되어지는 옵션이다.
옵션은 여기에 사용된것 외에도 XMLHttpRequest  에서 돌려주는 진행과정(Loading, Loaded, Interactive, Complete) 단계도있다. 이것을 onComplete  처럼 정의해서 사용할 수 도 있다. onSuccess 와 onFailure 옵션으로 서버의 호출결과를 돌려받아 처리할 함수등을 지정할수도 있다.
또 Ajax.Responders를 통해서 특정 이벤트에 대해 처리되어야할 함수를 지정할 수 도 있다.
구글 맵에 사용되어지는 [Lodding...] 메세지를 보여주기 위해서 아래와 같은 코드를 사용할수도 있다.


<script>
var myGlobalHandlers = {
onCreate: function(){
  Element.show('systemWorking');
},

onComplete: function() {
  if(Ajax.activeRequestCount == 0){
   Element.hide('systemWorking');
  }
}
};

Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>


이코드는 myGlobalHandlers 에 이밴트 핸들러를 등록해서 Ajax.Responders 객체에 등록하여서 사용하게 된다.


* Ajax.Updater 클래스

Ajax 서버로 부터 돌려받는 값을 단순히 특정 객체의 innerHTML 에 넣는것이라면(여기서 html 코드를 돌려줄수도 있다.) Ajax.Updater 클레스를 사용하라.
아래 코드의 예를 보면 이해가 빠를것이다.

var myAjax = new Ajax.Updater(
    {success: 'placeholder'},
    url,
    {
     method: 'get',
     parameters: pars,
     onFailure: reportError
    });

음... 콜백함수를 만들지 않아도 된다. .. 좋다.
결과가 성공이면 document.getElementById("placeholder").innerHTML 에 결과값을 돌려주는것 같다.

여기서 javascript 를 리턴받고 실행하려면 evalScripts: true 을 두번때 프로퍼티인 파라메타에 추가해주면 된다.

<script language="javascript" type="text/javascript">
sayHi = function(){
alert('Hi');
};
</script>
<input type=button value="Click Me" onclick="sayHi()">

위 의코드가 ajax 호출 결과로 돌려 진다고 가정하고 아래 코드롸 같이 ajax 호출을 한다고 하면

<script>
var myAjax = new Ajax.Updater(
  {success: 'placeholder'},
  'http://www.ajaxserver.com',
  {
   method: 'get',
   parameters: '',
  evalScripts: true
  });
</script>
<div id="placeholder"></div>

위으 코드는 불행히도 우리의 생각과 같이 자바 스크립트는 실행 되지 않는다.
이유는 음.. 평가되지 않는다고 하는데 무슨 의미인지 모르겠다.
하여간 동적으로 실행되는 코드로 함수를 정의할 수 는 없는것 같다.
그래서 함수를 동적으로 정의하는 방식으로 아래와 같이 변환하면 동작하기 시작한다.

sayHi = function(){
alert('Hi');
};

좀더 상세한 complete설명을 위해서는, 라이브러리 Ajax.Request 와 Ajax.options 를 보라.

$H()

배열을 Hash 로 바꾼다.
hash 는알고 있다시피

hash : U 해시[잘게 썬 고기] 요리; (구어) (뒤)범벅; 혼란; (아는 사실의) 재탕, 고쳐 만듦,
          개작; (미국속어) 음식; (속어) 소문; [전기] 해시; [컴퓨터] 잡동사니.

이런 의미의 영어 단어이다.
ㅎㅎㅎ
컴퓨터에서는 자료구조의 일환으로 키와 값 쌍을 가지고 저장하는것을 의미한다.
순서적으로 저장하거나 일련의 규칙에 의한 주소에 자료를 저장하는 것이 아니고 키를 가지고 저장하는 방식을 의미한다. (음.. 이게 맞나.. ?? 아님 말고)

배열을 Hash 로 바꾼다에서 Hash 는 당근 ... portotype 객체의 Hash 구조체를 의미한다.
그래서 prototype 에서 다루는 Hash 에 대해서 알아보면 아래와 같은 메소드를 가진다.

* keys()
모든 항목의 key를 가진 Array을 반환 
해시에서 key 배열을 추출하는것이다.

* values()
모든 항목의 value를 가진 Array을 반환  
키와 마찬가지로..
그런데..
한가지 궁급한 점이 생긴다.
key() 로 뽑아낸 배열과  value()로 뽑나낸 배열의 인댁스가 동기화가 되어같은 긴자를쓰면 그 키의 그 값을 엑세스 할수 있는 것인지??
난 테스트 안해봤다.
누군가 테스트를 한다하여고 결과를 뎃글로 달지 않아도된다.
그렇게 액세스을 하고싶으면 배열이나 리스트에 저장하면된다.
해시에 저장할때는 해시에 맏는 방법으로 값을 추출할 필료가 있는것이다.
그럴 필요가 없다면 해시로 저장하지 않으면 그만이다.


* merge(otherHash)
뭐 말 그대로다 두개의 해시 객체를 합친다.
그런데 키가 중복 되면 어떻게 될까..
음..
아는 사람있으면 좀 알려주3 ..  그런 쥠장이 아주 아주 고마워 할것임


* toQueryString()
해시의 항목을 포멧된 문자로 반환...한다.
'key1=value1&key2=value2&key3=value3'  식으로
이건 get 파라메타를 저장해 놓으라는 이야기군  뭐 해시야 그런 용도로 많이 사용하긴 하지만..
이렇게 노골적으로 지원을 해주면......

넘 좋아좋아 ^^;;


* inspect()
음.. 이전 배열에서 대괄호를 붙여주는 놈이었는데.. 여기서는 어떤 직을 할지
뭐 포멧팅된 문자열 표현을 반환하기 위해 변경한다는데 영어를 번영해놓은 표가 팍팍 ...날뿐
정확하게 무슨 의미인지는

배열에서 사용된거와 비슷한 의미일거 같다는 정도...