jQuery 구조와 기능
•
42 likes•10,735 views
2014/02/26 발표 자료입니다. jQuery에 대한 어제, 오늘, ... 입니다.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to jQuery 구조와 기능
Similar to jQuery 구조와 기능 (20)
More from Kenu, GwangNam Heo
More from Kenu, GwangNam Heo (20)
jQuery 구조와 기능
- 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; }
- 12. jQuery 개발도구 • JavaScript는 기본 • Syntax Highlighting
- 13. 이클립스 JavaEE • JSDT jQuery 플러그인
- 14. 프론트엔드 개발도구 • 너무 무거운 이클립스 • 가벼운 개발 도구 http://szhaddad2.deviantart.com/art/Wolverine-Spiderman-and-Hulk-49188690
- 15. 브라우저 개발도구 • Console 콘솔에서 JS개발 안 할 줄은 몰랐어, 필근아 • 네가
- 16. Brackets.io • Adobe의 무료 도구 • http://brackets.io • Live Preview • with Chrome
- 17. IE는 없나요? • F12 개발도구 • http://msdn.microsoft.com/ko-kr/ library/ie/bg182326(v=vs.85) • DOM 탐색기, 콘솔, 디버거, 네트워크, UI 응답성, 프로파일러, 메모리, 에뮬레이션
- 18. IE11 좋아요 • IE6를 쓰신다고요? • 지못미 • 세상엔 좋은 일터가 많이 ...
- 19. Console Show • JSON • 동적 스크립트 로딩 • http://github.com/ kenu/oksample http://www.flickr.com/photos/ul_digital_library/10922274335
- 20. jQuery 활용 • 1단계 셀렉터 • 2단계 속성 • 3단계 이벤트 • 4단계 Ajax • 5단계 下山
- 21. before jQuery • JSON • {key: value, key2: value} • [value, value] • 자바스크립트 • function 변수 • 대소문자 구분
- 22. 셀렉터 • 원래 이름은 jSelect? • CSS • 3종 Selector 세트 • 태그, • p, id, 클래스 #id, .class
- 23. 셀렉터 • $("셀렉터") • 결과는 •[ 배열 ] • 메소드 체이닝 • $("img").hide() .fadeIn() .addClass("red") http://commons.wikimedia.org/wiki/File:Salad_bar.JPG
- 24. 속성 • .attr(), .prop(), .css() • getter, setter 한 끝 차이 • .val() • .val("new • 설정 value") 객체(config object) • 2개 이상의 속성 • {width: "60px", height: "80px"}
- 25. 이벤트 • .on("타입", 함수) • $("button").on("click", • 1.7부터 • 예전 pop); on()으로 통일 .bind(), .live(), .delegate() • .bind("click",…) • .off() 로 해제 단축 .click()
- 26. Ajax • http://api.jquery.com/category/ajax/ • $.ajax() • 단축 함수 • $.get(), $.post() • $.getJSON(), • .load() $.getScript()
- 27. jQuery 패밀리 • jQueryUI • UI 라이브러리 • jQueryMobile • 모바일 웹 앱을 위한 프레임워크 • Sizzle • JS용 빠른 CSS 엔진 • QUnit • JS 유닛 테스트 프레임워크
- 28. jQuery 생태계 • 플러그인 • 커뮤니티 • 컨퍼런스
- 29. jQuery Show • 디버깅과 연결 • Ajax http://www.flickr.com/photos/ul_digital_library/10922274335
- 30. 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