그동안 써온 K2 테마는 훌륭하긴 하지만 이곳저곳 알수없는 충돌이 나는 경우가 많았는데,
Ext JS 테마는 그런 군더더기가 없는데다가 K2 와는 또다른 스타일의 많은 화려한 기능이 탑재해 있더군요.

디자인적인 취향이야 어쩔 수 없지만, 매력적인 테마임은 분명한것 같습니다.

http://extjswordpress.net/

그전에 ExtJs 2.0 과 Google Gears 가 통합했다는 소식을 접한 바 있었는데, 구글 기어즈가 safari 를 공식적으로 지원하지 않기 때문에 그다지 좋은 소식으로 들리진 않았지만 어떤 모습으로 더 강력해졌는지 자세히 살펴보고 싶어졌습니다.

공개된 샘플 에 있는 다양한 컴포넌트들 하나하나 들여다 보면 계속해서 놀라게 됩니다.
그 중에서 desktop 을 보고 있자니 말이 안나옵니다. javascript 가 이렇게 까지도 표현이 가능하군요!

API 는 물론 친절하게도 한국어 tutorial 도 제공하고 있습니다.
prototype.js 의 syntax 와 많이 비슷해서 쉽게 적응할 수 있을 듯 합니다.

자세한 기술적인 내용은 좀 더 다뤄보고 공부하면서 포스팅 할 생각 입니다.

지금까지 공개된 Ajax UI 컴포넌트 라이브러리 중에서 가장 강력한 기능을 가진놈이 아닐까 합니다.

규칙 1 – HTTP 요청을 줄여라

HTML에 속해있는 이미지, 스크립트, 플래시 등은 서버로 요청하고 응답받기까지의 시간을 필요로한다. 이러한 외부파일들이 많으면 많을 수록 웹 사이트의 성능을 떨어트리기 마련이다. 다음은 예제들은 HTTP 요청을 줄이기 위한 방법을 제시하며 동일한 결과물을 놓고 직접 비교할 수 있다. 참고로 예제 6 ,7번에서 사용된 Data URI는 IE7 이하에서 지원하지 않기 때문에 그림의 떡이나 마찬가지다.

• 예제 1 - No Image Map : 이미지맵을 사용하지 않았을 때
• 예제 2 - Image Map : 이미지맵을 사용했을 때
• 예제 3 - CSS Sprites : CSS로 분할한 큰 이미지
• 예제 4 - Separate Scripts : 분할 된 자바스크립트
• 예제 5 - Combined Scripts : 합쳐진 자바스크립트
• 예제 6 - Inline Images : Data URI로 작성하여 출력한 이미지
• 예제 7 - Inline CSS Images : CSS에서 지정한 Data URI 이미지

규칙 2 - CDN을 사용하라

CDN(Content Delivery Network)은 접속하는 사용자의 위치에 따라서 응답이 빠른 서버로 접속하여 필요한 파일들을 호출하는 것을 말한다. 글로벌라이제이션 서비스를 지향하는 서비스에 적절한 성능향상 방법으로 일반(특정 지역만을 대상으로 하는 서비스) 사이트에서는 만족스러운 향상효과를 기대하기 어렵다.

• 예제 1 - CDN : CDN 사용
• 예제 2 - No CDN : CDN 미사용

규칙 3 – Expires 헤더를 추가하라

자바스크립트를 이용한 Ajax와 복잡한 UI 등이 널리 애용되면서 더욱 많은 외부파일(스크립트와 이미지, 스타일시트 등)들을 생산하게 됨에 따라 이를 효율적으로 처리하지 못할 경우 웹 사이트 성능이 크게 저하되기도 한다. 외부파일들의 헤더에 Expires 정보를 추가하여 캐시하는 것 만으로도 웹 사이트의 성능을 끌어 올릴 수 있다.

• 예제 1 - No Expires : Expires 헤더 미사용
• 예제 2 - Far Future Expires : Expires 헤더 사용

규칙 4 – Gzip 압축을 사용하라

