'자바스크립트' 태그의 글 목록 (3 Page)

[Javascript] 구글날씨API를 이용해서 위젯(?)을 만들어보자.

자바스크립트(Javascript) 2008. 8. 4. 23:03

우선 구글날씨API는 XML으로만 제공을 합니다.
자바스크립트에서는 외부사이트에 있는 XML파일을 불러올 수 없습니다.
그래서 저 XML을 JSON으로 바꿔줘야합니다.
XML을 JSON으로 바꿔주는 것은 야후파이프로 합니다.

야후파이프란? 외부에 있는 데이터들을 모아서 자기만의 아웃풋을 만들 수 있는 사이트!
예를 들어, A사이트의 RSS와 B사이트의 RSS를 모아서 이쁘게 정렬해서 1개의 RSS로 만들고 싶다! 라면, 야후파이프로 가능합니다. 야후파이프로 이쁘게 그려주기만 하면 되죠. 두개의 RSS사이트를 가져다 놓고, OUTPUT으로 그냥 선만 그어주면 됩니다.
또 다른 기능은 해당 데이터를 JSON으로 출력해주도록 할 수 있습니다. 파이프로 만든 주소에 파라메터값 _render를 json으로만 바꿔주면 json을 리턴하는 주소를 만들 수 있습니다. json으로 리턴하는 주소가 있다는 얘기는 javascript에서 불러와서 사용할 수 있다는 얘기죠.
야후파이프는 나중에 포스팅을....-_-;

야후파이프 주소 : http://pipes.yahoo.com/pipes/

javascript framework은 prototype으로....(이것밖에 할 줄 모름 ㅠ)
[code]
var GoogleWeatherWidget = Class.create();

GoogleWeatherWidget.prototype = {
initialize: function(contentDiv) {
$(contentDiv).addClassName('content-div');
var locationDiv = new Element('div', {id: 'location'});
var tempcDiv = new Element('div', {id: 'tempc'});
var conditionDiv = new Element('div', {id: 'condition'});
var windDiv = new Element('div', {id: 'wind'});
var iconDiv = new Element('div').insert(new Element('img', {id: 'icon'}));
$(contentDiv).insert(locationDiv); $(contentDiv).insert(tempcDiv);
$(contentDiv).insert(conditionDiv);    $(contentDiv).insert(windDiv);
$(contentDiv).insert(iconDiv);

this.pollingListener = this.pollingProc.bindAsEventListener(this);
new PeriodicalExecuter(this.pollingListener, 60);
this.pollingProc();
},

pollingProc: function() {
var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
   url += '&_render=json';
   url += '&location=incheon';
   url += '&_callback=parseResponse';
// 이놈을 추가하면 캐쉬에서 안불러오고 계속해서 불러오는군요 ^^
url += '&' + Math.round(Math.random()* (new Date().getTime()));

if ($('weatherInfo')) {
$('weatherInfo').remove();
}
var weatherInfo = new Element('script',{
id: 'weatherInfo',
type: 'text/javascript',
   src: url});
$$('head')[0].insert(weatherInfo);
}
}

function parseResponse(data) {
$('location').update(data.value.items[0].location);
$('tempc').update(data.value.items[0].tempc + '℃');
$('icon').src = 'http://www.google.co.kr/ig/' + data.value.items[0].icon;
$('condition').update(data.value.items[0].condition);
$('wind').update(data.value.items[0].wind);
}
[/code]
소스를 분석해보면, new PeriodicalExecuter(this.pollingListener, 60);부분에서 60초마다 this.pollingProc을 수행하겠다는 얘기입니다. 핵심은 pollingProc입니다.
pollinProc을 보면,

var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
url += '&_render=json';
url += '&location=incheon';
url += '&_callback=parseResponse';

우선 제가 만든 야후파이프인데요. 구글날씨API를 이용해서 JSON으로 변환한 파이프입니다.
location값으로 지역값을 받도록 했구요. callback함수는 parseResponse로 했습니다. url이 head에 붙으면, parseResponse가 호출이 됩니다.

parseResponse를 보면, 해당 div에 값을 업데이트 시켜주는 방식으로 되어있습니다.
결론은.....xml로 리턴하는 RSS나 다른 API정보들도 웹에서 javascript를 이용하면 불러올 수 있다? 정도?-_-;
아래는 위젯......위젯 그까이꺼......심플해야지....-_-; 초간단 날씨위젯!

절대...그냥 표시한 거 아닙니다-_-; 구글에서 긁어와서 보여주는 겁니다-_-;

Posted by 머드초보

,

[Javascript] Internet Explorer에서 Prototype을 이용한 동적으로 table생성시 문제점.

자바스크립트(Javascript) 2008. 7. 8. 19:26

