8가지 실전 프로젝트로 모던하고 구조적인 실용 자바스크립트를 배우자. 브라우저 비호환성 처리, 웹 접근성, 스크립트 분리 등 기존 자바스크립트 책에서는 볼 수 없었던 새로운 내용이 가득 담겨있다. W3C DOM 브라우저 호환성 테이블로 유명한 웹 개발자의 바이블 quirksmode.org의 피터 폴 콕(일명 PPK)이 저술했다.


[ 소개 ]

이 책은 자바스크립트의 역할과 컨텍스트를 정의하면서 시작된다. 자바스크립트가 사용되기에 가장 적합한 작업들을 정의하며, 디버깅, 복잡한 브라우저 문자열과 사이트의 HTML 구조에 스크립트를 붙이는 것에 관해 설명한다. 그리고 이 책의 핵심적인 부분으로, 자바스크립트 코어 언어, 브라우저 객체 모델(BOM), 이벤트 핸들링, 문서 객체 모델(DOM), CSS 변경과 데이터 얻어오기에 대해 설명한다. 전체적으로 이론적인 설명과 함께 관련된 예제 스크립트들을 분석하고 있다.

다른 책들이 자바스크립트를 예제 스크립트를 통해 설명하면서도 전문적인 경험에 비중을 적게 두는 반면, 이 책은 고객에게 실제로 제공되었던 8개의 스크립트를 보여준다. 여러분은 이와 같은 유용한 스크립트를 접할 수 있을 것이다.


[ 이 책에서 다루는 내용 ]

■ 드롭다운 메뉴 만들기
■ CSS 스타일 시트 편집
■ 폼 검증을 위한 프레임워크
■ 사용자가 긴 리스트의 데이터를 쉽게 검색할 수 있게 하기
■ Ajax를 이용해 서버에서 데이터를 가져와서 애니메이션을 갱신하기

[ 저자 소개 ]

피터 폴 콕 / Peter Paul Koch
국제적으로 인정받는 자바스크립트 전문가이며, 자바스크립트 초보자와 전문가 모두에게 필수적인 리소스인 www.quirksmode.org 사이트를 운영하고 있다. 웹 표준 프로젝트 DOM 스크립팅 태스크 포스의 일원이고 "자바스크립트 선언서"의 저자다.


[ 저자의 말 ]

들어가며

이 책은 내가 프로 웹 개발자가 된 이후에 알게 된 자바스크립트 지식을 알기 쉽게 전달하기 위해 썼습니다. 이 책에서는 온전히 제가 알고 있는 지식을 반영하기에 그 지식의 한계도 보여주고 있습니다. 필자는 웹 개발자일 뿐 애플리케이션 개발자가 아닙니다. 이 말은 이 책이 브라우저 비호환성, 접근성, 저수준 문법, HTML 구조 계층과 연동하는 방법에 대해 이야기하지, 모듈화, 디자인 원칙, 추상화 계층에 대해서는 이야기하지 않는다는 뜻입니다.

웹사이트 제작을 업으로 삼은 지난 8년 동안 다른 이들이 간과하고 있던 자바스크립트 일부를 광범위하게 이용했습니다. 보수를 지불하면서 맡긴 일에 언제나 적당한 툴을 선택해왔습니다. 그리고 그 과정에서 자바스크립트에는 필자가 일상적인 일을 하는 데 필요 없는 많은 기능이 있다는 것을 알게 됐습니다.

당연하게도 알지 못하는 툴을 가르쳐드릴 수는 없습니다. 그래서 이 책에서는 필자가 써본 기능만 다룹니다. 따라서 객체 지향적 자바스크립트는 의도적으로 빠져 있습니다. 제가 객체 지향적인 자바스크립트를 써본 적이 없기 때문입니다. 책은 페이지가 한정돼 있어서 어떤 내용을 넣을지 선택해야 했습니다. 때로는 아주 힘든 선택을 해야 했습니다. 결국 초보적인 수준에서 상위 단계로 올라가기 위해 꼭 필요한 자바스크립트 기능을 선택했습니다.