외부파일들을 압축하여 성능을 높일 수도 있다. 현존하는 대부분의 브라우저가 Gzip 압축전송을 지원하며, 이또한 헤더 정보를 수정하고 비교적 간단한 서버단 작업으로 구현할 수 있다. 

• 예제 1 - Nothing Gzipped : 압축전송 미사용
• 예제 2 - HTML Gzipped : HTML만 압축전송
• 예제 3 - Everything Gzipped : 모두 파일을 압축전송

규칙 5 – 스타일시트(CSS)는 위에 선언하라

스타일시트(CSS)는 HTML의 헤드(Head)태그의 최상단에 위치하는 것이 성능향상에 도움된다.

• 예제 1 - CSS at the Bottom : CSS를 아래에 넣은 경우
• 예제 2 - CSS at the Top : CSS를 위에 넣은 경우
• 예제 3 - CSS at the Top Using @import : CSS 파일 호출에 @import를 사용한 경우
• 예제 4 - CSS Flash of Unstyled Content

규칙 6 – 스크립트는 아래에 작성하라

스크립트 파일들은 바디(Body)태그에서 호출하는 것으로 성능을 높일 수 있다. 다음 예제들은 자바스크립트 위치에 따른 성능변화를 매우 직관적으로 표현하고 있다.

• 예제 1 - Scripts in the Middle : 스크립트를 중앙에서 호출
• 예제 2 - Scripts Top vs. Bottom : 스크립트 호출 위치의 상단과 하단 비교
• 예제 3 - Scripts at the Top : 스크립트를 상단에서 호출
• 예제 4 - Scripts at the Bottom : 스크립트를 하단에서 호출
• 예제 5 - Scripts Block Downloads : 스크립트가 다운로드를 방해하는 사용
• 예제 6 - Deferred Scripts : 로딩을 연장시키는 스크립트 사용

규칙 7 – CSS에서 Expressions 사용을 자제하라

IE계열 브라우저에서만 작동하는 expression은 IE6 이하에서 표현하지 못하는 스타일링에 상습적으로 사용한다. 브라우저로 하여금 다소 무리한 연산을 요구하기 때문에 사용을 자제하는 것이 좋다.

• 예제 1 - Expression Counter : Expression 복수 사용
• 예제 2 - No Expressions : Expression 사용 안함
• 예제 3 - One-Time Expressions : Expression 한번 사용
• 예제 4 - Event Handler : 이벤트 핸들러 사용

규칙 8 - 자바스크립트와 스타일시트는 외부파일로 분리하라

너무나도 당연한 성능향상을 기대할 수 있다. 일단 브라우저에서 캐시효과를 누릴 수 있는 것 외에도 필요한 스크립트만을 호출할 수 있는 등 부가적으로 얻어지는 가치는 상당하다.

• 예제 1 - Inlined JS and CSS : CSS와 JS를 외부파일로 분리하지 않음
• 예제 2 - External JS and CSS : CSS와 JS를 외부파일로 분리함
• 예제 3 - Cacheable External JS and CSS : 외부파일로 분리한 CSS와 JS를 캐시함
• 예제 4 - Post-Onload Download : 페이지 로딩이 완료된 후(Onload) JS와 CSS 호출
• 예제 5 - Dynamic Inlining : 동적인 외부파일 호출

규칙 9 - DNS 확인 시간을 줄여라

DNS(Domain Name System)란 쉽게 말해 인터넷의 전화번호부라고 할 수 있다. 도메인이 사람이름이고 IP가 전화번호인 셈이다. 전화번호부에서 원하는 전화번호를 찾기위해 시간이 걸리는 것 처럼 브라우저 또한 DNS 확인을 위한 시간을 필요로한다. 여기에 들이는 시간을 줄여서 웹 사이트의 성능을 높일 수 있다. DNS정보 역시 브라우저의 저장영역에 캐시되어 있기 때문에 같은 도메인 네임을 사용할 경우 DNS 확인에 걸리는 시간을 최소화 할 수 있는 것이다. 도메인이 서로다른곳의 외부파일들을 불러올 때 고려해야 할 사항이다.