한 1주일 고생했습니다.
IE에서는 왜 동적으로 테이블을 생성하면 안나오지?-_-;

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert Test</title>
<script src="lib/prototype/prototype.js" type="text/javascript">
</script>
<script>
function init(){
var table = new Element('table', {border: 1});

for (var i = 0; i < 5; i++) {
var tr = new Element('tr');
for (var j = 0; j < 5; j++) {
var td = new Element('td');
td.update((i*8+j) + '번');
tr.insert(td);
}
table.insert(tr);
}
$('div').insert(table);
}
</script>
</head>
<body onload="init();">
<div id="div"></div>
</body>
</html>
[/code]
이렇게 하면 FF(FireFox)에서는 잘 나오는데, IE에서는 보이지 않습니다.
웃긴건 IE에서 div.innerHTML을 alert으로 찍어봐도 테이블 태그가 잘 나옵니다.

신기하게 이걸 tbody태그로 한번 감싸주면 잘 됩니다.
[code]
<script>
function init(){
var table = new Element('table', {border: 1});
var tbody = new Element('tbody');
for (var i = 0; i < 5; i++) {
var tr = new Element('tr');
for (var j = 0; j < 5; j++) {
var td = new Element('td');
td.update((i*8+j) + '번');
tr.insert(td);
}
tbody.insert(tr);
}
table.insert(tbody);
$('div').insert(table);
}
</script>
[/code]
이렇게 tbody로 한번 감싸주면 잘 나옵니다.
tbody용도는
http://www.sunslife.com/bbs/view.php?id=2002&no=1620
이 사이트에서 확인할 수 있습니다.
thead, tfoot, tbody 테이블을 세단계로 나눌 때 사용하는건데...왜 저걸 하면 IE에서는 보이는거지?-_-;

Posted by 머드초보

,

[AIR][Aptana] prototype(Ajax)을 이용한 daum openapi예제

에어(AIR) 2008. 6. 27. 14:18

Aptana로 javascript로 삽질중에-_-; 좀 쉴겸해서-_-;

AIR는 기존에 우리가 알던 html, ajax, javascript등을 이용해서 데스크탑 애플리케이션을 개발할 수 있습니다. 전에 다음openapi를 이용하고, prototype기반인 다음블로그검색을 만들었었습니다.

http://mudchobo.tomeii.com/tt/269

이 코드를 거의 그냥 이용해서 AIR애플리케이션으로 바꿀 수 있습니다.
우선 Aptana를 설치해야합니다.

http://mudchobo.tomeii.com/tt/241
여기에 Aptana설치 후기가 있습니다-_-;
기본으로 AIR프로젝트 만드는 건 안깔려있으니 따로 설치해야합니다. 글을 잘 읽어보시면 설치하기 쉽습니다^^

이제 프로젝트를 만들어봅시다.
File -> New - Project선택하면 Aptana Projects폴더에 -> Adobe AIR Project선택.
Project이름은 DaumBlogSearchAir라고 합시다-_-;
다음을 하면 뭔 옵션이 이래 많아-_-; XML파일을 사전에 설정할 수 있게 해놨는데 걍 디폴트로 해서 해봅시다.
마지막 다음으로 가면 javascript framework를 선택할 수 있습니다.
Prototype을 가볍게 체크해고 Finish를 누릅시다.

처음부터 뭔 쌤플로 자동으로 작성한게 많은지-_-;
DaumBlogSearchAir.html파일을 열어보면 코드가 많습니다. 가볍게 다 지워버리고-_-;
DaumBlogSearchAir.html
[code]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Daum Blog Search</title>
<link href="sample.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="lib/prototype/prototype.js"></script>
<script type="text/javascript" src="js/DaumSearch.js"></script>
</head>
<body>
<h1>Daum Blog Search!</h1>
<form onsubmit="searchDaum(this.query.value); return false;">
<fieldset>
<label>Search for</label>
<input type="text" name="query" /><input type="submit" value="검색" />
</fieldset>
</form>
<div id="results"></div>
</body>
</html>
[/code]
요렇게 작성합니다.
그럼 이제 우리가 작성할 것은 js폴더에 있는 DaumSearch.js파일 입니다.
작성해봅시다.
DaumSearch.js
[code]
function searchDaum(query){
var searchPacket = {
method: 'get',
parameters: {
q: query,
result: '10',
start: '1',
output: 'json',
apikey: '발급받은 apikey',
},
onSuccess: parseResponse
}
new Ajax.Request('http://apis.daum.net/search/blog', searchPacket);
}

