• Like
jQuery 구조와 기능
Upcoming SlideShare
Loading in...5
×

jQuery 구조와 기능

  • 6,537 views
Uploaded on

2014/02/26 발표 자료입니다. …

2014/02/26 발표 자료입니다.
jQuery에 대한 어제, 오늘, ... 입니다.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,537
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
85
Comments
0
Likes
29

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery 구조와 기능 허광남 kenu@okjsp.net
  • 2. About me • OKJSP 설립, 공동대표 • 표준프레임워크 에반젤리스트 • OKdevTV afreeca.com/kenuheo • 나는 프로그래머다, 플랫폼을 말하다 공동집필 • okjsp.net 
 okjsp.tistory.com
 github.com/kenu
  • 3. 오늘 얘기는 • jQuery 아키텍처 • jQuery 개발도구 • jQuery 활용
  • 4. jQuery 아키텍처 • JavaScript 기반 • window.document 필요 jQuery plugins jQuery JavaScript
  • 5. 1984生 John Resig 2006/03/22 첫 커밋 https://github.com/jquery/jquery/commits/master?page=158
  • 6. ajax, core, event, fx, sort, tmpl https://github.com/jquery/jquery/tree/8a4a1edf047f2c272f663866eb7b5fcd644d65b3
  • 7. core.js
  • 8. core.js • 처음엔 Prototype.js 기반 • JavaScript에서 • var || 란? $a = a || document; (a !== undefined 
 && a !== false 
 && a !== null) {
 $a = a;
 } else {
 $a = document;
 } • if
  • 9. jQuery 2014 • tests: "ajax attributes callbacks core css data deferred dimensions effects event manipulation offset queue selector serialize support traversing Sizzle".split( " " ) • Grunt 빌드 • https://github.com/jquery/jquery
  • 10. Intro.js • (function (g, f) {/* intro */} (window, Fn)); • Fn • function (window, noGlobal) {
 …
 return jQuery;
 }
  • 11. jQuery 개발도구 • JavaScript는 기본 • Syntax Highlighting
  • 12. 이클립스 JavaEE • JSDT jQuery 플러그인
  • 13. 프론트엔드 개발도구 • 너무 무거운 이클립스 • 가벼운 개발 도구 http://szhaddad2.deviantart.com/art/Wolverine-Spiderman-and-Hulk-49188690
  • 14. 브라우저 개발도구 • Console 콘솔에서 JS개발 
 안 할 줄은 몰랐어, 
 필근아 • 네가
  • 15. Brackets.io • Adobe의 무료 도구 • http://brackets.io • Live Preview • with Chrome
  • 16. IE는 없나요? • F12 개발도구 • http://msdn.microsoft.com/ko-kr/ library/ie/bg182326(v=vs.85) • DOM 탐색기, 
 콘솔, 
 디버거, 
 네트워크, 
 UI 응답성, 
 프로파일러, 
 메모리, 
 에뮬레이션
  • 17. IE11 좋아요 • IE6를 쓰신다고요? • 지못미 • 세상엔 좋은 일터가 많이 ...
  • 18. Console Show • JSON • 동적 스크립트 로딩 • http://github.com/ kenu/oksample http://www.flickr.com/photos/ul_digital_library/10922274335
  • 19. jQuery 활용 • 1단계 셀렉터 • 2단계 속성 • 3단계 이벤트 • 4단계 Ajax • 5단계 下山
  • 20. before jQuery • JSON • {key: value, key2: value} • [value, value] • 자바스크립트 • function 변수 • 대소문자 구분
  • 21. 셀렉터 • 원래 이름은 jSelect? • CSS • 3종 Selector 세트 • 태그, • p, id, 클래스 #id, .class
  • 22. 셀렉터 • $("셀렉터") • 결과는 •[ 배열 ] • 메소드 체이닝 • $("img").hide()
 .fadeIn()
 .addClass("red") http://commons.wikimedia.org/wiki/File:Salad_bar.JPG
  • 23. 속성 • .attr(), .prop(), .css() • getter, setter 한 끝 차이 • .val() • .val("new • 설정 value") 객체(config object) • 2개 이상의 속성 • {width: "60px", height: "80px"}
  • 24. 이벤트 • .on("타입", 함수) • $("button").on("click", • 1.7부터 • 예전 pop); on()으로 통일 .bind(), .live(), .delegate() • .bind("click",…) • .off() 로 해제 단축 .click()
  • 25. Ajax • http://api.jquery.com/category/ajax/ • $.ajax() • 단축 함수 • $.get(), $.post() • $.getJSON(), • .load() $.getScript()
  • 26. jQuery 패밀리 • jQueryUI • UI 라이브러리 • jQueryMobile • 모바일 웹 앱을 위한 프레임워크 • Sizzle • JS용 빠른 CSS 엔진 • QUnit • JS 유닛 테스트 프레임워크
  • 27. jQuery 생태계 • 플러그인 • 커뮤니티 • 컨퍼런스
  • 28. jQuery Show • 디버깅과 연결 • Ajax http://www.flickr.com/photos/ul_digital_library/10922274335
  • 29. jQuery API http://api.jquery.com • Ajax • Dimensions • Offset • Attributes • Effects • Properties • Callbacks Object• Events • Removed • Core • Forms • Selectors • CSS • Internals • Traversing • Data • Manipulation • Utilities • Deferred Object • Miscellaneous • Version • Deprecated
  • 30. 참고 • http://jquery.com • http://www.slideshare.net/1Marc/jqueryessentials • https://learn.jquery.com • http://github.com/jquery/jquery • http://ejohn.org