규칙 10 - 자바스크립트를 최소화 하라

JS, CSS 파일을 압축(Minified) 또는 암호화(Obfuscated or Packed)하여 용량을 줄일 수 있다. Minify는 파일 내부의 개행과 주석 그리고 인텐트(들여쓰기) 등, 시스템이 이해하기에 불표한 문자열을 제거하여 용량을 줄이는 방법이고 Packing은 여러가지 압축기법으로 문장을 암호화하여 브라우저의 인터프리터에 의존해 해석(Evaluate)하는 방식으로 Minified 파일보다 압축률이 훨씬 높다. 참고로, 매번 Packed하는 것이 꼭 좋지만은 않다.

• 예제 1 - Small Script Normal : 작은 스크립트 일반 호출
• 예제 2 - Small Script Minified : 작은 스크립트 최소화 호출
• 예제 3 - Small Script Obfuscated : 작은 스크립트 암호화 호출
• 예제 4 - Large Script Normal : 큰 스크립트 일반 호출
• 예제 5 - Large Script Minified : 큰 스크립트 최소화 호출
• 예제 6 - Large Script Obfuscated : 큰 스크립트 암호화 호출

규칙 11 – 리다이렉트는 피하라

포워딩(Forwarding)과 달리 리다이렉트(Redirect)는 2차례에 걸쳐 통신하게 된다. 그만큼 서버로부터의 응답이 완료되기까지 소요되는 시간이 길기 때문이다.

• 예제 1 - Image Beacon
• 예제 2 - XMLHttpRequest Beacon

규칙 12 – 중복되는 스크립트는 제거하라

때때로 자바스크립트 파일을 복수로 불러야할 때가 있다. 이 때 캐시설정을 하지 않았다면, 동일한 파일이라 할지라도 브라우저는 지속적으로 요청을 하고 같은 수행을 반복 한다. 이와 같은 스크립팅은 가급적이면 피하는 것이 좋다.

• 예제 1 - Duplicate Scripts – Not Cached : 스크립트 중복 - 캐시 없음
• 예제 2 - Duplicate Scripts - Cached : 스크립트 중복 – 캐시적용
• 예제 3 - Duplicate Scripts – 10 Cached : 스크립트 중복 – 10개 캐시 적용

규칙 13 – ETag 헤더를 설정하라

ETag는 HTTP/1.1에 기본으로 사용하도록 설정된 태그로서 파일캐시 및 갱신 진위여부를 가리는데 사용된다. 캐시와 밀접한 연관이 있으므로 외부파일의 헤더에는 ETag를 항상 설정하여 전송량을 최소화할 수 있다. 보다 자세한 내용은 “응답헤더 설정으로 웹사이트 성능 개선하기“를 참고하자.

규칙 14 – AJAX를 캐시하도록 하라

Ajax요청 역시 Expires 헤더를 설정하여 캐시효과를 누릴 수 있다.

규칙 15 – 아이프레임을 현명하게 사용하라

아이프레임역시 src 속성에 의해 브러우저로 하여금 HTTP 요청을 할당한다. 아이프레임을 다수 사용할 때 src 속성을 지정하지 않는 것으로 로딩속도를 향상시킬 수 있다.

• 예제 1 - No Iframes : 아이프레임 없음
• 예제 2 - 10 Iframes : 10개의 아이프레임 src 없음
• 예제 3 - 100 Iframes : 100개의 아이프레임 src 없음
• 예제 4 - Iframe SRC Blocks : src 지정으로 로딩속도 감속
• 예제 5 - Iframe SRC JS : 자바스크립트에 의한 src 지정으로 로딩속도 확보
• 예제 6 - Iframe SRC Slow Components
• 예제 7 - Iframe SRC JS Slow Components
• 예제 8 - Iframe JS SRC and Components
• 예제 9 - Iframe Many Components

  Droppables
드래그 대상이 되는 Draggable객체들을 Drop할 수 있는 element들을 관리하는 클래스입니다.

  Attribute
