『DOM 스크립트』

1장. 간단히 살펴보는 자바스크립트 역사
자바스크립트의 출현
문서 객체 모델(DOM)에 대해서
브라우저 업체 간 전쟁
DHTML은 모호한 용어
브라우저 간 비호환 문제 발생
표준의 중요성 인식
다른 분야에서의 표준
브라우저 전쟁 종전 선언
웹 표준 시대의 개막
2장에서 다룰 내용

2장. 자바스크립트 문법 익히기
코드 작성 전에 알아야 할 점
문법 공부
명령문
주석
변수
데이터 형식
문자열
숫자
불린 값
배열
결합형 배열
연산자
산술 연산자
조건문
비교 연산자
논리 연산자
반복문
while문
do...while문
for문
함수
변수 유효 영역
객체
네이티브 객체
호스트 객체
3장에서 다룰 내용

3장. 문서 객체 모델(DOM)이란?
D는 문서입니다
O는 객체입니다
M은 모델입니다
노드
요소 노드
텍스트 노드
속성 노드
CSS와의 관계
getElementById
getElementsByTagName
속성 다루기
getAttribute
setAttribute
4장에서 다룰 내용

4장. 자바스크립트로 만드는 온라인 사진첩
마크업 코드 작성하기
자바스크립트 작성하기
DOM 전환
함수 완성
자바스크립트 적용하기
이벤트 핸들러
함수 확장
childNodes 프로퍼티
nodeType 프로퍼티
마크업에 설명문 요소 추가
설명문을 자바스크립트로 바꾸기
nodeValue 프로퍼티
firstChild와 lastChild
nodeValue로 설명 추가하기
5장에서 다룰 내용

5장. 꼭 알아야 할 핵심 기본기
자바스크립트에 대한 오해
문제점 많은 코드의 전파
플래시 사례
꼭 필요한지 철저히 검토하기
단계적 기능 축소
javascript: 슈도 프로토콜
인라인 이벤트 핸들러
사용자 배려
CSS 기술의 교훈
단계적 기능 향상
스크립트 분리
하위 호환성
브라우저 검사
6장에서 다룰 내용

6장. 사진첩 기능 개선하기
복습
단계적 기능 축소가 가능한가?
스크립트를 분리했는가?
이벤트 핸들러 추가
점검 사항
변수 지정하기
반복 구문 만들기
동작 변경
마무리
작업 나누기
검증 코드 작성
미세 조정
키보드 접근법
onkeypress 다시 보기
CSS와 지시자 공유하기
DOM 코어와 HTML-DOM
7장에서 다룰 내용

7장. 실행 시에 마크업 코드 생성하기
document.write
innerHTML
찬반 양론
DOM 메소드
createElement
appendChild
createTextNode
좀더 복잡한 조합
사진첩 다시 살펴보기
insertBefore
insertAfter 함수 만들기
insertAfter 함수 사용
사진첩 마무리
요약
8장에서 다룰 내용

8장. 의미가 살도록 컨텐츠 개선하기
하면 안 되는 것
속성을 화면에 표시하기
내용
HTML이냐? XHTML이냐?
마크업
CSS
자바스크립트
축약어 목록 표시
displayAbbreviations 함수 만들기
마크업 생성
웹 브라우저 불발탄
인용구 표시
displayCitations 함수 만들기
접근키 표시
마크업
자바스크립트
요약
9장에서 다룰 내용

9장. CSS와 DOM 연동하기
웹 문서의 세 가지 요소
구조
표현
동작
세 가지 요소 분리하기
style 프로퍼티
스타일 가져오기
인라인 스타일만 동작
스타일 지정하기
DOM을 이용한 스타일 지정이 유용한 사례
특정 노드의 모양을 꾸밀 경우
반복되는 스타일일 경우
이벤트 처리 결과를 보여주는 경우
className
함수 추상화
10장에서 다룰 내용

