encodeURI, encodeURIComponent, escape 함수 사용 예제

3. XML Parser - rssParser.js

먼저의 post에서 var xml = rssParser(req.responseXML); 를 보셨을 것입니다.
req.responseXML 을 받아서 JSON으로 파싱 하는 것입니다.
이부분은 rssParser.js란 javascript파일로 따로 구현해 보았습니다.

먼저 전체 소스를 보시죠.

  0: /**

  1:  *  @(#)rssParser.js    V0.1    2007/03/15

  2:  *

  3:  *  rss XML Parser extend Prototype.js v1.5

  4:  *  Copyright 2005-2007 by VRICKS, All Right Reserved.

  5:  *  http://www.vricks.com

  6:  *

  7:  *  GNU LESSER GENERAL PUBLIC LICENSE

  8:  *  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  9:  *

 10:  *  @Author Woo-Chang Yang, routine@vrick.com

 11:  */

 12:

 13: function rssParser(xml) {

 14:     var v = Try.these(

 15:         // Rss ¹öÀüÀ» °¡Á® ¿É´Ï´Ù.

 16:         function() {

 17:             return xml.getElementsByTagName("rss")[0].getAttribute("version") ? "2.0" : false;

 18:         },

 19:         function() {

 20:             return xml.getElementsByTagName("rdf:RDF")[0].getAttribute("xmlns") ? "1.0" : false;

 21:         },

 22:         function() {

 23:             return xml.getElementsByTagName("feed")[0].getAttribute("xmlns") ? "atom" : false;

 24:         }

 25:     )

 26:     switch(v) {

 27:         case "2.0"  : return new rssParser2(xml); break;

 28:         case "1.0"  : return new rssParser1(xml); break;

 29:         case "atom" : return new rssParserAtom(xml); break;

 30:         default     : return false;

 31:     }

 32: };

 33:

 34: // Rss 2.0 Calss

 35: var rssParser2 = Class.create();

 36: Object.extend(rssParser2.prototype, {

 37:     initialize    : function(xml) {

 38:         var channel = xml.getElementsByTagName("channel")[0];

 39:         this.title  = channel.getElementsByTagName("title")[0].firstChild.nodeValue;

 40:         this.link   = channel.getElementsByTagName("link")[0].firstChild.nodeValue;

 41:         if(channel.getElementsByTagName("image")[0]) {

 42:             var images   = channel.getElementsByTagName("image")[0];

 43:             this.image   = {

 44:                 "url"    : images.getElementsByTagName("url")[0].firstChild.nodeValue,

 45:                 "title"  : images.getElementsByTagName("title")[0].firstChild.nodeValue,

 46:                 "link"   : images.getElementsByTagName("link")[0].firstChild.nodeValue

 47:             };

 48:         }

 49:         else {

 50:             this.image = {

 51:                 "url"    : "",

 52:                 "title"  : "",

 53:                 "link"   : ""

 54:             }

 55:         }

 56:         this.description = Try.these (

 57:             function() {

 58:                 return channel.getElementsByTagName("description")[0].firstChild.nodeValue;

 59:             },

 60:             function() { return "" }

 61:         );

 62:         this.language    = Try.these (

 63:             function() {

 64:                 return channel.getElementsByTagName("language")[0].firstChild.nodeValue;

 65:             },

 66:             function() {

 67:                 return channel.getElementsByTagName("dc:language")[0].firstChild.nodeValue;

 68:             },

 69:             function() { return ""}

 70:         );

 71:         this.pubDate     = Try.these(

 72:             function() {

 73:                 return channel.getElementsByTagName("pubDate")[0].firstChild.nodeValue;

 74:             },

 75:             function() {

 76:                 return channel.getElementsByTagName("lastBuildDate")[0].firstChild.nodeValue;

 77:             },

 78:             function() { return ""; }

 79:         );

 80:         var items = new Array();

 81:         $A(channel.getElementsByTagName("item")).each(function(i){

 82:             items.push({

 83:                 "category" : Try.these(

 84:                     function() {

 85:                         return i.getElementsByTagName("category")[0].firstChild.nodeValue;

 86:                     },

 87:                     function() { return "" }

 88:                 ),

 89:                 "title" : i.getElementsByTagName("title")[0].firstChild.nodeValue,

 90:                 "link"    : i.getElementsByTagName("link")[0].firstChild.nodeValue,

 91:                 "description" : Try.these (

 92:                     function() {

 93:                         return i.getElementsByTagName("description")[0].firstChild.nodeValue;

 94:                     },

 95:                     function() { return "" }

 96:                 ),

 97:                 "pubDate" : Try.these (

 98:                     function() {

 99:                         return i.getElementsByTagName("pubDate")[0].firstChild.nodeValue;

100:                     },

101:                     function() {

102:                         return i.getElementsByTagName("dc:date")[0].firstChild.nodeValue;

103:                     },

104:                     function() { return "" }

105:                 )

106:             })

107:         })

108:         this.item = items;

109:     }

110: });

111:

112: var rssParser1 = Class.create();

