jQuery 구조와 기능
42 likes10,744 views
2014/02/26 발표 자료입니다. jQuery에 대한 어제, 오늘, ... 입니다.
![before jQuery
• JSON
•
{key: value, key2: value}
•
[value, value]
• 자바스크립트
• function
변수
• 대소문자
구분](https://image.slidesharecdn.com/jquery-140222041649-phpapp01/85/jQuery-21-320.jpg)
![셀렉터
• $("셀렉터")
• 결과는
•[
배열
]
• 메소드
체이닝
• $("img").hide()
.fadeIn()
.addClass("red")
http://commons.wikimedia.org/wiki/File:Salad_bar.JPG](https://image.slidesharecdn.com/jquery-140222041649-phpapp01/85/jQuery-23-320.jpg)
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