티스토리 뷰
자바스크립트를 좀 쉽고 편하게 쓰기 위한 좋은 공통유틸(?) 정도로 생각하시면 될 것 같아요~
특히 DOM(Document Object Model:div, input 같은 것들) 객체 접근이랑 AJAX에 매우 유용해요~~
정식 명칭은 prototypejs 이고, 최신 버전은 1.6 버전이예요.
공식 사이트는 http://prototypejs.org 이구요~
API가 되게 잘 되어 있거든요~
http://prototypejs.org/api 에 가시면 JAVA API처럼 보실 수 있어요. (깔끔하니 보기 좋아요^^)
음~ 여기서는 객체 접근이랑 AJAX에 대한 부분, 간단한 유용한 함수에 대해서 소개해드리려구 하고요.
더 자세한 내용과 디테일한 사용법은 API를 참조하시면 될 것 같아요.^^
알아두시면 확실히 시간이 절약되고 에러도 적고~ 금방 쉽게 구현되니 바쁘시더라도 한 번 읽어주세요^^~
0. 설치?
페이지 상단에
<script type="text/javascript" src="prototype.js(prototypejs 경로)"></script>
를 넣어주시면 되요.
1. 객체 접근 ($, $$, $F)
해당 API 문서: http://prototypejs.org/api/utility
prototypejs의 객체 접근 방식에 대해 소개할께요~
<div id="divId">울랄라~</div>
위와 같은 객체가 있을 때에,
기존에는
document.getElementById("divId")
와 같은 방식으로 가져와야 했는데,
prototypejs에서는
$("divId")
와 같이 가져오시면 되요.
해당 객체의 id 값으로 가져와도 되고,
아래와 같이 이미 가져온 객체를 $를 이용해 확장(상속) 하셔도 됩니당~
$(document.getElementById("divId"));
$를 이용해서 가져온 객체는 prototypejs의 유용한 함수들을 모두 쓸 수 있게 되거든요~
예를 들어 이런 것들이 있어요.
$("divId").hide(); // 숨기기
$("divId").toggle(); // show/off 변경
$("divId").update("어쩌고"); // innerHTML 변경
$ 이외에 $$가 있는데 이것도 무진장 좋아요.
css에 표기하는 방식대로 객체를 가져오는데 배열로 가져와요~
tag명이나 class 명으로 구분지어 객체들을 가져올 수 있어서 되게 편해요.
예를 들어,
<a href="#" class="link">어쩌고</a>
<a href="#" class="link">저쩌고</a>
<a href="#" class="link">꿍시렁</a>
이런 놈들을 다 가져오려면,
예전에는 가져오려는 객체들의 각각 가져오거나 또는 parentNode를 찾아서 childNodes로 가져왔어야 했는데,
var links = document.getElementById(상위노드).childNodes;
// 다음 type 검사 등등을 거쳐야 함
prototypejs에서는
$$(".link");
와 같이 가져오면 되요. css에서 link 클래스를 설정할 때 .link 라고 하면 되니까~
만약, 아래와 같이 큰 문서 아래에 있는 특정 객체들을 주루룩 가져오고 싶다면,..
... (중략)
<div id="divId">
... (중략)
<a href="#" class="link">어쩌고</a>
<a href="#" class="link">저쩌고</a>
<a href="#" class="link">꿍시렁</a>
... (중략)
</div>
... (중략)
이렇게 되어 있을 땐, divId 객체를 가져온 후에 class 명으로 가져올 수도 있어요.
이때엔 select라는 명령어가 있는데요~
$("divId").select(".link");
또는
$$("#divId a");
또는
$$("#divId .link");
이렇게 가져오면 해당 객체들을 가져올 수 있어요.
그 외에도 $F 는 input 객체의 값을 가져옵니당~
$F("input 객체 아이디 또는 이름")
form 아래에 있는 input 객체들의 value 값을 알아서 가져오기도 합니다.
예를 들어
<form id="aForm">
<input type="text" id="username" name="username" value="홍길동">
</form>
의 value를 가져오려면,
document.getElementById("username").value
또는
document.forms["aForm"].username.value
로 가져왔던 것을,
$F("username")
또는
$("username").getValue()
또는
$("username").value
와 같이 가져올 수 있어요~
또한 AJAX 부분에서 보시면 아시겠지만,
요청을 보낼 패러미터를 작성할 때에
a=b&c=d&e=f
형태로 parameter를 URI 형태로 변경하던 작업을
$("폼이름").serialize()
를 사용하셔서 한 번에 해결하실 수 있어요~~
요론 식으로 쓰시면 매우 유용할 거예요~ ㅎㅎ
자세한 사용방법 API를 참조하세요^^
2. AJAX
해당 API 문서: http://prototypejs.org/api/ajax
이미 기존에 시스템에 적용되어 있는 부분들을 보셨겠지만~
prototypejs에서는 AJAX를 편하게 사용할 수 있어요.
기존에는 XMLHttpRequest 객체를 만들어서 보내고 어쩌고 해야했지만,
여기선 Ajax 객체를 이용할 수 있어요.
아래와 같은 방식으로 호출하시면 되요.
new Ajax.Request(url, {
method: 'post', // 옵션~ 디폴트는 post이고 'get'으로 하셔도 되요~
parameters: params, // URI 방식(예: a=b&c=d&e=f)의 패러미터
onSuccess: function(transport) { // 성공 시 호출할 함수
alert(transport.responseText); // 결과로 가져오는 응답텍스트
},
onFailure: function() { // 실패 시 호출할 함수
alert("fail!");
}
});
url 이후에 쓰는 { a:b, c:d } 형태가 익숙하지 않으실 텐데요~
요곤 JSON(Javascript Object Notation)라는 자바스크립트 객체 전달을 위한 표기법이예요.
(JSON에 대한 자세한 사항은 http://placebo4me.egloos.com/1062935 를 참조하세요~)
아래와 같은 패러미터를
a=b&c=d&e=f
JSON 형태로 변환하면,
{a:b, c:d, e:f}
이렇게 되는 거지요.
{ name:value, name:value, name:value } 와 같이 되는 거예요~
JSON의 객체 자체는 독립된 객체로 만들 수 있고(javascript 객체 지향, MVOC main에 자동으로 모델 돌아가는 부분처럼...)
value는 nubmer, text, hash, array, function 등 다 될 수 있고요~
처음엔 좀 알아보기 힘든데 좀 보시면 금방 익숙해지실 거예요~
주로 action 또는 jsp로 요청을 보내서
받아온 값을 원하는 부분에 innerHTML로 넣어주는 용도로 많이 쓰고 있는데요~
예를 들어,
xxx.do 액션을 호출해서 뿌려진 html 값을 result라는 div 객체 아래에 innerHTML로 결과로 뿌려주고 싶으면-
아래와 같이 하면 되요.
var url = "xxx.do"; // .do 로 가서 action에서 로직을 수행하고 xxx_aj.jsp 페이지에 목록 테이블을 그린다고 가정합니다.
new Ajax.Request(url, {
paramters: $F("xxForm").serialize(),
onSuccess: function(req) {
$("result").update(req.responseText);
},
onFailure: function() {
alert("fail!");
}
});
단순히 위와 같이 결과로 가져온 값을 원하는 객체 아래에 넣는 거라면,
아래와 같이 Updater를 써도 깔끔하고 효율적이예요.
var url = "xxx.do";
new Ajax.Updater("result", url, {
paramters: $F("xxForm").serialize()
});
훨씬 깔끔하지요~
시스템 내에선 대부분 저정도면 충분히 사용 가능하실 것 같고요,
더 자세한 사항은 API를~~ ㅎㅎ
3. Enumerable, Array
해당 API 문서: http://prototypejs.org/api/array
프로토타입을 추가할 경우,
일반 자바스크립트 배열을 자동적으로 프로토타입의 배열 메서드를 사용할 수 있어요~
예를 들어,
var myArray = ['apple', 'banana', 'grape'];
myArray.each(function(el) {
alert(el);
});
이렇게 일반 배열이 기본적으로 프로토타입 배열을 상속받습니당~~
3-1. $A
해당 리스트를 '실제 배열'처럼 바꿔주고, 프로토타입 배열의 메서드를 사용할 수 있게 합니다.
예를 들어,
document.getElementsByTagName("img")
또는
$$("img")
같은 경우, 일반 array가 아닌 nodeList를 가져오는데 이를
$A(document.getElementByTagName("img"))
와 같이 하여 실제 배열로 바꿀 수 있어요~
3-2. iterator
프로토타입에서는 배열에 loop을 돌면서 수행하는 것들 좀더 간단하게 구현할 수 있어요.
예를 들어,
for (var index = 0; index < myArray.length; index++) {
var item = myArray[index];
// 어쩌고 저쩌고...
}
하던 것을,
myArray.each(function(item) {
// 어쩌고 저쩌고...
});
와 같이 할 수 있어요.
each 구문을 통해 myArray의 각 아이템을 돌면서 설정한 함수를 실행하게끔 하는 거예요.
만약 index의 값이 필요하다면,
var result = 0;
myArray.each(function(el, idx) { // 함수의 인자 이름은 자유롭게 쓸 수 있어요~
result += idx;
// 어쩌고 저쩌고
});
와 같이 쓰면 되요~
3-3. 기타 주요 함수
myArray.first(); // first item
myArray.last(); // last item
myArray.size(); // myArray.length 와 동일
myArray.indexOf(value); // indexOf~
myArray.reverse(); // 순서를 바꿉니다~
myArray.clear(); // 초기화~
myArray.min(); // 최소값
myArray.max(); // 최대값
자세한 사항은 API 참조~~
뭐 이 외에도 String이나 Date, Number 에 유용한 함수들이 많아요~~
API를 참조해보시면 좋을 듯.^^
첨부는 프로토타입 예제 파일이예요~
간단한 기능을 일반 javascript로 구현하고, 똑같이 prototypejs를 써서 구혔했어요~
sample_before.html: 일반
sample_after.htmlsample_after.html: prototypejs 사용~
(같은 폴더 내에 prototype-1.6.0.2.js 파일이 있어야 합니다~
prototype.js 파일을 받으셔서 소스나 파일 이름을 적당히 변경하여서 참조해보세요^^)
한 번 참조해보세용^^