JavaScript 클래스에 대한 확장

prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 JavaScript클래스를 확장하는 것이다.

Object 클래스를 위한 확장

메소드 종류 인자 상세설명

extend

(destination, source)

static    

destination: 객체,

source: 객체

source에서 destination으로

모든 프라퍼티와 메소드를 복사하여

상속을 구현하기 위한 방법을 제공

inspect(targetObj) static targetObj: 객체

targetObj의 사람이 읽을수 있는 문자열

표현으로 반환. 주어진 객체가 inspect

인스턴스 메소드를 정의하지 않는다면,

 toString 의 값을 반환

 

Number 클래스를 위한 확장

메소드 종류 인자 상세설명
toColorPart() instance (none)

숫자의 16진법 표현을 반환.

색상의 RGB컴포넌트를 HTML표현으로

변환할때 유용

succ() instance (none)

다음 숫자를 반환. 이 함수는 반복을

포함하는 시나리오에서 사용된다.

times(iterator) instance

iterator:

Function(value, index)

를 충족하는 함수 객체

인자 valueindex를 반복적으로 전달하는

iterator 함수를 호출하는 것은 iteration과

현재 index내 현재 값을 각각 포함한다.

다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.

<script> function demoTimes(){ var n = 10; n.times(function(value, index){ alert(index); }); /*************************** * you could have also used: * (10).times( .... ); ***************************/ } </script> <input type=button value="Test Number.times()" onclick="demoTimes()">

Function 클래스를 위한 확장

메소드 종류 인자 상세설명
bind(object) instance

object:

메소드를

소유하는 객체

함수(=메소드) 소유자 객체로 미리 묶는

함수의 인스턴스를 반환. 반환된 함수는

원래의 것과 같은 인자를 가질것이다.

bindAsEventListener

(object)

instance

object:

메소드를

소유하는 객체

유하는 객체 함수(=메소드) 소유자 객체로

미리 묶는 함수의 인스턴스를 반환.

반환된 함수는 이것의 인자로

현재 이벤트 객체를 가질것이다.

실제로 이 확장중 하나를 보자.

<input type=checkbox id=myChk value=1> Test? <script> //declaring the class var CheckboxWatcher = Class.create(); //defining the rest of the class implmentation CheckboxWatcher.prototype = { initialize: function(chkBox, message) { this.chkBox = $(chkBox); this.message = message; //assigning our method to the event
this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
}, showMessage: function(evt) { alert(this.message + ' (' + evt.type + ')'); } }; var watcher = new CheckboxWatcher('myChk', 'Changed'); </script>

String 클래스를 위한 확장

메소드 종류 인자 상세설명
stripTags() instance (none) HTML이나 XML태그가 삭제된 문자열을 반환
stripScripts() instance (none) 삭제된 <script /> 블럭을 가진 문자열을 반환
escapeHTML() instance (none) HTML마크업 문자들이 escaped된 문자열 반환
unescapeHTML() instance (none) escapeHTML()의 반대
extractScripts() instance (none) 문자열내에서 발견되는 모든 <script />블럭을 포함하는 Array객체 반환
evalScripts() instance (none) 문자열내에서 발견되는 각각의 <script />블럭을 평가하기
toQueryParams() instance (none)

쿼리문자열(querystring)을 파라미터 이름에 의해

 인덱스화되는 결합된 Array로 쪼개기

parseQuery() instance (none) toQueryParams()와 같음.
toArray() instance (none) 문자열을 이것의 문자들의 Array로 쪼개기
camelize() instance (none)

-(하이픈)으로 분리된 문자열을 camelCaseString

으로 변환하기. 이 함수는 예를 들면,

프라퍼티 스타일을 다루는 코드를 작성할때 유용하다.

Array 클래스를 위한 확장

시작하기 위해, ArrayEnumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.

메소드 종류 인자 상세설명
clear() instance (none) 배열을 비우고 자체를 반환한다.
first() instance (none) 배열의 첫번째 요소를 반환한다.
last() instance (none) 배열의 마지막 요소를 반환한다.
compact() instance (none) null 이거나 undefined인 요소를 제외하고 배열을 반환한다. 이 메소드는 배열자체를 변경하지 않는다.
flatten() instance (none) 기복이 없고, 1차원의 배열을 반환한다. 이 함수는 배열이고 반환된 배열내 요소를 포함하는 배열의 각 요소를 찾음으로써 수행된다.

without

(value1 [, value2 [, .. valueN]])

instance

value1 ... valueN:

 배열내 존재한다면 제외될 값

인자로 주어진 요소를 제외한 배열을 반환
indexOf(value) instance

value:

 당신이 찾는 것

