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