Download pdf - jQuery Trend

Transcript

jQuery and...?김태곤

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

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

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

2005년에 Ajax가 등장한 이후

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

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

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

아이유 jQuery가 대세

83.7%jQuery

http://w3techs.com/technologies/overview/javascript_library/all

10.4%MooTools

2011년����������� ������������������  12월����������� ������������������  현재

8.6%Prototype

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

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

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

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

jQuery를 사용하기 위해 알아야 할 것:

- CSS 선택자

- 웹 브라우저 사용법

당장 시작할 수 있는 CSS:

div 태그 선택자

#id 아이디 선택자

.class 클래스 선택자

당장 시작할 수 있는 CSS:

div <div id="id" class="class">

#id <div id="id" class="class">

.class <div id="id" class="class">

jQuery를 사용하는 2단계

Image: Danilo Rizzuti / FreeDigitalPhotos.net

1. 선택하고

2. 실행한다

$('#MENU').hide(����������� ������������������  );

선택

실행

For����������� ������������������  Designer

Image: nuttakit / FreeDigitalPhotos.net

body����������� ������������������  {����������� ������������������  background-color����������� ������������������  :����������� ������������������  red;����������� ������������������  }CSS

$('body').css('background-color',����������� ������������������  'red');jQuery

For����������� ������������������  Designer

Image: nuttakit / FreeDigitalPhotos.net

body����������� ������������������  {����������� ������������������  background-color����������� ������������������  :����������� ������������������  red;����������� ������������������  }CSS

$('body').css('background-color',����������� ������������������  'red');jQuery

For����������� ������������������  Designer

Image: nuttakit / FreeDigitalPhotos.net

body����������� ������������������  {����������� ������������������  background-color����������� ������������������  :����������� ������������������  red;����������� ������������������  }CSS

$('body').css('background-color',����������� ������������������  'red');jQuery

For����������� ������������������  Designer

Image: nuttakit / FreeDigitalPhotos.net

body����������� ������������������  {����������� ������������������  background-color����������� ������������������  :����������� ������������������  red;����������� ������������������  }CSS

$('body').css('background-color',����������� ������������������  'red');jQuery

Plugins

Image: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / FreeDigitalPhotos.net

Image: Danilo Rizzuti / FreeDigitalPhotos.net

OpenJS Grid

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

HTML5 Drag&Drop Uploader ( http://goo.gl/xsBV6 )

사용자 인터페이스

$(".multiselect").twosidedmultiselect();

http://jqueryui.com

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

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

That's all

애니메이션

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

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

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

http://robot.anthonycalzadilla.com/

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

<ul>   <li><a  href="#">Home</a></li>   <li><a  href="#">About</a></li>   <li><a  href="#">Contact</a></li></ul>

HTML ul  {   list-­‐style:none;   margin:0;   padding:0;}li  {   float:left;   width:100px;   margin:0;   padding:0;   text-­‐align:center;}li  a  {   display:block;   padding:5px  10px;   height:100%;   color:#FFF;   text-­‐decoration:none;   border-­‐right:1px  solid  #FFF;}li  a  {   background:url(bg.jpg)  repeat  0  0;}li  a:hover  {   background-­‐position:50px  0;}

CSS

Image

$('#nav  a')   .css(  {backgroundPosition:  "0  0"}  )   .mouseover(function(){     $(this).stop().animate(       {backgroundPosition:"(0  -­‐250px)"},         {duration:500})     })   .mouseout(function(){     $(this).stop().animate(       {backgroundPosition:"(0  0)"},         {duration:500})     })

jQuery

jQuery Mobile

http://jquerymobile.com

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

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

http://jquerymobile.com/themeroller/

Mobile App

2009

2011. 10

2011. 11

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

Stock imageshttp://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/


Recommended