10장. 애니메이션 슬라이드쇼 만들기
애니메이션이란?
위치
시간
setTimeout
동작 바꾸기
재활용 함수 만들기
애니메이션 실전
요구 사항
해결 방법
CSS
자바스크립트
변수 영역 문제 해결
부드럽게 만들기
마지막 손질
마크업 만들기
11장에서 다룰 내용

11장. 총정리: 더블트랙 밴드 웹사이트 제작
소개
기본 초안
사이트 구조
웹 문서 구조
디자인
CSS
색상
레이아웃
글꼴
마크업
자바스크립트
문서 하이라이트
슬라이드 쇼
내부 네비게이션
자바스크립트 사진첩
테이블 기능 향상
폼 기능 향상
레이블
기본 값
폼 유효몼 확인
요약
12장에서 다룰 내용

12장. DOM 스크립트의 미래
웹이란?
웹 브라우저
파이어폭스 등장
웹 디자이너
삼각 의자
DOM 스크립트 태스크 포스
Ajax
XMLHttpRequest 객체
Ajax 기반 서비스 예제
Ajax에 대한 도전
Ajax 기능 바르게 쓰기
Hijax
Ajax의 미래
웹 애플리케이션
마지막 부탁

부록 Ⅰ. 유용한 DOM 메소드와 프로퍼티
메소드
노드 만들기
createElement
createTextNode
노드 복사하기
cloneNode
노드 추가
appendChild
insertBefore
노드 삭제
removeChild
노드 바꾸기
replaceChild
노드 값 변경
setAttribute
노드 찾기
getAttribute
getElementById
getElementsByTagName
hasChildNodes
프로퍼티
노드 프로퍼티
nodeName
nodeType
nodeValue
노드 내부 구조 보기
childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling

[한국어판 특별 부록]
부록 Ⅱ. 웹 표준 기반의 멋진 DOM 스크립트 예제 - 윤석찬
Lightbox2, 슬라이드형 사진첩
Sortable Table, 다이내믹 테이블 정렬 415
그 밖에 좋은 예제 찾아보기
롤 오버 이미지 기능
라운드 박스에서 불필요한 마크업 없애기
DHTMLgoodies.com

[한국어판 특별 부록]
부록 III. 다이내믹한 웹사이트를 위한 고려 사항 - 강규영
사용성
즉시 편집 UI
사용성은 디자이너가 고민해야 하는 것 아닐까?
뒤로가기 버튼과 즐겨찾기
협업을 위한 도구와 실천법
참고자료

『PPK 자바스크립트』

1장 역할
1.1 개념 잡기
브라우저에서 상호작용 다루기
팻 클라이언트와 씬 클라이언트
자바스크립트의 역할
1.2 기술 관점에서의 개요
표준화
버전
보안
1.3 자바스크립트의 역사
잘못된 출발
사실상의 표준
브라우저 전쟁
CSS 표준준수운동
새 출발
다음엔 무엇이 올까?

2장 자바스크립트가 쓰이는 곳
2.1 CSS 표준준수운동
눈에 띄지 않는 스크립트
세 개의 계층
관심의 분리
2.2 표현과 구조의 분리
CSS 수정
구조를 변경할 것인가 표현을 변경할 것인가?
2.3 동작과 구조의 분리
함수를 다른 파일로 분리
HTML에서 이벤트 핸들러의 제거
2.4 동작과 표현의 분리
드롭다운 메뉴 - :hover를 쓸 것인가 mouseover/out을 쓸 것인가?
똑같은 효과와 비슷한 효과
2.5 접근성에 대한 개괄
접근성이란 무엇인가?
스크립트가 지원되지 않을 때도
마우스가 없을 때도
스크린리더
접근성과 사용성
2.6 접근성 규칙
논리적인 HTML
하드코딩된 링크는 href 속성이 있어야 한다
자바스크립트 사용자를 위한 내용 자동생성
사용자를 적당한 페이지로 리다이렉트하기
키보드 사용자
〈noscript〉 태그
2.7 예제 스크립트
텍스트영역 최대값(Textarea Maxlength)
유저블 폼(Usable Forms)
폼 검증(Form Validation)
드롭다운 메뉴(Dropdown Menu)
스타일시트 편집(Edit Style Sheets)
샌드위치 선택기(Sandwich Picker)
XMLHTTP 속도계(XMLHTTP Speed Meter)
사이트 설문(Site Survey)