Droppables.drops: Array – Droppable 객체(실제로는 add()의 options 전체 항목이 저장됩니다.)들을 저장하는 배열입니다.

  Method
1. Droppables.add(element, options) – Droppable 객체를 추가합니다. options로 다음 사항을 받을 수 있습니다.
options 항목들

• accept – Droppable에서 받아들일 Draggable 객체의 클래스 스트링들을 설정합니다.
• containment – Droppable에서 받아들일 Draggable객체의 element나 id를 설정합니다.
• hoverclass:boolean – 받아들이기로 한 Draggable객체가 Droppable의 위에 있을 때 css를 설정하는 class를 설정합니다.
• overlap – ‘horizontal‘ 또는 ‘vertical‘을 인자로 받습니다. 수직/수평 방향으로 이동할 때 동작이 발생하도록 합니다.
• greedy:boolean – true로 설정된 경우 hover와 관련된 처리를 수행하지 않습니다.

options 항목들 중 내부사용 프로퍼티

• tree – tree에서 사용하기 위한 코드로 보임
• _continaers - options.containment객체들이 저장됩니다.
• element - 실제 Droppable element가 저장됩니다.
  

options 항목의 callback들

• onHover(dragElement, dropElement, position) – 받아들이기로 한 Draggable 객체가 Droppable의 위에 있에 있을 때 메소드를 onHover 인자로 받은 function을 호출합니다.
• onDrop(dragElement, dropElement, event) – 받아들이기로 한 Drggable 객체가 Droppable의 위에서 릴리즈되었을 때 onDrop 인자로 받은 function을 호출합니다.

2. Droppables.remove(element) – Droppable 객체를 삭제합니다.

3. Droppables.findDeepestChild(drops)
- drops 루프를 돌면서 drops에서 가장 먼저 등록한 Droppable 객체들 중에서 가장 상위에 있는 Droppable 객체를 찾는 메소드입니다. (의도는?)

4. Droppables.isContained(element, drop)
- 인자로 받는 element의 부모노드가 drop의 containment(받아들이기로 한 element) 목록에 있는 지 여부를 리턴합니다.

5. Droppables.isAffected(point, element, drop)
- 인자로 받는 element가 인자로 받는 drop(Droppable)에 Drop이 된 것인지의 여부를 체크하는 메소드입니다.

1. drop.element와 달라야하고,
2. drop._containers가 있는 경우 여기에 속해야하고,
3. drop.accept가 있는 경우 element의 className중 하나가 해당해야하고,
4. drop.element의 안에 인자로 받는 point의 위치가 속해야 합니다.

6. Droppables.activate(drop) [Droppables.deactivate(drop)]
- active[deactive]가 된 경우, drop.hoverclass가 있다면 drop.element에 hoverclass를 설정[제거]하고 last_activate 값을 설정[null로 설정]합니다.

※ show, fire, reset 메소드의 경우 Draggable에서 호출되는 메소드입니다.
7. Droppables.show(point, element)
- element의 Drop에 해당하는 Droppable이 있으면 hover 이펙트를 발생시킵니다.

1. 인자로 받은 element가 Drop되었는지를 체크(isAffected())하여 affected에 담습니다.
2. affected된 Droppable 중에서 가장 상위의 element(findDeepestChild()를 사용하여)를 찾습니다.
3. 해당하는 Droppable을 activate시킵니다.

8. Droppables.fire(event, element) – onDrop 옵션을 가지고 있는 경우 onDrop 이벤트를 실행시킵니다.
9. Droppables.reset() – 초기화(deactivate) 시킵니다.

  Draggables
Draggables객체들을 관리하는 클래스입니다.

  Attribute
Draggables.drags: Array – draggable을 저장합니다.
Draggables.observers: Array -
activeDraggable – 현재 활성화되어 있는 Draggable을 가르키는 변수입니다.

  Method
1. Draggables.register(draggable)
- draggable을 인자로 받아서 drags에 추가합니다.
- drggable이 처음 등록되는 경우 document의 mouseup/mousemove/keypress 이벤트 핸들러로 eventMoueUp/eventMouseMove/eventKeypress 메소드를 등록합니다.