113: Object.extend(rssParser1.prototype, {

114:     initialize    : function(xml) {

115:         var channel = xml.getElementsByTagName("channel")[0];

116:         var images  = xml.getElementsByTagName("image")[0];

117:         this.title  = channel.getElementsByTagName("title")[0].firstChild.nodeValue;

118:         this.link   = channel.getElementsByTagName("link")[0].firstChild.nodeValue;

119:         this.image  = {

120:             "url"   : images.getElementsByTagName("url")[0].firstChild.nodeValue,

121:             "title" : images.getElementsByTagName("title")[0].firstChild.nodeValue,

122:             "link"  : images.getElementsByTagName("link")[0].firstChild.nodeValue

123:         };

124:         this.description = channel.getElementsByTagName("description")[0].firstChild.nodeValue;

125:         this.language    = channel.getElementsByTagName("dc:language")[0].firstChild.nodeValue;

126:         this.pubDate     = channel.getElementsByTagName("dc:date")[0].firstChild.nodeValue;

127:         var items        = xml.getElementsByTagName("item");

128:         var itemValue    = new Array();

129:         for(var i = 0; i < items.length; i++) {

130:             itemValue.push({

131:                 "category"   : items[i].getElementsByTagName("category")[0].firstChild.nodeValue,

132:                 "title"      : items[i].getElementsByTagName("title")[0].firstChild.nodeValue,

133:                 "link"       : items[i].getElementsByTagName("link")[0].firstChild.nodeValue,

134:                 "description":

135:                               items[i].getElementsByTagName("description")[0].firstChild.nodeValue,

136:                 "pubDate"    : items[i].getElementsByTagName("dc:date")[0].firstChild.nodeValue

137:             });

138:         };

139:         this.item = itemValue;

140:     }

141: });

142:

143: var rssParserAtom = Class.create();

144: Object.extend(rssParserAtom.prototype, {

145:     initialize    : function(xml) {

146:         this.title   = xml.getElementsByTagName("title")[0].firstChild.nodeValue;

147:         this.link    = xml.getElementsByTagName("link")[0].getAttribute("href");

148:         this.image   = {

149:             "url"    : "",

150:             "title"  : "",

151:             "link"   : ""

152:         };

153:         this.description = xml.getElementsByTagName("info")[0].firstChild.nodeValue;

154:         this.language    = "";

155:         this.pubDate     = xml.getElementsByTagName("modified")[0].firstChild.nodeValue;

156:         var items        = xml.getElementsByTagName("entry");

157:         var itemValue    = new Array();

158:         for(var i = 0; i < items.length; i++) {

159:             itemValue.push({

160:                 "category"   : "",

161:                 "title"      : items[i].getElementsByTagName("title")[0].firstChild.nodeValue,

162:                 "link"       : items[i].getElementsByTagName("link")[0].getAttribute("href"),

163:                 "description":items[i].getElementsByTagName("summary")[0].firstChild.nodeValue,

164:                 "pubDate"    : items[i].getElementsByTagName("created")[0].firstChild.nodeValue

165:             });

166:         };

167:         this.item = itemValue;

168:     }

169: });

function rssParser(xml) {...}을 보시면 Rss의 버전을 구해서 알맞은 Class를 호출 하는 부분 입니다.
Try.these (...) 부분이 보이실 것입니다. API 보기
아래에 나열된 function()을 수행하여 먼저 성공한 하나만을 호출 합니다. 정말 멋진 생각입니다. ^^;

