description js basic and jquery

1. JavaScript 기본과
JQuery의 활용
2015.04.25
김정기

2. 목차
• 텍스트 에디터
• 브라우저
• JavaScript 기본
• JQuery 활용
• JQuery 플러그인

3. 텍스트 에디터
• Brackets 추천
• Live Preview With Chrome
• Code Assistance Highlighting
• Adobe에서 무료 제공
• http://brackets.io

4. 브라우저
• 크롬 추천
• http://goo.gl/2nsSFf
• http://goo.gl/NMQrJX
• https://developer.chrome.com/extensions/tut_debugging

5. 브라우저
• 크롬 익스텐션 추천
• http://ppss.kr/archives/38241
• http://www.itworld.co.kr/slideshow/91136
• http://blog.jqdom.com/?p=573

6. • 그럼 본격적으로 시작합니다.

7. JavaScript 기본
• 브라우저에 내장된 인터프리터에 의해 동작되는 언어
• Loose Type
• 프로토타입 상속
• 람다
• 전역변수를 통한 연결

8. JavaScript 기본
• Loose Type
• 컴파일러 언어와 달리 실행 시점에 객체 구조 정의 및 실행
• 프로토타입 부모 객체에 대한 변경시 상속 객체 동적 반영
• 실행시점에 동적으로 구조 추가, 변경, 삭제 가능
• 타입 캐스팅이 필요없음

9. JavaScript 기본
• 람다
• 모든 타입의 값, 객체는 변수 할당이나 함수 파라미터 전달

10. JavaScript 기본
• 예약어
abstract
boolean break type
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function goto
if implements import in instanceof int interface
long native new null
package private protected public return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void while with

11. JavaScript 기본
• 자바스크립트의 기본 타입 5가지
• number
• string
• boolean
• null
• undefined

12. JavaScript 기본
• typeof
• 현재 값의 타입 식별자를 string으로 변환

13. JavaScript 기본
• operator
산술 연산자
+ - * / %
비교 연산자
== != < > <= >= ( 타입등동 비교 === !==)
논리 연산자
&& || !
비트 연산자
& | ^ >> >>> <<
3항 연산자
? :

