제이쿼리 콜백함수
jQuery 2015. 4. 28. 20:27
간단하게 콜백함수를 알아보려 한다.
콜백함수는 :
값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다
출처 : 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 |