완성된 웹사이트로 배우는 자바스크립트 : 하나의 웹사이트를 구현하며 익히는 자바스크립트 입문

마나

저자:마나Mana

일본에서2년간그래픽디자이너로일한뒤캐나다밴쿠버에있는웹제작학교를졸업했다.캐나다,호주,영국회사에서웹디자이너로근무했으며현재는웹사이트제작에대해강의하고있다.블로그‘Webクリエイタボックス(웹크리에이터박스)’는2010년일본알파블로거어워드를수상했다.저서인『러닝스쿨!한권으로끝내는HTML+CSS웹디자인입문』『완성된웹사이트로배우는HTML&CSS웹디자인』으로각각2019년,2021년CPU대상서적부문대상을수상했다.



역자:신은화

이화여자대학교에서컴퓨터학을전공했으며일본미에대학교에서교환학생으로정보공학을공부했다.LGCNS에서15년째근무하며프로그램개발,기획,사업개발등다양한업무를거쳐현재는클라우드빌링업무를담당하고있다.옮긴책으로는『가장쉬운네트워크가상화입문책』『인프라디자인패턴』『완벽한IT인프라구축을위한Docker』『완성된웹사이트로배우는HTML&CSS웹디자인』이있다.

CHAPTER1자바스크립트로할수있는것
1.1자바스크립트란
1.2자바스크립트로할수있는것
1.3자바스크립트를사용한여러웹사이트

CHAPTER2자바스크립트맛보기
2.1자바스크립트는어디에작성할까
2.2자바스크립트를작성하는환경을준비해보자
2.3첫자바스크립트를작성해보자
2.4자바스크립트를작성할때의기본규칙
2.5콘솔을사용해보자

CHAPTER3자바스크립트기초배우기
3.1작성할컬러피커소개
3.2필요한파일준비하기
3.3컬러피커의컬러값가져오기
3.4텍스트바꿔보기
3.5DOM이해하기
3.6템플릿문자열로표시하기
3.7상수로깔끔하게코드정리하기
3.8컬러코드를표시하는‘계기’만들기
3.9함수로선택한색가져오기
3.10페이지배경색바꾸기
3.11조건을붙여서색상명표시하기

CHAPTER4이벤트로처리하기
4.1이벤트란
4.2로딩중인이미지만들기
4.3로딩중인이미지만들기-CSS클래스추가하기
4.4버튼을클릭하여다크모드로바꾸기
4.5버튼을클릭하여다크모드로바꾸기-CSS클래스바꾸기
4.6버튼을클릭하면다크모드로바꾸기-버튼텍스트바꾸기
4.7입력한글자수세어보기
4.8입력한글자수세어보기-length로카운트하기
4.9입력한글자수세어보기-글자수에따라다르게표시하기
4.10버튼상태변경
4.11버튼상태변경-체크하면버튼활성화시키기
4.12버튼상태변경-더욱효율적인구현방법생각하기
4.13페이지의스크롤양표시
4.14페이지의스크롤양표시-스크롤양가져오기
4.15페이지의스크롤양표시-페이지사이즈가져오기
4.16페이지의스크롤양표시-계산식작성

CHAPTER5여러데이터사용해보기
5.1이미지목록페이지소개
5.2insertAdjacentHTML로HTML태그삽입하기
5.3배열로여러이미지파일명모으기
5.4배열안에있는이미지표시하기
5.5for문의반복처리개념이해하기
5.6for문으로이미지목록표시하기
5.7변수let과상수const의차이점
5.8객체로이미지,메뉴명,가격정리
5.9객체정보가져오기
5.10배열과객체를조합하여데이터를하나로정리하기
5.11목록표시하기
5.12분할대입으로깔끔한코드만들기

CHAPTER6애니메이션추가하기
6.1움직임이있는웹사이트예시보기
6.2움직임이있을때효과적인이유
6.3안정감을주는움직임이란
6.4제목이밑에서부터떠오르는것처럼나타내기
6.5제목이밑에서부터떠오르는것처럼나타내기-애니메이션기본작성법
6.6제목이밑에서부터떠오르는것처럼나타내기-여러애니메이션추가하기
6.7제목이밑에서부터떠오르는것처럼나타내기-움직임에상세설정더하기
6.8제목에사용할수있는다양한애니메이션
6.9여러이미지를순서대로표시하기
6.10여러이미지를순서대로표시하기-모든클래스가져오기
6.11여러이미지를순서대로표시하기-하나씩늦추기
6.12이미지에사용할수있는여러애니메이션
6.13스크롤과애니메이션조합하기
6.14스크롤과애니메이션조합하기-IntersectionObserver조합
6.15스크롤과애니메이션조합하기-교차상태정보살펴보기
6.16스크롤과애니메이션조합하기-움직임추가하기

CHAPTER7웹페이지만들기
7.1작성할웹페이지소개
7.2로딩에서화면바뀜
7.3로딩에서화면바뀜-화면이바뀌는스크린만들기
7.4로딩에서화면바뀜-애니메이션타이밍조절
7.5이미지갤러리
7.6이미지갤러리-커서를갖다댔을때의애니메이션
7.7이미지갤러리-커서를갖다댔을때크게표시
7.8이미지갤러리-여러요소를forEach로작성하기
7.9슬라이드메뉴
7.10슬라이드메뉴-클릭해서메뉴열기
7.11슬라이드메뉴-위에서부터순서대로표시하기
7.12스크롤로요소표시
7.13스크롤로요소표시-fadein클래스의HTML요소가져오기
7.14스크롤로요소표시-부드럽게표시하는애니메이션설정
7.15스크롤로요소표시-여러번실행되지않도록제어

CHAPTER8오류와해결방법
8.1오류확인방법
8.2자주발생하는오류리스트

누구나재미있게배울수있는자바스크립트입문서!
웹디자인인플루언서저자Mana가알려주는
오늘당장적용가능한자바스크립트기초의모든것

자바스크립트는웹사이트에생명을불어넣는프로그래밍언어입니다.단지웹사이트를더편리하게,예쁘게만들어보고싶을뿐인데복잡한자바스크립트문법때문에포기했다면이책으로시작해보세요.자바스크립트기초프로그래밍을중심으로이벤트,데이터활용,애니메이션까지누구나재미있게배울수있도록구성했습니다.

완성된웹사이트로배울수있는자바스크립트효과
로딩화면자바스크립트이벤트,애니메이션타이밍조절을이용하여사용자의기대감을높일수있는화면을만듭니다.
이미지갤러리섬네일이미지에커서를대면애니메이션과함께사진이나타나는효과를만듭니다.
슬라이드메뉴햄버거아이콘을클릭하면메뉴패널이나타났다가다시들어가는구조를만듭니다.
스크롤로요소나타내기페이지를스크롤하면요소가밑에서부터부드럽게나타나는화면을만듭니다.

대상독자
HTML,CSS기초학습을마치고다음목표를찾고있는사람
자바스크립트를공부하다포기한적있는사람
움직이는웹사이트를만들고싶은초보웹퍼블리셔/프런트엔드개발자
웹퍼블리셔/기획자/개발자와협업을원활하게하고싶은웹디자이너