달력

82019  이전 다음

  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

Simple Ajax 예제

JavaScript 2013.12.18 23:01

자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.

http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn

위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.

q: 검색어

apikey: 다음에서 제공받은 apikey

output: 응답결과 데이터 형태 json 또는 xml

callback: JSONP를 위해 필요한 callback 함수 이름

* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP) 


브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.


크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.

우선 callbackfn 함수입니다.

function callbackfn(res) { console.log(res); }


그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.

var element = document.createElement('script');

element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";


head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다. 

document.getElementsByTagName("head")[0].appendChild(element);


위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.



Posted by 케누 kenu허광남
간단한 객체 지향 자바스크립트 simple object oriented javascript 에 이어집니다.

지난 번 함수에 파라미터는 어떻게 전달할까요. onclick="issue.view('kenu')" 이렇게 말이죠.
<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">

name 이라는 파라미터 전달 방식입니다. 설명하기 애매하지만 그냥 () 괄호 안에 쓰면 됩니다.

issue.open() 이라는 것을 만들어 볼까요.
<input type="button" value="open it" onclick="issue.open('kenu')">
이라고 추가할 수 있겠죠. 코드는 다음과 같아 집니다.

<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    },
    open : function(name) {
      alert(name + "! Open it, please.");
    }

  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">
<input type="button" value="open it" onclick="issue.open('kenu')">

view : function {} 다음에 오는 콤마(,) 이후에 view와 같은 형식의 open function을 만들면 됩니다. 두 개 만드는 법을 알았으니 3, 4, 5 계속 추가할 수 있겠죠.

 
Posted by 케누 kenu허광남
자바스크립트 이야기입니다. 웹2.0이 뜨고나서, 특히 Ajax라고 불리면서 현란하게 브라우저를 수놓는 시대에 와서 가장 진보적인 위치를 차지하고 있는 것이 자바스크립트입니다. 자바에다가 스크립트를 붙이면 정말 다른 언어가 됩니다. 물론 베이직 언어와 달리 대소문자를 칼같이 지켜야 되는 점은 자바와 같지만, 컴파일이나 실행방식, 문법 구조 같은 언어적 특성이 자바와 많이, 아주 많이 다릅니다.

웹2.0을 전후로 자바스크립트 내에서도 큰 변화가 생겼습니다. 그 전에는 베껴쓰는 자바라 하여 컴퓨터 랭귀지 취급도 받지 못했습니다. "그거 아무나 하는거야 그냥 검색해서 찾아서 베껴쓰면 되잖아"라는 인식이 팽배했습니다. 물론 접근하기 쉽다는 인식도 있지만, 자바스크립트 언어의 진면목을 세상이 몰라 주었던 것이죠.

구글맵으로 세상이 들썩거리고 자바스크립트의 객체지향성을 일깨워 준 프레임워크가 나왔습니다. 미운 오리 새끼가 백조가 될 수 있는 가능성을 보여준 것이죠. 바로 prototype.js 입니다. 이것을 바탕으로 해서 많은 자바스크립트 프레임워크와 라이브러리들이 쏟아지기 시작했습니다.
기존에는 거의 팁으로만 취급받던 것들이 소프트웨어 제품으로 인정을 받기 시작했죠. 초창기에 script.aculo.us, rico, dojo 등이 선보였고, YUI(Yahoo UI) 같이 큰 포털에서 내어놓은 것도 있었습니다. 자바스크립트의 르네상스라고 해도 될지요. DHTML로 살짝 떴다가 내려갔는데, 이 때는 정말 부흥이 맞습니다. 아직도 지속되고 있구요.


허무할지 모르지만 그 유치했던 자바스크립트에서 이런 표현이 가능합니다.

<script type="text/javascript">
  var issue = {
    view : function() {
      alert("Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view()">

어떤 의미인지 설명하지 않아도 되겠죠. 하나 유념할 것은 issue에 종속된 view()라는 것입니다 그냥 view() 호출하면 안됩니다. 이렇게 scope를 주는 것이 의미가 있게 됩니다.

Posted by 케누 kenu허광남