제 웹사이트 www.quirksmode.org가 제일 중요한 참고 사이트입니다. www.quirksmode.org/book/에 모든 예제 스크립트와 정오표가 있습니다.


자바스크립트의 미래

이 책의 내용이 여러분이 날마다 작성하는 스크립트 향상에 도움이 되었으면 합니다. 이 책에 나온 내용이 자바스크립트 기능과 함수에 대한 전체적인 개요는 아니지만, 스크립트를 만들면서 가장 필요하거나 너무 기초적인 것이라 모른 채로는 자바스크립트를 안다고 할 수 없는 부분에 대한 글임을 기억해두십시오.

이 책은 공부의 시작이지 끝이 아닙니다.

수정구슬로 자바스크립트의 미래를 잠시 점쳐볼까요? 향후 몇 년간 자바스크립트를 변화시킬 세 가지 중요한 사건이 보입니다.

가장 중요한 것은 Ajax 맹신의 종말입니다. 언제인지 정확히 알 수 없지만 반드시 일어날 일이라는 사실은 분명합니다. 유행은 사라지기 마련입니다. 한때 멋지고 진보적이었던 것이 이제는 구식이고 따분합니다.

Ajax 맹신은 비록 나쁜 예로 들었을지라도 많은 것을 가르쳐줬습니다. 성공적인 Ajax 애플리케이션과 그렇지 못한 애플리케이션을 비교해보면, 복잡한 인터페이스에 대한 사용자 이해의 한계에 대한 통찰을 얻을 수 있습니다. 그리고 자바스크립트의 목적을 이해할 수 있습니다. 다음 몇 번의 팻과 씬 단계의 반복에도 살아남을 수 있는 목적을 정의할 수 있을 것입니다.

장기적인 장점 외에도 맹신이 사라지면 장점과 단점이 동시에 존재하는 단기적인 변화도 함께 발생할 것입니다. '어려운' 프로그래밍 세계에서 넘어온 많은 개발자는 자바스크립트가 더 이상 쿨하지 않다고 생각하면 다시 그들의 언어로 돌아갈 것입니다. 단기 변화의 단점은 일반적인 웹 개발자는 모르는 고급 프로그래밍 구조를 많이 알고 있는 이들이 사라진 후에 애플리케이션 디자인을 우리에게 설명해줄 사람이 없다는 것입니다. 소수라도 남아서 가르쳐줬으면 하는 바람입니다.

한편 '어려운' 언어 개발자가 사라지면, 자바스크립트 개발자가 지금보다 더 접근성에 집중할 수 있다는 장점도 있습니다. 자바스크립트 측면에서 생기는 접근성 이슈 중 큰 문제는 Ajax 애플리케이션을 만드는 많은 프로그래머가 접근성을 인식하지 못한다는 점입니다. 접근성은 웹 개발자가 '어려운' 언어 개발자보다 더 잘 알고 있는 분야입니다. 그리고 맹신의 종말은 웹 개발자에게 접근성을 개선할 수 있는 기회를 줄 것입니다.

두 번째로 중요한 사건은 코어(Core) 2.0 표준의 출현입니다. 이는 자바스크립트를 그밖의 프로그래밍 언어와 비슷한 수준으로 끌어올릴 것입니다. 지금은 Ajax 개발자를 돕기에 너무 늦은 것처럼 보이지만 그럼에도 코어 2.0은 자바스크립트를 좀 더 진지하게 받아들이는 개발자를 도와줄 것입니다. 이 사실이 언어와 그 사용자에게 이익이 될 것입니다.

세 번째로 중요한 사건은 마이크로소프트를 포함한 모든 브라우저 벤더가, 웹표준을 준수하려고 노력하고 있다는 것입니다. 아직 브라우저 비호환성이 해결되지는 않았지만 범위로 보나 심각성으로 보나 점차 줄고 있습니다. 프로그래머의 실수로 발생하는 문제를 제외하면 그렇습니다. 이 부분은 없어지지 않을 겁니다.

