자바스크립트 웹 개발을 위한 궁극의 레시피집!자바스크립트는 세세한 기능과 데이터 연동을 통해 다양한 동적 웹 페이지를 만들 수 있다. 실무에서 자주 쓰는 코드를 선별하여 싣고, 기능별 분류 카테고리를 만들어 필요한 부분만을 참고하여 활용할 수 있도록 구성하였다. 해설의 샘플 코드를 이용하여 동작을 확인하거나 응용과 변경을 통해 실제로 필요한 기능만을 구현할 수도 있다.
주식회사 ICS의 인터랙션 디자이너로, 큐슈대학교 음향설계학과에서 미디어아트를 공부했다. 현재는 모바일 애플리케이션 개발과 웹 페이지 제작을 주로 하고 있으며, 동시에 세미나 강사와 테크니컬 기사 작성 등을 통해 정보를 나누고 있다. 평소에는 자바스크립트와 타입스크립트의 최신 기능을 꾸준히 따라잡기 위한 노력도 게을리하지 않고 있다.
@tonkotsuboy_com
CHAPTER 1 자바스크립트 기초 001001 자바스크립트의 기초 002002 자바스크립트의 구현(사용) 방식 003003 다른 파일에서 자바스크립트 불러오기 005004 값을 로그로 출력하기 007005 계산 프로그램 만들기 013006 변수 선언하기 let 014007 상수 사용하기 const 017008 주석(코멘트) 추가하기 021009 두 개의 값 비교하기(비교 연산자) 022010 복합형(축약형) 대입 연산자 사용하기 024011 함수 사용하기 function 025012 화살표 함수 사용하기 028013 함수의 파라미터 초깃값 설정하기 030014 다수의 파라미터를 가지는 함수 정의하기 031015 조건문 사용하기 if 033016 조건문 사용하기 switch 036017 반복문 사용하기 for 040018 반복문 사용하기 while 042019 반복 처리 스킵 043CHAPTER 2 판별, 수, 문자 045020 진위 여부 판별하기 046021 숫자 다루기 048022 어림 계산하기(반올림, 올림, 버림) 050023 임의의 수 다루기 052024 수학 계산 함수 사용하기 055025 삼각 함수 사용하기 057026 문자열 다루기 060027 문자열의 길이 확인하기 061028 문자열의 공백 처리하기 trim 063029 문자열 검색하기(인덱스 검색) 064030 문자열 검색하기(부분 검색) 067031 문자열에서 문자 다루기(문자열에서 문자 추출하기) 069032 문자열 다루기(위치 지정하여 선택하기) 072033 문자열 다루기(글자 수 지정하여 선택하기) 074034 지정 문자열 변환하기 075035 문자열 나누기 078036 문자열 합치기 081037 문자열의 대소문자 변환하기 083038 문자열과 식 함께 다루기 085039 정규 표현식 사용하기 087040 정규 표현식으로 특정 문자 검색하기 089041 소수점 자릿수 지정하기 091042 문자열 길이 맞추기 094043 문자열 URI 이스케이프 처리하기 097044 문자열 URI 디코드하기 100CHAPTER 3 데이터 다루기 101045 배열 정의하기 102046 배열 길이 확인하기 104047 배열 요소 다루기 ① 105048 배열 요소 다루기 ② 108049 배열 요소 다루기 ③ 109050 배열 요소 추가하기 110051 배열 요소 삭제하기 111052 배열 요소 부분 변환하기 112053 배열 결합하기 113054 배열 요소 결합하여 문자열 만들기 114055 배열 요소 검색하기 115056 조건을 만족하는 배열 요소 가져오기 116057 배열 요소 역순 정렬하기 120058 배열 요소 정렬 방법 지정하기 121059 객체를 포함하는 배열 정렬하기 123060 배열 요소 알파벳순 정렬하기 127061 배열 요소 추출하여 새 배열 만들기 128062 조건을 만족하는 배열 요소 추출하여 새 배열 만들기 130063 배열 요소 하나로 정리하기 134064 유사 배열 객체를 배열로 변환하기 136065 요소의 개별 변수에 분할 대입하기 139066 배열 섞기(셔플) 140067 다양한 데이터 타입을 가진 객체 사용하기 142068 객체 선언, 수정, 확인하기 144069 객체 복사하기 146070 객체 속성 확인하기 149071 객체 요소 값 확인하기 151072 객체 요소 분할 대입(비구조화 할당)하기 152073 객체 수정 제한하기 154CHAPTER 4 데이터 심화 157074 데이터 타입 이해하기 158075 가변성과 불가변성 이해하기 160076 데이터 타입 확인하기 161077 객체 인스턴스 확인하기 163078 값 전달과 참조 전달 이해하기 165079 데이터 타입 변환하기 168080 정의되지 않은 데이터 이해하기 170081 빈 데이터 이해하기 171CHAPTER 5 날짜와 시간 173082 날짜 다루기(연도) 174083 날짜 다루기(월, 일) 175084 시간 다루기 177085 요일 다루기 179086 현재 시간과 날짜 가져오기 181087 날짜 문자열의 타임스탬프 확인하기 183088 날짜 설정하기 184089 날짜 계산하기 186090 날짜 차이 구하기 187091 경과 시간 확인하기 188092 카운트다운 190093 아날로그 시간 표시하기 192CHAPTER 6 브라우저 197094 경고 표시하기 198095 확인창 표시하기 200096 입력 프롬프트 표시하기 202097 윈도우 사이즈 확인하기 203098 디바이스 화소 확인하기 205099 캔버스에 디바이스 화소 맞추기 206100 터치 디바이스 사용 확인하기 208101 페이지 이동하기 209102 페이지 리로드하기 210103 페이지 이동하기(앞/뒤로 가기) 211104 해시(#) 처리하기 212105 해시 변경 확인하기 213106 새 윈도우 창 열기 215107 스크롤 크기 확인하기 216108 스크롤 설정하기 217109 타이틀 변경하기 218110 포커스 확인하기 220111 전체 화면 표시하기 222112 온라인/오프라인 대응하기 225CHAPTER 7 이벤트 처리 227113 이벤트 처리 이해하기 228114 이벤트 추가하기 229115 이벤트 리스너 1회 실행하기 231116 이벤트 리스너 삭제하기 232117 페이지 로드 시 이벤트 사용하기 233118 클릭 이벤트 사용하기 236119 마우스 조작 이벤트 사용하기 237120 마우스 오버 이벤트 사용하기 239121 마우스 오버 이벤트 사용하기(이벤트 버블링) 241122 마우스 좌표 확인하기 243123 스크롤 이벤트 처리하기 246124 텍스트 선택 이벤트 처리하기 247125 터치 이벤트 처리하기 250126 터치 이벤트 정보 확인하기 252127 키보드 입력 이벤트 처리하기 254128 입력된 키 정보 확인하기 256129 탭 화면 이벤트 처리하기 258130 화면 사이즈 이벤트 처리하기 261131 사이즈 벗어난 화면 처리하기 264132 이벤트 작동 설정하기 268133 기본 이벤트 작동 해지 설정하기 270134 드래그 앤 드롭 기능 사용하기 273CHAPTER 8 HTML 요소 279135 자바스크립트 요소 다루기 280136 셀렉터 사용하기 282137 ID의 각 요소 값 읽어 오기 284138 셀렉터 조건 만족하는 요소 읽어 오기 285139 클래스명으로 요소 읽어 오기 287140 〈html〉, 〈body〉 요소 읽어 오기 288141 부모/자식/전/후 요소 읽어 오기 291142 부모 요소에 자식 요소 추가하기 292143 지정 위치에 요소 추가하기 294144 요소 앞/뒤에 다른 요소 추가하기 296145 HTML 코드 요소 추가하기 298146 요소를 동적으로 삭제하기 300147 요소 자신 삭제하기 302148 요소 생성하기 304149 요소 복사하기 307150 요소 교체하기 309151 노드 교체하기 311152 텍스트 요소 다루기 313153 요소 내부 HTML 다루기 315154 자신을 포함한 HTML 요소 다루기 318155 요소 속성 다루기 319156 〈a〉 태그 _blank의 부모창 조작 제한하기 320157 요소 클래스 속성 다루기 322158 요소 클래스 유/무효화하기 324159 스타일 변경하기 327160 스타일 확인하기 329CHAPTER 9 폼 331161 텍스트 박스 값 읽어 오기 input text 332162 텍스트 박스 값 변경 확인하기 input text 334163 텍스트 영역 값 읽어 오기 336164 텍스트 영역 값 변경 확인하기 338165 체크박스 상태 읽어 오기 340166 체크박스 상태 변경 확인하기 342167 파일 정보 읽어 오기 344168 텍스트 형식으로 파일 읽어 오기 346169 데이터 형식으로 파일 읽어 오기 348170 라디오 버튼 상태 읽어 오기 350171 라디오 버튼 상태 변경 확인하기 352172 드롭다운 메뉴 값 읽어 오기 354173 드롭다운 메뉴 값 변경 확인하기 356174 슬라이더 값 읽어 오기 358175 슬라이더 값 변경 확인하기 360176 색상 선택 정보 읽어 오기 362177 색상 선택 정보 변경 확인하기 364178 풀다운 메뉴 사용하기 366179 폼 전송하기 369CHAPTER 10 애니메이션 효과 371180 CSS Transitions·CSS Animations 사용하기 372181 CSS Transitions 종료 시 작업 처리하기 374182 CSS Animations 종료 시 작업 처리하기 376183 Web Animations API 사용하기 378184 요소 크기 변경하기 380185 요소 이동하기 382186 요소 투명도 조절하기 384187 요소 밝기 조절하기 386188 요소 채도 조절하기 388189 requestAnimationFrame 사용하기 390190 requestAnimationFrame 사용하기 HTML 392CHAPTER 11 그림/사운드/영상 395191 스크립트로 이미지 로딩하기 396192 이미지 로딩 후 작업하기 397193 이미지 로딩 지연시키기 399194 Base64 형식 이미지 표시하기 401195 스크립트로 이미지 요소 추가하기 402196 사운드 사용하기 404197 스크립트로 사운드 제어하기 406198 사운드 재생 조절하기 407199 사운드 볼륨 조절하기 408200 Web Audio API 사용하기 409201 영상 로딩하기 411202 스크립트로 영상 제어하기 413203 카메라 기능 사용하기 415CHAPTER 12 SVG/캔버스 417204 SVG 사용하기 418205 SVG 요소를 동적으로 추가하기 421206 SVG 요소 스타일 변경하기 423207 SVG 요소 마우스로 다루기 424208 SVG 요소 애니메이션 효과 주기 425209 SVG 그래픽 다운로드하기 427210 캔버스 사용하기 429211 캔버스 요소 색칠하기/선 그리기 431212 캔버스에 이미지 붙여넣기 433213 캔버스 화소 정보 다루기 435214 이미지의 RGBA 값 확인하기 437215 캔버스의 이미지 가공하기 439216 DataURL로 캔버스에 이미지 표시하기 441217 PNG/JPEG DataURL로 불러오기 443218 캔버스 그래픽 다운로드하기 445CHAPTER 13 타이밍 제어 447219 지정 시간 후 작업 실행하기 448220 지정 시간 후 작업 실행 해제하기 450221 시간 주기 작업하기 451222 시간 주기 작업 해제하기 453223 비동기화 Promise 사용하기 455224 Promise 성공/실패 처리하기 457225 Promise 병렬 처리하기 459226 Promise 직렬 처리하기 461227 Promise 동적 직렬 처리하기 463CHAPTER 14 데이터 송수신 465228 JSON 알아보기 466229 JSON 문자열 객체로 변환하기 468230 객체를 JSON 변환하기 469231 JSON 변환에 들여쓰기 적용하기 470232 JSON 변환 기능 커스터마이징 471233 fetch( )로 텍스트 데이터 읽어 오기 472234 fetch( )로 JSON 데이터 읽어 오기 474235 fetch( )로 XML 데이터 읽어 오기 476236 fetch( )로 바이너리 데이터 읽어 오기 478237 fetch( )로 데이터 보내기 480238 XMLHttpRequest로 데이터 읽어 오기 484239 XMLHttpRequest로 작업 상황 확인하기 486240 XMLHttpRequest로 작업 취소하기 489241 백그라운드에서 스크립트 작업하기 491242 백그라운드에서 작업 실행하기 494243 푸시 알림 497CHAPTER 15 로컬 데이터 501244 localStorage 사용하기 502245 Storage API 데이터 삭제하기 505246 쿠키로 로컬 데이터 사용하기 507247 쿠키 데이터 읽어 오기 509CHAPTER 16 스마트폰 센서 511248 위치 정보 읽어 오기 512249 자이로 센서와 가속도 센서 사용하기 515250 진동 모터 사용하기 519CHAPTER 17 디버그 521251 정보/에러/경고 출력하기 522252 객체 구조 출력하기 523253 에러 파악하기 525254 에러 객체 생성하기 526255 에러 발생시키기 527256 에러 발생 확인하기 529257 에러 발생 시 실행 코드 설정하기 531258 에러 종류 파악하기 533CHAPTER 18 함수와 클래스 535259 함수 내부 변수와 상수의 범위 알기 536260 클래스 정의하기 539261 클래스 사용하기(인스턴스화) 541262 클래스에서 변수 사용하기 542263 클래스에서 메소드 사용하기 546264 인스턴스 생성없이 정적 메소드 사용하기 548265 클래스 계승하기 549266 클래스 데이터의 setter/getter 사용하기 550267 this 기능 사용하기(화살표 함수) 552CHAPTER 19 자바스크립트 심화 555268 자바스크립트 읽기 타이밍 최적화하기 556269 처리 파일 분할하기(ES 모듈) 558270 모듈 내보내기 export 560271 모듈 가져오기 import 561272 모듈형 자바스크립트 HTML에서 읽어 오기 563273 반복 처리를 위한 반복자 사용하기 564274 iterator 정의하여 사용하기 566275 유일한 데이터 사용하기(심볼) 570276 배열과 객체에 독자적인 메소드 추가하기 572277 맵과 키 사용하기 576278 데이터 중복 없는 Set 사용하기 580
