java script 기본과 jquery의 활용
TRANSCRIPT
JavaScript 기본과 JQuery의 활용
2015.04.25
김정기
목차
• 텍스트 에디터
• 브라우저
• JavaScript 기본
• JQuery 활용
• JQuery 플러그인
텍스트 에디터
• Brackets 추천
• Live Preview With Chrome
• Code Assistance Highlighting
• Adobe에서 무료 제공
• http://brackets.io
브라우저• 크롬 추천
• http://goo.gl/2nsSFf
• http://goo.gl/NMQrJX
• https://developer.chrome.com/extensions/tut_debugging
브라우저• 크롬 익스텐션 추천
• http://ppss.kr/archives/38241
• http://www.itworld.co.kr/slideshow/91136
• http://blog.jqdom.com/?p=573
• 그럼 본격적으로 시작합니다.
JavaScript 기본
• 브라우저에 내장된 인터프리터에 의해 동작되는 언어
• Loose Type
• 프로토타입 상속
• 람다
• 전역변수를 통한 연결
JavaScript 기본
• Loose Type
• 컴파일러 언어와 달리 실행 시점에 객체 구조 정의 및 실행
• 프로토타입 부모 객체에 대한 변경시 상속 객체 동적 반영
• 실행시점에 동적으로 구조 추가, 변경, 삭제 가능
• 타입 캐스팅이 필요없음
JavaScript 기본 • 람다
• 모든 타입의 값, 객체는 변수 할당이나 함수 파라미터 전달
JavaScript 기본• 예약어
abstractboolean break typecase catch char class const continuedebugger default delete do doubleelse enum export extendsfalse final finally float for function gotoif implements import in instanceof int interfacelong native new null package private protected public returnshort static super switch synchronizedthis throw throws transient true try typeof var volatile void while with
JavaScript 기본• 자바스크립트의 기본 타입 5가지
• number
• string
• boolean
• null
• undefined
JavaScript 기본• typeof
• 현재 값의 타입 식별자를 string으로 변환
JavaScript 기본
• operator
산술 연산자
+ - * / %
비교 연산자
== != < > <= >= ( 타입등동 비교 === !==) 논리 연산자
&& || ! 비트 연산자
& | ̂ >> >>> <<
3항 연산자
? :
JavaScript 기본
• 값 vs 참조
타입# 할당#및#복사# arguments#전달# 비교#
Number# 값# 값# 값#
Boolean# 값# 값# 값#
String# 불변(참조에#근접)# 불변(참조에#근접)##
불변(참조에#근접)##
Object# 참조# 참조# 참조#
JavaScript 기본
• Statement
var if switch while do for break continue return
JavaScript 기본
• return
• 함수내에 return이 없으면 반환값은 undefined
• constructor 함수는 return이 없어도 새로 생성된 객체의 this를 참조함
JavaScript 기본
• Array vs Object
• 접근 이름이 임의적인 string일때 Object
• 접근 이름이 순차적인 index일때 Array
JavaScript 기본• Function 방식
• Function 방식
• 메소드 방식
• Constructor 방식
• Apply, Call 방식
JavaScript 기본
• Function this context
• 함수 호출 방식에 따라 대상이 다름
• 객체 자신을 접근할 수 있는 방법 제공
• 실행시점에 동적으로 바인딩 가능
실행방법% this%
function% global%object%===%window%
method% the%object%
constructor% the%new%object%
Apply,Call% arguments[0]%object%
JavaScript 기본
• Function 변수 Scope
• 범위는 function 블록(){}
• 변수가 함수 내에 선언시 함수 밖에서 접근 확인 불가
• if, for문 블럭에서도 접근 및 확인 가능
JavaScript 기본
• Function 변수 Scope
JavaScript 기본
• Function 변수 Scope
JavaScript 기본
• Function Closure
• 함수 결과 반환되더라도 내부 함수의 데이터 유지
• 내부 함수 및 변수 처리를 캡슐화
• 코드를 간결 유지 , 불필요한 외부 차단
JavaScript 기본
• BOM
• 브라우저와의 인터렉션을 위한 자바스크립트 API 인터페이스
• 브라우저가 제공하는 객체 관계를 트리 형태로 표현
• 브라우저 자체의 동작을 제어하는 데 필수사항
JavaScript 기본• BOM
����������� ������������������
JavaScript 기본• BOM
• window
• 브라우저에서 기본적으로 제공하는 객체
• 전역객체 영역
•
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()
JavaScript 기본• DOM
JavaScript 기본• DOM
• 탐색
return&element&or&null&
return&array&element&or&empty&array&
JavaScript 기본• DOM
• 조작
JavaScript 기본• DOM
• 속성
JavaScript 기본• Event
• 종류
JavaScript 기본• Event
• 이벤트 처리 방식
• 사용자 이벤트 발생 시 미리 등록된 콜백 함수를 비동기 로 실행
• 이벤트 리스너 연결
• DOM 0 (전통적인 연결 방법)
• DOM 2 (W3C 연결 방법)
• 이벤트 단계
• 캡처링
• 버블링
JavaScript 기본• Event
• 이벤트 리스너 연결
• DOM 0 (전통적인 연결 방법)
JavaScript 기본• Event
• 이벤트 리스너 연결
• DOM 2 (W3C 연결 방법)
JavaScript 기본• Event
• 이벤트 단계
• 캡처링 vs 버블링
JavaScript 기본
• 어려우시죠?
• 그래서 다음 책을 추천드립니다.
JavaScript 기본초급# 중급# 고급# 라이브러리# 최적화#
• 잠시 휴식시간을...
JQuery 활용
JQuery 활용
• Pure JavaScript vs JQuery
•
•
var divs = document.getElementByTagName(‘div’);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = ‘none’;
}
===
$(“div”).hide();
JQuery 활용
• 철학
• 1. 원하는 HTML Element를 찾아서
• 2. 특정 작업을 수행
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 찾음
JQuery 활용
• 특정 작업을 수행
$(“#content”).addClass(‘redbox’);
$(“#content”).fadeOut();
Chain Methods
$(“#content”).addClass(‘redbox’).fadeOut();
JQuery 활용
• 많이 사용하는 메소드 중 하나
$(...).html();
$(...).html(“<div>hello</div>”);
$(...).html(function(i){ return “<div>hello “ + i + “</div>”;
});
JQuery 활용• 많이 사용하는 메소드 중 하나
• DOM Ready 시점에 등록된 익명함수 실행
• DOM Ready vs Window.onload
$(function(){ // dom ready 시점 이후에 실행할 코드 작성
});
$(document).ready(function(){}) 축약형
JQuery 활용• http://api.jquery.com
• http://oscarotero.com/jquery/
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()
JQuery 활용
• Element 이동
$(“#foo”).append(“<p>test</p>”); <html> <body>
<div>jQuery</div>
<div id=”foo”>example<p>test</p></div>
</html>
JQuery 활용
• 속성
Get Set
.attr(‘id’) .attr(‘id’, ‘foo’)
.html() .html(“<p>hi</p>”)
.val() .val(“new val”)
.css(“top”) .css(“top”, “80px”)
.width() .width(60)
JQuery 활용
• 이벤트
$(“button”).click(function(){
});$(“button”).bind(‘click’,function(){
});
$(“button”).trigger(‘click’);
JQuery 활용
• 효과
div 클릭 시, slide up / slide down 효과 적용
$(...).click(function(){ $(“div:first”).slideToggle();
});
1s동안 500px의 크기로 애니메이션 진행
$(...).animate({ “width”: “500px” }, 1000);
JQuery 활용
• 탐색
테이블 엘리먼트의 다음 엘리먼트내에 p 탐색
$(“table”).next() .find(“p” ); <html>
<body>
<table></table>
<div>
<p>foo</p>
<span>bar</span>
</div>
</body>
</html>
JQuery 플러그인
• jQuery UI
• http://jqueryui.com
• Plugins
• http://plugins.jquery.com
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-a789c77b2b54&v=qf1&b=&from_search=5
• 감사합니다.