정리하면, 자바스크립트의 목적에 대한 좀 더 나은(스크립팅 절차에 접근성을 통합하는 진지한 시도를 포함할 수 있는) 정의를 내리게 될 것이고, 코어 2.0 덕택에 더 나은 프로그래밍 스타일이 출현할 것이고, '어려운' 언어를 쓰는 프로그래머로부터 배울 게 있을 것이고, 브라우저 문제가 더 적어질 것이라는 희망을 품고 있습니다.

자바스크립트는 변하는 중입니다. 더 나은 세상이 올 것입니다.


이 책의 대상 독자

독자가 HTML과 CSS를 잘 알고 있다고 가정합니다. 4장에서 볼 수 있는 것처럼 깔끔하고 유용한 HTML 구조는 간단하고 효과적인 스크립트 작성에 꼭 필요합니다. 9장은 기본적인 CSS를 모르고는 이해할 수 없습니다.

그리고 복사/붙여넣기 수준일지라도 자바스크립트도 약간 알고 있을 것이라 가정합니다. 아래 코드를 예로 들면

var x = document.getElementsByTagName(‘a’);
for (var i=0;i if (x[i].className != ‘popup’) continue;
x[i].onclick = openPopup;
}

이 코드를 읽고 페이지 안에서 모든 링크를 찾아서 popup이라는 클래스를 가진 링크에 팝업창을 정의한다는 것을 독자가 어렴풋하게라도 이해할 것이라고 가정합니다. 세부사항을 모두 알 필요는 없습니다(사실 이 책의 목적이 그 세부사항을 설명하는 것입니다). 그러나 어떻게 돌아가는 것인지 대강이라도 이해해야 합니다.

필자가 바라는 것은 모든 초보 스크립터가 이 책을 읽은 후에 중수가 되는 것입니다. 물론 중수가 고수가 되는 것을 도와주는 역할도 이 책이 했으면 합니다.


[ 역자 소개 ]

전정환
8비트 컴퓨터 시절 애플 호환 기종에서, 다니던 학교의 성적처리 프로그램을 직접 만들었던 세운상가 키드였다. 첫 직장에서 폰트매니아(FontMania)라는 한글 지원 폰트에디터를 만들어 IR52 장영실상을 수상했다. 이후 웹과 모바일 관련된 벤처의 파운더로서 몇 차례 경험을 쌓은 후 2006년 다음커뮤니케이션에 입사했다. UI Engineering팀(현 RIA기술팀)을 맡아 한메일 익스프레스와 파워에디터의 PM을 맡고 있다. 엔지니어에게도 인문학과 예술적 감수성이 많은 도움이 된다고 생각하고 있으며, HCI(Human Computer Interaction)에 많은 관심을 기울이고 있다.

정문식
고려대 컴퓨터학과 졸업하고 인포허브•웰러스에서 핸드폰 결제시스템, 네트워크 핸드폰 게임을 개발했으며 다음커뮤니케이션 미디어개발팀에 근무 중이다. 다양한 언어를 배움이 내공 향상의 첩경이라고 보고 파이썬, 루비, Io 프로그래밍을 취미로 삼고 있다.


[ 역자 서문 ]

PPK의 저자 피터 폴 콕은 웹 개발의 오랜 경험을 바탕으로 이 책을 썼다. 이 책의 미덕은 기술과 팁을 전달하는 데 그치지 않고, 웹과 자바스크립트에 대한 근본적인 이해를 전달한다는 데 있다. 이 책을 꼼꼼히 읽어나가며 훌륭한 저자는 기술서에도 자신의 역사관과 철학을 담아낼 수 있음을 느끼고 큰 감흥을 받았다. 자바스크립트가 왜 현재의 모습이 되었고 앞으로 어떻게 변해나갈지, 이 기술의 핵심 이슈가 무엇인지, 자바스크립트의 사용과 발전 방향에 있어 올바른 방향이 무엇일지에 대한 저자의 생각이 기술에 대한 설명을 풀어놓은 이 책에 자연스럽게 스며들어 있다.

