제이쿼리 콜백함수

jQuery 2015. 4. 28. 20:27

728x90
반응형

간단하게 콜백함수를 알아보려 한다.


콜백함수는 : 

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다

출처 : http://opentutorials.org/module/532/6508




알아두어야 할것.

함수도 객체다. 다시말해 일종의 값이다. 자바스크립트의 함수가 다른 언어의 함수와 다른점은 함수가 값이 될수 있다는 것이다.

반드시 기억해 두어야 한다.


간단한 예제를 보도록 하자

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width:100px;
            height:100px;
            background-color: red;
            text-align: center;
            line-height: 100px;
        }
   </style>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
        $(function(){
            $("p").css("width",function(i, s, w){
                console.log(i);
                console.log(s);
                console.log(w);
            })
        })
   </script>
</head>
<body>
    <p>p 요소 입니다.</p>
    <span></span>
</body>
</html>
cs



크롬창에서 F12버튼을 눌러 console 창을 확인해보자


19 번째 줄 : css 메서드는 콜백함수의 첫번째 매개변수로 선택되어진 요소의 index 값이 들어값니다. i 는 선택된 요소(객체)의 순번을 인자로 받았습니다.


20 번째 줄 : css 메서드는 콜백함수의 두번째 매개변수로 정의한 '속성(여기선 width)' 을 불러옵니다. s 는 선택된 요소(객체)의 key(프로퍼티)로 width 값을 호출한것 입니다.


21 번째 줄 : w 은 undefined 를 호출합니다. undefined는 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나, '존재하지 않는 객체 프로퍼티에 접근'할 경우 반횐되는 값입니다.



또,

매개변수를 아무거나 입력해놓고 그 매개변수를 저런식으로 console 창에 출력해 보면..


1
2
3
4
$("p").click(function(a, b, c){
        console.log(a);
        console.log(b);    
})
cs




.click() 메서드가 기본적으로 가지고 있는 포멧이 뭔지 알 수 있다.



혹시 틀린 내용이 있을땐 댓글 부탁드립니다!

반응형

'jQuery' 카테고리의 다른 글

.attr() 메서드와 .prop() 메서드  (0) 2015.05.05
each와 index 의 간단설명  (0) 2015.05.04
add 메서드  (0) 2015.04.28
[jQueryMobile]swipeleft, swiperight 메서드  (0) 2015.04.17
context 매개변수  (0) 2015.04.16