3장 브라우저
3.1 브라우저
모질라 패밀리
윈도우 익스플로러
사파리
오페라
그 밖의 그래픽 데스크톱 브라우저
모바일 폰
스크린리더
3.2 비호환성
문제
해결책
3.3 객체 탐지
객체 탐지 작동원리
얼마나 멀리 가야 하나?
3.4 브라우저 탐지
브라우저 탐지가 제대로 되지 않는 이유
브라우저 탐지 경쟁
브라우저 문자열 풀어보기
브라우저 탐지의 올바른 사용
3.5 디버깅
오류 메시지
브라우저 버그
예제
브라우저 버그 리포팅

4장 준비
4.1 HTML과 CSS 구조
HTML 구조
CSS 구조
4.2 훅
아이디
클래스
커스텀 속성
이름/값 쌍
4.3 페이지 준비
이벤트 핸들러 설정
방문객의 상태 결정
참조 설정
내용 생성
관계 정의
문서 구조 변경
4.4 〈script〉 태그
문법
여러 개의 스크립트 파일 사용
4.5 초기화
load 이벤트
여러 ?의 초기화
눈에 띄지 않는 초기화
load 이벤트 기다리기
가장 좋은 방법?
4.6 예제 스크립트
텍스트영역 최대값
유저블 폼
폼 검증
드롭다운 메뉴
스타일시트 편집
샌드위치 선택기
XMLHTTP 속도계
사이트 설문
세부사항 결정

5장 코어
5.1 기초
대소문자 구별
문장과 세미콜론
주석
코드 블록: {}
연산자
값
5.2 데이터 타입
여섯 가지 데이터 타입
데이터 타입 변환
+ 문제
불리언 값으로의 변환
명시적 데이터 타입 변환
5.3 일반 연산자
산술 연산자
++와 --
=, ==, ===
!=, 〈, 〉, 〈=, 〉=
조건 연산자 ? :
5.4 변수
변수 이름
var 키워드
변수 범위
5.5 숫자로 작업하기
8진수와 16진수
toFixed()
parseInt() 와 parseFloat()
5.6 문자열로 작업하기
인용부호
접합: +
문자열 객체
5.7 불리언 값
불리언 변수
불리언 연산자
객체의 존재 테스트
불리언 연산자의 고급 사용법
5.8 제어 구조
if 문장
switch
for, while, do/while
break와 continue
try/catch
5.9 함수
기본 함수 문법
인자
return
값으로서의 함수
포함된 함수와 변수 범위
5.10 객체
도트
객체의 정의
메소드와 프로퍼티로 작업하기
this 키워드
전역 객체
5.11 연관 배열
각괄호 표기법과 도트 표기법
연관 배열
for in 문장
5.12 배열
다차원 배열
배열 표기법
배열의 사용
length
push, pop, shift, unshift

6장 브라우저 객체 모델(BOM)
6.1 window 객체
전역 객체로서의 window
새 페이지, 새 window 객체
새 전역 객체로서 동작하는 새 window
window의 프로퍼티
6.2 윈도우 간 통신
팝업창 열기
다른 창을 가리키는 참조 만들기
통신채널 다시 만들기
팝업창 방지 프로그램
6.3 내비게이션
location 객체
history 객체
6.4 창 위치 알아내기
screen 객체
창의 크기
창 이동, 크기 조정, 스크롤
포커스 주기와 포커스 뺏기
6.5 기타
navigator 객체
alert, confirm, prompt
타임아웃과 인터벌
6.6 document 객체
lastModified
referrer
domain
write()
open()과 close()
6.7 쿠키
이름/값
만료날짜
도메인과 경로
쿠키 설정
document.cookie
쿠키 읽기
쿠키 지우기
쿠키의 사용 예
사용자 쿠키 설정
쿠키 지원 여부의 확인

