책 한눈에 보기
| 항목 |
내용 |
| 도서명 |
JavaScript+jQuery 정복 |
| 저자 |
김상형 |
| 키워드 |
JavaScript, jQuery, DOM, BOM, 이벤트, 선택자, 플러그인, 유틸리티, 애니메이션, 인코딩 |
1. 자바스크립트
- 스크립트의 실행 주체는 웹 브라우저이며, 브라우저에서 돌아가는 언어를 클라이언트 스크립트, 서버에서 HTML을 만들어 내는 언어를 서버 스크립트라 구분함.
- 변수 선언이 빠지면 단순 대입문으로 처리됨. 변수는 전역/지역으로 나뉘며, 범위에 따라 생명주기와 접근성이 달라짐.
- 형 변환:
Number(문자열)은 일시적으로 숫자형으로, String(숫자)은 문자열로, Boolean(값)은 논리형으로 변환함.
- 이러한 명시적 변환을 통해 비교·연산 시 의도치 않은 암묵적 변환 부작용을 줄일 수 있음.
2. 제어문
- 예외는 실행 중 발생하는 비정상 상황으로, 문법 오류(파싱 오류)와는 구분됨.
- 메소드 존재 유무를 이용한 안전 호출:
obj.method && obj.method()처럼 &&로 연결하면 존재할 때만 호출함.
3. 함수
return을 만나면 즉시 호출 지점으로 복귀.- 선언적 함수는 호이스팅되어 정의·호출 순서가 바뀌어도 동작하지만, 익명 함수를 변수에 대입한 경우엔 정의 후 호출해야 함.
- 클로저는 외부 스코프의 지역 변수를 소멸시키지 않고 보존하여 이후에도 접근 가능하게 함.
- 재귀 호출은 함수가 자기 자신을 다시 호출하는 형태로, 탈출 조건이 필수임.
4. 인코딩
- 인코딩은 문자열을 표기 가능한 부호로 변환하는 과정이며, 한글도 내부적으로 16진수 코드로 표현됨.
- 인코딩의 역과정은 디코딩이며, 목적(전송·저장·표시)에 따라 인코딩 수준을 적절히 선택해야 함.
5. 객체
- 객체 범주는 내장 객체, BOM, DOM, 사용자 정의 객체로 나뉨.
- 내장 객체는 언어가 제공하므로 브라우저와 무관하게 일관된 사용법을 가짐.
- BOM은 브라우저에 내장된 객체, DOM은 문서 구조 접근/조작용 객체.
- 멤버 참조는
obj.prop 외에 obj["prop"]도 가능. with(obj){ ... }는 블록 내에서 객체명을 생략하지만, 가독성·성능 이슈로 신중히 사용.
new로 생성자 호출 → 객체 반환 흐름을 이해해야 함.
6. 원시타입 객체
- Object는 모든 객체의 루트로, 공통 인터페이스를 정의함.
- Number/String/Boolean 객체는 숫자/문자/진위형을 표현하며, 래퍼 객체로서 메서드를 제공함.
- 캡슐화(정보 은폐)는 임의 확장·수정을 금지하여 안정성을 높임. 일단 금지한 조작은 되돌릴 수 없음.
7. 배열
- 전통적 정의는 동종 타입의 정적 집합이나, JS 배열은 동적 크기/혼합 타입을 허용.
- 유사 배열은
length 등 배열과 비슷하게 다룰 수 있는 객체.
sort()는 요소를 문자열 비교 기준으로 정렬하므로, 숫자 정렬 시 비교 함수를 제공해야 함.
8. 내장 객체
charAt(n)은 n번째 문자, toUpperCase()/toLowerCase()는 대/소문자 변환.- 추출 메소드로 부분 문자열을 새로 생성해 반환.
RegExp는 패턴 기반 검색/치환, JSON은 원시값·객체·배열을 문자열로 표현하는 표기법임.
9. BOM
- BOM(Browser Object Model)은 브라우저/OS 정보를 읽거나 조작.
- 최상위
window는 웹 페이지 전체를 상징하며 자동 생성됨. window에 직접 속한 속성/메소드는 전역처럼 접근 가능.
10. DOM
- 자바스크립트의 목적은 실행 중 문서를 읽고/쓰고/구조와 스타일까지 조작하는 것.
- DOM(Document Object Model)은 HTML 문서를 객체로 표현한 트리이며, 노드 추가/삭제/수정으로 화면을 동적으로 바꿈.
11. 이벤트
- 웹 페이지는 사용자 조작·로드·에러 등 사건(Event)을 받아 적절히 반응해야 함.
- 키/마우스 정보 예:
ctrlKey/altKey/shiftKey, keyCode, screenX/Y, clientX/Y.
- 로딩 관련:
document의 ready(DOM 로드 완료).
- 키보드:
keydown(누름), keyup(뗌), keypress(길게 누름 중).
- 포커스 개념과
blur(다른 컨트롤로 이동) 이해가 필요.
href="#"는 빈 링크. 기본 동작 차단을 함께 고려해야 함.
12. jQuery
- 순수 JS는 편의성/호환성 측면에서 난이도가 있으므로 라이브러리로 추상화층을 제공하면 재사용성이 크게 향상됨.
- jQuery는 간결한 문법과 크로스 브라우저 호환성을 제공.
- 다만 jQuery가 모든 것을 대체하지 않으므로 JS 기본기는 필수.
- 배포는
.js 파일로 하며 인터프리터 특성상 소스 배포가 일반적.
- 메소드 체이닝으로 한 번 찾은 엘리먼트에 연속 조작.
- 선택 기본형:
$(선택자, [컨텍스트]). $와 다른 라이브러리 충돌 시 별칭 조정으로 해결.
13. 선택자
- jQuery의 핵심은 “선택 후 조작”.
- 선택자는 대상 엘리먼트를 찾는 검색식이며, 필요하면 필터/메소드로 범위를 세분화.
- jQuery 선택 결과는 배열성을 가진 jQuery 객체임(다수 대상 일괄 처리).
14. jQuery 메소드
each(cb)는 선택된 모든 엘리먼트에 대해 콜백 호출.find()는 재검색(후손 범위), children()은 바로 아래 자식만.contents()는 자식 텍스트/주석 포함 검색.parent()/parents()는 부모 한 개/모든 상위 조상.filter()는 현재 집합에서 추가 조건으로 좁힘.eq(n)은 n번째 하나를 분리 추출, end()는 선택 스택 되돌리기.
15. 문서 조작·구조
- 내용/HTML:
text(), html() / 스타일: css() / 속성: attr()
- Attribute는 태그 내 사용자 지정 값, Property는 DOM 엘리먼트의 속성 값으로 구분.
- 폼 값:
val() / 위치: position()
- 생성한 엘리먼트는 DOM 트리에 추가해야 화면에 나타남. jQuery로 동적 생성·삭제·재배치가 가능함.
16. 이벤트 (jQuery)
- jQuery는 이벤트를 고수준 추상화해 브라우저 간 문법을 일관되게 제공.
- 기본은 이벤트 등록 메소드로 핸들러를 연결.
- 장치·환경 확장으로 특수 이벤트는
bind()로, 미래 요소에는 delegate()를 사용.
- jQuery 1.7부터는
on/off로 이벤트 등록/해제를 통합함.
17. 유틸리티 메소드
- jQuery는 객체 메소드 외에도 유틸리티 함수를 제공(
$.trim, $.extend, $.each 등).
- 표시/숨김:
show()/hide() / 슬라이드: slideDown()/slideUp() / 페이드: fadeIn()/fadeOut()/fadeTo()
animate(속성객체, 속도, 이징, 콜백)으로 사용자 정의 애니메이션 구현 가능.
18. 플러그인
- jQuery는 jQuery.fn 프로토타입에 함수를 추가해 임의 확장이 쉬움.
- 실전에서 검증된 플러그인을 모은 jQuery UI가 널리 사용됨.
- UI 위젯 예: Accordion(접고 펼치기), DatePicker(날짜 선택), Dialog(대화상자), Resizable/Draggable/Selectable/Sortable 등.
💡 Quick Insight
- 타입 변환은 명시적으로:
Number/String/Boolean
- 함수는 호이스팅 차이를 이해(선언식 vs 표현식)
- DOM 조작은 선택(Selector) 품질이 좌우
- 이벤트는 등록/해제 일관성(
on/off)이 유지보수 핵심
- jQuery는 생산성을 높이되, JS 기본기가 최우선
마무리 생각
웹 페이지가 스크립트로 동작하는 전 과정을 순차적으로 훑을 수 있었다. 이벤트로 정적 페이지가 상황 대응형으로 바뀌고, DOM/BOM을 통해 구조·스타일까지 제어한다. jQuery는 “선택 후 조작”이라는 단순하지만 강력한 모델을 제공하지만, 근본은 언제나 자바스크립트에 있다. 두 번 읽으며 기본기와 라이브러리의 역할을 분리해 바라볼수록, 코드의 안정성과 가독성이 함께 올라간다.