2. Draggables.unregister(draggable) -
- 인자로 받는 draggable을 drags에서 삭제합니다.
- 모든 draggable이 삭제되는 경우, document의 mouseup/mousemove/keypress 이벤트에 등록된 핸들러들을 모두 삭제합니다.

3. Draggables.activate(draggable)
- Draggable에서 호출되며, (delay 옵션이 있는 경우 dealy 옵션 뒤에) activeDraggable을 설정합니다.

4. Draggables.deactivate() – activeDraggable을 삭제합니다.(null처리)

※ 2에서 등록하였던 mouseup/mousemove/keypress 이벤트에 따라서, (activeDraggable이 있는 경우)activeDraggable에 해당하는 이벤트를 전달하는 역할을 합니다.
5. Draggables.updateDrag(event)
6. Draggables.endDrag(event)
7. Draggables.keyPress(event) 

※ 8, 9, 10, 11은 Draggables.observers와 관련된 메소드들로 Draggable에서 onStart/End/Drag 이벤트가 발생됬을 때, 해당하는 이벤트를 듣기 위한 구조입니다.
8. Draggables.addObserver(observer)
9. Draggables.removeObserver(element)
10. Draggables.notify(eventName, draggable, event)
- notify는 Draggable에서 호출되는 메소드로 onStart/onEnd/onDrag 이벤트가 발생한경우 observer에서 해당하는 이벤트를 관차하는 observer가 있는 경우 observer의 callback을 호출한 후 draggable의 등록된 callback을 호출합니다.
11. Draggables._cacheObserverCallbacks()

  Draggable
Drag되는 (Draggable)객체 입니다.

Creation

new Draggable(‘id_of_element’, [options]);

options항목은 다음과 같습니다.

• handle – v1.0에서는 draggable할 element의 레퍼런스와 id를 인자로 받습니다. v1.5에서는 css 클래스 스트링으로 사용됩니다.
• revert :boolean – true인 경우, 시작점으로 돌아갑니다. function이 들오올 수 있습니다.(since v1.5) 디폴트 값은 false입니다.
• snap – true인 경우, snapping(달려들어 무는)이 발생합니다. 디폴트 값은 false입니다.
• zindex – draggable할 item의 zindex를 정의합니다.
• constraint – ‘horizontal’ 또는 ‘vertical’이 설정되는 경우, 수평/수직으로만 이동하도록 설정됩니다.
• ghosting :boolean – Drag~Drop이 진행되는 동안 자신의 위치에 clone object를 남겨둡니다.
• starteffect – Drag가 시작될 때, 적용할 이펙트를 정의합니다. 디폴트로 투명 이펙트(Opacity)를 실행합니다.
• reverteffect – Drag를 하다 되돌아가는 경우(Droppable영역이 아닌 지역에서 릴리즈했을 때)에 적용할 이펙트를 정의합니다. 디폴트 값으로는 시작점 포인트로 직선 이동하는 이펙트(Move)를 실행합니다.
• endeffect – Drag가 종료될 때, 적용할 이펙트를 정의합니다. 디폴트로 투명 이펙트(Opacity)를 실행합니다.

options에 설정되는 callback function입니다.

• change – Drag로 인하여 Draggable의 위치가 변경된 경우 발생합니다.

  Attribute
Draggable.drags: Array – draggable을 저장합니다.
Draggable.observers: Array – observer할 object들을 저장합니다.
activeDraggable – 현재 활성화되어 있는 Draggable을 가르키는 변수입니다.
dragging: boolean - dragging이 진행 중인지를 저장하는 변수입니다.

  Method
1. destroy()
2. currentDelta() – Draggable element의 left/top 위치를 리턴합니다.
3. initDrag(event)
- Draggable에 mousedown 이벤트가 발생한 경우 호출됩니다.
- draggable에 포함되는치, form element인지를 체크한 후, 현재의 마우스 위치와 실제 화면상의 위치 값을 저장한 후 Draggables.activate를 호출합니다.