7장 이벤트
7.1 브라우저 비호환성
상황별 해결법
개요
7.2 이벤트
마우스 이벤트
키보드 이벤트
인터페이스 이벤트
W3C 이벤트
마이크로소프트 이벤트
기본 동작
이벤트 시뮬레이션
7.3 이벤트 핸들러 등록
인라인 이벤트 핸들러
전통 모델
W3C와 마이크로소프트 모델
최선의 방법
7.4 이벤트 버블링과 캡처링
W3C 모델
전통 모델과 마이크로소프트 모델
이벤트 버블링의 실제 사용 예
7.5 이벤트 객체와 그 프로퍼티
이벤트 객체
타입
타깃팅
마우스 위치
마우스 버튼
키 프로퍼티
7.6 타깃팅
차이점
this
타깃
this를 쓸 것인가 이벤트 타깃을 쓸 것인가?

7.7 예제 스크립트
텍스트영역 최대값
유저블 폼
폼 검증
드롭다운 메뉴
스타일시트 편집
샌드위치 선택기
XMLHTTP 속도계
사이트 설문
7.8 드롭다운 메뉴, mouseout과 relatedTarget
mouseover
mouseout과 그 문제점
해결책
relatedTarget, fromElement, toElement

8장 문서 객체 모델(DOM)
8.1 개념
노드
가계도
8.2 요소 찾기
장거리 여행
단거리 여행
루트 노드
8.3 노드 정보
nodeName
nodeValue
nodeType
tagName
8.4 문서 트리 변경
일반 규칙
appendChild()
insertBefore()
removeChild()
replaceChild()
모든 자식 노드의 제거
8.5 요소의 생성 및 복제
createElement()와 createTextNode()
cloneNode()
테이블 및 폼 필드의 생성
8.6 innerHTML
쓰레기가 들어가면 쓰레기가 나올 뿐
속도
예제
innerHTML과 순수 DOM의 협동작업
outerHTML, innerText, outerText
innerHTML과 DOM
8.7 속성
속성 얻기와 설정하기
HTML 속성과 자바스크립트 프로퍼티
속성을 얻고 설정하는 최선의 방법
8.8 텍스트 노드
nodeValue
빈 텍스트 노드
8.9 노드리스트
위험
도우미 배열
8.10 폼과 레벨 0 DOM
레벨 0 DOM 노드리스트
폼 필드
8.11 DOM 하이퍼스페이스
하이퍼스페이스에 요소 보관하기
하이퍼스페이스와 innerHTML
요소는 하이퍼스페이스에?
8.12 마커

9장 CSS 수정
9.1 style 프로퍼티
대시
단위
스타일 얻기
축약 스타일
9.2 클래스와 아이디의 변경
클래스 추가
클래스 제거
9.3 CSS를 페이지 안에 쓰기
즉각적인 적용
9.4 전체 스타일시트 변경
이론
document.styleSheets
cssRules[]와 rules[]
selectorText
style
cssText와 스타일시트 전송
룰 삽입과 삭제

9.5 비교
예제
9.6 요소 보여주기/숨기기
간단한 보여주기/숨기기 스크립트
테이블의 행 보여주기/숨기기
9.7 애니메이션
애니메이션 작동원리
setTimeout과 setInterval
9.8 요소의 치수와 위치
요소의 치수
요소의 위치

10장 데이터 전송
10.1 요청 보내기
XMLHttpRequest 객체
열기
readystatechange
setRequestHeader
sendRequest 함수
abort
10.2 응답 처리하기
status
콜백 함수
responseText와 responseXML
getResponseHeader
getAllResponseHeaders
10.3 응답 포맷
XML
HTML
JSON
CSV
최선의 포맷은?
10.4 접근성
HTML의 접근성
기타 응답 포맷의 접근성

마치며