'prototype'에 해당되는 글 5건
- 2007/04/05 zziuni Ajax prototype.js : 프로토타입 완전분석
- 2006/05/11 zziuni asp위한 JSON Parser 구현(prototype.js기반)
- 2006/04/25 zziuni Ajax 실무에서의 문제 #1 한글
- 2006/03/31 zziuni 자바스크립트로 만든 윈도우(팝업) (1)
- 2006/02/14 zziuni Prototype.js 관련 링크 모음
간만에 내돈주고(?) 책을 샀다. 영풍문고를 갔더니 위키북스 라는 출판사와는 거래를 하지 않는다고 해서 알라딘에서 구매했다. ㅡ ㅡa
나름 prototype.js는 대중화 되기 전부터 썼다고 생각했고, 실 프로젝트에서 서너번 적용하고... 소스도 까보고 했던지라.. 요거.. 책으로 낼수도 있겠다.. 라고 생각했는데, 정말 책이 나왔다. ㅡ ㅡa
소스도 까보고.. 블로그에 카테고리를 따로 두고 팁이나 강좌라도 올려봐야지.. 라고 생각했던 사람으로서..
아직 읽지는 않았지만, 주류가 아니면 책도 보기 힘든 국내 실정에 이런 주제의 책이 나왔다는것 자체가 일단 무척 반갑다.
prototype.js는 Javascript로 OOP 개발을 가능하게 하고 클래스 계념을 도입한 Javascript Framework이다.
유명해진건 ajax기능 때문이지만, ajax만 쓸려면 굳이 prototype.js를 고집할 필요는 없다.
하지만, 변변한 가이드 하나 없는 클라이언트 개발을 개별 개발자의 공수를 줄이고, 일관된 품질과 기능을 제공하려면 이젠 Javascript도 Framework라 부를만한 무언가를 써야 한다.
Prototype.js는 그 기반을 제공해준다.
prototype.js에 관한 웹에 공개된 내용들이 성에 안찬다면... 책을 사보는것도 좋을듯 싶다.
asp에는 JSON의 서버쪽 모듈이 없다.
그 이유든 아니든 XML로 데이터 통신을 할일이 늘고 있고, 모두들 나름대로 XML를 컨트롤 하는 함수를 만들어서 쓰고 있다.
ASP쪽에선 나름대로 노하우를 쌓아가고 있지만,
Ajax에서는 XMLHttpRequest 로 XMLDOM를 반한받은후 컨트롤 하기가 여간 버겨운것이 아니였다.
(javascript가 익숙하지 않은것이 가장큰 이유겠지만. )
서버단에서 부터 JSON으로 보낼 수 있다면, 더 좋겠지만, ASP에서는 아직 그런 모듈이 없기때문에,
통신은 XML로 하고 반환받은 XML DOM를 JSON으로 변환만 할 수 있어도 Ajax개발을 할때 많은 도움이 될것 같다.
그래서 현재 프래임워크로 선택한 Prototype.js기반으로 작동하는 JSONParser가 필요했고,
Yusuke Kawasaki 가 제작한 jkl-parsexml.js를 참고하여 Prototype.js기반의 JSONParser Object를 추가했다. (말이 참고지... 따왔다. ㅡ ㅡ;;)
사용법은 다음과 같다.
var AFUrl = "./test.xml"
var AvatarFD ;
var AvatarFD ;
//ajax XML 로드
function loadAjaxXML(url, pars, fncSuccess, fncFailure){
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onSuccess: fncSuccess,
onFailure: fncFailure
});
}
function loadAjaxXML(url, pars, fncSuccess, fncFailure){
var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: pars,
onSuccess: fncSuccess,
onFailure: fncFailure
});
}
function setAvatarFoundation(originalRequest){
AvatarFD = new JSONParser(originalRequest);
var json = AvatarFD.data;
alert("json.Avatar.Foundation.IMGPath=" + json.Avatar.Foundation.FullItem.ItemName)
}
AvatarFD = new JSONParser(originalRequest);
var json = AvatarFD.data;
alert("json.Avatar.Foundation.IMGPath=" + json.Avatar.Foundation.FullItem.ItemName)
}
function falseLoad(){alert('XML Load Error');}
loadAjaxXML(AFUrl, '', setAvatarFoundation, falseLoad)
객체 JSONParser에 할당된 originalRequest는 Prototype.js에서 Ajax.Request를 사용할때 반환되는 원본 Oject다. 이걸 인자로 하여 객체를 만들고, 메소드 data()를 써주면, XML은 JSON으로 파싱된되고,샘플의 json.Avatar.Foundation.FullItem.ItemName처럼 XML이 노드명을 Object Name으로 하여 하위접근이 가능해진다.
다음은 Prototype.js에 추가된 소스다. 부족한 샘플과 추가 설명은 다음에...
//==============================================================================
JSONParser = Class.create();
JSONParser = Class.create();
Object.extend(JSONParser.prototype, {
//initialize
initialize: function(req) {
this.req = req;
if ( ! this.req ) return;
if ( this.req.responseXML ) {
this.root = this.req.responseXML.documentElement; // XMLHTTPRequest
} else {
this.root = this.req.documentElement; // IXMLDOMDocument
}
this.data = this.parseDocument(this.root);
},
parseDocument: function(root){
var ret = this.parseElement(root);
var json = {};
json[root.nodeName] = ret; // root nodeName
return json;
}
});
//initialize
initialize: function(req) {
this.req = req;
if ( ! this.req ) return;
if ( this.req.responseXML ) {
this.root = this.req.responseXML.documentElement; // XMLHTTPRequest
} else {
this.root = this.req.documentElement; // IXMLDOMDocument
}
this.data = this.parseDocument(this.root);
},
parseDocument: function(root){
var ret = this.parseElement(root);
var json = {};
json[root.nodeName] = ret; // root nodeName
return json;
}
});
// ================================================================
// convert from DOM Element to JavaScript Object
// method: parseElement( element )
JSONParser.prototype.parseElement = function(elem){
// COMMENT_NODE
if ( elem.nodeType == 7 ) {
return;
}
// TEXT_NODE CDATA_SECTION_NODE
if ( elem.nodeType == 3 || elem.nodeType == 4 ) {
var bool = elem.nodeValue.match( /[^\x00-\x20]/ ); // for Safari
if ( bool == null ) return; // ignore white spaces
return elem.nodeValue;
}
var bool = elem.nodeValue.match( /[^\x00-\x20]/ ); // for Safari
if ( bool == null ) return; // ignore white spaces
return elem.nodeValue;
}
var retval;
var cnt = {};
var cnt = {};
// parse attributes
if ( elem.attributes && elem.attributes.length ) {
retval = {};
for ( var i=0; i<elem.attributes.length; i++ ) {
var key = elem.attributes[i].nodeName;
if ( typeof(key) != "string" ) continue;
var val = elem.attributes[i].nodeValue;
if ( ! val ) continue;
if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
cnt[key] ++;
this.addNode( retval, key, cnt[key], val );
}
}
if ( elem.attributes && elem.attributes.length ) {
retval = {};
for ( var i=0; i<elem.attributes.length; i++ ) {
var key = elem.attributes[i].nodeName;
if ( typeof(key) != "string" ) continue;
var val = elem.attributes[i].nodeValue;
if ( ! val ) continue;
if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
cnt[key] ++;
this.addNode( retval, key, cnt[key], val );
}
}
// parse child nodes (recursive)
if ( elem.childNodes && elem.childNodes.length ) {
var textonly = true;
if ( retval ) textonly = false;
for ( var i=0; i<elem.childNodes.length && textonly; i++ ) {
var ntype = elem.childNodes[i].nodeType;
if ( ntype == 3 || ntype == 4 ) continue;
textonly = false;
}
if ( textonly ) {
if ( ! retval ) retval = "";
for ( var i=0; i<elem.childNodes.length; i++ ) {
retval += elem.childNodes[i].nodeValue;
}
} else {
if ( ! retval ) retval = {};
for ( var i=0; i<elem.childNodes.length; i++ ) {
var textonly = true;
if ( retval ) textonly = false;
for ( var i=0; i<elem.childNodes.length && textonly; i++ ) {
var ntype = elem.childNodes[i].nodeType;
if ( ntype == 3 || ntype == 4 ) continue;
textonly = false;
}
if ( textonly ) {
if ( ! retval ) retval = "";
for ( var i=0; i<elem.childNodes.length; i++ ) {
retval += elem.childNodes[i].nodeValue;
}
} else {
if ( ! retval ) retval = {};
for ( var i=0; i<elem.childNodes.length; i++ ) {
var key = elem.childNodes[i].nodeName;
if ( typeof(key) != "string" ){ continue;}
var val = this.parseElement( elem.childNodes[i] );
if ( ! val ){ continue;}
if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
cnt[key] ++;
this.addNode( retval, key, cnt[key], val );
}
}
}
if ( typeof(key) != "string" ){ continue;}
var val = this.parseElement( elem.childNodes[i] );
if ( ! val ){ continue;}
if ( typeof(cnt[key]) == "undefined" ) cnt[key] = 0;
cnt[key] ++;
this.addNode( retval, key, cnt[key], val );
}
}
}
return retval;
}
}
// ================================================================
// method: addNode( hash, key, count, value )
JSONParser.prototype.addNode = function ( hash, key, cnts, val ) {
if ( cnts == 1 ) { // 1st sibling
hash[key] = val;
} else if ( cnts == 2 ) { // 2nd sibling
hash[key] = [ hash[key], val ];
} else { // 3rd sibling and more
hash[key][hash[key].length] = val;
}
};
// method: addNode( hash, key, count, value )
JSONParser.prototype.addNode = function ( hash, key, cnts, val ) {
if ( cnts == 1 ) { // 1st sibling
hash[key] = val;
} else if ( cnts == 2 ) { // 2nd sibling
hash[key] = [ hash[key], val ];
} else { // 3rd sibling and more
hash[key][hash[key].length] = val;
}
};
JSONParser.nodeType = [
"",
"ELEMENT_NODE", // 1
"ATTRIBUTE_NODE", // 2
"TEXT_NODE", // 3
"CDATA_SECTION_NODE", // 4
"ENTITY_REFERENCE_NODE", // 5
"ENTITY_NODE", // 6
"PROCESSING_INSTRUCTION_NODE", // 7
"COMMENT_NODE", // 8
"DOCUMENT_NODE", // 9
"DOCUMENT_TYPE_NODE", // 10
"DOCUMENT_FRAGMENT_NODE", // 11
"NOTATION_NODE" // 12
];
"",
"ELEMENT_NODE", // 1
"ATTRIBUTE_NODE", // 2
"TEXT_NODE", // 3
"CDATA_SECTION_NODE", // 4
"ENTITY_REFERENCE_NODE", // 5
"ENTITY_NODE", // 6
"PROCESSING_INSTRUCTION_NODE", // 7
"COMMENT_NODE", // 8
"DOCUMENT_NODE", // 9
"DOCUMENT_TYPE_NODE", // 10
"DOCUMENT_FRAGMENT_NODE", // 11
"NOTATION_NODE" // 12
];
혹시나 했는데, 역시나 한글은 어디서나 골치다.
뭐, 명확히는 한글이 골치가 아니라 유니코드가 나왔음에도 2바이트 언어 처리가 문제지만...
fantazic.com 에 좋은 내용이 있어서 트랙백을 건다.
현재 프로토타입 기반의 스크립트 어플을 개발중인데, 막 문제가 수면위로 고개를 내밀때쯤,
잘 나타나주었다. (?)
prototype를 수정해서 쓰는 팁도 얻고, [XMLHttpRequest를 사용할 때 한글 파라미터의 인코딩 처리 방법] 란 좋은 글도 얻었다. 감샤~ ^^
근데, 왜 여태 escape()을 쓰면 공백이 + 로 바뀐다는걸 알면서도 그냥 썼을까... 희안하내~
뭐, 명확히는 한글이 골치가 아니라 유니코드가 나왔음에도 2바이트 언어 처리가 문제지만...
fantazic.com 에 좋은 내용이 있어서 트랙백을 건다.
현재 프로토타입 기반의 스크립트 어플을 개발중인데, 막 문제가 수면위로 고개를 내밀때쯤,
잘 나타나주었다. (?)
prototype를 수정해서 쓰는 팁도 얻고, [XMLHttpRequest를 사용할 때 한글 파라미터의 인코딩 처리 방법] 란 좋은 글도 얻었다. 감샤~ ^^
근데, 왜 여태 escape()을 쓰면 공백이 + 로 바뀐다는걸 알면서도 그냥 썼을까... 희안하내~
트랙백 대상 : http://fantazic.com/?p=26
do translation into Korean.. :)
몇몇 사이트 들은 window.open() 으로 팝업을 쓰는 대신에 페이지 않에서 div 를 이용하여
페이지 안에서 "windows'를 만들어 사용한다.
하지만, 좀더 세련된 형태를 원한다면, 이 포스트 가 아주 놀랄만한 창을 만드는 법을 보여줄것이다.
이건 Prototype과 script.aculou.us 라는 자바스크립트 라이브러리들을 기반으로 하고 있다.
예제와 (적은 분량이지만) 문서도 포함되어있다.
거기다가, 그의 사이트에선 좀더 구체적인 사용법에 대한 언급도 있다.
사이트 레이아웃을 깨지 않으면서 사용할 수 있는 자바스크립트 디버거 창 같은거 말이다.
자신은 디자이너가 아니라서 창의 디자인이 별루니까, 스킨테마 페이지를 만들 예정이니 디자인좀 하면 자신에게 보내달라는 당부도 잊지 않는다. ^^;
출처 : ajaxjan.com - javascript windows enhanced
몇몇 사이트 들은 window.open() 으로 팝업을 쓰는 대신에 페이지 않에서 div 를 이용하여
페이지 안에서 "windows'를 만들어 사용한다.
하지만, 좀더 세련된 형태를 원한다면, 이 포스트 가 아주 놀랄만한 창을 만드는 법을 보여줄것이다.
이건 Prototype과 script.aculou.us 라는 자바스크립트 라이브러리들을 기반으로 하고 있다.
이 포스트 에선 쉽게 사용하고, 쉽게 바꿀 수 있는 형태의 소스를 다운로드 할수 있다.이 Javascript Class는 HTML페이지 안에 새창을 추가할 수 있도록 한다.
이 class는 Prototype 1.4 를 기반으로 했으며, 파워풀한 script.aculo.us 라이브러리에서 영감을 얻어서 작성되었다.
당신이 effects.js 파일을 include 한다면, 창을 표시하고 감추기위한 script.aculo.us의 모든 효과(effect)를 사용할 수 있다.
이 class는 Safari, Camino, Firefox, IE6에서 테스트 되었다.
예제와 (적은 분량이지만) 문서도 포함되어있다.
거기다가, 그의 사이트에선 좀더 구체적인 사용법에 대한 언급도 있다.
사이트 레이아웃을 깨지 않으면서 사용할 수 있는 자바스크립트 디버거 창 같은거 말이다.
자신은 디자이너가 아니라서 창의 디자인이 별루니까, 스킨테마 페이지를 만들 예정이니 디자인좀 하면 자신에게 보내달라는 당부도 잊지 않는다. ^^;
출처 : ajaxjan.com - javascript windows enhanced
재미삼아 관심있는 내용을 의미가 와전되지 않는 정도로 옮겼습니다.
영어가 심하게 짧은 관계로 잘못 이해한 내용이 있을 수 있으니 지적해주시면 바로 고칩니다. ^^
영어가 심하게 짧은 관계로 잘못 이해한 내용이 있을 수 있으니 지적해주시면 바로 고칩니다. ^^
Prototype 는 Sam Stephenson 이 만든 자바스크립트 프래임워크다.
모두 삽질로 매번 만들고 따오는 스크립트들을 간단한 공용 라이브러리 식으로 만든 건데,
자그마치 1780라인에 48k가 된다.
Rico 가 Prototype.js기반으로 만들어졌으며, Ruby on Rain 프로젝트와도 관련있다.
다음은 참고 사이트.
한글 퀵가이드 위키
http://openframework.or.kr/jspwiki/wiki ··· rototype
비공식 개발자 노트, 레퍼런스http://openframework.or.kr/framework_re ··· .js.html
영문 퀵가이드
http://particletree.com/features/quick- ··· otype%2F
영문 레퍼런스
http://wiki.script.aculo.us/scriptaculo ··· rototype
모두 삽질로 매번 만들고 따오는 스크립트들을 간단한 공용 라이브러리 식으로 만든 건데,
자그마치 1780라인에 48k가 된다.
Rico 가 Prototype.js기반으로 만들어졌으며, Ruby on Rain 프로젝트와도 관련있다.
다음은 참고 사이트.
한글 퀵가이드 위키
http://openframework.or.kr/jspwiki/wiki ··· rototype
비공식 개발자 노트, 레퍼런스http://openframework.or.kr/framework_re ··· .js.html
영문 퀵가이드
http://particletree.com/features/quick- ··· otype%2F
영문 레퍼런스
http://wiki.script.aculo.us/scriptaculo ··· rototype
Comments List