jQuery Trend

2,110 views

Published on

CA Conference

Published in: Technology, Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,110
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
40
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery Trend

  1. 1. jQuery and...?김태곤
  2. 2. 자바스크립트는 쉽습니다.
  3. 3. 그까이꺼 뭐... 대충 검색해서 붙여다 쓰면 되지
  4. 4. ...라고 2005년까지는 그렇게 생각했었습니다.
  5. 5. 2005년에 Ajax가 등장한 이후
  6. 6. 자바스크립트가 어려워졌다!
  7. 7. 아마 대부분은 이런 표정을 짓겠죠
  8. 8. jQuery를 사용하면 삽질을 줄일 수 있습니다.
  9. 9. 아이유 jQuery가 대세
  10. 10. 83.7% jQuery 10.4% 8.6% MooTools Prototype2011년12월현재 http://w3techs.com/technologies/overview/javascript_library/all
  11. 11. 이미 만들어진 자료가 많다는 뜻입니다.
  12. 12. 물어볼 사람이 많다는 뜻도 됩니다.
  13. 13. 아무것도 모를 때는 대세를 따르는 게 좋습니다.
  14. 14. 자바스크립트는거의 대부분 HTML과 함께 사용됩니다.
  15. 15. jQuery를 사용하기 위해 알아야 할 것:- 웹 브라우저 사용법 - CSS 선택자
  16. 16. 당장 시작할 수 있는 CSS: div 태그 선택자 #id 아이디 선택자 .class 클래스 선택자
  17. 17. 당장 시작할 수 있는 CSS:div div id=id class=class#id div id=id class=class.class div id=id class=class
  18. 18. jQuery를 사용하는 2단계 Image: Danilo Rizzuti / FreeDigitalPhotos.net
  19. 19. 1. 선택하고
  20. 20. 2. 실행한다
  21. 21. 선택$(#MENU).hide(); 실행
  22. 22. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  23. 23. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  24. 24. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  25. 25. ForDesigner CSS body{background-color:red;} jQuery $(body).css(background-color,red); Image: nuttakit / FreeDigitalPhotos.net
  26. 26. Image: Danilo Rizzuti / FreeDigitalPhotos.net PluginsImage: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net
  27. 27. OpenJS Grid
  28. 28. SlideDeck ( http://goo.gl/t1qbB )
  29. 29. HTML5 DragDrop Uploader ( http://goo.gl/xsBV6 )
  30. 30. 사용자 인터페이스
  31. 31. $(.multiselect).twosidedmultiselect();
  32. 32. http://jqueryui.com
  33. 33. nivo slider (http://nivo.dev7studios.com/)
  34. 34. jQuery(#nivoslider-125).nivoSlider({ effect:random, slices:15, boxCols:8, boxRows:4, animSpeed:500, pauseTime:3000, startSlide:0, Thats all directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:false, controlNavThumbsFromRel:true, keyboardNav:true, pauseOnHover:true, manualAdvance:false });
  35. 35. 애니메이션
  36. 36. 플래시의 시대는 끝났습니다.
  37. 37. 어도비는 앞으로 안드로이드와 블랙베리 플레이북을 위한 플래시 플레이어 11.1을 끝으로 업그레이드 제품을내놓지 않기로 했다- 전자신문 2011년 11월 10일자
  38. 38. 그래서 생각한 것이 HTML4, CSS, jQuery를 함께 사용하는 것이었습니다. - CA 12월호
  39. 39. http://robot.anthonycalzadilla.com/
  40. 40. http://snook.ca/technical/jquery-bg/
  41. 41. HTML ul  { CSSul   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;     }) }
  42. 42. jQuery Mobile
  43. 43. http://jquerymobile.com
  44. 44. http://jquerymobile.com/demos/1.0/
  45. 45. CSS를 잘 몰라도 어렵지 않아~요~
  46. 46. http://jquerymobile.com/themeroller/
  47. 47. Mobile App
  48. 48. 2009 2011. 102011. 11
  49. 49. Apache Callback이 지원하는 플랫폼과 기능
  50. 50. 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/

×