4. startDrag(event)
- Draggable.updateDrag에서 호출됩니다.

1. dragging 값을 true로 설정합니다.
2. zindex, ghosting, scroll과 관련된 option이 있는 경우 해당 option과 관련된 작업을 수행합니다.
3. Draggables에 onStart이벤트가 발생했음을 알립니다.
4. options에 starteffect가 있는 경우 starteffect를 수행합니다.

5. updateDrag(event, pointer)
- Draggables.updateDrag에서 document의 mousemove 이벤트에 등록된 updateDrag에 의해서 호출됩니다.

1. this.dragging이 설정되어 있지 않은 경우 startDrag를 호출합니다.
2. Droppables.show를 호출하여 현재 해당하는 Droppable이 있는 경우에 대한 처리를 수행합니다.
3. Draggable을 이동시킵니다.
4. options.scroll과 관련된 항목을 처리합니다.

6. finishDrag(event, success)
- mouseup 또는 esc키가 눌린 경우 호출됩니다.

1. this.dragging을 false로 설정합니다.
2. mouseup인 경우, Droppables.fire를 호출하여 Drop 이벤트에 대한 처리를 수행하게 합니다.
3. Draggables.notify를 호출해서 onEnd이벤트가 발생했음을 알립니다.
4. revert인 경우, startDrag시 저장하였던 시작점으로 복귀시킵니다.
5. drag가 완료되었으므로 zindex를 복원시킵니다.
6. endeffect설정이 되어있으면 이를 호출해줍니다.
7. Draggables.deactivate를 호출하여서 활성중인 Draggable이 없음을 설정합니다.

7. keyProcess(event) – esc키가 눌린 경우, finishDrag를 호출합니다.
8. endDrag(event) – mouseup이벤트가 발생한 경우, stopScrolling()과 finishDrag를 호출합니다.
9. draw(point)  – mouse 이동에 따른 draggable의 이동 처리를 수행합니다. (repaint코드라고 보시면 될 듯)
10. stopScrolling()
11. startScrolling(speed)
12. scroll()
13. _getWindowScroll(w)

출처 : http://okjungsoo.tistory.com

1) Detecting key events easily

How do we detect which key was pressed? Prototype provides set of
key event aliases so that we don’t have to remember that return is “13″
and escape is “27″. Almost all major keys are aliased: KEY_RETURN,
KEY_ESC, KEY_TAB, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN. See full list in API docs

$('myInput').observe('keyup', function(e){
if (e.keyCode == Event.KEY_TAB)
doSomethingCoolWhenTabIsPressed();
})

2) You won’t need event capturing (most likely)

Sometimes I see capturing phase being explicitly set to false in
Event’s observe method. The good thing is that it’s set to false by
default and you would rarely need to use it. The following 2 lines are
fully identical so we can just skip this last argument:

Event.observe('productInfo', 'click', displayProductInfo, false); // 'false' could be skipped
Event.observe('productInfo', 'click', displayProductInfo);

or a short way:

$('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped
$('productInfo').observe('click', displayProductInfo);

3) insert() wisely

Another one of those “it’s-there-by-default” values is a position
argument of Element’s insert method. Surprisingly it’s not mentioned
anywhere in the docs – I accidentally found it wondering through the
source one day. insert accepts one of four position values: top, bottom, before, and after. If we omit this argument, it defaults to bottom (and luckily this happens to be the most common case). The following lines behave identically:

new Insertion.Bottom('blogEntry',
new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}));
 
// Insertion class is deprecated - it's recommended to use Element's insert method:
 
$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}), 'bottom' ); // "bottom" can be skipped
 
$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}));

4) Forms gone wild

Plain form submission is quite easy but what if we want to prevent
certain elements from being serialized before submitting form via ajax?
Let’s take a look at few ways to do this:

Plain form submission using .request

$('register').observe('submit', function(e){
Event.stop(e);
$(this).request();
})