개인적으로는 이 책을 번역하면서 오래 전 한 순간이 떠올랐다. 1995년 봄 나는 지인의 소개로 다음커뮤니케이션을 방문했다. 당시 직원이 세 명뿐이었던 이 회사는 막 태동한 월드와이드웹의 무한한 가능성을 보고 시작된 초미니 벤처 기업이었다. 그날 나는 핫자바(Hot Java), 모자익(Mosaic) 같은 브라우저에서 하이퍼텍스트를 써서 전 세계에 있는 정보 페이지로 이동하는 첫경험을 맛보았다. 전세계 곳곳에서 웹문서들이 시시각각 생겨나고 자라나고 또 그 문서들이 거미줄처럼 연결되어 있다는 것은 정말 놀라운 일이었다.

1995년 말, 모자익 브라우저는 넷스케이프로 변모했으며 자바스크립트라는 이름의 스크립트 언어가 부가되었다. 처음 자바스크립트는 단순히 폼 전송 때 값을 미리 체크해서 경고창을 띄워주는 정도의 용도였다. 지금처럼 웹에서의 상호작용이 익숙한 상황에서 들으면 우습게 들리겠지만 브라우저 상의 '웹 문서'에서 이런 상호작용이 가능하다는 것은 그 당시로서는 획기적인 일이었다.
그랬던 자바스크립트는 이제 엄청나게 많은 사람이 쓰는 기술로 자리를 잡았지만 “잘” 사용하기는 더욱 어려워졌다.

오늘날 자바스크립트는 웹문서에 가볍게 넣는 스크립트부터 리치 인터넷 애플리케이션을 만드는 데에도 쓰인다. 자바스크립트를 용도에 맞게 올바른 방법으로 사용하는 것, 웹표준과 접근성을 지키면서도 더 많은 인터랙션을 제공하는 것은 점점 더 도전적인 과제가 되고 있다. 이 분야에서 전문가가 되려는 분들이나 제대로 된 기초를 닦고자 하는 분들에게 이 책은 탄탄한 초석이 될 것이다.

목차

• 1장 역할
  • 1.1 개념 잡기 2
    • 브라우저에서 상호작용 다루기 2
    • 팻 클라이언트와 씬 클라이언트 5
    • 자바스크립트의 역할 7
  • 1.2 기술 관점에서의 개요 8
    • 표준화 9
    • 버전 12
    • 보안 14
  • 1.3 자바스크립트의 역사 16
    • 잘못된 출발 17
    • 사실상의 표준 17
    • 브라우저 전쟁 18
    • CSS 표준준수운동 22
    • 새 출발 23
    • 다음엔 무엇이 올까? 25
      
• 2장 자바스크립트가 쓰이는 곳
  • 2.1 CSS 표준준수운동 28
    • 눈에 띄지 않는 스크립트 29
    • 세 개의 계층 30
    • 관심의 분리 32
  • 2.2 표현과 구조의 분리 33
    • CSS 수정 33
    • 구조를 변경할 것인가 표현을 변경할 것인가? 34
  • 2.3 동작과 구조의 분리 36
    • 함수를 다른 파일로 분리 36
    • HTML에서 이벤트 핸들러의 제거 37
  • 2.4 동작과 표현의 분리 39
    • 드롭다운 메뉴 - :hover를 쓸 것인가 mouseover/out을 쓸 것인가? 39
    • 똑같은 효과와 비슷한 효과 42
    • 2.5 접근성에 대한 개괄 45
      • 접근성이란 무엇인가? 45
      • 스크립트가 지원되지 않을 때도 45
      • 마우스가 없을 때도 46
      • 스크린리더 47
      • 접근성과 사용성 50
  • 2.6 접근성 규칙 52
    • 논리적인 HTML 52
    • 하드코딩된 링크는 href 속성이 있어야 한다 52
    • 자바스크립트 사용자를 위한 내용 자동생성 53
    • 사용자를 적당한 페이지로 리다이렉트하기 55
    • 키보드 사용자 57
    • noscript 태그 57
  • 2.7 예제 스크립트 58
    • 텍스트영역 최대값(Textarea Maxlength) 59
    • 유저블 폼(Usable Forms) 60
    • 폼 검증(Form Validation) 61
    • 드롭다운 메뉴(Dropdown Menu) 61
    • 스타일시트 편집(Edit Style Sheets) 62
    • 샌드위치 선택기(Sandwich Picker) 62
    • XMLHTTP 속도계(XMLHTTP Speed Meter) 65
    • 사이트 설문(Site Survey) 66
      
