css나 기타 상세한 것은 다루지 않은 기본적인 것들로만 이루어진 예제이고...
특별히 각각의 api를 분리해서 사용할 수 있도록 객체별로 나누어서 만들었습니다.
이 코드에서는 다음에서 제공하는 demo apikey로 작성했으나(이것만으로도 작동하는 것을 확인 하실 수 있습니다.) 실제 개발하신다면 간단한 과정을 거쳐 개인 api키를 발급 받아서 이용하실 수 있습니다. 검색 api 발급 받기
HTML 태그
<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>
각 객체들을 이용해 검색을 통제하는 base 객체. <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 확장자로 하고
나머지들은 뭐 어떻게 해야하나요 ?