Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

How jQuery Works

The Basic

이 문서는 처음 jQuery를 접하는 사람들을 위한 기본적인 내용을 담고 있는 튜토리얼 형식의 문서다. jQuery로 만든 코드들은 웹 브라우저로 테스트가 가느하므로, 로컬 컴퓨터에 테스트할 수 있는 환경을 만들도록 하자. 아래와 같은 HTML 페이지를 하나 만든다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery 데모</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
    // 여기에 코드를 입력하면 된다.
    </script>
</body>
</html>

<script> 앨리먼트 에 있는 src 어트리뷰트가 가리키는 위치에 jQuery 라이브러리 파일을 복사해야 한다. jquery 다운로드 페이지에서 jquery.js 파일을 다운로드 한 다음 HTML 문서가 있는 디렉토리에 복사한다.

문서를 읽을 때 코드 실행하기

브라우저가 문서를 읽고 난 후 코드가 실행되도록 하기 위해서 프로그래머는 onload함수를 이용한다.
windows.onalod = function() {
  alert("Welcome");
}
이 코드의 문제점은 문서가 포함한 모든 이미지들에 대한 다운로드가 끝난 다음에야 실행된다는 점이다 .

jQuery는 ready 이벤트를 이용해서 문서를 읽을 준비가 되는 즉시 코드를 실행할 수 있다.
$( document ).ready(function() {
 
    // 여기에 코드를 배치한다. 
 
});

예를들어서 아래 코드처럼 ready이벤트에 a link에 대한 click 핸들러를 추가할 수 있다.
$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Thanks for visiting!" );
    });
 
});
위 코드를 포함한 HTML 파일을 만들어서 브라우저로 접근한 다음 링크를 클릭하면 (모든 링크들에 대해서) alert 메시지가 뜨는 걸 확인할 수 있다.

예제에서 alert 창을 닫으면, 링크 페이지로 이동하는 걸 확인할 수 있다. 링크 페이지로의 이동은 기본 동작이기 때문인데, 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();
 
    });
 
});

완성된 예제

지금까지의 내용을 모두 포함한 완성된 예제 코드를 만들었다. 링크를 클릭하면 jquery.com 링크로 이동할 수 없다는 메시지가 alert 창이 뜬다. client에 대한 기본 동작도 막았기 때문에, 링크 페이지로 이동도 하지 않는다.
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
 
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });
 
    </script>
</body>
</html>

HTML Class 추가 및 삭제

class를 추가하고 삭제하는 방법을 알아보자.

테스트 HTML 문서의 <head> 영역에 스타일을 하나 추가한다.
<style>
a.test {
    font-weight: bold;
}
</style>

addClass()를 이용해서 링크에 text class를 적용한다.
$("a").addClass("test")
이제 모든 <a>엘리먼트의 모든 문자들은 bold 상태가 된다.

removeClass()를 이용해서 class를 제거할 수 있다.
$("a").removeClass("test")

특수 효과

jQuery는 간단하게 사용할 수 있는 몇 가지 특수효과들을 지원한다. 아래 링크를 클릭했을 때 링크 문자열을 숨기는(hide)예제다.
$( "a" ).click(function( event ) {
    event.preventDefault();
    $( this ).hide( "slow" );
});

Callback과 함수

콜백은 객체의 상태가 변화 했을 때, 이러한 사실을 함수를 통해서 전달하는 방법을 말한다. 이때 호출되는 함수를 콜백 함수라고 한다. 자바스크립트에서 상태변화는 이벤트로 다루는데, 키보드와 마우스의 입력, Ajax를 통합 입력 등이 이벤트를 발생한다.

매개변수 없는 콜백 호출

매개변수 없는 콜백함수는 아래와 같이 사용할 수 있다.
$.get( "myhtmlpage.html", myCallBack );
$.get()을 이용해서 myhtmlpage.html문서의 내용을 모두 가져오면, myCallBack함수가 호출 된다.

매개변수를 가지는 콜백 호출

매개변수를 가지는 콜백함수 호출이라... 아마 다음과 같이 간단히 구현할 수 있으리라 생각할 수 있겠다.
$.get( "myhtmlpage.html", myCallBack(param1, param2));
그러나 이 코드는 제대로 동작하지 않는다. 왜냐하면 myCallBack(param1, param2)가 즉시 실행이 되고, 리턴값이 $.get의 두번째 매개변수로 전달되기 때문이다. 이 경우에는 anonymous function을 이용해서 구현해야 한다.
$.get( "myhtmlpage.html", function() {
    myCallBack( param1, param2 );
});
이제 $.get() 함수가 myhtmlpage.html 문서를 모두 읽은 후, anonymous function를 호출한다. 다시 anonymou function은 myCallBack(param1, param2)를 호출하는 것으로 우리가 원하는 대로 작동한다.