14. JavaScript 기본
• 값 vs 참조
타입# 할당#및#복사# arguments#전달# 비교#
Number# 값# 값# 값#
Boolean# 값# 값# 값#
String# 불변(참조에#근접)# 불변(참조에#근접)#
#
불변(참조에#근접)#
#
Object# 참조# 참조# 참조#

15. JavaScript 기본
• Statement
var
if
switch
while
do
for
break
continue
return

16. JavaScript 기본
• return
• 함수내에 return이 없으면 반환값은 undefined
• constructor 함수는 return이 없어도 새로 생성된 객체의 this를 참조함

17. JavaScript 기본
• Array vs Object
• 접근 이름이 임의적인 string일때 Object
• 접근 이름이 순차적인 index일때 Array

18. JavaScript 기본
• Function 방식
• Function 방식
• 메소드 방식
• Constructor 방식
• Apply, Call 방식

19. JavaScript 기본
• Function this context
• 함수 호출 방식에 따라 대상이 다름
• 객체 자신을 접근할 수 있는 방법 제공
• 실행시점에 동적으로 바인딩 가능
실행방법% this%
function% global%object%===%window%
method% the%object%
constructor% the%new%object%
Apply,Call% arguments[0]%object%

20. JavaScript 기본
• Function 변수 Scope
• 범위는 function 블록(){}
• 변수가 함수 내에 선언시 함수 밖에서 접근 확인 불가
• if, for문 블럭에서도 접근 및 확인 가능

21. JavaScript 기본
• Function 변수 Scope

22. JavaScript 기본
• Function 변수 Scope

23. JavaScript 기본
• Function Closure
• 함수 결과 반환되더라도 내부 함수의 데이터 유지
• 내부 함수 및 변수 처리를 캡슐화
• 코드를 간결 유지 , 불필요한 외부 차단

24. JavaScript 기본
• BOM
• 브라우저와의 인터렉션을 위한 자바스크립트 API
인터페이스
• 브라우저가 제공하는 객체 관계를 트리 형태로 표현
• 브라우저 자체의 동작을 제어하는 데 필수사항

25. JavaScript 기본
• BOM

27. JavaScript 기본
• BOM
• window
• 브라우저에서 기본적으로 제공하는 객체
• 전역객체 영역
•

28. JavaScript 기본
• BOM
• window.navigator
• window.location
• window.history
• window.screen
• window.open()/close()
• window.moveTo()/resizeTo()
• window.alert()/window.prompt()/window.confirm()
• window.setTimeout()/window.setInterval()

29. JavaScript 기본
• DOM

30. JavaScript 기본
• DOM
• 탐색
returnelementornull
returnarrayelementore
mptyarray

31. JavaScript 기본
• DOM
• 조작

32. JavaScript 기본
• DOM
• 속성

33. JavaScript 기본
• Event
• 종류

34. JavaScript 기본
• Event
• 이벤트 처리 방식
• 사용자 이벤트 발생 시 미리 등록된 콜백 함수를 비동기 로 실행
• 이벤트 리스너 연결
• DOM 0 (전통적인 연결 방법)
• DOM 2 (W3C 연결 방법)
• 이벤트 단계
• 캡처링
• 버블링

35. JavaScript 기본
• Event
• 이벤트 리스너 연결
• DOM 0 (전통적인 연결 방법)

36. JavaScript 기본
• Event
• 이벤트 리스너 연결
• DOM 2 (W3C 연결 방법)

37. JavaScript 기본
• Event
• 이벤트 단계
• 캡처링 vs 버블링

38. JavaScript 기본
• 어려우시죠?
• 그래서 다음 책을 추천드립니다.

39. JavaScript 기본
초급# 중급# 고급# 라이브러리# 최적화#

40. • 잠시 휴식시간을...

41. JQuery 활용

42. JQuery 활용
• Pure JavaScript vs JQuery
•
•
var divs = document.getElementByTagName(‘div’);
for (i = 0; i divs.length; i++) {
divs[i].style.display = ‘none’;
}
===
$(“div”).hide();

43. JQuery 활용
• 철학
• 1. 원하는 HTML Element를 찾아서
• 2. 특정 작업을 수행

44. JQuery 활용
• 원하는 HTML Element를 찾아서
$(“#content”) id로 element 찾음
$(“li:first”) 첫번째 목록의 element 찾음
$(“tr:odd”) 테이블의 짝수 줄 element 찾음
$(“a[target=_blank]”) a 태그 중 target이 _blank를 찾음
$(“form[id^=step]”) form id중 step으로 시작하는
element 찾음

45. JQuery 활용
• 특정 작업을 수행
$(“#content”).addClass(‘redbox’);
$(“#content”).fadeOut();
Chain Methods
$(“#content”).addClass(‘redbox’).fadeOut();

46. JQuery 활용
• 많이 사용하는 메소드 중 하나
$(...).html();
$(...).html(“divhello/div”);
$(...).html(function(i){
return “divhello “ + i + “/div”;
});

47. JQuery 활용
• 많이 사용하는 메소드 중 하나
• DOM Ready 시점에 등록된 익명함수 실행
• DOM Ready vs Window.onload
$(function(){
// dom ready 시점 이후에 실행할 코드 작성
});
$(document).ready(function(){}) 축약형

48. JQuery 활용
• http://api.jquery.com
• http://oscarotero.com/jquery/

49. JQuery 활용
• http://api.jquery.com
•Elements 이동:
append(), appendTo(), before(), after()
•속성
css(), attr(), html(), val(), addClass()
•이벤트
trigger(), on(), off(), click() ( pre 1.7 unbind(), bind(), live(), delegate()… )
•효과
show(), fadeIn(), fadeOut(), toggle(), animate()
•탐색
closet(), find(), is(), prevAll(), next(), hasClass()

50. JQuery 활용
• Element 이동
$(“#foo”).append(“ptest/p”);
html body
divjQuery/div
div id=”foo”exampleptest/p/
div
/html

51. JQuery 활용
• 속성
Get Set
.attr(‘id’) .attr(‘id’, ‘foo’)
.html() .html(“phi/p”)
.val() .val(“new val”)
.css(“top”) .css(“top”, “80px”)
.width() .width(60)

52. JQuery 활용
• 이벤트
$(“button”).click(function(){
});
$(“button”).bind(‘click’,function(){
});
$(“button”).trigger(‘click’);

53. JQuery 활용
• 효과
div 클릭 시, slide up / slide down 효과 적용
$(...).click(function(){ $
(“div:first”).slideToggle();
});
1s동안 500px의 크기로 애니메이션 진행
$(...).animate({ “width”: “500px” }, 1000);

54. JQuery 활용
• 탐색
테이블 엘리먼트의 다음 엘리먼트내에 p 탐색
$(“table”).next() .find(“p” );
html
body
table/table
div
pfoo/p
spanbar/span
/div
/body
/html

55. JQuery 플러그인
• jQuery UI
• http://jqueryui.com
• Plugins
• http://plugins.jquery.com

56. REF
• http://webjawns.com/2009/08/25-must-have-cheat-sheets-for-web-
developers/
• https://github.com/tipjs/javascript-style-guide
http://todomvc.com/examples/jquery/#/all
http://www.slideshare.net/jisuyoun/javascript-closure-13832628?related=1
http://www.slideshare.net/1Marc/jquery-essentials
• http://www.slideshare.net/netil/ss-28588952?next_slideshow=1
• http://www.slideshare.net/heungrae_kim/jco-frontend?
qid=275609e8-8754-4d7e-9981-a789c77b2b54v=qf1b=from_search=5

57. • 감사합니다.