prototype.js 개발 가이드

1. 프로그래밍 가이드

1.1. prototype.js란?

prototype.js는 샘 스테펜슨이 개발한 자바스크립트 라이브러리로, 표준을 준수하는 고성능의 웹 애플리케이션 개발을 위한 도구입니다. 이 라이브러리는 전통적인 클라이언트 측 기반의 인터랙티브 웹 어플리케이션 구축에 유용하며, 특히 웹 2.0 기술의 적용을 용이하게 합니다.

1.2. 관련 문서

고급 자바스크립트 사용법 안내서

1.3. 공통 유틸리티 메서드

1.3.1. $() 메서드 사용법

$()는 document.getElementById()의 간편한 축약형으로, 주어진 아이디를 가진 요소를 반환합니다. 또한 여러 요소의 아이디를 동시에 전달하면 배열 형태로 결과를 반환합니다.

<script>
function test1() {
  const target = $('myDiv');
  alert(target.innerHTML);
}

function test2() {
  const elements = $('myDiv', 'myOtherDiv');
  elements.each(function(el) {
    alert(el.innerHTML);
  });
}
</script>

1.3.2. $F() 메서드 사용법

$F()는 폼 컨트롤(텍스트 필드, 드롭다운 등)의 값을 쉽게 가져오는 메서드입니다. 요소의 아이디나 요소 자체를 전달할 수 있습니다.

<input type="text" id="userName" value="Joe Doe">
<button onclick="alert($F('userName'))">값 확인</button>

1.3.3. $A() 메서드 사용법

$A()는 전달된 인자를 배열로 변환합니다. 특히 NodeList를 일반 배열로 변환하여 반복 처리에 활용할 수 있습니다.

<select id="lstEmployees">
  <option value="5">Buchanan</option>
  <option value="8">Callahan</option>
</select>
<button onclick="showOptions()">옵션 보기</button>

<script>
function showOptions() {
  const options = $A($('lstEmployees').getElementsByTagName('option'));
  options.each(function(opt) {
    alert(opt.textContent);
  });
}
</script>

1.3.4. $H() 메서드 사용법

$H()는 객체를 해시처럼 다룰 수 있는 Hash 객체로 변환합니다. 이를 통해 toQueryString() 메서드로 쿼리 문자열 생성이 가능합니다.

<script>
function testHash() {
  const data = { first: 10, second: 20 };
  const hash = $H(data);
  alert(hash.toQueryString()); // "first=10&second=20"
}
</script>

1.3.5. $R() 메서드 사용법

$R()는 숫자 범위를 나타내는 ObjectRange 객체를 간편하게 생성합니다. each() 메서드와 함께 사용해 반복 처리가 가능합니다.

<button onclick="demoRange()">범위 출력</button>

<script>
function demoRange() {
  const range = $R(1, 5, false);
  range.each(function(val) {
    alert(val);
  });
}
</script>

1.3.6. Try.these() 메서드 사용법

Try.these()는 여러 함수 중 하나라도 성공하면 그 결과를 반환하는 유틸리티입니다. 다양한 브라우저에서 다른 방식으로 텍스트를 접근하는 경우 유용합니다.

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

1.4. Ajax 기능 사용

1.4.1. Ajax.Request 클래스 사용

Ajax.Request는 서버와 비동기 통신을 간단히 수행할 수 있도록 도와줍니다. 요청 파라미터, 콜백 함수 등을 설정할 수 있으며, 상태 변화에 따라 다양한 이벤트 핸들러를 지정할 수 있습니다.

<select id="lstEmployees" onchange="fetchData()">
  <option value="1">Davolio</option>
</select>
<select id="lstYears" onchange="fetchData()">
  <option value="1998">1998</option>
</select>
<textarea id="result" rows="10"></textarea>

<script>
function fetchData() {
  const empId = $F('lstEmployees');
  const year = $F('lstYears');
  const url = '/api/sales';
  const params = `empID=${empId}&year=${year}`;

  new Ajax.Request(url, {
    method: 'get',
    parameters: params,
    onComplete: function(response) {
      $('result').value = response.responseText;
    }
  });
}
</script>

1.4.2. Ajax.Updater 클래스 사용

Ajax.Updater는 서버로부터 받은 HTML을 특정 요소에 삽입하는 데 특화되어 있습니다. 또한 응답 내용이 자바스크립트 코드일 경우, evalScripts: true 옵션을 통해 실행할 수 있습니다.

<button onclick="loadContent()">HTML 로드</button>
<div id="content"></div>

<script>
function loadContent() {
  new Ajax.Updater('content', '/api/content', {
    method: 'get',
    onFailure: function() {
      alert('오류 발생');
    },
    evalScripts: true
  });
}
</script>

2. prototype.js 참조 문서

2.1. JavaScript 클래스 확장

prototype.js는 기본 객체에 새로운 메서드를 추가함으로써 언어의 표현력을 확장합니다.

2.2. Object 클래스 확장

