CHAPTER 1 자바스크립트 기초 001 001 자바스크립트의 기초 002 002 자바스크립트의 구현(사용) 방식 003 003 다른 파일에서 자바스크립트 불러오기 005 004 값을 로그로 출력하기 007 005 계산 프로그램 만들기 013 006 변수 선언하기 let 014 007 상수 사용하기 const 017 008 주석(코멘트) 추가하기 021 009 두 개의 값 비교하기(비교 연산자) 022 010 복합형(축약형) 대입 연산자 사용하기 024 011 함수 사용하기 function 025 012 화살표 함수 사용하기 028 013 함수의 파라미터 초깃값 설정하기 030 014 다수의 파라미터를 가지는 함수 정의하기 031 015 조건문 사용하기 if 033 016 조건문 사용하기 switch 036 017 반복문 사용하기 for 040 018 반복문 사용하기 while 042 019 반복 처리 스킵 043 CHAPTER 2 판별, 수, 문자 045 020 진위 여부 판별하기 046 021 숫자 다루기 048 022 어림 계산하기(반올림, 올림, 버림) 050 023 임의의 수 다루기 052 024 수학 계산 함수 사용하기 055 025 삼각 함수 사용하기 057 026 문자열 다루기 060 027 문자열의 길이 확인하기 061 028 문자열의 공백 처리하기 trim 063 029 문자열 검색하기(인덱스 검색) 064 030 문자열 검색하기(부분 검색) 067 031 문자열에서 문자 다루기(문자열에서 문자 추출하기) 069 032 문자열 다루기(위치 지정하여 선택하기) 072 033 문자열 다루기(글자 수 지정하여 선택하기) 074 034 지정 문자열 변환하기 075 035 문자열 나누기 078 036 문자열 합치기 081 037 문자열의 대소문자 변환하기 083 038 문자열과 식 함께 다루기 085 039 정규 표현식 사용하기 087 040 정규 표현식으로 특정 문자 검색하기 089 041 소수점 자릿수 지정하기 091 042 문자열 길이 맞추기 094 043 문자열 URI 이스케이프 처리하기 097 044 문자열 URI 디코드하기 100 CHAPTER 3 데이터 다루기 101 045 배열 정의하기 102 046 배열 길이 확인하기 104 047 배열 요소 다루기 ① 105 048 배열 요소 다루기 ② 108 049 배열 요소 다루기 ③ 109 050 배열 요소 추가하기 110 051 배열 요소 삭제하기 111 052 배열 요소 부분 변환하기 112 053 배열 결합하기 113 054 배열 요소 결합하여 문자열 만들기 114 055 배열 요소 검색하기 115 056 조건을 만족하는 배열 요소 가져오기 116 057 배열 요소 역순 정렬하기 120 058 배열 요소 정렬 방법 지정하기 121 059 객체를 포함하는 배열 정렬하기 123 060 배열 요소 알파벳순 정렬하기 127 061 배열 요소 추출하여 새 배열 만들기 128 062 조건을 만족하는 배열 요소 추출하여 새 배열 만들기 130 063 배열 요소 하나로 정리하기 134 064 유사 배열 객체를 배열로 변환하기 136 065 요소의 개별 변수에 분할 대입하기 139 066 배열 섞기(셔플) 140 067 다양한 데이터 타입을 가진 객체 사용하기 142 068 객체 선언, 수정, 확인하기 144 069 객체 복사하기 146 070 객체 속성 확인하기 149 071 객체 요소 값 확인하기 151 072 객체 요소 분할 대입(비구조화 할당)하기 152 073 객체 수정 제한하기 154 CHAPTER 4 데이터 심화 157 074 데이터 타입 이해하기 158 075 가변성과 불가변성 이해하기 160 076 데이터 타입 확인하기 161 077 객체 인스턴스 확인하기 163 078 값 전달과 참조 전달 이해하기 165 079 데이터 타입 변환하기 168 080 정의되지 않은 데이터 이해하기 170 081 빈 데이터 이해하기 171 CHAPTER 5 날짜와 시간 173 082 날짜 다루기(연도) 174 083 날짜 다루기(월, 일) 175 084 시간 다루기 177 085 요일 다루기 179 086 현재 시간과 날짜 가져오기 181 087 날짜 문자열의 타임스탬프 확인하기 183 088 날짜 설정하기 184 089 날짜 계산하기 186 090 날짜 차이 구하기 187 091 경과 시간 확인하기 188 092 카운트다운 190 093 아날로그 시간 표시하기 192 CHAPTER 6 브라우저 197 094 경고 표시하기 198 095 확인창 표시하기 200 096 입력 프롬프트 표시하기 202 097 윈도우 사이즈 확인하기 203 098 디바이스 화소 확인하기 205 099 캔버스에 디바이스 화소 맞추기 206 100 터치 디바이스 사용 확인하기 208 101 페이지 이동하기 209 102 페이지 리로드하기 210 103 페이지 이동하기(앞/뒤로 가기) 211 104 해시(#) 처리하기 212 105 해시 변경 확인하기 213 106 새 윈도우 창 열기 215 107 스크롤 크기 확인하기 216 108 스크롤 설정하기 217 109 타이틀 변경하기 218 110 포커스 확인하기 220 111 전체 화면 표시하기 222 112 온라인/오프라인 대응하기 225 CHAPTER 7 이벤트 처리 227 113 이벤트 처리 이해하기 228 114 이벤트 추가하기 229 115 이벤트 리스너 1회 실행하기 231 116 이벤트 리스너 삭제하기 232 117 페이지 로드 시 이벤트 사용하기 233 118 클릭 이벤트 사용하기 236 119 마우스 조작 이벤트 사용하기 237 120 마우스 오버 이벤트 사용하기 239 121 마우스 오버 이벤트 사용하기(이벤트 버블링) 241 122 마우스 좌표 확인하기 243 123 스크롤 이벤트 처리하기 246 124 텍스트 선택 이벤트 처리하기 247 125 터치 이벤트 처리하기 250 126 터치 이벤트 정보 확인하기 252 127 키보드 입력 이벤트 처리하기 254 128 입력된 키 정보 확인하기 256 129 탭 화면 이벤트 처리하기 258 130 화면 사이즈 이벤트 처리하기 261 131 사이즈 벗어난 화면 처리하기 264 132 이벤트 작동 설정하기 268 133 기본 이벤트 작동 해지 설정하기 270 134 드래그 앤 드롭 기능 사용하기 273 CHAPTER 8 HTML 요소 279 135 자바스크립트 요소 다루기 280 136 셀렉터 사용하기 282 137 ID의 각 요소 값 읽어 오기 284 138 셀렉터 조건 만족하는 요소 읽어 오기 285 139 클래스명으로 요소 읽어 오기 287 140 〈html〉, 〈body〉 요소 읽어 오기 288 141 부모/자식/전/후 요소 읽어 오기 291 142 부모 요소에 자식 요소 추가하기 292 143 지정 위치에 요소 추가하기 294 144 요소 앞/뒤에 다른 요소 추가하기 296 145 HTML 코드 요소 추가하기 298 146 요소를 동적으로 삭제하기 300 147 요소 자신 삭제하기 302 148 요소 생성하기 304 149 요소 복사하기 307 150 요소 교체하기 309 151 노드 교체하기 311 152 텍스트 요소 다루기 313 153 요소 내부 HTML 다루기 315 154 자신을 포함한 HTML 요소 다루기 318 155 요소 속성 다루기 319 156 〈a〉 태그 _blank의 부모창 조작 제한하기 320 157 요소 클래스 속성 다루기 322 158 요소 클래스 유/무효화하기 324 159 스타일 변경하기 327 160 스타일 확인하기 329 CHAPTER 9 폼 331 161 텍스트 박스 값 읽어 오기 input text 332 162 텍스트 박스 값 변경 확인하기 input text 334 163 텍스트 영역 값 읽어 오기 336 164 텍스트 영역 값 변경 확인하기 338 165 체크박스 상태 읽어 오기 340 166 체크박스 상태 변경 확인하기 342 167 파일 정보 읽어 오기 344 168 텍스트 형식으로 파일 읽어 오기 346 169 데이터 형식으로 파일 읽어 오기 348 170 라디오 버튼 상태 읽어 오기 350 171 라디오 버튼 상태 변경 확인하기 352 172 드롭다운 메뉴 값 읽어 오기 354 173 드롭다운 메뉴 값 변경 확인하기 356 174 슬라이더 값 읽어 오기 358 175 슬라이더 값 변경 확인하기 360 176 색상 선택 정보 읽어 오기 362 177 색상 선택 정보 변경 확인하기 364 178 풀다운 메뉴 사용하기 366 179 폼 전송하기 369 CHAPTER 10 애니메이션 효과 371 180 CSS TransitionsㆍCSS Animations 사용하기 372 181 CSS Transitions 종료 시 작업 처리하기 374 182 CSS Animations 종료 시 작업 처리하기 376 183 Web Animations API 사용하기 378 184 요소 크기 변경하기 380 185 요소 이동하기 382 186 요소 투명도 조절하기 384 187 요소 밝기 조절하기 386 188 요소 채도 조절하기 388 189 requestAnimationFrame 사용하기 390 190 requestAnimationFrame 사용하기 HTML 392 CHAPTER 11 그림/사운드/영상 395 191 스크립트로 이미지 로딩하기 396 192 이미지 로딩 후 작업하기 397 193 이미지 로딩 지연시키기 399 194 Base64 형식 이미지 표시하기 401 195 스크립트로 이미지 요소 추가하기 402 196 사운드 사용하기 404 197 스크립트로 사운드 제어하기 406 198 사운드 재생 조절하기 407 199 사운드 볼륨 조절하기 408 200 Web Audio API 사용하기 409 201 영상 로딩하기 411 202 스크립트로 영상 제어하기 413 203 카메라 기능 사용하기 415 CHAPTER 12 SVG/캔버스 417 204 SVG 사용하기 418 205 SVG 요소를 동적으로 추가하기 421 206 SVG 요소 스타일 변경하기 423 207 SVG 요소 마우스로 다루기 424 208 SVG 요소 애니메이션 효과 주기 425 209 SVG 그래픽 다운로드하기 427 210 캔버스 사용하기 429 211 캔버스 요소 색칠하기/선 그리기 431 212 캔버스에 이미지 붙여넣기 433 213 캔버스 화소 정보 다루기 435 214 이미지의 RGBA 값 확인하기 437 215 캔버스의 이미지 가공하기 439 216 DataURL로 캔버스에 이미지 표시하기 441 217 PNG/JPEG DataURL로 불러오기 443 218 캔버스 그래픽 다운로드하기 445 CHAPTER 13 타이밍 제어 447 219 지정 시간 후 작업 실행하기 448 220 지정 시간 후 작업 실행 해제하기 450 221 시간 주기 작업하기 451 222 시간 주기 작업 해제하기 453 223 비동기화 Promise 사용하기 455 224 Promise 성공/실패 처리하기 457 225 Promise 병렬 처리하기 459 226 Promise 직렬 처리하기 461 227 Promise 동적 직렬 처리하기 463 CHAPTER 14 데이터 송수신 465 228 JSON 알아보기 466 229 JSON 문자열 객체로 변환하기 468 230 객체를 JSON 변환하기 469 231 JSON 변환에 들여쓰기 적용하기 470 232 JSON 변환 기능 커스터마이징 471 233 fetch( )로 텍스트 데이터 읽어 오기 472 234 fetch( )로 JSON 데이터 읽어 오기 474 235 fetch( )로 XML 데이터 읽어 오기 476 236 fetch( )로 바이너리 데이터 읽어 오기 478 237 fetch( )로 데이터 보내기 480 238 XMLHttpRequest로 데이터 읽어 오기 484 239 XMLHttpRequest로 작업 상황 확인하기 486 240 XMLHttpRequest로 작업 취소하기 489 241 백그라운드에서 스크립트 작업하기 491 242 백그라운드에서 작업 실행하기 494 243 푸시 알림 497 CHAPTER 15 로컬 데이터 501 244 localStorage 사용하기 502 245 Storage API 데이터 삭제하기 505 246 쿠키로 로컬 데이터 사용하기 507 247 쿠키 데이터 읽어 오기 509 CHAPTER 16 스마트폰 센서 511 248 위치 정보 읽어 오기 512 249 자이로 센서와 가속도 센서 사용하기 515 250 진동 모터 사용하기 519 CHAPTER 17 디버그 521 251 정보/에러/경고 출력하기 522 252 객체 구조 출력하기 523 253 에러 파악하기 525 254 에러 객체 생성하기 526 255 에러 발생시키기 527 256 에러 발생 확인하기 529 257 에러 발생 시 실행 코드 설정하기 531 258 에러 종류 파악하기 533 CHAPTER 18 함수와 클래스 535 259 함수 내부 변수와 상수의 범위 알기 536 260 클래스 정의하기 539 261 클래스 사용하기(인스턴스화) 541 262 클래스에서 변수 사용하기 542 263 클래스에서 메소드 사용하기 546 264 인스턴스 생성없이 정적 메소드 사용하기 548 265 클래스 계승하기 549 266 클래스 데이터의 setter/getter 사용하기 550 267 this 기능 사용하기(화살표 함수) 552 CHAPTER 19 자바스크립트 심화 555 268 자바스크립트 읽기 타이밍 최적화하기 556 269 처리 파일 분할하기(ES 모듈) 558 270 모듈 내보내기 export 560 271 모듈 가져오기 import 561 272 모듈형 자바스크립트 HTML에서 읽어 오기 563 273 반복 처리를 위한 반복자 사용하기 564 274 iterator 정의하여 사용하기 566 275 유일한 데이터 사용하기(심볼) 570 276 배열과 객체에 독자적인 메소드 추가하기 572 277 맵과 키 사용하기 576 278 데이터 중복 없는 Set 사용하기 580

화살표 함수는 일반 함수와 달리 일부를 생략할 수 있다. 파라미터가 하나인 경우는 ( )의 생략이 가능하나, 파라미터가 없거나 2개 이상인 경우는 생략할 수 없다. 입력 a에 대해 a + 2의 결과를 반환하는 함수를 확인해 보자. _028p sort( )에서 비교 함수를 생략하면 문자열의 유니코드 순서대로 정렬된다. 비교 함수를 생략하게 되면 [1, 5, 10]이나 ['一', '二', '三']처럼 기대하는 정렬 결과를 얻을 수 없다. 그러므로 특별한 이유가 없다면 sort( )에 비교 함수를 명시해야 한다. _126p 고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말한다. 고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있다. 디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용한다. _205p input 요소의 type 속성에 email과 tel 지정이 가능하다. text와 같은 입력 폼이지만 스마트폰에서 폼 형식에 맞는 키보드가 표시된다. tel은 번호 입력용 키보드가 표시되며, email은 영문 키보드가 표시된다. _333p 비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. fetch( )를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며, await나 async와 같은 기능도 기본적으로 알아 두면 좋다. _455p 클래스 내부의 함수를 클래스 메소드 멤버 함수라고 한다. 클래스에 멤버 함수를 정의하기 위해서는 다음과 같이 기술한다. 클래스 멤버 함수에 function은 사용하지 않도록 주의하자. 정의할 수 있는 멤버 함수의 수는 제한이 없다. _546p