function parseResponse(data){
var children;
var results = $("results");

while (results.hasChildNodes()) {
results.removeChild(results.lastChild);
}

var json = data.responseText.evalJSON();

// 개수를 air에서 제공하는 trace로 찍어보자-_-;
air.trace(json.channel.result);

for (var i = 0; i < json.channel.result; i++) {
var title = json.channel.item[i].title;
var summary = json.channel.item[i].description;
var url = json.channel.item[i].link;

var link = new Element("a", {
"href": url,
"target": "_blank"
}).update(title);
var header = new Element("h2").insert(link);
var para = new Element("p").update(summary);

results.insert(header);
results.insert(para);
}
}
[/code]
간단합니다. 그냥 다음에 url요청해서 데이터를 받아서 parseResponse메소드가 파싱하죠.
그리고, airaliases.js파일을 선언하면 air객체를 사용할 수 있는데, 기존 Flex에서 제공하는 몇몇 기능을 사용할 수 있습니다. Socket도 있고, File관련된 것도 있군요. 이건 나중에 공부해야겠군요.
air.trace하면 로그를 남길 수 있습니다.
아직 Aptana에서 디버깅이 안되기 때문에-_-;(완전 최악-_-) trace를 열심히 찍어줘야할 겁니다-_-;

실행을 해봅시다.
Ctrl + F11누르면 실행됩니다.

음....근데 <b>가 나오네. 왜그러지-_-;

Posted by 머드초보

,

[머드초보의 일상] Javascript책 DOM스크립트, 방탄Ajax

나의 삶/생활속에 나 2008. 5. 24. 11:32

둘다 "제레미 키스"라는 사람이 쓴건데요.
초보자가 읽기 매우 편하고, 번역도 매우 읽기 쉽게 해놓아서 매우 추천할 만한 도서입니다.
AJAX를 안지는 1년이 다되가지만, 공부를 해본적이 없거든요.
근데 방탄Ajax를 읽게 되면서 개념이 점점 잡히기 시작했습니다-_-;

두가지 책에 좀 중복되는 내용이 나오는데요. DOM스크립트는 주로 DOM에 관해서 나오고, 방탄Ajax는 Ajax에 대해서 나오는.....-_-;
어쨌든 정말 이해하기 쉽게 써놨어요.
추천하려고 글을 썼는데 말이 필요없군요. 그냥 보면 됩니다!!

[Javascript] DAUM 검색API를 이용한 간단한 예제(나름 prototype사용)

자바스크립트(Javascript) 2008. 5. 24. 09:46

최근 자바스크립트를 공부하고 있는데요.
방탄AJAX라는 책을 보고 있는데, 여기에는 yahoo로 하는 방법이 있어서 저는 daum으로-_-; prototype을 이용해서 더욱 간결하게(별로 간결하지않아-_-) 만들어봤습니다.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head id='headId'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script type="text/javascript" src="daumSearch.js"></script>
</head>
<body>
<h1>Daum Blog Search!</h1>
<form onsubmit="searchDaum(this.query.value); return false;">
<fieldset>
<label>Search for</label>
<input type="text" name="query" />
<input type="submit" value="검색" />
</fieldset>
</form>
<div id="results"></div>
</body>
</html>
[/code]
HTML은 간단합니다. prototype라이브러리를 선언하구요. 이제 작성할 daumSearch.js파일을 선언했군요.
그리고, form부분에서는 query라는 name을 가진 input에 쿼리를 날리면, searchDaum이라는 메소드를 호출하게 되어있습니다.
daumSearch.js를 보도록 합시다.

[code]
function getScript(url)
{
var scripttag = new Element("script",{
"type": "text/javascript",
"src": url});
var head = $$("head");
head[0].insert(scripttag);
}

function searchDaum(query)
{
var url = "http://apis.daum.net/search/blog?"
url += "q=" + encodeURIComponent(query);
url += "&result=10";
url += "&start=1";
url += "&output=json";
url += "&apikey=다음에서 apikey발급받고 넣으세요";
url += "&callback=parseResponse";

getScript(url);
}

function parseResponse(data)
{
var children;
var results = $("results");

while (results.hasChildNodes())
{
results.removeChild(results.lastChild);
}

for (var i=0; i<data.channel.result; i++)
{
var title = data.channel.item[i].title;
var summary = data.channel.item[i].description;
var url = data.channel.item[i].link;

var link = new Element("a", {"href":url, "target":"_blank"}).update(title);
var header = new Element("h2").insert(link);
var para = new Element("p").update(summary);

results.insert(header);
results.insert(para);
}
}
[/code]
getScript함수는 해당 url을 head부분에 자바스크립트 선언으로 추가를 하는 역할을 합니다. json은 자바스크립트이기 때문에 페이지에 가져올 수 있습니다. daum검색은 output을 json으로 리턴이 되기 때문에 가능합니다.
그러면 json객체를 사용할 수 있습니다.
callback함수는 parseResponse입니다. 이 함수는 그냥 data부분에 json으로 받게 되는데 그것을 그냥 파싱만 해줘서 엘리먼트를 생성해서 results div에다가 엘리먼트를 추가하는 식으로 되어있습니다.

이상입니다 ^^