동적으로 오픈소스 자바스크립트 라이브러리 로드하기

일반적으로 오픈 소스 자바스크립트를 사용 하려면 대부분
해당 사이트의 다운로드 사이트에 접속해서 "js" 파일을
다운로드 한후 <script src="jquery.js"> 형태로 사용합니다.
만약 jquery외에 다른 라이브러리를 사용하고자 할때는 똑같은
일을 반복해서 설정 하겠죠.
그래서 오늘은 이러한 라이브러리들을 쉽고 간편하게 설치 없이
사용 하는 방법에 대해서 말씀 드리겠습니다.
제가 말씀 드린 내용은
구글 Ajax 관련 사이트(http://code.google.com/intl/ko-KR/apis/ajaxlibs/)
에 기술된 내용들 입니다.

• Load Ajax Library
  

동적으로 라이브러리를 로드하는 방법은 구글에서 제공하는 방법을
씁니다. 예를 들어서 jquery 와 prototype 을 동시에 사용하고
싶다면 아래와 같이 선언 후 사용 하시면 됩니다.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("prototype", "1.6.0.2");
</script>

1 Line : Google Ajax 라이브러리를 import 합니다.

3,4 Line: 사용하려는 Ajax 오픈소스 라이브러리를 로드 합니다.

• Example

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("prototype", "1.6.0.2");

google.setOnLoadCallback(function() {
 jQuery(document).ready(function(){
  jQuery("button:first").click(function(){
    jq();
   });
        });
});

function jq() {
 jQuery("#unique").show();
}

function pt(){
 $("unique").hide();
}

function noConflict(){
 jQuery.noConflict;
}


    </script>

<button>JQuery show</button>
<button onclick="javascript:pt();">prototype.js hid</button>
<div id="unique" style="display:none;">Hello,jQuery</div>

위 예제는 JQuery와 Prototype를 같이 사용한 예제 입니다.
서로간의 "$" 충돌을 위해서 jquery사용시에는 "jQuery"
해서 사용하시면 됩니다. 충돌 피하는 방법은
jquery 사이트에서 참고 하시면 될것 같습니다.
지원 라이브러리 와 버전 정보를 알고 싶으면
아래의 사이트에서 확인 하시기 바랍니다.
http://code.google.com/intl/ko-KR/apis/ajaxlibs/documentation/index.html#AjaxLibraries