한 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 머드초보

댓글을 달아 주세요

 
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 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.06.27 18:03  댓글주소  수정/삭제  댓글쓰기

    디버깅이 안되는군요.. 안습;

    • 머드초보 2008.06.30 22:11  댓글주소  수정/삭제

      검쉰님 반가워요~
      아네 ^^ 디버깅이 안돼요 ^^ 디버깅만 되도 뭔가 해보려고 하겠는데 에러도 잡기힘든 자바스크립트라 ^^

 

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

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

사용자 삽입 이미지

추천 책입니다.

사용자 삽입 이미지

추천 책입니다.


PS. 혹시 백석대학교 정보통신학부 학생분들... 아직도 인터넷프로그래밍 시간에 "자바스크립트의 기초 및 응용 실습" 책으로 강의 하나요? 음.....다른책으로 바꿔야할 듯하네요. 실무에 도움이 될만한 내용이 별로 없을 뿐더러 웹표준을 무시한 무시무시한 책입니다. IE위주로 작성이 되어있어서 FF에서 안되는거 많을 껍니다. ^^ 저도 4년전에 배웠었는데 ^^ 웹은 변화가 너무 많아서 옛날 책으로 공부를 하면 안되겠더라구요. 그래도 기본은 다 비슷하니 ^^
사용자 삽입 이미지

비추천책입니다-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.05.26 22:55  댓글주소  수정/삭제  댓글쓰기

    학교다닐때 홈피만들기 알바때문에 자바스크립트 조금 손대보곤 한번도 해본 적이 없네요 ^^;
    Head Rush Ajax 사서 보긴 했는데, 아직 잘 모르겠 ^^;
    위에 둘다 에이콘에서 나온 거네요. 에이콘책들이 요즘 맘에 듭니다. ㅎㅎ
    좀 한가해지면 사봐야겠네요 ;)

    • 머드초보 2008.05.28 08:40  댓글주소  수정/삭제

      검쉰님 항상 방문해주셔서 감사해요 ^^
      자바스크립트는 저도 학교다닐 때 과제로 홈페이지 만들 때 빼고는 해본적이 없어요 ^^
      최근에 하는 일이 있어서 공부를 하고 있지요 ^^
      재미있는 언어인 것 같아요^^

 

최근 자바스크립트를 공부하고 있는데요.
방탄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에다가 엘리먼트를 추가하는 식으로 되어있습니다.

이상입니다 ^^

사용자 삽입 이미지

 
Posted by 머드초보

댓글을 달아 주세요

 

이런 IDE도 있군요.
지원하는게 좀 특이하군요.
Ruby on Rails, Adobe® AIR™, Apple iPhone(아이폰!!!), PHP(EditPlus면 만사오케이인데^^)를 지원합니다.

사용자 삽입 이미지

로고도 이쁘네요^^


우선 이클립스 기반이어서 이클립스 플러그인 형식으로도 설치를 할 수 있습니다.
그냥 설치하면 플렉스빌더처럼 StandAlone형태로 돼요.
http://www.aptana.com/studio/download
여기서 받으면 되구요.
다음 신공으로 설치하면 됩니.....아 안된다-_-;
선택 사항이 하나 나오는데요. 파일을 Aptana Studio랑 연결할꺼냐고 묻는데 연결하고 싶으면 다 선택하시고 연결하기싫으면 해제해야겠죠? ^^ 어쨌든 설치가 완료되고 실행해봅시다-_-;
무슨 경고창이 뜹니다-_-; FireFox를 깔라고 하네요-_-;
가볍게 깔아주든지 그냥 무시합시다-_-;
보면 이클립스랑 완전 똑같군요-_-;

프로젝트를 만들어봅시다.
File -> New -> Project -> .....아....아무것도 없군요.
AIR플러그인을 설치해야합니다.
처음에 나오는 Aptana Start Page에서 Plugins에서 중간쯤에 Adobe® AIR™가 보일껍니다.
Download and install클릭하면 Adobe AIR Support체크하고 설치하면 됩니다.

그럼다시 프로젝트를 만들어봅시다-_-;
File -> New -> Project -> AIR Project가 생겼습니다.
Project이름은 HelloAir -_-;
Next로 끝까지가면 Ajax Library를 선택할 수 있어요^^
저는 Ajax를 모르므로 ㅠㅠ 그냥 Finish를.....ㅠㅠ

왼쪽 아래에 Project를 보면 AIRAliases.js파일이 꼭 필요한데 알아서 집어넣어줍니다.
저거 혼자서 다하려면 AIR SDK에서 가져와서 추가해줘야해요.
위에 RUN을 해보면 애플리케이션이 뜰꺼에요 ^^
air객체를 통해서 air관련된 것을 접근해서 쓸 수 있어요!
air.trace("") 하면 trace도 찍을 수 있답니다-_-;

Aptana의 가장 큰 단점!
아직 디버깅이 안돼요-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.03.26 14:08  댓글주소  수정/삭제  댓글쓰기

    전 RoR용 툴 찾다가 봤는데 AIR 지원한다길래 신기했... ^^;

    • 머드초보 2008.03.27 08:27  댓글주소  수정/삭제

      검쉰님 반갑습니다 ^^ 또 오셨네요 ^^
      루비는 넷빈즈로....-_-;
      저도 루비를 배우고 싶은데 어떻게 시작을 해야할지 ^^

    • 머드초보 2008.04.02 08:34  댓글주소  수정/삭제

      아 구독중이군요 감사해요 ^^(내용도 별로 없는데-_-)
      우와 6만원어치면 3권정도? ^^
      저도 책을 구입하던지 해야겠네요 ^^

    • BlogIcon 검쉰 2008.04.02 10:06  댓글주소  수정/삭제

      사실 머드초보님 블로그 구독중이라 새글 올리시면 찾아옵니다. ㅋㅋ

      루비 배우고 싶어서 냅다 책 6만원어치 샀던 저는..
      현재 공부 안하고 있습니다. (반성;; )

    • BlogIcon 검쉰 2008.04.02 10:08  댓글주소  수정/삭제

      '프로그래밍 루비' 가 무려 3만9천원.;
      레일즈 책 한권은 2만8천.. ㅜㅜ

      공부해야지요 ;;;

    • 머드초보 2008.04.02 11:18  댓글주소  수정/삭제

      아하 그렇군요 ^^
      완전 비싸네-_-;
      그래도 배움을 위해서라면 ^^