var rssParser2 = Class.create();
Object.extend(rssParser2.prototype, { ... }
새로운 Class를 생성하여 prototype을 확장 하였습니다.
Class.create()로 확장을 하면 항상 initialize 를 수행 합니다.
new rssParser2(xml); 하게 되면 자동으로 initialize 부분이 수행이 된다는 의미 입니다.

var channel = xml.getElementsByTagName("channel")[0];
태그명 channel의 첫번째 element를 가져 옵니다. channel이 한개뿐인데 배열로 가져 왔습니다.
태그명으로 가져 올 때는 getElementsByTagName 여기서도 보실수 있듯이 복수형입니다.
그래서 항상 배열형태로 리턴이 됩니다. [0] 이분이 빠지면 에러가 납니다. ^^;

이제 channel의 자식 노드들을 뽑아올 차례 입니다.

this.title  = channel.getElementsByTagName("title")[0].firstChild.nodeValue;
<channel>아래에 있는 태그명 <title>의 첫번째 노드의 value를 가져 옵니다.
DOM에 대한 자세한 내용은
URL : http://www.ibm.com/developerworks/kr/library/wa-ajaxintro5/ 을 참고 하시기 바랍니다.

이렇게 title, lilnk, descriiption을 가져옵니다.
pubDate의 경우는 먼저 pubDate 태그를 찾은 후 없으면 lastBuildDate를 그것도 없으면 공백문자를 리턴해 줍니다.
뭐 어려운거 없습니다. 그냥 DOM으로 노드 뽑아 오듯이 하나씩 뽑아서 대입해 주면 됩니다.

<item>태그에 들어있는 각각의 post를 가져올 차례입니다.
$A(channel.getElementsByTagName("item")).each(function(i){ ... })
$A는 Array의 확장판으로 Ruby틱한 배열형태를 사용할 수 있도록 해 줍니다. API 보기
<item>을 돌면서 <item>에 포함한 <title>, <link>, <description>, <pubDate>를 가져와서 JSON형태로 파싱하고
파싱된 것들을 item이란 변수에 배열로 담아 놓습니다.
이렇게 해 놓으면 후에 item[i].title, item[i].link, item[i].description 으로 가져올 수 있습니다.

어떻게 글로 설명을 할려니 더 어려워 진거 같네요.
구현된 모습을 한번 보겠습니다.

2. Rss를 XML로 가져오기

이제 가져올 element는 정해 졌습니다.
하지만 한가지 문제가 있습니다. 이놈을 어떻게 가져 올 것인가???

Ajax라고 많이 들어 보셨을 것입니다. 일명 HTML, Javascript DHTML, DOM으로 구성된 비동기 통신을 가리키는 말입니다.
Ajax의 핵심에는 XMLHttpRequest 가 있습니다. 대충 보니 HTTP프로토콜을 이용하여 XML로 어떤 값을 받는거 같습니다.
이놈이 사용자가 눈치채지 못하게 어떤 값을 가져오고 그것을 DOM형태로 소리 소문 없이 문서 사이에 끼워 넣으면서 여러가지 동적인 화면을 구성할 수 있습니다.

Ajax에 대해서 더 자세히 아시고 싶으신 분은
URL : http://www.ibm.com/developerworks/kr/library/wa-ajaxintro1.html 를 참고해 주세요.
이 Post의 주제가 초간단 Rss Reader를 만드는 것이기 때문에 주제에 충실 하도록 하겠습니다.

이제 보실 부분은 rssReader.html의 javascript 부분입니다.
총 3개의 function으로 구성되어 있습니다.

uriChk()
입력한 URL값이 유효한 값인지 검사 합니다. 최소한 http://XXX.XXX 나 https://XXX.XXX 형태가 되는지 검사합니다.
여기를 통과하면 일단 유효한 URL이라고 판단하여 getRss(URL)을 호출 합니다.

getRss(URL)
이부분이 핵심입니다. 해당 URL로 Ajax비동기 통신을 하여 xml을 가져 옵니다.
그리고 var xml = rssParser(req.responseXML); 로 xml을 JSON으로 파싱을 시킵니다.
rssParser은 rssParser.js란 include된 javascript에 들어 있습니다.
만약 알맞게 JSON으로 파싱이 되었다면 printHTML(JSON) 을 호출 합니다.

printHTML(JSON)
이 부분은 그냥 이뿌게 꾸며서 <div id="title"></div> 여기에 제목 부분을 넣고
<div id="contents"></div> 여기에 item 리스트를 넣는 것입니다.

전체 소스를 보겠습니다.

 0: <?xml version="1.0" encoding="EUC-KR" ?>

 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2: <html xmlns="http://www.w3.org/1999/xhtml">

 3: <head>

 4: <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

 5: <style type="text/css">

 6:     *         {font-size:12px;}

 7:     body      {margin:0px; padding:0px;color:#666666;}

 8:     a:active  {color:#236fa5; text-decoration:none;}

 9:     a:visited {color:#236fa5; text-decoration:none;}

10:     a:link    {color:#236fa5; text-decoration:none;}

11:     a:hover   {color:#518fbb; text-decoration:underline;}

12: </style>

13: <script type="text/javascript" language="javascript" src="./prototype.js"></script>

14: <script type="text/javascript" language="javascript" src="./rssParser.js"></script>

15: <script type="text/javascript" language="javascript">

16: <!--

17:     function uriChk() {

18:         var uri = $("uri");

19:         if(uri.value == "") {

20:             alert("가져올 피드의 주소를 입력 하세요.");

21:             uri.focus();

22:             return;

23:         }

24:         if(!(/(http|https):\/\/\w+([-.]\w+).+$/).test(uri.value)) {

25:             alert("피드 주소가 유효하지 않습니다.");

26:             uri.focus();

27:             return;

28:         }

29:         getRss(uri.value);

30:     }

31: 

32:     function getRss(uri) {

33:         Element.hide("title");

34:         $("contents").innerHTML = $("loading").innerHTML;

35:         new Ajax.Request(

36:             uri,

37:             {

38:                 method : "get",

39:                 onSuccess : function(req) {

40:                     var xml = rssParser(req.responseXML);

41:                     if(!xml) { 

                            alert("Rss포멧이 아닙니다.");

                            $("contents").innerHTML = ""; 

                            return;

                        }

42:                     printHtml(xml);

43:                 },

44:                 onFailure : function() {

45:                     alert("데이타를 가져오는데 실패 했습니다.");

46:                     $("contents").innerHTML = "";

47:                 }

48:             }

49:         );

50:     }

51: 

52:     function printHtml(xml) {

53:         var d = new Date(xml.pubDate);

54:         var title = '';

55:         var cont = '';

56:         title += '<a href="' + xml.link + '" target="_blank"><strong style="font-size:16px;">' 

                  + xml.title + '</strong></a>';

57:         if(d != 'NaN') {

58:             title += '<span style="padding-left:20px;">(' + d.toLocaleString() + ')</span>';

59:         }

60:         title += '<br/><br/>' + xml.description;

61:         for(var i = 0; i < xml.item.length; i++) {

62:             cont += '<a href="' + xml.item[i].link +'" target="_blank">'

                     + '<strong style="font-size:16px;">' + xml.item[i].title + '</strong></a>';

63:             cont += '<hr style="height:1px;color:518fbb"/>';

64:             if(xml.item[i].pubDate != "") {

65:                 var pd = new Date(xml.item[i].pubDate);

66:                 cont += '<span style="color:#aaaaaa;">' + pd.toLocaleString() 

                         + '</span><br/><br/>';

67:             }

68:             cont += xml.item[i].description.replace("\n", "<br/>") + '<br/><br/><br/>';

69:         };

70:         $("title").innerHTML = title;

71:         $("contents").innerHTML = cont;

72:         Element.show("title");

73:     }

74: //-->

75: </script>

76: <title>Rss Reader V 0.1 by Vricks - www.vricks.com</title>

77: </head>

78: <body>

79: <div style="width:800px;text-align:left;margin:auto;">

80:     <div style="background-color:#ff000a;padding:16px 0 50px 16px;margin:20px 0;">

81:         <strong style="font-size:14px;color:#ffffff;">

82:             Rss Reader V0.1

83:         </strong>

84:     </div>

85:     <div style="text-align:center;margin:20px;">

86:         <input type="text" id="uri" value="http://blog.rss.naver.com/jeffyang.xml" 

             style="width:360px;" />

87:         <input type="button" value="RSS 가져오기" onclick="uriChk();" />

88:     </div>

89:     <div id="title" 

             style="padding:20px;background-color:#f7f7f4;border:1px solid #aaaaaa;display:none;">

        </div>

90:     <div id="contents" style="padding:20px;"></div>

91:     <div style="display:none;" id="loading"><div style="text-align:center;">

             <img src="./loading.gif" alt=""/>

        </div></div>

92: </div>

93: </body>

94: </html>

$("uri") -> API 보기
document.getElementById("uri")와 같은 말입니다. 물론 $()함수는 더 많은 기능을 제공해 줍니다.

Element.hide("title"); -> API 보기
document.getElementById("title").style.display = ""; 과 같은 말입니다. 물론 Element.hide("title") 함수가 더 많은 기능을 제공합니다.

var myAjax = new Ajax.Request(
    url,
    {
        method: 'get',
        parameters: params,
        onSuccess: function(req) {
            something...
        },
        onFailure: function() {
            something....
        }
    }  
);
XMLHttpRequest를 쉽게 구현해 주는 부분입니다. -> API 보기
url : 접속할 URL입니다. 뒤에 오는 method가 get일 경우 get방식의 prameters를 붙여서 사용할 수 있습니다.
예) var url = "http://test.com/test.xml?id=1234&date=2007-03-01";
method : get/post 가 올 수 있습니다.
parameters : get 방식의 경우 null 이 옵니다. post의 경우는 ?를 제외한 prameter를 붙여서 사용 합니다.
예) var params = "id=1234&date=2007-03-01";
onSuccess : 성공 했을때의 코드를 기술 합니다.
onFailure : 실패 했을때의 코드를 기술 합니다.

printHTML() 은 JSON으로 파싱된 값들을 받아서 뿌려 주는 일을 합니다.
var xml = rssParser(req.responseXML);
로 받아서 printHTML(xml)로 보냈습니다.
channel의 title을 가져 올 때는 단순히 xml.title
item[0]의 title을 가져 올 때는 xml.item[0].title 이렇게 가져 오면 됩니다.
rssParser.js는 다음 post에서 만나 보실 수 있습니다.

언제부터인지 우리 주위에 Rss라는 단어가 많이 익숙해져 있습니다.
블로그, 뉴스, 도서 사이트 심지어 UCC까지 WEB2.0시대인 요즘은 원하는 정보를 Rss 서비스로 받아 보실 수 있습니다.
이러한 Rss 피드를 모아서 편하게 구독하게 해 주는 것이 일명 Rss Reader입니다.
Rss Reader에는 웹 기반의 Rss Reader, 설치형 Rss Reader, 동기화 가능 설치형 Rss Reader이 있습니다.
이러한 것들을 구현하기 위해서는 수집, 정렬, 검색, 동기화 등등 많은 기술들이 들어 갑니다.
하지만 버뜨~ 이 post의 제목이 초간단 Rss Reader입니다.
제목에 충실히 인터넷 연결이 되어 있고 IE가 깔려 있으면(흠 이부분은 나중에 이야기 드릴께요 ㅠㅠ) 단순히 해당 피드 주소만 넣으면 읽기만 가능한 그러한 Reader를 만들어 보겠습니다.
누군가 그랬습니다. Simple is The Best....
사실 실력이 요까지라서 더 복잡한건 ..... OTL

초간단 Rss Reader를 구현하기 위한 기본적인 지식으로 Javascript, html, xml의 기본적인 지식이 필요합니다.
Javascript의 경우 prototype.js를 기본으로 하여 이미 구현한 라이브러리를 최대한 이용하도록 하겠습니다.
prototype.js는 URL : http://www.prototypejs.org 에서 다운 받으실 수 있으며
http://blog.naver.com/jeffyang/150015619963 에 가시면(post 자랑 ^^;) 한글로 된 메뉴얼의 링크를 얻으실 수 있습니다.
이 Post 작성하는 순간에 버전이 1.51 RC1으로 올랐습니다.
이번 버전에는 XML노드를 처리하기 위한 라이브러리가 보이는 군요.
애써 외면하며 여기서는 prototype 1.5를 기준으로 하겠습니다.

간략한 post의 순서입니다.

1. Rss를 분석하여 어떤 elements를 가지고 표현할 것인지 결정 합니다.
2. Rss를 XML로 받아 옵니다. 이 부분은 Javascript의 XMLHttpRequest객체를 가지고 구현을 합니다.
3. 받아온 XML을 파싱해야 합니다. 이 부분 역시 Javascript JSON 포멧으로 파싱 합니다.
4. JSON을 받아서 화면이 html코드로 이쁘게 뿌려 주면 간단 RssReader의 완성 입니다.

Javascript, html, xml로만 하겠다고 해 놓고 JSON이란 놈이 보이는 군요.
JSON은 JavaScript Object Notation 라 불리우는 경량의 DATA 교환 형식입니다.
Javascript 맞죠!!! 네 분명 Javascript Object라고 했습니다. JSON에 대해서 더 자세히 알고 싶으신 분은
URL : http://json.org/json-ko.html 을 참고 하세요. 한글로 잘 설명되어 있습니다.
평소 영어를 외계어로 여기는 까닭에 해석하시는 수고를 덜어 드리고자 이렇게 친절하게 한글주소로 안내를 해 드립니다.

이쯤에서 첫번째 주제 Rss를 분석해 보도록 하겠습니다.

현재 국내에서 가장 많이 사용되고 있는 것이 Rss 2.0 포멧입니다. 그리고 Rss 1.0, ATOM 포멧도 많이 보입니다.
솔직히 웬만한 사이트들은 모두 Rss 2.0을 지원해 줍니다. 하지만 국내 사이트들 중에는 무늬만 Rss 2.0이고 표준을 지키지 않은 곳들이 많이 있습니다.
표준을 준수하지 않은 경우는 해당 Rss서비스에 맞도록 하나씩 처리를 해 줘야 합니다.
필수 Elements가 빠진곳이나 엉뚱한 Elements가 나타나는 곳들도 종종 있었습니다.
한국에서 구글이 힘을 못쓰는 이유는 포탈 및 대형 사이트 들의 비표준이 지대한 공헌을 했다고 하더군요. (공감 100% 입니다.)
어찌 되었건 한국어로 된 Rss 서비스를 받고자 한다면 이 정도 수고는 해야 하는군요. ㅠㅠ
이러한 비표준을 처리하기 위해서 prototype.js의 Try.these 구문을 이용 했습니다.

1. RSS 2.0 분석

Rss란 무엇인가?
한국정보통신기술위원회의 문서를 빌리자면

RSS 는 웹 컨텐츠 신디케이션 형식으로 Really Simple Syndication 의 약자이다.
컨텐츠 신디케이션(Content Syndication)이란 사이트 컨텐츠의 일부 또는 전체를 다른 서비스에서 이용할 수 있도록 해주는 것을 말한다.
신디케이션된 컨텐츠(또는 feed)는 컨텐츠 자체와 메타데이타 로 구성된다. 이러한 feed 에는 헤드라인 내용만 있을 수도 있고, 스토리에 대한 링크만 있을 수도 있으며, 사이트의 전체 컨텐츠가 포함될 수도 있다.
근래에 들어 특히 1 인 미디어인 블로그(blog)를 중심으로 컨텐츠 신디케이션 표준인 RSS 의 가능성을 확인되면서, 다양한 응용들이 등장하고 있고, 차세대 웹 콘텐츠 유통 기술의 핵심 표준으로 주목받고 있다.

뭔 소린지 잘 모르겠습니다. 그냥 구조를 한번 살펴 보죠.
대략 다음과 같은 구조로 되어 있습니다. 이중 굵게 처리된 것들은 필수 요소 입니다.
item태그의 title, link, description은 모두 필수는 아니고 세개 중 한개는 반드시 있어야 합니다.

 0: <?xml version="1.0" encoding="euc-kr" ?>

 1: <rss version="2.0">

 2:     <channel>

 3:         <title>채널의 제목</title>

 4:         <link>채널의 링크</link>

 5:         <description>채널에 대한 간략한 설명</description>

 6:         <language>채널이 작성되는 언어</language>

 7:         <copyright>채널의 저작권 통지</copyright>

 8:         <managingEditor>채널 편집 담당자의 전자우편</managingEditor>

 9:         <webMaster>채널 웹마스타의 전자우편</webMaster>

10:         <pubDate>채널 컨텐츠의 발행 시간</pubDate>

11:         <lastBuildDate>채널이 마지막으로 변경된 시간</lastBuildDate>

12:         <category>채널이 속해있는 가테고리</category>

13:         <generator>채널을 생성하는데 사용된 프로그램</generator>

14:         <images>

15:             <url>이미지의 URL</url>

16:             <title>이미지의 제목</title>

17:             <link>해당 사이트의 링크</link>

18:             <width>이미지 넓이</width>

19:             <height>이미지 높이</height>

20:         </images>

21:         <item>

22:             <title>항목의 제목</title>

23:             <link>항목의 URL</link>

24:             <description>항목의 내용</description>

25:             <author>저작자의 전자우편</author>

26:             <category>항목이 속해있는 가테고리</category>

27:             <comments>항목과 관련된 설명 페이지의 URL</comments>

28:             <guid>고유하게 항목을 식별할 수 있는 문자열</guid>

29:             <pubDate>항목 발행 시간</pubDate>

30:         </item>

31:     </channel>

32: </rss>

어렵습니다. ㅠㅠ.
이것만 봐서는 눈에 잘 안 들어 옵니다. 그래서 IE 7.0의 피드랑 비교해서 각 항목을 알아 보겠습니다.

<IE 7.0 피드 그림>

대충 감이 옵니다.
화면을 보아 하니 <channel>에서 시작해서 </channel>로 닫히는군요.
<channel>아래에 있는 <link><title><pubDate>도 대충 어떤 놈인지 알겠습니다.
중간에 <image>도 보이구 <category>도 보입니다.
<item>에서 시작해서 </item>까지가 한개의 post 로 구분되어 있습니다.
<item>아래에는 <link><title><pubDate><description>이 보이네요..

이제 감 잡았습니다.
가져올 elements를 구분하겠습니다.
피드의 title과 link, pubDate(없으면 lastBuildDate)를 가져와서 있는놈들을 큰 제목에 뿌려 주고
item을 배열로 돌리면서 item의 자식들 link, title, pubDate, desciption 중 있는놈들을 모두 뿌려 주겠습니다.

// 정규식 짜르귀 ~
preg_replace : function( array_pattern, array_pattern_replace, string ){

      for (var i=0 , new_string = new String(string) , stop = array_pattern.length; i < stop; i++)
        new_string = new_string.replace( new RegExp(array_pattern[i], "gi") , array_pattern_replace[i] );

      return new_string;
}

여러분이 개발자이고 나와 같은 길을 걸어 왔다면, 웹페이지에서 꽤 많은 Javascript 조각들을 사용해 왔을 것이다. 마치 UI의 딱풀 마냥..

최근까지 나는 Javascript가 내가 취업 했을 때보다 더 객체지향(OO_ 능력을 가졌다고는 하지만 난 별로 그것을 사용해야하는 느낌은 받지 못했다. 브라우져들이 Javascript와 DOM의 좀더 표준화된 형상을 지원하기 시작함에 따라, client 상에서 구동하기 위한 더 복잡하고 기능적인 코드를 작성하 것이 가능해졌다. 그것은 AJAX 사상(事象)을 탄생하도록 도왔다.

우리 모두가 AJAX 애플리케이션을 만들기위해 코드를 작성하는 것을 것을 배울 즈음해서, 우리가 알고있었던 Javascript는 정말 빙산의 일각에 불과했다. 자, 이제 우리는 입력값 검사와 하찮은 업무들과 같은 간단한 UI 허드렛일들을 넘어서 사용되고 있는 Javascript을 살펴 볼 것이다. 요즘, client 상의 코드는 점점 더 진보적이고 계층화되며, 더 많이 실제 데스크탑 애플리케이션 또는 c/s환경의 무거운 client 처럼 되어 가고 있다. 우리는 class library, object model, hierarchy, pattern 들 그리고 단지 우리의 server 쪽 코드에서 눈에 익었던 다른 많은 것들을 알아 볼 것이다.

여러가지면에서 우리는 갑작스레 화면의 bar를 전보다 훨씬 높게 놓는것에 대해 얘기 할수 있다. 새로운 WEB을 위해 애플리케이션들을 작성하기 위해서는 훨씬 강도높은 기술의 숙달을 필요로 한다. 그리고 우리는 이 목적을 이루기 위해서 우리 자신의 Javascript 기술들을 향상시켜야만 한다. 만일 외부에 존재하는 많은 javascript library를 사용하기를 시도한다면, Prototype.js, Scriptaculous, moo.fx, Behaviour, YUI, 등등 처럼, 여러분은 결국 그 JS code를 여러분 스스로 판독해서 알아야 할것이다. 아마 여러분은 라이브러리들이 그것을 구현하는 방법을 배우기 원하거나 알기 원하거나 해서, 또는 라이브러리가 사용법을 이해하기 위한 유일한 방법이거나 해서, 문서가 대부분의 라이브러리들과 관련되어 있어 보이지 않거나 해서..( Maybe because you want to learn how they do it, or because you're curious, or more often because that's the only way to figure out how to use it, since documentation does not seem to be highly regarded with most of these libraries. 아마도 이유인즉 그것들이 어떻게 동작하지 배우고 싶기 때문이거나, 호기심 때문이거나, 종종 이 라이브러리들의 대부분이 문서화가 덜 되어있기 때문에, 사용법을 알기 위한 유일한 방법이 그것밖에 없기 때문일 것이다. ) 그 밖에 무엇이든지 그 경우에 있어서, 전에 그것과 같은 어떠한 것들을 본적이 없다면 여러분은 낯설고 두려운 상황에 직면하게 될 것이다.

이 글의 목적은 아직 익숙하지 않은 생성자들의 타입들을 꼼꼼히 설명함에 있다.

Prototype.js documentation

JavaScript Object Notation (JSON,)은 AJAX 테마와 관련하여 갑자기 뜬 새로운 기술 용어 중 하나이다. JSON은 javascript에서 선언적 object의 하나의 방식이다. 이제 바로 예제를 보고 어떻게 처리하는지 보도록 하자.

자, 소스 포맷을 약간 추가 해서 알아 보기 쉽게 보도록 하자:

여기서 우리는 두개의 속성들(color 과 legCount)과 메서드(communicate)를 이용하여 object 참조를 만들었다. 콤마로 구분된 리스트로서 object의 속성들과 메소드들을 정의되어있는것을 이해하는것은 어렵지 않은 일이다. 각 구성들을 name으로 정의되어 보여지며 colon(:) 따라오서 그 다음으로 정의부 이다. 속성의 경우에서는 단지 값으로 정의부를 채운다. 익명 함수(anonymous function)을 할당으로 메소드들을 만든다. 이는 다음 아래 줄에서 더 자세히 설명할 것이다. object를 만든 후에 myPet 변수에 할당하며, 우리는 다음과 같이 이 변수를 사용 할수 있다:

여러분은 요즘 JS에서 도처에 사용되어진 JSON을 볼 것이다. 함수들에 인수, 리턴 값들, 서버의 응답들(string들 에서) etc.

이는 위 질문에 대해 생각해 본적 없는 개발자들에게는 좀 생소 할 것이지만 JS에서 함수(function) 또한 object이다. 예를 들어, string을 처리하는 다른 함수에 인자로서 함수를 처리 할 수 있다. 이는 광범위하게 사용되어지고 매우 유용하다.

이 예제를 보도록 하자. 우리는 다른 함수(annoyThePet)에 함수들(myDog.bark, myCat.meow)을 인자로 주어 줄 것이다. annoyThePet function에서 인자로 주어진 function을 사용 할 것이다.

우리가 myDog.bark 과 myCat.meow에 추가도니 괄호 "()" 없이 인자로 사용한 것에 대하여 주목 해야 한다. 만일 우리가 인수로 넘긴 function이 존재 하지 않거나 method를 호출하고 return value를 인수로 넘긴다면, 두 경우에 대해 undefined를 보일 것이다.

여러분이 나의 게으른 고양이가 개 처럼 짖게 만들기 원한다면, 여러분은 이처럼 쉽게 할 수 있다:

다음 JS안에 두 줄은 같은 일을 한다.

나는 여러분이 이미 알고 있는 대로, 여러분은 사각 괄호를 사용하여 array안의 각각의 아이템들을 접근 할 수 있다:

하지만 여러분들을 숫자 색인으로만 접근 제한하지 않는다. 여러분은 string으로 멤버의 이름을 사용하여 JS object 각 멤버들을 접근 할 수 있다. 다음 예제는 빈 object를 만들고 name으로서 어떤 멤버들을 추가한다.

위의 코드는 아래와 같이 동일한 효과를 가진다:

다양한 방법으로, JS에서 object들의 사상과 연관 arraray(hashes)들은 구별 하지 않는다. 다음 두 줄 역시 같은 일을 한다.

OOP 프로그래밍 언어들의 강력한 힘은 class들의 사용에서 나온다. JS에서 나는 어떻게 class들을 정의하는지 나의 이전 경험으로 비춰볼때 짐작초차 하기 어렵다. 직접 판단하시오.

우리의 Pet class에 method를 추가 하는 방법을 보도록 하자. 우리는 모든 class들이 가지고 있는 prototype property를 사용하게 될 것이다. prototype property는 class의 어떠한 object가 가지고 있을 모든 멤버들을 포함하는 object이다. String, Number, and Date 같은 default JS class들 조차도 prototype object을 가지고 있다. 우리는 method들과 property들을 prototype object에 추가 할 수 있다. 그 class의 어떠한 object가 이 새로운 멤버를 자동으로 얻는다.

prototype.js과 같은 라이브러리는 여러모로 편리할 때가 있다. 만일 우리가 prototype.js를 사용한다면, 우리의 코드를 깔끔하게 할 수 있다.(적어도 내 견해로는..)

만일 여러분이 클로져(절차를 오브젝트로서 취급하는 기능. 이 오브젝트화 된 절차를 클로져라함)를 지원하는 언어들 - Ruby 또는 C#2.0- 을 이용하여 작업한 적이 없다면 여러분은 다음 이디엄이 매우 생소하다는것을 느낄 것이다.

워~! 내가 너무 앞어서 여러분이 이것보다 더 좋은 기사를 찾아 보기 전에 여기 무슨 일이 생겼는지 설명한다.

무엇보다 먼저, 위 예제에서 우리는 prototype.js library를 사용하고 있다. 이것은 Array class에 each function을 추가한다. each function은 function object을 하나의 인자를 받는다. 차례로, array에서 각 item에 대해 이 function을 한번씩 호출 할 것이며, 호출될때 두개의 인자를 전달한다. 현재 item에 대한 그 item과 index 이다. 자 우리의 iterator function을 호출 해보자. 또한 우리는 이것과 같은 작성된 코드를 작성할 수 있다.

비록, 이 마지막 포맷이 이해하기에 더 편하지만 myIterator function을 찾는 코드에서 주변으로 튀어 버리는 현상을 야기한다. myIterator를 호출하는 같은 장소에서 iterator function의 로직을 가지는것이 좋다. 또한, 이경우에, 우리의 코드에서 어디 다른 곳에 iterator function를 필요로 하지 않을 것이며, 그래서 우리는 문제없이 myIterator function을 anonymous function로 할 수 있다.

원래의 예제를 더 분명하게 하기 위해서 어떤 하이라이팅 효과를 이용해서 다시 보자.

우리가 가지고 있는 가장 일반적인 문제들 가운데 하나는 JS를 이용함에 있어서 this 키워드의 사용을 우리의 코드에 작성하기 시작할 때 이다. 그것은 실제 올가미가 될수 있다.

우리가 전에 언급한 것 처럼, 함수 또한 JS에서 object이고 때때로 우리는 function를 전달한 것을 알아 채지 못한다.

예제로 이 코드 조각으로 다뤄 보자.

buttonClicked function를 어떠한 object 외부에서 정의 하였기 때문에 우리는 this 키워드가 window 또는 document object 참조를 포함 할 것이라고 생각하는 경향이 있을 것이다.(이코드 브라우저에서 보여지는 HTML 페이지의 중앙에 있다고 가정 하자.)

그러나 우리가 이 코드를 실행시켜 보면 그것이 클릭된 버튼의 id를 가리키거나 보여지는 것으로 작동되어 보여진다. 각 버튼의 onclick method은 buttonClicked object 참조를 포함하게 되며, 이전의 거기에 무엇이 있던간에 교체되어 진다. 버튼을 클릭할때 마다, 브라우저는 다음 줄과 같은 어떤 일을 수행할 것이다.

결국 그렇게 혼란스러운것은 아니다. 그렇죠? 그러나 여러분이 다뤄야할 다른 object를 갖기 시작했고 버튼의 click과 같은 이벤트에서 이러한 object를 반응시키기 원한다.

나의 페이지에서 Clear button을 클릭 할수 있고 이 3개의 text 박스들을 모두 비울 것이다. 그 다음에 여러분은 runtime error를 얻기 위해 단지 버튼 클릭만 시도하면 된다. 이 에러는 this 키워드와 관련 있을 것이다(추측 컨데..). 이 문제는 this가 버튼에 참조를 포함한다면 this.formFields가 정의 되지 않는다 것이다. 이것은 정확하게 무슨 일이 발생 하겠는가 이다. 한가지 빠른 해결책은 우리의 코드 마지막 줄을 재 작성하는 것이 될 것이다.

그것은 우리가 helper object의 컨텍스트 안에 우리의 helper method를 호출하는 특정의 타입의 새로운 function을 만드는 방법이다.

소개

웹 도처에 사용되는 자바스크립트의 늘어가는 인기는 클라이언트측 코드가 안정성, 속도, 재사용성등이 혼합으로 구현되도록 하는것이 좀더 중요하게 되었다. 이것을 달성하기 위한 가장 좋은 방법중 하나는 간단한 라이브러리와 모든 프로젝트를 위한 기본사항처럼 사용하기 위한 문법이다. 고맙게도 Sam Stephenson 는 우리의 자바스크립트 개발을 쉽게 하기 위한 Prototype.js 라 불리는 놀라운 함수들의 라이브러리를 만들었다.

우리의 독자들이Prototype 문법을 사용하는 문서 를 읽은 후 크게 놀랐고, 우리는 많은 개발자를 위해 좀더 쉽게 배울수 있도록 도와주는 라이브러리를 위한 참조문서를 만드는게 좋겠다는 결심을 했다. 다음의 튜토리얼은 Particletree프로젝트에서 사용된 가장 공통적인 함수들을 사용하는 간단한 예제와 함께 설명할 것이다. 이 문서는 Sergio Pereira에 의해 좀더 많은 내용을 가진 비공식적인 프로토타입 문서 와 함께 사용되었음을 의미한다. 그리고 script.aculo.us 문서 위키는 모든 자바스크립트/프로토타입 개발자들이 읽기를 매우 추천한다.

시작하기

파일을 다운로드 한 후에, 당신이 선호하는 디렉토리에 그 파일들을 넣어둬라. 당신이 해야할 일은 html문서에 다음처럼 추가를 하는 것이다.

이것으로 자바 스크립트를 개발하는게 10배는 쉬워진다. 지금, 당신이 획득한 새롭고 멋진 무기를 보자.

알림 - 이 튜토리얼은 1.3.1버전을 기반으로 작성되었다.

$() 함수

가장 자주 사용되고 편리한 함수인, $()는 DOM요소를 다루기 위한 쉬운 방법을 제공한다. 일반적으로, 당신이 DOM내 특정 요소에 접근하고자 한다면, 다음처럼 작성할것이다.

$()를 사용하면, 다음처럼 간단히 작성할수 있다.

간단하고 멋지지만 이러한 장점보다, $()함수는 다중 요소를 함수안으로 가져오는 기능을 가지고 있기 때문에 document.getElementById()보다 좀더 강력하다.

이 예제에서, 우리는 루프를 통해 간단히 접근할수 있는 요소들의 배열을 가지고 오는 것을 볼수 있다.

폼 헬퍼(Form Helper) 함수

폼은 HTML과 CSS관점에서 근심거리일뿐 아니라, 자바스크립트의 측면에서도 그렇다. Prototype.js는 폼을 다루는 유용하고 독창적인 함수를 제공한다.

$F() 함수 는 폼 요소의 값과 전달하는 ID를 반환한다. 만약 우리가 다음처럼 HTML필드를 둔다면,

우리는 $F()함수를 사용하여 폼내의 값들에 쉽게 접근할수 있다.

제어와는 관계없이 값을 얻는 기능은 대부분의 환경에서 좀더 쉽게 폼을 처리하도록 해준다. 여기에 이 함수를 사용할때 찾을수 있는 두가지 결점이 있다. 1) radio그룹의 선택된 값에 접근하는 쉬운 방법이 없다(하나의 radio요소의 값만 처리). 2) $()함수를 사용할때처럼 다중 ID를 전달하는 것이 불가능하다.

*다른 함수인, Form.getElements() 는 타입에 관계없이 모든 폼 요소의 배열을 반환한다.

이 예제에서, 우리는 myform이라는 id를 가진 폼으로 부터 모든 요소를 가져온다. 만약 당신이 onclick을 추가하고 싶거나 각각의 폼필드에 도움말 팝업을 추가하기를 원한다면, 당신은 위와 같은 형식을 통해 할수 있다.

우리가 볼 다음 메소드는 Form.serialize()이다. Ajax요청을 빌드할때, 당신은 데이터를 전달하기 위해 당신 자신만의 문자열을 포맷팅하기를 원한다. 폼이 서브밋되었을때, 문자열은 빌드되고, serialize()는 처리를 쉽게 만든다.

우리를 돕기 위해 문자열을 빌드하라. 하지만 메소드를 좀더 좋게 만드는 것은 이것은 필드의 타입에 기초를 두지 않는 것이다. 우리는 이전에 $F()가 radio그룹에서 몇가지 문제점을 가지는 것을 봤다. 하지만 serialize()는 어떠한 필드 타입을 위해서도 값을 정확하게 처리한다. 사용가능한 폼 메소드만 있는 것은 아니다, 나머지것들을 보기 위해서는 Sergio의 문서 를 보라.

getElementsByClassName

getElementsByClassName()가 아직도 자바스크립트로 빌드되지 않은 이유는 뭔가.? 이것은 프로토타입이 아니고 그래서 프로토타입은 문서객체의 확장처럼 저장소(arsenal)로 이것을 추가했다. 이것은 document.getElementsByTagName()처럼 정확하게 작동한다. 단지 차이점은 className을 체크하는 것이다.