추가 적립 안내

8가지 실전 프로젝트로 모던하고 구조적인 실용 자바스크립트를 학습!

이 책은 국제적으로 인정받는 자바스크립트 전문가 피터 폴 콕(일명 PPK)의 저서로, 자바스크립트 지식을 알기 쉽게 풀이한 것이다. 피터 폴 콕은 W3C DOM 브라우저 호환성 테이블로 유명한 웹 개발자의 바이블 www.quirksmode.org을 운영하고 있다. 저자는 이 책을 통해 웹과 자바스크립트의 근본적인 이해를 전달하고, 기술과 팁을 전수한다.

브라우저 비호환성, 웹 접근성, 저수준 문법, 스크립트 분리, HTML 구조 계층과 연동하는 방법을 설명한다. 1장부터 4장까지는 고수준의 주제를 다룬다. 자바스크립트의 목적과 역사, 기술적인 개요, 자바스크립트가 쓰이는 환경, 브라우저 비호환성과 그것을 다루는 전략, 자바스크립트와 HTML 구조 계층 및 초기화와의 상호작용 등을 소개한다.

그리고 5장부터 10장까지는 기술적인 주제를 다룬다. 코어, BOM, 이벤트, DOM, CSS 수정, 데이터 전송에 대해 이야기한다. 자바스크립트가 왜 현재의 모습이 되었는지, 앞으로 어떻게 변해나갈 것인지, 이 기술의 핵심 이슈는 무엇인지를 정리하였다. 또한 자바스크립트의 사용과 발전 방향에 있어 올바른 방향이 무엇인지에 대한 저자의 생각도 담았다.

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

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

★ 이 책에서 다루는 내용 ★

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

★ 저자의 말 ★
〈들어가며〉
이 책은 내가 프로 웹 개발자가 된 이후에 알게 된 자바스크립트 지식을 알기 쉽게 전달하기 위해 썼습니다. 이 책에서는 온전히 제가 알고 있는 지식을 반영하기에 그 지식의 한계도 보여주고 있습니다. 필자는 웹 개발자일 뿐 애플리케이션 개발자가 아닙니다. 이 말은 이 책이 브라우저 비호환성, 접근성, 저수준 문법, 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〈x.length;i++) {
if (x[i].className != ‘popup’) continue;
x[i].onclick = openPopup;
}

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

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

★ 역자 서문 ★

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

마치며 489XML 477
HTML 479
JSON 480
CSV 482
최선의 포맷은? 483
10.4 접근성 483
HTML의 접근성 484
기타 응답 포맷의 접근성 487

마치며 489