배열에서 찾아진다면 주어진 value의 0부터 시작하는 인덱스의 위치를 반환. value이 없다면 -1을 반환
reverse([applyToSelf]) instance

applyToSelf:

배열 자체가 반전되는지 표시

역순서로 배열을 반환. 인자가 주어지지 않거나 인자가 true라면, 배열자체는 반전될것이다. 그렇지 않으면 변경되지 않고 남는다.
shift() instance (none) 첫번째 요소를 반환하고 배열로부터 이것을 제거한다. 배열의 길이는 1 감소한다.
inspect() instance (none) 요소를 가진 배열의 잘 포맷팅된 문자열 표시를 반환하기 위해 변경

document DOM 객체를 위한 확장

메소드 종류 인자 상세설명

getElementsByClassName

(className [, parentElement])

instance

className:

요소와 연관된 CSS클래스 이름,

parentElement:

객체 또는 가져올 요소를

포함하는 요소의 id.

주어진 CSS클래스명과 연관된 모든 요소를 반환. parentElement id가 주어졌다면, 전체 문서가 검색될것이다.

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키를 위한 상수코드
observers: Array 캐시된 관찰자(observers)의 목록. 상세한 객체의 내부구현의 일부


메소드 종류 인자 상세설명
element(event) static event: 이벤트 객체 이벤트를 일으키는 요소를 반환
isLeftClick(event) static event: 이벤트 객체 마우스 왼쪽 버튼을 클릭시 true값 반환
pointerX(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 x측 좌표값 반환
pointerY(event) static event: 이벤트 객체 페이지에서 마우스 포인터의 y측 좌표값 반환
stop(event) static event: 이벤트 객체 이벤트의 디폴트 행위를 취소하고 위임을 연기하기 위해 이 함수를 사용
findElement(event, tagName) static

event: 이벤트 객체,

tagName: 원하는 태그명

DOM트리 위쪽으로 가로지른다. 주어진 태그명을 가진 첫번째 요소를 검색한다. 이벤트를 발생시키는 요소로부터 시작한다.
observe(element, name, observer, useCapture) static

element: 객체 또는 아이디,

name: 이벤트 명

 (like 'click', 'load', etc), observer: function to handle the event,

useCapture:

if true, handles the event in the capture phase and if false in the bubbling phase.

이벤트를 위한 이벤트 핸들러 함수를 추가
stopObserving(element, name, observer, useCapture) static element: 객체 또는 아이디, name: 이벤트 명 ('click' 처럼), observer: 이벤트를 다루는 함수, useCapture: true라면 capture내 이벤트를 다루고, false라면 bubbling내에서 다룬다. 이벤트로부터 이벤트 핸들러를 제거
_observeAndCache(element, name, observer, useCapture) static   private메소드, 이것에 대해 걱정하지말라.
unloadCache() static (none) private메소드, 이것에 대해 걱정하지말라. 메모리로부터 캐시된 모든 관찰자(observer)를 지운다.

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

<script> Event.observe(window, 'load', showMessage, false); function showMessage() { alert('Page loaded.'); } </script>

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

라이브러리가 당신을 돕는 다른 방법은 객체지향 디자인과 공통적인 기능을 위한 지원 모두를 구현하는 많은 객체를 제공하는 것이다.

PeriodicalExecuter 객체

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


메소드 종류 인자 상세설명
[ctor](callback, interval) constructor callback: 파라미터 성격이 아닌 함수, interval: 초단위 시간간격 함수를 반복적으로 호출할 이 객체의 하나의 인스턴스를 생성


프라퍼티 타입 상세설명
callback Function() 호출되기 위한 함수. 이 함수로 전달될 파라미터는 없다.
frequency Number 이것은 수초내 간격으로 실질적으로 작용
currentlyExecuting Boolean 만약 함수 호출이 진행중이라면 표시

Prototype 객체

Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.

프라퍼티 타입 상세설명
Version String 라이브러리의 버전
emptyFunction Function() 비어있는(empty) 함수 객체
K Function(obj) 주어진 파라미터를 되돌리는 함수 객체

Enumerable 객체

Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.

많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.


프라퍼티 타입 상세설명
Version String 라이브러리의 버전


메소드 종류 인자 상세설명
each(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 주어진 iterator함수를 호출하는 것은 첫번째 인자내 목록으로 각각의 요소와 두번째 인자내 요소의 인덱스 전달한다.
all([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator 함수가 어떤 요소를 위해 falsenull을 반환한다면, all은 false를 반환할것이다. 그렇지 않다면 true를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 falsenull이 아닌지 테스트할것이다. 당신은 "모든 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
any(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체(선택사항) 이 함수는 주어진 함수를 사용하여 값들의 전체 집합을 테스트하기 위한 방법이다. iterator함수가 어떤 요소를 위해 falsenull을 반환하지 않는다면 anytrue를 반환할것이다. 그렇지 않다면 false를 반환할것이다. iterator가 주어지지 않는다면, 요소 자체가 falsenull이 아닌지 테스트할것이다. 당신은 "어느 요소가 false가 아닌지 체크한다"와 같이 이것을 읽을수 있다.
collect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 Array로 각각의 결과를 반환한다. 집합내 각각의 요소를 위한 하나의 결과 요소는 같은 순서이다.
detect(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true를 반환하는 iterator함수를 야기하는 첫번째 요소를 반환한다. true를 반환하는 요소가 없다면, detect는 null을 반환한다.
entries() instance (none) toArray()와 같다.
find(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 detect()와 같다.
findAll(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 true로 해석되는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array을 반환한다. 이 함수는 reject()와는 반대의 함수이다.
grep(pattern [, iterator]) instance pattern: 요소를 일치시키기 위해 사용되는 RegExp객체, iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소의 문자열 값을 pattern 정규표현식에 대해 테스트한다. 함수는 정규표현식에 대응되는 모든 요소를 포함하는 Array 를 반환할것이다. iterator함수가 주어진다면, Array는 대응되는 각각의 요소를 가진 iterator를 호출한 결과를 포함할것이다.
include(obj) instance obj: 객체 집합내 주어진 객체를 찾도록 시도한다. 객체가 찾아진다면, true를 반환하고 찾지 못한다면 false를 반환한다.
inject(initialValue, iterator) instance initialValue: 초기화 값처럼 사용되는 객체, iterator: Function(accumulator, value, index)를 충족하는 함수 객체 iterator함수를 사용하여 집합의 모든 요소를 조합한다. 호출된 iterator는 accumulator인자에서 이전 반복의 결과를 전달한다. 첫번째 반복은 accumulator인자내 initialValue를 가진다. 마지막 결과는 마지막 반환값이다.
invoke(methodName [, arg1 [, arg2 [...]]]) instance methodName: 각각의 요소내에서 호출될 메소드의 이름, arg1..argN: 메소드 호출로 전달될 인자. 집합의 각각의 요소내 methodName에 의해 명시되는 메소드를 호출하는 것은 주어진 인자(arg1에서 argN) 전달하고 Array객체로 결과를 반환한다.
map(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 collect()과 같다.
max([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 큰 값이나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 큰 결과를 반환한다.
include(obj) instance obj: 객체 include()과 같다.
min([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 가장 작은 값을 가진 요소나 iterator가 주어진다면 집합내 각각의 요소를 위한 iterator호출의 가장 작은 결과를 가진 요소를 반환한다.
partition([iterator]) instance iterator: Function(value, index)를 충족하는 함수 객체 두개의 다른 배열을 포함하는 Array를 반환한다. 첫번째 배열은 true를 반환하는 iterator함수를 야기하는 모든 요소를 포함할것이고 두번째 배열은 남아있는 요소를 포함할것이다. 만약 iterator가 주어지지 않는다면, 첫번째 배열은 true로 해석하는 요소를 포함할것이고 다른 배열은 남아있는 요소를 포함할것이다.
pluck(propertyName) instance propertyName : 각각의 요소로부터 읽어들이는 프라퍼티의 이름. 이것은 요소의 인덱스를 포함할수 있다. 집합의 각각의 요소내 propertyName에 의해 명시된 프라퍼티에 값을 가져가고 Array객체로 결과를 반환한다.
reject(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 집합내 각각의 요소를 위한 iterator함수를 호출하고 false로 해석하는 값을 반환하는 iterator함수를 야기하는 모든 요소를 가진 Array를 반환한다. 이 함수는 findAll()과는 반대되는 함수이다..
select(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 findAll()과 같다.
sortBy(iterator) instance iterator: Function(value, index)를 충족하는 함수 객체 iterator함수 호출결과를 따르는 정렬된 모든 요소를 가진 Array을 반환.
toArray() instance (none) 집합의 모든 요소를 가지는 Array를 반환.
zip(collection1[, collection2 [, ... collectionN [,transform]]]) instance collection1 .. collectionN: 병합될 목록, transform: Function(value, index)를 충족하는 함수 객체 현재의 집합으로 각각의 주어진 집합을 병합한다. 이 병합 작업은 같은 수의 요소를 가진 새로운 배열을 반환한다. 현재 집합과 각각의 요소가 각각의 병합된 집합으로부터 같은 인덱스를 가진 요소의 배열(이것을 하위 배열이라고 부르자.)이다. transform함수가 주어진다면, 각각의 하위 배열은 반환되기 전에 이 함수에 의해 변형딜것이다. 빠른 예제 : [1,2,3].zip([4,5,6], [7,8,9]).inspect() 는 "[[1,4,7],[2,5,8],[3,6,9] ]" 를 반환한다.

Hash 객체

Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.

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

메소드 종류 인자 상세설명
keys() instance (none) 모든 항목의 key를 가진 Array을 반환
values() instance (none) 모든 항목의 value를 가진 Array을 반환
merge(otherHash) instance otherHash: Hash 객체 hash와 전달된 다른 hash를 조합하고 새로운 결과 hash를 반환
toQueryString() instance (none) 쿼리 문자열처럼 포맷팅된 문자열로 hash의 모든 항목을 반환. 이를테면 'key1=value1&key2=value2&key3=value3'
inspect() instance (none) key:value쌍을 가진 hash의 포맷팅된 문자열 표현을 반환하기 위해 변경(오버라이드)

ObjectRange 클래스

Enumerable으로부터 상속

상위 경계나 하위 경계로 값들의 범위를 표시


프라퍼티 타입 종류 상세설명
start (any) instance 범위의 시작값
end (any) instance 범위의 마지막값
exclusive Boolean instance 경계자체가 범위의 일부인지 판단


메소드 종류 인자 상세설명
[ctor](start, end, exclusive) constructor start: 시작값, end: 마지막값, exclusive: 경계가 범위내 포함되는가.? 하나의 range객체를 생성한다. start 에서 end로 범위를 지정한다. startend가 같은 타입의 객체이고 succ()메소드를 가져야만 한다.
include(searchedValue) instance searchedValue: 검색할 값 주어진 값이 범위내 값인지 체크. truefalse값을 반환한다.

The Class object

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

아래의 샘플을 보라.


//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {
    initialize: function(message) { this.message = message; },
    showMessage: function(ajaxResponse) { alert(this.message); }
};
//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage();
//displays alert

메소드 종류 인자 상세설명
create(*) instance (any) 새로운 클래스를 위한 생성자를 정의

Ajax 객체

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

프라퍼티 타입 종류 상세설명
activeRequestCount Number instance 진행중인 AJAX요청의 수.

메소드 종류 인자 상세설명
getTransport() instance (none) 새로운 XMLHttpRequest 객체를 반환

Ajax.Responders 객체

Enumerable로 부터 상속되었다

이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.


프라퍼티 타입 종류 상세설명
responders Array instance 객체의 목록은 AJAX이벤트 알림(notifications)을 위해 등록되었다..


메소드 종류 인자 상세설명
register(responderToAdd) instance responderToAdd: 호출될 메소드를 가진 객체 responderToAdd인자를 전달하는 객체는 AJAX이벤트(이를테면, onCreate, onComplete, onException 등등)처럼 명명된 메소드를 포함해야만 한다. 유사한 이벤트가 발생하면, 적절한 이름을 가진 메소드를 포함하는 모든 등록된 객체가 호출되는 메소드를 가질것이다.
unregister(responderToRemove) instance responderToRemove: list로부터 제거될 객체 responderToRemove 인자로 전달되는 객체는 등록된 객체의 list로부터 제거될것이다.
dispatch(callback, request, transport, json) instance 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) instance options: AJAX 옵션 AJAX작업을 위해 필요한 옵션 셋팅
responseIsSuccess() instance (none) 만약 AJAX작업이 성공한다면 true를 반환하고, 실패한다면 false를 반환
responseIsFailure() instance (none) responseIsSuccess()와는 반대.

Ajax.Request 클래스

Ajax.Base로 부터 상속

AJAX 작업을 캡슐화

프라퍼티 타입 종류 상세설명
Events Array static AJAX작업중 보고되는 가능한 이벤트/상태의 목록. 목록은 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 그리고 'Complete.'를 포함한다.
transport XMLHttpRequest instance AJAX작업을 가지는 XMLHttpRequest 객체
url String instance 요청에 의해 대상이 되는 URL


메소드 종류 인자 상세설명
[ctor](url, options) constructor url: 꺼내기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성. 중요사항: 선택된 url은 브라우저의 보안 셋팅을 위한 대상이 될 가치가 없다. 많은 경우 브라우저는 현재 페이지처럼 같은 호스트로부터가 아니라면 url을 가져오지 않을것이다. 당신은 설정을 피하거나 사용자의 브라우저를 제한하기 위한 로컬 url만을 사용할 것이다.
evalJSON() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답내 존재하는 X-JSON HTTP헤더의 컨텐츠를 평가하기 위해 내부적으로 호출된다.
evalReponse() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. AJAX응답이 text/javascriptContent-type헤더를 가진다면, 응답 몸체는 평가되고 이 메소드는 사용될것이다.
header(name) instance name: HTTP 헤더명 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX응답의 HTTP헤더의 컨텐츠를 가져오기 위해 내부적으로 호출된다.
onStateChange() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 AJAX호출 상태 변경시 객체 자체에 의해 호출된다.
request(url) instance url: AJAX호출을 위한 url 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 생성자를 호출하는 동안 벌써 호출되었다.
respondToReadyState(readyState) instance readyState: 상태 숫자값(1 에서 4) 이 메소드는 대개 외부에서 호출되지 않는다. 이것은 AJAX호출 상태가 변경될때 객체 자체에 의해 호출된다.
setRequestHeaders() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 HTTP요청을 하는 동안 보내어질 HTTP헤더를 조합하기 위한 객체 스스로에 의해 호출된다.

options 인자 객체

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

프라퍼티 타입 디폴트 상세설명
method String 'post' HTTP요청의 메소드
parameters String '' 요청에 전달한 값들의 url형태의 목록
asynchronous Boolean true AJAX호출이 비동기적으로 만들어지는지 표시
postBody String undefined HTTP POST의 경우 요청의 몸체내 전달되는 내용
requestHeaders Array undefined 요청과 함께 전달되기 위한 HTTP헤더의 목록. 이 목록은 많은 수의 항목을 가져야 한다. 나머지 항목은 사용자 정의 헤더의 이름이다. 그리고 다음의 항목은 헤더의 문자열 값이다. 예제 : ['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest) undefined 각각의 이벤트/상태가 AJAX호출이 발생하는 동안 도착할때 호출될 사용자정의 함수. 예제 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onSuccess Function(XMLHttpRequest) undefined AJAX호출이 성공적으로 완성될때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
onFailure Function(XMLHttpRequest) undefined AJAX호출이 에러를 가진채 끝날때 호출될 사용자정의 함수. 사용되는 함수는 AJAX작업을 가지는 XMLHttpRequest객체를 포함하는 하나의 인자를 받을것이다.
insertion Function(Object, String) null 삽입하기 위해 호출되는 함수는 텍스트를 요소로 반환한다. 함수는 수정되기 위한 요소객체와 Ajax.Updater객체에만 적용되는 응답 텍스트의 두개의 인자를 가지고 호출된다.
evalScripts Boolean undefined, false 스크립트 블럭이 응답이 도착했을때 평가할지를 판단. Ajax.Updater객체에만 적용.
decay Number undefined, 1 Ajax.PeriodicalUpdater 객체는 받은 응답이 마지막 것과 같을때 비율을 새롭게 하여 연속적인 후퇴를 결정. 예를 들어, 당신이 2를 사용한다면, 새롭게 된것중에 하나가 이전것과 같은 결과를 만든후에, 객체는 다음 refresh를 위한 시간의 두배를 기다릴것이다. 이것은 다시 반복한다면, 객체는 4배를 기다릴것이다. 이것을 후퇴를 피하기 위해 정의되지 않거나 1을 사용하도록 남겨두라.

Ajax.Updater 클래스

Ajax.Request로 부터 상속

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

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

메소드 종류 인자 상세설명
[ctor](container, url, options) constructor container: 이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공했을때 사용될 object.success 요소(또는 id), 그리고 AJAX호출이 실패했을때 사용될 object.failure요소(또는 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성.
updateContent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 응답을 받았을때 객체 자체에 의해 호출된다. 이것은 HTML로 적절한 요소를 수정하거나 insertion옵션내 전달되는 함수를 호출할것이다. 이 함수는 두개의 인자(수정되기 위한 요소와 응답 텍스트)를 가지고 호출될것이다.

Ajax.PeriodicalUpdater 클래스

Ajax.Base로 부터 상속

이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater 참조를 체크하라.

프라퍼티 타입 종류 상세설명
container Object instance 이 값은 Ajax.Updater생성자에 일관적으로 전달될것이다.
url String instance 이 값은 Ajax.Updater의 생성자에 일관적으로 전달될것이다.
frequency Number instance 초단위의 refresh간격. 디폴트는 2초. 이 숫자는 Ajax.Updater 객체를 호출할때 현재 축소(decay)에 의해 곱해질것이다.
decay Number instance 작업을 재-수행할때 적용될 축소(decay)레벨을 유지
updater Ajax.Updater instance 가장 최신에 사용된 Ajax.Updater 객체
timer Object instance 다른 refresh를 위한 시각일때 객체를 알리기 위해 사용되는 자바스크립트 타이머

메소드 종류 인자 상세설명
[ctor](container, url, options) constructor or container:이것은 요소의 id, 요소객체 자체, 또는 두개의 프라퍼티(AJAX호출이 성공할때 사용될 object.success 요소(나 id), AJAX호출이 실패할때 사용할 object.failure 요소(나 id))를 가지는 객체가 될수 있다. url: 가져오기 위한 url, options: AJAX 옵션 주어진 옵션을 사용하여 주어진 url을 호출할 이 객체의 하나의 인스턴스를 생성
start() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
stop() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것의 정기적인 작업 수행을 시작하기 위해 객체 자체에 의해 호출된다.
updateComplete() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 요청을 완성한 후에 사용되는 Ajax.Updater에 의해 호출된다. 이것은 다음 refresh스케줄링 하기 위해 사용된다.
onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 다음 수정을 위한 시각일때 내부적으로 호출된다.

Element 객체

이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.

메소드 종류 인자 상세설명
visible(element) instance element: element 객체 또는 아이디 요소가 눈에 보이는지 표시하는 Boolean값을 반환
toggle(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 각각의 전달된 요소의 가시성(visibility)을 토글(toggle)한다.
hide(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display'none'로 셋팅하여 각각의 요소를 숨긴다.
show(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element 객체 또는 아이디 style.display''로 다시 셋팅하여 각각의 요소를 보여준다.
update(element, html) instance element: element 객체 또는 아이디, html: html 컨텐츠 주어진 html인자를 가지는 요소의 내부 html을 대체. 주어진 html이 <script>블럭을 포함한다면, 그것들은 포함되지는 않지만 평가될것이다.
remove(element) instance element: element 객체 또는 아이디 문서로 부터 요소를 제거한다.
getHeight(element) instance element: element 객체 또는 아이디 요소의 offsetHeight값을 반환
addClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 주어진 class명을 요소의 class명으로 추가
hasClassName(element, className) instance element: element 객체 또는 아이디, className: name of a CSS class 요소가 class명중에 하나로 주어진 class명을 가진다면 true를 반환
removeClassName(element, className) instance element: element 객체 또는 아이디, className: CSS 클래스명 요소의 class명으로 부터 주어진 class명을 제거
cleanWhitespace(element) instance element: element 객체 또는 아이디 요소의 자식노드에서 공백을 제거

The Abstract 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Abstract.Insertion 클래스

이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML 동적 내용물 삽입을 도울 객체를 생성

프라퍼티 타입 종류 상세설명
adjacency String static, parameter 내용물이 주어진 요소에 대해 상대적으로 위치할 지점을 명시하는 파라미터. 가능한 값은 'beforeBegin', 'afterBegin', 'beforeEnd', 그리고 'afterEnd'.
element Object instance 삽입이 상대적으로 만들어질 요소객체
content String instance 삽입될 HTML.

Insertion 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Insertion.Before 클래스

Abstract.Insertion로 부터 상속

요소 앞에 HTML삽입

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체를 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> <script> new Insertion.Before('person', 'Chief '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>

Insertion.Top 클래스

Abstract.Insertion로 부터 상속

요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: 삽입되는 HTML Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> <script> new Insertion.Top('person', 'Mr. '); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>

Insertion.Bottom 클래스

Abstract.Insertion로 부터 상속

요소아래의 마지막 자식으로 HTML삽입. 내용물은 요소의 닫기 태그앞에 위치할것이다.

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: HTML to be inserted Abstract.Insertion로 부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> <script> new Insertion.Bottom('person', " What's up?"); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

Insertion.After 클래스

Abstract.Insertion로 부터 상속

요소의 닫기 태그뒤 HTML삽입

메소드 종류 인자 상세설명
[ctor](element, content) constructor element: element 객체 또는 아이디, content: HTML to be inserted Abstract.Insertion으로부터 상속. 동적으로 내용물을 삽입하는 것을 돕는 객체 생성

다음의 코드는

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> <script> new Insertion.After('person', ' Are you there?'); </script>

다음처럼 HTML이 변경될것이다.

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?

Field 객체

이 객체는 폼내 input필드와 작동하기 위한 몇가지 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
clear(field1 [, field2 [, field3 [...]]]) instance fieldN: field element 객체 또는 아이디 field요소로부터 각각 전달된 값을 지움(clear)
present(field1 [, field2 [, field3 [...]]]) instance fieldN: field element 객체 또는 아이디 모든 폼 field가 빈값이 아니라면 true를 반환
focus(field) instance field: field element 객체 또는 아이디 주어진 폼 field로 입력 포커스 이동
select(field) instance field: field element 객체 또는 아이디 텍스트 선택을 지원하는 field내 값을 선택
activate(field) instance field: field element 객체 또는 아이디 포커스를 이동하고 텍스트 선택을 지원하는 field내 값을 선택

Form 객체

이 객체는 데이터 항목 폼과 그것들의 입력 field와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
serialize(form) instance form: form element 객체 또는 아이디 'field1=value1&field2=value2&field3=value3'처럼 field명과 값의 url형태의 목록을 반환
getElements(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 포함하는 Array 반환
getInputs(form [, typeName [, name]]) instance form: form element 객체 또는 아이디, typeName: input요소의 타입, name: input요소명. 폼내 모든 <input>요소를 포함하는 Array 반환. 선택적으로 목록은 요소의 타입이나 name속성에 의해 필터링 될수 있다.
disable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용불가상태로 만들기
enable(form) instance form: form element 객체 또는 아이디 폼내 모든 입력 field를 사용가능하게 만들기
focusFirstElement(form) instance form: form element 객체 또는 아이디 첫번째 가시성을 활성화하고, 폼내 입력 field를 가능하게 하기
reset(form) instance form: form element 객체 또는 아이디 폼을 리셋하기. form객체의 reset()메소드와 같다.

Form.Element 객체

이 객체는 폼요소와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
serialize(element) instance element: element 객체 또는 아이디 'elementName=elementValue'처럼 요소의 name=value 짝을 반환
getValue(element) instance element: element 객체 또는 아이디 요소의 값을 반환

Form.Element.Serializers 객체

이 객체는 폼요소의 현재 값을 가져오기 위해 라이브러리 내부적으로 사용되는 몇몇 유틸리티성 함수를 제공한다.

메소드 종류 인자 상세설명
inputSelector(element) instance element: radio 버튼이나 checkbox처럼 checked프라퍼티를 가지는 form요소의 객체 또는 아이디 ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array을 반환
textarea(element) instance element: textbox, button 또는 password필드처럼 value프라퍼티를 가지는 form요소의 객체 또는 아이디. ['elementName', 'elementValue']처럼 요소의 이름과 값을 가지는 Array를 반환
select(element) instance element: <select> 요소의 객체 또는 아이디 ['elementName', 'selOpt1 selOpt4 selOpt9']처럼 요소의 이름과 모든 선택된 옵션의 값이나 텍스트를 가지는 Array를 반환

Abstract.TimedObserver 클래스

이 클래스는 값이 변경(또는 프라퍼티가 클래스정의를 얻어내는)될때까지 하나의 요소를 모니터링할 다른 클래스를 위한 기본클래스처럼 사용된다. 이 클래스는 추상클래스처럼 사용된다.

하위클래스는 요소의 입력값, style프라퍼티중 하나, 또는 테이블내 row의 수, 또는 당신이 추적하고자 하는 모든것을 모니터링하기 위해 생성될수 있다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

instance, abstract
메소드 종류 인자 상세설명
[ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: 초단위 간격, callback: 요소가 변경될때 호출되는 함수 요소를 모니터링할 객체 생성
(none)
registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소 모니터링릉 시작하기 위한 객체 자체에 의해 호출된다.
onTimerEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소를 체크하기 위해 정기적으로 객체 자체에 의해 호출된다.

프라퍼티 타입 상세설명
element Object 모니터링되는 요소객체
frequency Number 이것은 체크사이에 초단위 간격으로 이루어진다.
callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue String 요소내 확인되는 마지막 값

Form.Element.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼 입력 요소의 값을 모니터링하는 Abstract.TimedObserver의 구현물. 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.Element.EventObserver 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](element, frequency, callback) constructor element: element 객체 또는 아이디, frequency: interval in seconds, callback: function to be called when the element changes Abstract.TimedObserver으로부터 상속. 요소의 value프라퍼티를 모니터링할 객체를 생성.
getValue() instance (none) 요소의 값을 반환

Form.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼내 데이터 항목 요소의 값이 변경하는지를 모니터링하는 Abstract.TimedObserver의 구현물. 당신이 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함하는 폼을 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.EventObserver 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](form, frequency, callback) constructor form: form 객체 또는 아이디, frequency: 초단위 간격, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수 Abstract.TimedObserver로부터 상속. 변경하기 위한 폼을 모니터링할 객체 생성.
getValue() instance (none) 모든 폼의 데이터의 직렬화를 반환

Abstract.EventObserver 클래스

이 클래스는 요소를 위해 값-변경 이벤트가 발생할때마다 콜백함수를 수행하는 다른 클래스를 위한 기본 클래스처럼 사용된다.

Abstract.EventObserver 타입의 다중 객체는 다른것을 지우지 않고 같은 요소로 묶일수 있다. 콜백은 요소에 할당되는 순서대로 수행될것이다.

트리거 형태의 이벤트는 radio버튼과 checkbox를 위해서는 onclick이고 대개의 textbox와 리스트박스/드랍다운을 위해서는 onchange이다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

instance, abstract
메소드 종류 인자 상세설명
[ctor](element, callback) constructor element: element 객체 또는 아이디, callback: 이벤트가 발생할때 호출되는 함수 요소를 모니터링할 객체 생성.
(none)
registerCallback() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트를 자체적으로 묶는 객체에 의해 호출된다.
registerFormCallbacks() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 폼내 각각의 데이터 항목 요소의 이벤트로 자체적으로 묶기 위한 객체에 의해 호출된다.
onElementEvent() instance (none) 이 메소드는 대개 외부적으로 호출되지 않는다. 이것은 요소의 이벤트로 묶일것이다.

프라퍼티 타입 상세설명
element Object 모니터링되는 요소객체
callback Function(Object, String) 요소가 변경될때마다 호출되기 위한 함수. 이것은 요소객체와 새로운 값을 받을것이다.
lastValue String 요소내 확인되는 마지막 값

Form.Element.EventObserver 클래스

Abstract.EventObserver로 부터 상속

요소내 값 변경을 감지하기 위한 폼 데이터 항목 요소의 적절한 이벤트를 위한 콜백 함수를 수행하는 Abstract.EventObserver의 구현물. 만약 요소가 변경을 보고하는 이벤트를 드러내지 않는다면, 당신은 Form.Element.Observer 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](element, callback) constructor element: element 객체 또는 아이디, callback: function to be called when the event happens Abstract.EventObserver로 부터 상속. 요소의 value프라퍼티를 모니터링할 객체 생성.
getValue() instance (none) 요소의 값 반환.

Form.EventObserver 클래스

Abstract.EventObserver로 부터 상속

값이 변결될때 감지하기 위한 요소의 이벤트를 사용하여 폼내 포함되는 어느 데이터 항목 요소에 변경을 모니터링하는 Abstract.EventObserver의 구현물. 만약 폼이 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함한다면, 당신은 Form.Observer 클래스를 대신 사용할수 있다.

메소드 종류 인자 상세설명
[ctor](form, callback) constructor form: form 객체 또는 아이디, callback: form내 데이터 항목 요소가 변경될때 호출되는 함수 Abstract.EventObserver로부터 상속. 변경을 위해 폼을 모니터링할 객체 생성.
getValue() instance (none) 모든 폼의 데이터 직렬화를 반환

Position 객체 (예비 문서)

이 객체는 요소 위치할당을 작업할때 돕는 수많은 함수를 제공한다.

메소드 종류 인자 상세설명
prepare() instance (none)

스크롤 위치내 변경을 수용하기 위한

deltaXdeltaY 프라퍼티 조정.

페이지 스크롤후 withinIncludingScrolloffset

를 호출하기 전에 이 메소드를 호출하는 것

을 기억하라.

realOffset(element) instance element: object

요소에 영향을 끼치는 어느 스크롤 offset를

포함하는 요소의 정확한 스크롤 offset를

가진 Array을 반환. 이 결과 배열은

[total_scroll_left, total_scroll_top]과 유사.

cumulativeOffset(element) instance element: object

위치가 할당된 부모 요소에 의해 부과된

어느 offset를 포함하는 요소의 정확한 위치가 할당된 offset를 가진 Array을 반환.

결과 배열은[total_offset_left,total_offset_top]

과 유사

within(element, x, y) instance

element:

object, x 와 y: 위치 조정

만약 주어진 지점이 주어진 요소의

직사각형내 조정이 되는지 테스트.

withinIncludingScrolloffsets

(element, x, y)

instance

element:

object, x and y:

coordinates of a point

 
overlap(mode, element) instance

mode:

'vertical' 나 'horizontal', element: object

within()은 이 메소드가 호출되기 전에

호출될 필요가 있다. 이 메소드는 요소에서

겹치는 것을 조정하는 세분화정도를 표현

하는 0.0과 1.0사이의 10진수를 반환할것이다.

예를 들면, 만약 요소가 100px를 가지는 정사각형 DIV이고 (300,300)에 위치한다면,

within(divSquare, 330, 330);

overlap('vertical', divSquare);

은 DIV의 top border로부터

10%(30px)를 가리키는 것을 의미하는

0.10을 반환할것이다.

clone(source, target) instance

source:

element 객체 또는 아이디,

target:

element 객체 또는 아이디

source요소에 대해 똑같이 target요소의

크기를 다시 조정하고 다시 위치를 지정

 
 

+ Recent posts