Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java script 기본과 jquery의 활용

1,016 views

Published on

description js basic and jquery

Published in: Engineering
  • Be the first to comment

Java script 기본과 jquery의 활용

  1. 1. JavaScript 기본과 JQuery의 활용 2015.04.25 김정기
  2. 2. 목차 • 텍스트 에디터 • 브라우저 • JavaScript 기본 • JQuery 활용 • JQuery 플러그인
  3. 3. 텍스트 에디터 • Brackets 추천 • Live Preview With Chrome • Code Assistance Highlighting • Adobe에서 무료 제공 • http://brackets.io
  4. 4. 브라우저 • 크롬 추천 • http://goo.gl/2nsSFf • http://goo.gl/NMQrJX • https://developer.chrome.com/extensions/tut_debugging
  5. 5. 브라우저 • 크롬 익스텐션 추천 • http://ppss.kr/archives/38241 
 • http://www.itworld.co.kr/slideshow/91136
 • http://blog.jqdom.com/?p=573
  6. 6. • 그럼 본격적으로 시작합니다.
  7. 7. JavaScript 기본 • 브라우저에 내장된 인터프리터에 의해 동작되는 언어 • Loose Type • 프로토타입 상속 • 람다 • 전역변수를 통한 연결
  8. 8. JavaScript 기본 • Loose Type • 컴파일러 언어와 달리 실행 시점에 객체 구조 정의 및 실행 • 프로토타입 부모 객체에 대한 변경시 상속 객체 동적 반영 • 실행시점에 동적으로 구조 추가, 변경, 삭제 가능 • 타입 캐스팅이 필요없음
  9. 9. JavaScript 기본 • 람다 • 모든 타입의 값, 객체는 변수 할당이나 함수 파라미터 전달
  10. 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. 11. JavaScript 기본 • 자바스크립트의 기본 타입 5가지 • number • string • boolean • null • undefined
  12. 12. JavaScript 기본 • typeof • 현재 값의 타입 식별자를 string으로 변환
  13. 13. JavaScript 기본 • operator 산술 연산자 + - * / % 비교 연산자 == != < > <= >= ( 타입등동 비교 === !==) 논리 연산자 && || ! 비트 연산자 & | ^ >> >>> << 3항 연산자 ? :
  14. 14. JavaScript 기본 • 값 vs 참조 타입# 할당#및#복사# arguments#전달# 비교# Number# 값# 값# 값# Boolean# 값# 값# 값# String# 불변(참조에#근접)# 불변(참조에#근접)# # 불변(참조에#근접)# # Object# 참조# 참조# 참조#
  15. 15. JavaScript 기본 • Statement var if switch while do for break continue return
  16. 16. JavaScript 기본 • return • 함수내에 return이 없으면 반환값은 undefined • constructor 함수는 return이 없어도 새로 생성된 객체의 this를 참조함
  17. 17. JavaScript 기본 • Array vs Object • 접근 이름이 임의적인 string일때 Object • 접근 이름이 순차적인 index일때 Array
  18. 18. JavaScript 기본 • Function 방식 • Function 방식 • 메소드 방식 • Constructor 방식 • Apply, Call 방식
  19. 19. JavaScript 기본 • Function this context • 함수 호출 방식에 따라 대상이 다름 • 객체 자신을 접근할 수 있는 방법 제공 • 실행시점에 동적으로 바인딩 가능 실행방법% this% function% global%object%===%window% method% the%object% constructor% the%new%object% Apply,Call% arguments[0]%object%
  20. 20. JavaScript 기본 • Function 변수 Scope • 범위는 function 블록(){} • 변수가 함수 내에 선언시 함수 밖에서 접근 확인 불가 • if, for문 블럭에서도 접근 및 확인 가능
  21. 21. JavaScript 기본 • Function 변수 Scope
  22. 22. JavaScript 기본 • Function 변수 Scope
  23. 23. JavaScript 기본 • Function Closure • 함수 결과 반환되더라도 내부 함수의 데이터 유지 • 내부 함수 및 변수 처리를 캡슐화 • 코드를 간결 유지 , 불필요한 외부 차단
  24. 24. JavaScript 기본 • BOM • 브라우저와의 인터렉션을 위한 자바스크립트 API 인터페이스 • 브라우저가 제공하는 객체 관계를 트리 형태로 표현 • 브라우저 자체의 동작을 제어하는 데 필수사항
  25. 25. JavaScript 기본 • BOM

×