다음 이미지를 보시면 알 수 있듯이 다른 js 파일에서 선언된 변수도 가져다 쓸 수 있습니다.
위키를 보니 JSDT는 ATF(Ajax Toolkit Framework) 프로젝트의 서브 프로젝트로 진행중이네요.
JSDT에 대해 잘 요약된 DW기사도 일독을 권합니다.
이때것 복사&붙여넣기만 했던 자바 스크립이였는데 요세 따라 자바스크립트 공부의 중요성을 뼈저리게 느낍니다^^; 근대 자바스크립트를 얕보고 책을 펼쳐봤는데 참 어렵더군요^^; 독한 맘 품고 자바스크립트 공부해야 되겠습니다^^
알게 모르게 자바스크립트의 중요성을 무시하고 생활하다가, 지금은 재앙에 가까운 곤혹스러움이 있습니다.
지금껏 개발하면서 잘 신경쓰지 않았던 Dom Element, Cross Browsing과 컴포넌트 화 되어가는 소스를 보는 곤혹스러움이란...
베껴쓰기의 노말한 폼에서 클래스화 하는 표현문법과 범위를 주고, extends가 쓰인 prototype의 사상을 이해하는데 더 많은 시간을 소비해야 소스가 이해가 가니..
공부할게 한가지 더 늘어났다는 억울함(?)이 들기도 하고, 이 기회에 완벽하게 마스터를 해보고자 하는 열의(?) 또한 들기도 합니다.
그 덕에, 컴퓨터 공부하며 단 한권도 사보지 않았던 자바스크립트 관련 서적을 한달 반 사이 세 권이나 사버렸어요...
현장에서, 코드를 생각하고 검증을 해보고 하는 실험적인 부분...혹은 개발자에게 좀 더 나은 코드를 생산하고자 시간을 투자하는 risk를 감행하지 않는 현실에서 시간이 충분치 않아 써야지써야지 생각만하고 쉽게 베껴먹은 죄를 지금에서야 받는듯 합니다..ㅋㅋㅋ
'자바에다가 스크립트를 붙이면 정말 다른 언어가 됩니다.' 이 부분에서 오해의 소지가 있는것 같습니다. 자바와 자바스크립트는 연관성이 없습니다.
http://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
그나저나 저는 맨날 지적만 하고 가네요^^;;
<script type="text/javascript">
function showShopGallery() {
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
var shopg_image = 'http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif';
var shopg_name = '1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불';
var shopg_price = '8,900원';
var htmlCode =
'<link rel="stylesheet" type="text/css" href="style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="'+shopg_link+'"><img \
src="'+shopg_image+'"></a></td>\
<td><div class="shopg_name">'+shopg_name+'</div></td>\
</tr>\
<tr>\
<td>'+shopg_price+'</td>\
</tr></table>\
';
document.write(htmlCode);
}
showShopGallery(); // 함수 호출
</script>
[shopgallery] 개발 구조에서 일단 화면에 보이는 것을 만들었습니다. 이렇게 만들어진 화면에 컨텐츠를 자유롭게 바꾸기 위해서는 동적으로 html 태그가 만들어져야 합니다.
데이터가 들어가는 부분 외의 style영역은 따로 파일을 만들어도 좋을 듯 합니다.
다음과 같이 코드가 분리됩니다.
style.css
simple.html
<table class="shopg"><tr>
<td rowspan="2"><a
href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"><img
src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif"></a></td>
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>
</tr>
<tr>
<td>8,900원</td>
</tr></table>
이제 simple.html 을 javascript를 이용해서 출력하도록 바꿔보겠습니다.
html에서는 모두 큰따옴표를 썼기 때문에 자바스크립트에서 문자열은 작은따옴표를 이용해서 둘러싸도록 하겠습니다.
자바스크립트 문자열의 특징은 자바와 다르게 줄 끝에 \ 를 붙여서 이어쓰기 할 수 있습니다. 때문에 이렇게 문자열을 만들 수 있습니다.
simple.html
document.write(htmlCode);
</script>
일단 프로그램화 시키는 것은 성공했습니다. 이제 변수를 뽑아야죠.
'... href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503"> ...'
위 코드가 다음과 같이 나눠집니다.
'... href="'+'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503'+'"> ...'
동적으로 변하는 부분의 양쪽을 문자열 덧셈표시로 바꾼 것이죠. ' 로 막고 + 붙이고 ' 로 다시 문자열 시작을 합니다. 이것을 변수처리해주면 됩니다.
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
...
'... href="'+shopg_link+'"> ...'
코드를 바꾸면 다음과 같습니다.
simple.html
<script type="text/javascript">
var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503';
var shopg_image = 'http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif';
var shopg_name = '1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불';
var shopg_price = '8,900원';
var htmlCode =
'<link rel="stylesheet" type="text/css" href="style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="'+shopg_link+'"><img \
src="'+shopg_image+'"></a></td>\
<td><div class="shopg_name">'+shopg_name+'</div></td>\
</tr>\
<tr>\
<td>'+shopg_price+'</td>\
</tr></table>\
';
document.write(htmlCode);
</script>
데이터의 1차 분리가 끝났습니다. 점점 프로그램 짜는 듯 느껴지십니까.
관련글: http://okjsp.tistory.com/tag/openapi
좋은 지적입니다.^^ 표준은 지키라고 있는것이겠죠. :)
블로깅 해주신 내용을 테스트 해볼겸 오페라로 검색쇼를 실행해봤는데.. 저는 잘되네요;;
버젼은 9.22 빌드번호는 8802입니다.
전 그래서 9.5버전을 기대중입니다. ^^
자바스크립트 쪽을 많이 고쳤는지 오페라에서만 제대로 안나오던 페이지들이 거의 없어진것 같더라구요 ^^
그림1 firebug script tab
그림2 JavaScript Debug Breakpoint
그림3 Debug start
그림4 debug icons
그림5 debug step over