jQuery: The Basics
제이쿼리 기본 튜토리얼이다. 즉 이런 스타일로 코딩하면 된다는 말이다. 테스트 페이지가 없으면 아래처럼 테스트 페이지를 작성해보자.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
제이쿼리 소스파일을 지정하는 것이 첫번째 할일이다. 아래의 코드를 확인하자.
<script type="text/javascript" src="jquery.js"></script>
Launching Code on Document Ready
보통 자바스크립트는 브라우저에 코드가 로딩된 후에 시작된다. 아래처럼 코드를 작성한다.
window.onload = function(){ alert("welcome"); }
위 코드를 통해 페이지가 로딩되면 바로 자바스크립트 코드를 실행할 수 있다. 하지만 커다란 이미지 파일들이 로딩되지 않으면 자바스크립트는 실행되지 않는다는 문제를 가지고 있다.
그래서 제이쿼리에서는 window.onload 보다는 ready event 방법을 사용하는 편이다.
$(document).ready(function(){
// Your code here
});
a 태그에 클릭 이벤트를 추가한 코드이다.
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
위 파일을 저장하고 브라우저에서 열어보면 처음 작성한 페이지와 동일한 모양의 페이지가 나타난다. 링크를 클릭해보면 팝업창도 뜨고 링크에 해당하는 제이쿼리 홈페이지가 뜬다.
링크 태그인 a 태그와 같은 이벤트는 브라우저 고유의 기능이지만 제이쿼리의 event.preventDefault() 기능을 통해 기본 기능을 차단할 수 있다.
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});Complete Example
아래의 코드는 지금까지 모든 작업의 결과를 담은 코드이다.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ alert("As you can see, the link no longer took you to jquery.com"); event.preventDefault(); }); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>
Adding and Removing an HTML Class
제이쿼리로 자주하는 작업중 하나는 특정 클래스를 추가하고 제거하는 일이다.
헤더에 스타일을 다음과 같이 추가해보자.
<style type="text/css">
a.test { font-weight: bold; }
</style>
addClass 명령을 스크립트 안에 추가하자.
$("a").addClass("test");
별다른 HTML 작업 없이 a 태그의 글씨는 두껍게 지정되었다.
제거하는 방법은 아래와 같다.
$("a").removeClass("test");Special Effects
제이쿼리는 정말 간단한 방법으로 특수효과를 제공한다. 테스트를 위해 아래의 코드를 작성하자.
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
자 이제 링크를 클릭하면 링크는 서서히 사라진다.
CALLBACK AND FUNCTIONS
콜백 함수는 특정 함수가 실행되는 것과 관련하여 실행되는 함수이다. 함수에 전달되는 값에 함수를 전달하는 방법을 통해 콜백 기능을 구현한다.
콜백함수가 처리되지 않는 경우와 그에 따른 해결 방법을 아래에 추가하였다. 함수 몸통 자체를 전달한다는 것을 기억하면 된다.
Callback without arguments
콜백 함수에 따로 전달할 인자가 없다면 아래와 같이 코딩하면 된다.
$.get('myhtmlpage.html', myCallBack);
Note 주의할점이라면 두번째 인자로 전달되는 콜백함수는 함수명만 사용해야한다는 것이다.
Callback with arguments
콜백함수에 인자가 함께 있어야한다면 다음을 살펴보자. 나쁜 예와 좋은 예가 있다.
Wrong
The Wrong Way (will not work!)
$.get('myhtmlpage.html', myCallBack(param1, param2));
위와 같은 방법으로 콜백함수에 인자를 전달하는 정상적으로 작동되지 않는다. 함수가 전달되는 것이 아니라 실행이 되어 버린다. 아래처럼 함수를 호출하는 것이 되어 버린다는 것이다.
myCallBack(param1, param2)
위 함수의 결과가 get함수의 두번째 인자로 전달된다.
Right
이 문제의 해결 방법은 다음과 같다. 즉, 자바스크립트의 함수명은 포인터로 이해할 수 있지만 함수명() 는 함수 실행명령이기 때문이다.
아래처럼 사용해야한다. 익명함수를 통해 함수 몸통을 콜백함수로 처리해야한다. 콜백함수의 인자로 전달되는 값은 외부에서 참조하게 되는 값이어야한다.
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
get함수가 처리되는 시점에 param1 과 param2 가 콜백함수와 함께 처리된다.
'Development > Coding' 카테고리의 다른 글
| 자바스크립트 배열 관련 (0) | 2010.08.03 |
|---|---|
| Effective C# (0) | 2010.07.19 |
| PHP 코딩 스타일 가이드 - CI (0) | 2009.09.21 |
| 프레임워크 - 가상 머신 (0) | 2009.09.13 |
| 팝업창 차단 검사 방법 (0) | 2008.12.10 |