Downloaded 16 times
![JavaScript 기본
• Function this context
• 함수 호출 방식에 따라 대상이 다름
• 객체 자신을 접근할 수 있는 방법 제공
• 실행시점에 동적으로 바인딩 가능
실행방법% this%
function% global%object%===%window%
method% the%object%
constructor% the%new%object%
Apply,Call% arguments[0]%object%](https://image.slidesharecdn.com/javascriptjqueryslideshare-150426203947-conversion-gate02/75/Java-script-jquery-19-2048.jpg)
![JQuery 활용
• Pure JavaScript vs JQuery
•
•
var divs = document.getElementByTagName(‘div’);
for (i = 0; i divs.length; i++) {
divs[i].style.display = ‘none’;
}
===
$(“div”).hide();](https://image.slidesharecdn.com/javascriptjqueryslideshare-150426203947-conversion-gate02/75/Java-script-jquery-42-2048.jpg)
![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 찾음](https://image.slidesharecdn.com/javascriptjqueryslideshare-150426203947-conversion-gate02/75/Java-script-jquery-44-2048.jpg)
More Related Content
![[대구] 준성이엔씨 서비스 홍보문서](https://cdn.slidesharecdn.com/ss_thumbnails/random-151105091005-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[울산]이이알앤씨 기업 홍보문서](https://cdn.slidesharecdn.com/ss_thumbnails/random-151110011709-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[하코사세미나] 한 시간 만에 배우는 Jquery](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-151208015421-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2CAMPUS]JavaScript 다시 시작하기](https://cdn.slidesharecdn.com/ss_thumbnails/d2campusjavascript-150822065956-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Java script 기본과 jquery의 활용
- 1.
- 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 기본 • LooseType • 컴파일러 언어와 달리 실행 시점에 객체 구조 정의 및 실행 • 프로토타입 부모 객체에 대한 변경시 상속 객체 동적 반영 • 실행시점에 동적으로 구조 추가, 변경, 삭제 가능 • 타입 캐스팅이 필요없음
- 9. JavaScript 기본 • 람다 •모든 타입의 값, 객체는 변수 할당이나 함수 파라미터 전달
- 10. JavaScript 기본 • 예약어 abstract booleanbreak 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.
- 16. JavaScript 기본 • return •함수내에 return이 없으면 반환값은 undefined • constructor 함수는 return이 없어도 새로 생성된 객체의 this를 참조함
- 17. JavaScript 기본 • Arrayvs Object • 접근 이름이 임의적인 string일때 Object • 접근 이름이 순차적인 index일때 Array
- 18. JavaScript 기본 • Function방식 • Function 방식 • 메소드 방식 • Constructor 방식 • Apply, Call 방식
- 19. JavaScript 기본 • Functionthis 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 기본 • FunctionClosure • 함수 결과 반환되더라도 내부 함수의 데이터 유지 • 내부 함수 및 변수 처리를 캡슐화 • 코드를 간결 유지 , 불필요한 외부 차단
- 24. JavaScript 기본 • BOM •브라우저와의 인터렉션을 위한 자바스크립트 API 인터페이스 • 브라우저가 제공하는 객체 관계를 트리 형태로 표현 • 브라우저 자체의 동작을 제어하는 데 필수사항
- 25.
- 26.
- 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.
- 30. JavaScript 기본 • DOM •탐색 returnelementornull returnarrayelementore mptyarray
- 31.
- 32.
- 33.
- 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.
- 42. JQuery 활용 • PureJavaScript 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 활용 • 속성 GetSet .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“phi/p”) .val() .val(“new val”) .css(“top”) .css(“top”, “80px”) .width() .width(60)
- 52.
- 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 플러그인 • jQueryUI • 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.