Using .getInputs makes it easy to filter out elements based on type
and name attributes. In this example we’re serializing elements with
name ‘email’ and submitting result to the URI contained in form’s
“action” attribute

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request($(this).readAttribute('action'), {
parameters: Form.serializeElements($(this).getInputs('', 'email'))
})
})

Using .getInputs could help most of the time but what if we want to
exclude elements that have “multiple” attribute? We might try something
like this:

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request(this.readAttribute('action'), {
parameters: Form.serializeElements($(this).getElements()
.reject(function(el){return el.hasAttribute('multiple')})
);
})
})

Wow, what’s going on over here?!

When submit event occurs, we prevent default submit action Event.stop(e), get all form’s elements this.getElements(), iterate over them REJECTING those that have “multiple” attribute .reject(function(el){return el.hasAttribute('multiple')}). The filtered collection is then serialized Form.serializeElements() and is submitted via ajax new Ajax.Request()

This is all very cool but here’s the reason why learning CSS3
selectors might be a good thing (the results from both – reject-based
and selector-based filtering are the same):

$('register').observe('submit', function(e){
Event.stop(e);
new Ajax.Request($(this).readAttribute('action'), {
parameters: Form.serializeElements($$('#register input:not([multiple])'))
})
})

Enjoy prototyping!

http://thinkweb2.com/projects/prototype/?p=3

$()함수는 가장 많이 사용되는 DOM의 document.getElementById()함수에 대한 편리한 단축키이다. DOM함수처럼, 이것은 인자로 던져진 id를 가진 요소를 하나 반환한다.

하지만 DOM함수와는 달리, 이것은 여러개의 id를 사용할수 있고 $()는 요청된 요소를 가진 Array객체를 반환할것이다. 예제는 아래와 같다.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script>
 function test1()
 {
  var d = $('myDiv');
  alert(d.innerHTML);
 }
 function test2()
 {
  var divs = $('myDiv','myOtherDiv');
  for(i=0; i<divs.length; i++)
  {
   alert(divs[i].innerHTML);
  }
 }
</script>
</HEAD>
<BODY>
 <div id="myDiv">
  <p>This is a paragraph</p>
 </div>
 <div id="myOtherDiv">
  <p>This is another paragraph</p>
 </div>
 <input type="button" value=Test1 onclick="test1();"><br>
 <input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

이 함수의 다른 좋은 점은 이것은 인자형태를 가질수 있는 다른 함수를 생성할때 매우 유용하도록 만들어주는 id문자열이나 요소객체 자체를 던질수 있다는 것이다.

$F() 함수 사용하기

$F() 함수는 다른 단축키이다. 이것은 text박스나 드랍다운 list와 같은 어떤 필드의 입력 컨트롤의 값을 반환한다. 이 함수는 요소 id나 요소객체 자체를 인자로 가질수 있다.

<script>
 function test3()
 {
  alert(  $F('userName')  );
 }
</script>
<input type="text" id="userName" value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

$A() 함수 사용하기

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

Array 클래스를 위한 확장과 조합된 이 함수는 이것을 더욱 쉽게 만든다. 예를 들면, 작성한 함수는 인자의 수를 유연하게 받아들인다.

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

$H() 함수 사용하기

$H() 함수는 결합된 배열을 열거할수 있는 Hash객체로 변환한다.

<script>
 function testHash()
 {
  //let's create the object
  var a = {
   first: 10,
   second: 20,
   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() 함수 사용하기

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

예제는 아래와 같다. xmlNode.text는 몇몇 브라우저에서 작동하고 xmlNode.textContent는 다른 브라우저에서 작동한다. Try.these()함수를 사용하면 당신은 작동하는 것중 하나를 반환할수 있다.

<script>
function getXmlNodeValue(xmlNode){
 return Try.these(
  function() {return xmlNode.text;},
  function() {return xmlNode.textContent;}
  );
}
</script>

예제 : http://overflow.berrybox.com/ajax/test/index.html
출처 : http://openframework.or.kr/framework_reference/prototype_js/1.4.0/prototype.js.html