• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery 구조와 기능
 

jQuery 구조와 기능

on

  • 5,643 views

2014/02/26 발표 자료입니다.

2014/02/26 발표 자료입니다.
jQuery에 대한 어제, 오늘, ... 입니다.

Statistics

Views

Total Views
5,643
Views on SlideShare
4,908
Embed Views
735

Actions

Likes
23
Downloads
73
Comments
0

9 Embeds 735

http://okjsp.tistory.com 517
http://www.hanrss.com 151
http://feedly.com 59
http://rss.devsearch.co.kr 2
http://casky18.rssing.com 2
http://rss.com 1
http://digg.com 1
http://inoreader.com 1
http://www.inoreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery 구조와 기능 jQuery 구조와 기능 Presentation Transcript

    • 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