CA Conference

1. jQuery and...?
김태곤

2. 자바스크립트는 쉽습니다.

3. 그까이꺼 뭐... 대충 검색해서 붙여다 쓰면 되지

4. ...라고 2005년까지는 그렇게 생각했었습니다.

5. 2005년에 Ajax가 등장한 이후

6. 자바스크립트가 어려워졌다!

7. 아마 대부분은 이런 표정을 짓겠죠

8. jQuery를 사용하면 삽질을 줄일 수 있습니다.

10. 아이유 jQuery가 대세

11. 83.7%
jQuery
10.4% 8.6%
MooTools Prototype
2011년12월현재 http://w3techs.com/technologies/overview/javascript_library/all

12. 이미 만들어진 자료가 많다는 뜻입니다.

13. 물어볼 사람이 많다는 뜻도 됩니다.

14. 아무것도 모를 때는 대세를 따르는 게 좋습니다.

15. 자바스크립트는
거의 대부분 HTML과
함께 사용됩니다.

16. jQuery를 사용하기 위해 알아야 할 것:
- 웹 브라우저 사용법
- CSS 선택자

17. 당장 시작할 수 있는 CSS:
div 태그 선택자
#id 아이디 선택자
.class 클래스 선택자

18. 당장 시작할 수 있는 CSS:
div div id=id class=class
#id div id=id class=class
.class div id=id class=class

19. jQuery를 사용하는 2단계
Image: Danilo Rizzuti / FreeDigitalPhotos.net

20. 1. 선택하고

21. 2. 실행한다

22. 선택
$('#MENU').hide();
실행

23. ForDesigner
CSS body{background-color:red;}
jQuery $('body').css('background-color','red');
Image: nuttakit / FreeDigitalPhotos.net

24. ForDesigner
CSS body{background-color:red;}
jQuery $('body').css('background-color','red');
Image: nuttakit / FreeDigitalPhotos.net

25. ForDesigner
CSS body{background-color:red;}
jQuery $('body').css('background-color','red');
Image: nuttakit / FreeDigitalPhotos.net

26. ForDesigner
CSS body{background-color:red;}
jQuery $('body').css('background-color','red');
Image: nuttakit / FreeDigitalPhotos.net

27. Image: Danilo Rizzuti / FreeDigitalPhotos.net
Plugins
Image: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net

28. OpenJS Grid

29. SlideDeck ( http://goo.gl/t1qbB )

30. HTML5 DragDrop Uploader ( http://goo.gl/xsBV6 )

31. 사용자 인터페이스

32. $(.multiselect).twosidedmultiselect();

33. http://jqueryui.com

34. nivo slider (http://nivo.dev7studios.com/)

35. jQuery(#nivoslider-125).nivoSlider({
effect:random,
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0, That's all
directionNav:true,
directionNavHide:true,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});

36. 애니메이션

37. 플래시의 시대는 끝났습니다.

38. 어도비는 앞으로 안드로이드와 블랙
베리 플레이북을 위한 '플래시 플레이
어 11.1'을 끝으로 업그레이드 제품을
내놓지 않기로 했다
- 전자신문 2011년 11월 10일자

40. 그래서 생각한 것이 HTML4, CSS, jQuery를
함께 사용하는 것이었습니다. - CA 12월호

41. http://robot.anthonycalzadilla.com/

42. http://snook.ca/technical/jquery-bg/

43. HTML ul
{ CSS
ul
list-­‐style:none;
lia
href=#Home/a/li
margin:0;
lia
href=#About/a/li
padding:0;
lia
href=#Contact/a/li }
li
{
/ul
float:left;
width:100px;
margin:0;
padding:0;
Image
}
text-­‐align:center;
li
a
{
display:block;
padding:5px
10px;
height:100%;
$('#nav
a')
jQuery
color:#FFF;
.css(
{backgroundPosition:
0
0}
)
text-­‐decoration:none;
.mouseover(function(){
border-­‐right:1px
solid
#FFF;
$(this).stop().animate( }
{backgroundPosition:(0
-­‐250px)},
li
a
{
{duration:500})
})
background:url(bg.jpg)
repeat
0
.mouseout(function(){ 0;
$(this).stop().animate( }
{backgroundPosition:(0
0)},
li
a:hover
{
{duration:500})
background-­‐position:50px
0;
})
}

44. jQuery Mobile

45. http://jquerymobile.com

46. http://jquerymobile.com/demos/1.0/

47. CSS를 잘 몰라도 어렵지 않아~요~

48. http://jquerymobile.com/themeroller/

49. Mobile App

50. 2009
2011. 10
2011. 11

51. Apache Callback이 지원하는 플랫폼과 기능

54. Stock images
http://www.flickr.com/photos/maniya/4020026753/
http://www.flickr.com/photos/inferis/266391219/
http://www.flickr.com/photos/colodio/4301458933/
http://www.flickr.com/photos/nettsu/4423387852/
http://www.flickr.com/photos/ivyfield/4802227735/
http://www.flickr.com/photos/ivyfield/4800359168/
http://www.flickr.com/photos/boellstiftung/6322064224/
http://www.flickr.com/photos/chrisbartow/6474456991/
http://www.flickr.com/photos/jm3/4683685/