jQuery 구조와 기능
허광남
kenu@okjsp.net

About me
•
OKJSP 설립, 공동대표
•
표준프레임워크 에반젤리스트
•
OKdevTV afreeca.com/kenuheo
•
나는 프로그래머다, 플랫폼을 말하다 공동집필
•
okjsp.net
okjsp.tistory.com
github.com/kenu

오늘 얘기는
•
jQuery 아키텍처
•
jQuery 개발도구
•
jQuery 활용

jQuery 아키텍처
• JavaScript
기반
• window.document
필요
jQuery
plugins
jQuery
JavaScript

1984生 John Resig
2006/03/22 첫 커밋
https://github.com/jquery/jquery/commits/master?page=158

ajax, core, event, fx, sort, tmpl
https://github.com/jquery/jquery/tree/8a4a1edf047f2c272f663866eb7b5fcd644d65b3

core.js

core.js
• 처음엔
Prototype.js 기반
• JavaScript에서
• var
|| 란?
$a = a || document;
(a !== undefined
&& a !== false
&& a !== null) {
$a = a;
} else {
$a = document;
}
• if

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개발
안 할 줄은 몰랐어,
필근아
• 네가

Brackets.io
•
Adobe의 무료 도구
•
http://brackets.io
•
Live Preview
•
with Chrome

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
• 3종
Selector
세트
• 태그,
• p,
id, 클래스
#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",
• 1.7부터
• 예전
pop);
on()으로 통일
.bind(), .live(), .delegate()
• .bind("click",…)
• .off()
로 해제
단축 .click()

Ajax
• http://api.jquery.com/category/ajax/
• $.ajax()
• 단축
함수
• $.get(),
$.post()
• $.getJSON(),
• .load()
$.getScript()

jQuery 패밀리
•
jQueryUI
•
UI 라이브러리
•
jQueryMobile
•
모바일 웹 앱을 위한 프레임워크
•
Sizzle
•
JS용 빠른 CSS 엔진
•
QUnit
•
JS 유닛 테스트 프레임워크

jQuery 생태계
• 플러그인
• 커뮤니티
• 컨퍼런스

jQuery Show
• 디버깅과
연결
• Ajax
http://www.flickr.com/photos/ul_digital_library/10922274335

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

참고
•
http://jquery.com
•
http://www.slideshare.net/1Marc/jqueryessentials
•
https://learn.jquery.com
•
http://github.com/jquery/jquery
•
http://ejohn.org