jQuery Trend

jQuery and...?김태곤

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

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

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

2005년에 Ajax가 등장한 이후

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

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

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

아이유 jQuery가 대세

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

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

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

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

자바스크립트는거의 대부분 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(); 실행

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

Image: Danilo Rizzuti / FreeDigitalPhotos.net PluginsImage: Sujin Jetkasettakorn / FreeDigitalPhotos.net Image: phanlop88 / 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, Thats all directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:false, controlNavThumbsFromRel:true, keyboardNav:true, pauseOnHover:true, manualAdvance:false });

애니메이션

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

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

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

http://robot.anthonycalzadilla.com/

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

HTML ul { CSS<ul> list-‐style:none; <li><a href="#">Home</a></li> margin:0; <li><a href="#">About</a></li> padding:0; <li><a 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; }) }

jQuery Mobile

http://jquerymobile.com

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

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

http://jquerymobile.com/themeroller/

Mobile App

2009 2011. 102011. 11

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

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/

jQuery Trend

by Taegon Kim

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

jQuery Trend Presentation Transcript