jQuery 구조와 기능

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 필요

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

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 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