메서드	종류	매개변수	설명
`extend(dest, src)`	정적	dest: 객체, src: 객체	src의 모든 속성과 메서드를 dest에 복사
`extend(obj)`	인스턴스	obj: 객체	전달된 객체의 속성과 메서드를 복사

2.3. Number 클래스 확장

메서드	종류	매개변수	설명
`toColorPart()`	인스턴스	(없음)	16진수 형식의 색상 값 반환 (RGB 컬러 구성 요소용)

2.4. Function 클래스 확장

메서드	종류	매개변수	설명
`bind(obj)`	인스턴스	obj: 객체	함수를 특정 객체에 바인딩하여 반환
`bindAsEventListener(obj)`	인스턴스	obj: 객체	이벤트 객체를 매개변수로 받는 바인딩된 함수 반환

2.5. String 클래스 확장

메서드	종류	매개변수	설명
`stripTags()`	인스턴스	(없음)	HTML 태그 제거 후 문자열 반환
`escapeHTML()`	인스턴스	(없음)	HTML 특수문자 인코딩
`unescapeHTML()`	인스턴스	(없음)	escapeHTML의 역작용

2.6. document DOM 객체 확장

메서드	종류	매개변수	설명
`getElementsByClassName(className)`	인스턴스	className: CSS 클래스 이름	지정된 클래스 이름을 가진 모든 요소 반환

2.7. Event 객체 확장

속성	타입	설명
`KEY_BACKSPACE`	Number	백스페이스 키 코드 (8)
`KEY_TAB`	Number	탭 키 코드 (9)
`KEY_RETURN`	Number	엔터 키 코드 (13)
`KEY_ESCAPE`	Number	ESC 키 코드 (27)

메서드	종류	매개변수	설명
`element(event)`	정적	event: 이벤트 객체	이벤트를 발생시킨 요소 반환
`stop(event)`	정적	event: 이벤트 객체	이벤트 전파 및 기본 동작 중단
`observe(element, name, callback)`	정적	element: 요소, name: 이벤트 이름, callback: 콜백 함수	요소에 이벤트 리스너 추가

2.8. 새 객체 및 클래스 정의

prototype.js는 다양한 기능을 제공하는 독립된 객체와 클래스를 포함하고 있습니다.

2.9. PeriodicalExecuter 객체

주기적으로 특정 작업을 수행하는 객체입니다.

메서드	종류	매개변수	설명
`constructor(callback, interval)`	생성자	callback: 함수, interval: 초 단위 간격	주기적 실행을 위한 인스턴스 생성

2.11. Class 객체

클래스 생성을 위한 도우미 객체로, initialize() 메서드를 지원합니다.

<script>
var MyWidget = Class.create();
MyWidget.prototype = {
  initialize: function(message) {
    this.msg = message;
  },
  showMessage: function() {
    alert(this.msg);
  }
};

const widget = new MyWidget("Hello");
widget.showMessage();
</script>

2.14. Ajax.Request 클래스

HTTP 요청을 관리하는 핵심 클래스입니다. 상태 변화 이벤트를 감지하고, 응답 처리를 자동으로 수행합니다.

2.16. Ajax.Updater 클래스

서버 응답을 특정 요소에 삽입하는 데 최적화된 클래스입니다. 자바스크립트 코드 포함 시 evalScripts: true 옵션 사용 가능.

2.18. Element 객체

DOM 요소 조작을 위한 유틸리티 메서드 집합입니다.

메서드	종류	매개변수	설명
`hide(...)`	인스턴스	요소 또는 아이디	요소 숨김 (display: none)
`addClassName(...)`	인스턴스	요소, 클래스 이름	CSS 클래스 추가
`cleanWhitespace(...)`	인스턴스	요소	공백만 포함된 자식 노드 제거

2.21. Insertion 객체

DOM 요소에 동적 내용을 삽입하는 기능을 제공하는 추상 클래스입니다.

2.22 ~ 2.25. Insertion.Before, Top, Bottom, After

특정 위치에 내용을 삽입하는 클래스들입니다.

<span id="target">안녕하세요.</span>
<script>
new Insertion.Before('target', '<strong>선생님,</strong> ');
// 결과: <span><strong>선생님,</strong> 안녕하세요.</span>
</script>

2.26. Field 객체

폼 입력 요소 조작을 위한 유틸리티 메서드입니다.

메서드	종류	매개변수	설명
`clear(...)`	인스턴스	요소	값 초기화
`focus(...)`	인스턴스	요소	포커스 이동

2.30. Abstract.TimedObserver 클래스

요소의 값 변화를 주기적으로 감지하는 추상 클래스입니다. Form.Element.Observer와 Form.Observer가 이를 상속합니다.

2.36. Position 객체

요소의 위치 정보를 계산하는 유틸리티입니다.

메서드	종류	매개변수	설명
`within(element, x, y)`	인스턴스	요소, 좌표	좌표가 요소 내부인지 확인
`realOffset(element)`	인스턴스	요소	스크롤 오프셋 계산

태그: prototype.js JavaScript AJAX DOM event handling

6월 8일 17:51에 게시됨

괴물 클럽