• 3장 브라우저
  • 3.1 브라우저 68
    • 모질라 패밀리 68
    • 윈도우 익스플로러 69
    • 사파리 70
    • 오페라 70
    • 그 밖의 그래픽 데스크톱 브라우저 70
    • 모바일 폰 71
    • 스크린리더 72
  • 3.2 비호환성 73
    • 문제 73
    • 해결책 75
  • 3.3 객체 탐지 79
    • 객체 탐지 작동원리 79
    • 얼마나 멀리 가야 하나? 82
  • 3.4 브라우저 탐지 83
    • 브라우저 탐지가 제대로 되지 않는 이유 84
    • 브라우저 탐지 경쟁 85
    • 브라우저 문자열 풀어보기 87
    • 브라우저 탐지의 올바른 사용 92
  • 3.5 디버깅 93
    • 오류 메시지 93
    • 브라우저 버그 97
    • 예제 100
    • 브라우저 버그 리포팅 103
      
• 4장 준비
  • 4.1 HTML과 CSS 구조 106
    • HTML 구조 106
    • CSS 구조 107
  • 4.2 훅 108
    • 아이디 109
    • 클래스 110
    • 커스텀 속성 112
    • 이름/값 쌍 113
  • 4.3 페이지 준비 116
    • 이벤트 핸들러 설정 116
    • 방문객의 상태 결정 117
    • 참조 설정 117
    • 내용 생성 118
    • 관계 정의 118
    • 문서 구조 변경 120
  • 4.4 script 태그 120
    • 문법 121
    • 여러 개의 스크립트 파일 사용 123
  • 4.5 초기화 124
    • load 이벤트 125
    • 여러 번의 초기화 126
    • 눈에 띄지 않는 초기화 127
    • load 이벤트 기다리기 127
    • 가장 좋은 방법? 129
  • 4.6 예제 스크립트 129
    • 텍스트영역 최대값 129
    • 유저블 폼 130
    • 폼 검증 132
    • 드롭다운 메뉴 134
    • 스타일시트 편집 135
    • 샌드위치 선택기 136
    • XMLHTTP 속도계 138
    • 사이트 설문 139
    • 세부사항 결정 140
      
• 5장 코어
  • 5.1 기초 144
    • 대소문자 구별 144
    • 문장과 세미콜론 144
    • 주석 146
    • 코드 블록: {} 147
    • 연산자 149
    • 값 151
  • 5.2 데이터 타입 152
    • 여섯 가지 데이터 타입 152
    • 데이터 타입 변환 156
    • + 문제 158
    • 불리언 값으로의 변환 160
    • 명시적 데이터 타입 변환 160
  • 5.3 일반 연산자 161
    • 산술 연산자 161
    • ++와 -- 162
    • =, ==, === 163
    • !=, <, >, <=, >= 165
    • 조건 연산자 ? : 167
  • 5.4 변수 168
    • 변수 이름 168
    • var 키워드 169
    • 변수 범위 170
  • 5.5 숫자로 작업하기 172
    • 8진수와 16진수 173
    • toFixed() 176
    • parseInt() 와 parseFloat() 177
  • 5.6 문자열로 작업하기 177
    • 인용부호 177
    • 접합: + 179
    • 문자열 객체 179
  • 5.7 불리언 값 185
    • 불리언 변수 185
    • 불리언 연산자 186
    • 객체의 존재 테스트 188
    • 불리언 연산자의 고급 사용법 189
  • 5.8 제어 구조 192
    • if 문장 192
    • switch 197
    • for, while, do/while 201
    • break와 continue 207
    • try/catch 209
  • 5.9 함수 210
    • 기본 함수 문법 210
    • 인자 212
    • return 212
    • 값으로서의 함수 215
    • 포함된 함수와 변수 범위 217
  • 5.10 객체 219
    • 도트 221
    • 객체의 정의 221
    • 메소드와 프로퍼티로 작업하기 223
    • this 키워드 226
    • 전역 객체 227
  • 5.11 연관 배열 227
    • 각괄호 표기법과 도트 표기법 229
    • 연관 배열 230
    • for in 문장 231
  • 5.12 배열 233
    • 다차원 배열 233
    • 배열 표기법 234
    • 배열의 사용 235
    • length 236
    • push, pop, shift, unshift 237
      
