css나 기타 상세한 것은 다루지 않은 기본적인 것들로만 이루어진 예제이고...
특별히 각각의 api를 분리해서 사용할 수 있도록 객체별로 나누어서 만들었습니다.
이 코드에서는 다음에서 제공하는 demo apikey로 작성했으나(이것만으로도 작동하는 것을 확인 하실 수 있습니다.) 실제 개발하신다면 간단한 과정을 거쳐 개인 api키를 발급 받아서 이용하실 수 있습니다. 검색 api 발급 받기
HTML 태그
각 객체들을 이용해 검색을 통제하는 base 객체.
- <div id="daumForm">
- <input id="daumSearch" type="text" value="다음" onkeydown="javascript:if(event.keyCode == 13) daumSearch.search();"/>
- <input id="daumSubmit" onclick="javascript:daumSearch.search()"
- type="submit" value="검색" />
- </div>
- <div id="daumView">
- <h3>비디오 검색 결과</h3>
- <div id="daumVclip"></div>
- <h3>이미지 검색 결과</h3>
- <div id="daumImage"></div>
- <h3>게시판 검색 결과</h3>
- <div id="daumBoard"></div>
- <h3>블로그 검색 결과</h3>
- <div id="daumBlog"></div>
- <h3>웹 검색 결과</h3>
- <div id="daumWeb"></div>
- <h3>지식 검색 결과</h3>
- <div id="daumKnowledge"></div>
- <h3>책 검색 결과</h3>
- <div id="daumBook"></div>
- <h3>카페 검색 결과</h3>
- <div id="daumCafe"></div>
- </div>
- <div id="daumScript">
- <div id="daumVclipScript"></div>
- <div id="daumImageScript"></div>
- <div id="daumBoardScript"></div>
- <div id="daumBlogScript"></div>
- <div id="daumWebScript"></div>
- <div id="daumKnowledgeScript"></div>
- <div id="daumBookScript"></div>
- <div id="daumCafeScript"></div>
- </div>
비디오 검색.
- <script language="Javascript" type="text/javascript">
- var daumSearch = {
- /** 초기화. **/
- init : function(){
- this.apikey = "DAUM_SEARCH_DEMO_APIKEY";
- this.q = document.getElementById('daumSearch');
- //검색 객체들 초기화.
- daumVclip.init(6);
- daumImage.init(6);
- daumBoard.init(5);
- daumBlog.init(5);
- daumWeb.init(5);
- daumKnowledge.init(5);
- daumBook.init(5);
- daumCafe.init(5);
- },
- /** 검색 **/
- search : function(){
- this.query = '?apikey=' + this.apikey
- + '&output=json&q=' + encodeURI(this.q.value);
- //검색어에 맞게 각각 첫페이지를 띄움.
- daumVclip.pingSearch(1);
- daumImage.pingSearch(1);
- daumBoard.pingSearch(1);
- daumBlog.pingSearch(1);
- daumWeb.pingSearch(1);
- daumKnowledge.pingSearch(1);
- daumBook.pingSearch(1);
- daumCafe.pingSearch(1);
- },
- /** callback 함수 호출. **/
- pingSearch : function(ds, api, pgno, callback, result){
- ds.innerHTML = "";
- var s = document.createElement('script');
- s.type = 'text/javascript';
- s.charset = 'utf-8';
- s.src = api + this.query + '&pageno=' + pgno
- + '&callback=' + callback + '&result='+result ;
- ds.appendChild(s);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(search, z){
- var ul = document.createElement('ul');
- for(var i=0; i<z.channel.item.length; i++){
- //title 정보를 얻음.
- var title = document.createElement('h4');
- var a = document.createElement('a');
- a.href = z.channel.item[i].link;
- a.target = '_blank';
- a.innerHTML = this.escapeHtml(z.channel.item[i].title)
- + '<br'+'>';
- title.appendChild(a);
- //세부 내용을 얻음.
- var content = search.getContent(z.channel.item[i]);
- //리스트 화.
- ul.appendChild(search.getSearch(title,content));
- }
- return ul;
- },
- /** PageNumber를 그려줌. **/
- pongPgno : function(pgno,max,func){
- var maxpg = (pgno+6<max)?pgno+6:max;
- var div = document.createElement('div');
- div.align = 'center';
- div.style.clear = 'left';
- //좌측 화살표.
- var left = document.createElement('a');
- left.innerHTML = "<< ";
- if(pgno-5>1)
- this.onMouseDown(left,pgno-6,func);
- else{
- left.style.color = "gray";
- left.style.cursor = "default";
- }
- div.appendChild(left);
- //페이지 번호.
- for(var i=(pgno-5>1)?pgno-5:1; i<maxpg; i++){
- var a = document.createElement('a');
- a.innerHTML = " " + i + " ";
- if(i==pgno){
- a.style.color = 'yellow';
- a.style.cursor = "default";
- }
- else
- this.onMouseDown(a,i,func);
- div.appendChild(a);
- }
- //우측 화살표.
- var right = document.createElement('a');
- right.innerHTML = ">> ";
- if(pgno+6<max)
- this.onMouseDown(right,pgno+7,func);
- else{
- right.style.color = "gray";
- right.style.cursor = "default";
- }
- div.appendChild(right);
- return div;
- },
- /** 마우스 이벤트. **/
- onMouseDown: function(a, i, func){
- a.style.cursor = 'pointer';
- a.onmousedown = function(){
- func(i);
- }
- },
- /** HTML태그 안 먹게 하는 함수 **/
- escapeHtml: function (str) {
- str = str.replace(/&/g, "&");
- str = str.replace(/</g, "<");
- str = str.replace(/>/g, ">");
- return str;
- }
- };
- window.onload = function () {
- daumSearch.init();
- daumSearch.search();
- };
- </script>
이미지 검색
- <script language="Javascript" type="text/javascript">
- /** 비디오 검색. **/
- var daumVclip = {
- /** 초기화. **/
- init : function(r){
- daumVclip.api = 'http://apis.daum.net/search/vclip';
- daumVclip.pgno = 1;
- daumVclip.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumVclip.pgno = pgno;
- var ds = document.getElementById('daumVclipScript');
- var callback = 'daumVclip.pongSearch';
- daumSearch.pingSearch(ds, daumVclip.api, daumVclip.pgno,
- callback, daumVclip.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumVclip');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumVclip.pgno,
- z.channel.totalCount/daumVclip.result,daumVclip.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.style.height = "230px";
- li.style.width='150px';
- li.style.float='left';
- content.appendChild(document.createElement('br'));
- li.appendChild(content);
- li.appendChild(title);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var a = document.createElement('a');
- var img = document.createElement('img');
- a.target = '_blank';
- a.href = z.player_url;
- img.height = 100;
- img.width = 100;
- img.src = z.thumbnail;
- a.appendChild(img);
- return a;
- }
- };
- </script>
게시판 검색
- <script language="Javascript" type="text/javascript">
- /** 이미지 검색. **/
- var daumImage = {
- /** 초기화. **/
- init : function(r){
- daumImage.api = 'http://apis.daum.net/search/image';
- daumImage.pgno = 1;
- daumImage.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumImage.pgno = pgno;
- var ds = document.getElementById('daumImageScript');
- var callback = 'daumImage.pongSearch';
- daumSearch.pingSearch(ds,daumImage.api,
- daumImage.pgno, callback, daumImage.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumImage');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumImage.pgno,
- z.channel.totalCount/daumImage.result,daumImage.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.style.height = "170px";
- li.style.width='150px';
- li.style.float='left';
- content.appendChild(document.createElement('br'));
- li.appendChild(content);
- li.appendChild(title);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var a = document.createElement('a');
- var img = document.createElement('img');
- a.target = '_blank';
- a.href = z.image;
- img.height = 100;
- img.width = 100;
- img.src = z.thumbnail;
- a.appendChild(img);
- return a;
- }
- };
- </script>
블로그 검색
- <script language="Javascript" type="text/javascript">
- /** 게시판 검색. **/
- var daumBoard = {
- /** 초기화. **/
- init : function(r){
- daumBoard.api = 'http://apis.daum.net/search/board';
- daumBoard.pgno = 1;
- daumBoard.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumBoard.pgno = pgno;
- var ds = document.getElementById('daumBoardScript');
- var callback = 'daumBoard.pongSearch';
- daumSearch.pingSearch(ds,daumBoard.api, daumBoard.pgno,
- callback, daumBoard.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumBoard');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumBoard.pgno,
- z.channel.totalCount/daumBoard.result,daumBoard.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var a = document.createElement('a');
- a.target = '_blank';
- a.href = z.link;
- a.innerHTML = daumSearch.escapeHtml(z.description)
- return a;
- }
- };
- </script>
웹 검색
- <script language="Javascript" type="text/javascript">
- /** 블로그 검색. **/
- var daumBlog = {
- /** 초기화. **/
- init : function(r){
- daumBlog.api = 'http://apis.daum.net/search/blog';
- daumBlog.pgno = 1;
- daumBlog.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumBlog.pgno = pgno;
- var ds = document.getElementById('daumBlogScript');
- var callback = 'daumBlog.pongSearch';
- daumSearch.pingSearch(ds,daumBlog.api, daumBlog.pgno,
- callback, daumBlog.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumBlog');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumBlog.pgno,
- z.channel.totalCount/daumBlog.result,daumBlog.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var a = document.createElement('a');
- a.target = '_blank';
- a.href = z.link;
- a.innerHTML = daumSearch.escapeHtml(z.description);
- return a;
- }
- };
- </script>
지식 검색
- <script language="Javascript" type="text/javascript">
- /** 웹 검색. **/
- var daumWeb = {
- /** 초기화. **/
- init : function(r){
- daumWeb.api = 'http://apis.daum.net/search/web';
- daumWeb.pgno = 1;
- daumWeb.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumWeb.pgno = pgno;
- var ds = document.getElementById('daumWebScript');
- var callback = 'daumWeb.pongSearch';
- daumSearch.pingSearch(ds,daumWeb.api, daumWeb.pgno,
- callback, daumWeb.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumWeb');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumWeb.pgno,
- z.channel.totalCount/daumWeb.result,daumWeb.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var a = document.createElement('a');
- a.target = '_blank';
- a.href = z.link;
- a.innerHTML = daumSearch.escapeHtml(z.description);
- return a;
- }
- };
- </script>
책 검색
- <script language="Javascript" type="text/javascript">
- /** 지식 검색. **/
- var daumKnowledge = {
- /** 초기화. **/
- init : function(r){
- daumKnowledge.api = 'http://apis.daum.net/search/knowledge';
- daumKnowledge.pgno = 1;
- daumKnowledge.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumKnowledge.pgno = pgno;
- var ds = document.getElementById('daumKnowledgeScript');
- var callback = 'daumKnowledge.pongSearch';
- daumSearch.pingSearch(ds,daumKnowledge.api, daumKnowledge.pgno,
- callback, daumKnowledge.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumKnowledge');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumKnowledge.pgno,
- z.channel.totalCount/daumKnowledge.result,daumKnowledge.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var div = document.createElement('div');
- var a = document.createElement('a');
- var b = document.createElement('b');
- var ba = document.createElement('a');
- a.target = '_blank';
- a.href = z.link;
- a.innerHTML = daumSearch.escapeHtml(z.description) + '<br'+'>';
- ba.target = '_blank';
- ba.href = z.categoryurl;
- ba.innerHTML = daumSearch.escapeHtml(z.category);
- b.appendChild(ba);
- div.appendChild(a);
- div.appendChild(b);
- return div;
- }
- };
- </script>
카페 검색
- <script language="Javascript" type="text/javascript">
- /** 책 검색. **/
- var daumBook = {
- /** 초기화. **/
- init : function(r){
- daumBook.api = 'http://apis.daum.net/search/book';
- daumBook.pgno = 1;
- daumBook.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumBook.pgno = pgno;
- var ds = document.getElementById('daumBookScript');
- var callback = 'daumBook.pongSearch';
- daumSearch.pingSearch(ds,daumBook.api, daumBook.pgno,
- callback, daumBook.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumBook');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumBook.pgno,
- z.channel.totalCount/daumBook.result,daumBook.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var div = document.createElement('div');
- var a = document.createElement('a');
- var b = document.createElement('b');
- var ba1 = document.createElement('a');
- var ba2 = document.createElement('a');
- var ba3 = document.createElement('a');
- var ba4 = document.createElement('a');
- var img = document.createElement('img');
- var aimg = document.createElement('a');
- img.src = z.cover_s_url;
- aimg.target = '_blank';
- aimg.imghref = z.cover_s_url;
- aimg.style.float = 'left';
- aimg.appendChild(img);
- a.target = '_blank';
- a.href = z.link;
- a.style.clear = 'left';
- a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
- ba1.innerHTML = '저자 : '
- + daumSearch.escapeHtml(z.author) + '<'+'br/>';
- ba2.innerHTML = '출판사 : '
- + daumSearch.escapeHtml(z.pub_nm) + '<'+'br/>';
- ba3.innerHTML = '카테고리 : '
- + daumSearch.escapeHtml(z.category) + '<'+'br/>';
- ba4.innerHTML = '가격 : '
- + daumSearch.escapeHtml(z.sale_price) + '<'+'br/>';
- b.appendChild(ba1);
- b.appendChild(ba2);
- b.appendChild(ba3);
- b.appendChild(ba4);
- div.appendChild(aimg);
- div.appendChild(b);
- div.appendChild(a);
- return div;
- }
- };
- </script>
- <script language="Javascript" type="text/javascript">
- /** 카페 검색. **/
- var daumCafe = {
- /** 초기화. **/
- init : function(r){
- daumCafe.api = 'http://apis.daum.net/search/cafe';
- daumCafe.pgno = 1;
- daumCafe.result = r;
- },
- /** callback 함수 호출. **/
- pingSearch : function(pgno){
- daumCafe.pgno = pgno;
- var ds = document.getElementById('daumCafeScript');
- var callback = 'daumCafe.pongSearch';
- daumSearch.pingSearch(ds,daumCafe.api, daumCafe.pgno,
- callback, daumCafe.result);
- },
- /** 결과를 뿌려줌. **/
- pongSearch : function(z){
- var dv = document.getElementById('daumCafe');
- dv.innerHTML ="";
- dv.appendChild(daumSearch.pongSearch(this, z));
- dv.appendChild(daumSearch.pongPgno(daumCafe.pgno,
- z.channel.totalCount/daumCafe.result,daumCafe.pingSearch));
- },
- /** li setting **/
- getSearch : function(title,content){
- var li = document.createElement('li');
- li.appendChild(title);
- li.appendChild(content);
- return li;
- },
- /** 설명 return **/
- getContent : function(z){
- var div = document.createElement('div');
- var a = document.createElement('a');
- var b = document.createElement('b');
- var ba = document.createElement('a');
- a.target = '_blank';
- a.href = z.link;
- a.innerHTML = daumSearch.escapeHtml(z.description) + '<'+'br/>';
- ba.target = '_blank';
- ba.href = z.cafeurl;
- ba.innerHTML = daumSearch.escapeHtml(z.cafeName);
- b.appendChild(ba);
- div.appendChild(a);
- div.appendChild(b);
- return div;
- }
- };
- </script>
저기 엄청 급해서 그런데요 저희가 블로그님꺼 소스를 따왔는데 저희는 이미지에 대한 제목에 ♬ 간단하고 맛있는 두부요리 2가지 이런식으로 이런게 떠요 이거 지우는 방법을 알수 있으까요?
답글삭제죄송합니다. 급하시다고 했는데 확인이 늦었네요.
삭제해당 내용은 이미지가 들어간 블로그나 사이트의 제목이 나오는 걸 겁니다. 텍스트를 없애고 이미지만 나오게 하실려면 getSearch 에 있는 li.appendChild(title); 를 지우시면 됩니다. 제대로 할려면 관련 되어있는 다른 것들도 정리를 해줘야 하긴 하지만요....
지금 제가 글쓰고 있는 한 줄 게시판 API 를 사용하고 싶은데 방법을 알수 있을까요?
답글삭제댓글 란을 말씀하시는 건가요? 댓글은 Blogger에서 제공하는 기본 기능입니다. 따로 API로 제공되지는 않을것 같네요..
삭제어떻게 응용을 해야할까요 ?
답글삭제html 태그는 . html 확장자로 하고
나머지들은 뭐 어떻게 해야하나요 ?