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>