• 6장 브라우저 객체 모델(BOM)
  • 6.1 window 객체 241
    • 전역 객체로서의 window 241
    • 새 페이지, 새 window 객체 242
    • 새 전역 객체로서 동작하는 새 window 243
    • window의 프로퍼티 246
  • 6.2 윈도우 간 통신 248
    • 팝업창 열기 249
    • 다른 창을 가리키는 참조 만들기 250
    • 통신채널 다시 만들기 251
    • 팝업창 방지 프로그램 257
  • 6.3 내비게이션 259
    • location 객체 259
    • history 객체 261
  • 6.4 창 위치 알아내기 262
    • screen 객체 262
    • 창의 크기 263
    • 창 이동, 크기 조정, 스크롤 263
    • 포커스 주기와 포커스 뺏기 264
  • 6.5 기타 265
    • navigator 객체 265
    • alert, confirm, prompt 265
    • 타임아웃과 인터벌 267
  • 6.6 document 객체 269
    • lastModified 269
    • referrer 270
    • domain 270
    • write() 270
    • open()과 close() 272
  • 6.7 쿠키 274
    • 이름/값 275
    • 만료날짜 276
    • 도메인과 경로 276
    • 쿠키 설정 277
    • document.cookie 278
    • 쿠키 읽기 278
    • 쿠키 지우기 279
    • 쿠키의 사용 예 279
    • 사용자 쿠키 설정 281
    • 쿠키 지원 여부의 확인 281
      
• 7장 이벤트
  • 7.1 브라우저 비호환성 284
    • 상황별 해결법 285
    • 개요 285
  • 7.2 이벤트 286
    • 마우스 이벤트 286
    • 키보드 이벤트 290
    • 인터페이스 이벤트 291
    • W3C 이벤트 295
    • 마이크로소프트 이벤트 296
    • 기본 동작 296
    • 이벤트 시뮬레이션 299
  • 7.3 이벤트 핸들러 등록 300
    • 인라인 이벤트 핸들러 300
    • 전통 모델 301
    • W3C와 마이크로소프트 모델 305
    • 최선의 방법 309
  • 7.4 이벤트 버블링과 캡처링 310
    • W3C 모델 311
    • 전통 모델과 마이크로소프트 모델 313
    • 이벤트 버블링의 실제 사용 예 313
  • 7.5 이벤트 객체와 그 프로퍼티 316
    • 이벤트 객체 316
    • 타입 317
    • 타깃팅 317
    • 마우스 위치 318
    • 마우스 버튼 322
    • 키 프로퍼티 323
  • 7.6 타깃팅 323
    • 차이점 323
    • this 324
    • 타깃 327
    • this를 쓸 것인가 이벤트 타깃을 쓸 것인가? 331
      
  • 7.7 예제 스크립트 334
    • 텍스트영역 최대값 335
    • 유저블 폼 336
    • 폼 검증 337
    • 드롭다운 메뉴 338
    • 스타일시트 편집 340
    • 샌드위치 선택기 341
    • XMLHTTP 속도계 342
    • 사이트 설문 342
  • 7.8 드롭다운 메뉴, mouseout과 relatedTarget 343
    • mouseover 344
    • mouseout과 그 문제점 345
    • 해결책 346
    • relatedTarget, fromElement, toElement 347
      
• 8장 문서 객체 모델(DOM)
  • 8.1 개념 351
    • 노드 351
    • 가계도 353
  • 8.2 요소 찾기 355
    • 장거리 여행 355
    • 단거리 여행 358
    • 루트 노드 362
  • 8.3 노드 정보 362
    • nodeName 362
    • nodeValue 363
    • nodeType 364
    • tagName 365
  • 8.4 문서 트리 변경 365
    • 일반 규칙 365
    • appendChild() 367
    • insertBefore() 368
    • removeChild() 370
    • replaceChild() 371
    • 모든 자식 노드의 제거 372
  • 8.5 요소의 생성 및 복제 373
    • createElement()와 createTextNode() 373
    • cloneNode() 376
    • 테이블 및 폼 필드의 생성 378
  • 8.6 innerHTML 380
    • 쓰레기가 들어가면 쓰레기가 나올 뿐 381
    • 속도 382
    • 예제 383
    • innerHTML과 순수 DOM의 협동작업 384
    • outerHTML, innerText, outerText 384
    • innerHTML과 DOM 386
  • 8.7 속성 388
    • 속성 얻기와 설정하기 389
    • HTML 속성과 자바스크립트 프로퍼티 390
    • 속성을 얻고 설정하는 최선의 방법 393
  • 8.8 텍스트 노드 393
    • nodeValue 393
    • 빈 텍스트 노드 394
  • 8.9 노드리스트 398
    • 위험 400
    • 도우미 배열 402
  • 8.10 폼과 레벨 0 DOM 403
    • 레벨 0 DOM 노드리스트 403
    • 폼 필드 405
  • 8.11 DOM 하이퍼스페이스 412
    • 하이퍼스페이스에 요소 보관하기 413
    • 하이퍼스페이스와 innerHTML 416
    • 요소는 하이퍼스페이스에? 416
  • 8.12 마커 417
    
• 9장 CSS 수정
  • 9.1 style 프로퍼티 420
    • 대시 422
    • 단위 422
    • 스타일 얻기 423
    • 축약 스타일 425
  • 9.2 클래스와 아이디의 변경 426
    • 클래스 추가 428
    • 클래스 제거 430
  • 9.3 CSS를 페이지 안에 쓰기 430
    • 즉각적인 적용 433
  • 9.4 전체 스타일시트 변경 434
    • 이론 435
    • document.styleSheets 435
    • cssRules[]와 rules[] 437
    • selectorText 438
    • style 438
    • cssText와 스타일시트 전송 439
    • 룰 삽입과 삭제 441
      
  • 9.5 비교 443
    • 예제 444
  • 9.6 요소 보여주기/숨기기 445
    • 간단한 보여주기/숨기기 스크립트 446
    • 테이블의 행 보여주기/숨기기 448
  • 9.7 애니메이션 450
    • 애니메이션 작동원리 450
    • setTimeout과 setInterval 452
  • 9.8 요소의 치수와 위치 457
    • 요소의 치수 457
    • 요소의 위치 460
      
• 10장 데이터 전송
  • 10.1 요청 보내기 464
    • XMLHttpRequest 객체 464
    • 열기 466
    • readystatechange 467
    • setRequestHeader 469
    • sendRequest 함수 470
    • abort 472
  • 10.2 응답 처리하기 472
    • status 472
    • 콜백 함수 474
    • responseText와 responseXML 474
    • getResponseHeader 476
    • getAllResponseHeaders 476
  • 10.3 응답 포맷 476
    • XML 477
    • HTML 479
    • JSON 480
    • CSV 482
    • 최선의 포맷은? 483
  • 10.4 접근성 483
    • HTML의 접근성 484
    • 기타 응답 포맷의 접근성 487
      

[ p182 박스 안 1행 ]
length(), indexofOf(), charAt()의 사용 예 → length(), indexOf(), charAt()의 사용 예

[ p194 두 번째 코드 2행 ]
var tg = [target of event] → var evtTarget = [target of event]

[ p196 아래에서 3행 ]
따라서 첫 번째 코드 블록이 수행된다. → 따라서 첫 번째 코드 블록이 수행되지 않는다.

[ p206 2행 ]
또는 1) → 또는 -1)