8주 dom & event basic 실습
Transcript of 8주 dom & event basic 실습
![Page 1: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/1.jpg)
DOM����������� ������������������ &����������� ������������������ Event����������� ������������������ BASIC����������� ������������������
8주
![Page 2: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/2.jpg)
본인����������� ������������������ 프로젝트에서����������� ������������������ ����������� ������������������
document내에����������� ������������������ 모든����������� ������������������ ‘li’태그를����������� ������������������ 찾아서����������� ������������������ class이름을����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들자.����������� ������������������
!����������� ������������������ 힌트����������� ������������������ :����������� ������������������ attribute(속성)에����������� ������������������ 접근하는����������� ������������������ 방법.����������� ������������������
element.id����������� ������������������ 및����������� ������������������ element.className����������� ������������������ 을����������� ������������������ 활용해서����������� ������������������ 접근����������� ������������������ 가능
숙제1
![Page 3: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/3.jpg)
querySelectorAll을����������� ������������������ 활용해서����������� ������������������ ����������� ������������������
class를����������� ������������������ 가지고����������� ������������������ 있지����������� ������������������ 않은����������� ������������������ ����������� ������������������
모든����������� ������������������ element의����������� ������������������ 갯수를����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들어보자.����������� ������������������
!
숙제2
![Page 4: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/4.jpg)
숙제3
자신의����������� ������������������ 프로젝트에����������� ������������������ ����������� ������������������
addEventListener를����������� ������������������ 활용해서����������� ������������������ onload����������� ������������������ 시점에����������� ������������������ ����������� ������������������
header����������� ������������������ 영역을����������� ������������������ 마우스클릭할����������� ������������������ 때����������� ������������������ 콘솔창에����������� ������������������ ‘header영역입니다’����������� ������������������
라는����������� ������������������ 메시지가����������� ������������������ 출력되게����������� ������������������ 해보자.����������� ������������������
!
!
hint.����������� ������������������ window.addEventListener(‘load’����������� ������������������ ,����������� ������������������ function()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ....... ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },false);
![Page 5: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/5.jpg)
실습����������� ������������������ 1.
![Page 6: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/6.jpg)
구글의����������� ������������������ 레이어를����������� ������������������ 살펴봅시다
![Page 7: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/7.jpg)
var ele = document.getElementById("action-dropdown-children-장르");
???
레이어를����������� ������������������ 사라지게����������� ������������������ 하는����������� ������������������ 방법����������� ������������������ !
![Page 8: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/8.jpg)
var ele = document.getElementById("action-dropdown-children-장르");
ele.style.display = “none";
ele.style.display = “block”;
레이어를����������� ������������������ 사라지게����������� ������������������ 하는����������� ������������������ 방법����������� ������������������ !
![Page 9: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/9.jpg)
장르를����������� ������������������ 누르면����������� ������������������ 레이어가����������� ������������������ 나오고,����������� ������������������
장르를����������� ������������������ 다시����������� ������������������ 누르면����������� ������������������ 레이어가����������� ������������������ 닫히게����������� ������������������ 하자
![Page 10: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/10.jpg)
내����������� ������������������ 프로젝트에����������� ������������������
아래와����������� ������������������ 같은����������� ������������������ 레이어����������� ������������������ 하나����������� ������������������ 만들자.
![Page 11: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/11.jpg)
그렇게����������� ������������������ 동작하는����������� ������������������ 코드를����������� ������������������ ����������� ������������������
html/css����������� ������������������ 렌더링이����������� ������������������ 끝난����������� ������������������ 시점����������� ������������������ 이후로����������� ������������������ 옮겨놓자
![Page 12: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/12.jpg)
실습����������� ������������������ 2.
![Page 13: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/13.jpg)
생각나니����������� ������������������ ?
var����������� ������������������ aBookList����������� ������������������ =����������� ������������������ [����������� ������������������ ����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ id����������� ������������������ :����������� ������������������ "book-iLQ5BAAAQBAJ",����������� ������������������ ����������� ������������������ ����������� ������������������ name����������� ������������������ :����������� ������������������ "아서왕과����������� ������������������ 원탁의����������� ������������������ 기사들",����������� ������������������ ����������� ������������������ ����������� ������������������ imgSrc����������� ������������������ :����������� ������������������ "http://goo.gl/tfHw4e",����������� ������������������ ����������� ������������������ ����������� ������������������ src����������� ������������������ :����������� ������������������ "http://goo.gl/65Im7q",����������� ������������������ ����������� ������������������ ����������� ������������������ author����������� ������������������ :����������� ������������������ "토머스����������� ������������������ 불핀치"����������� ������������������ ����������� ������������������ },����������� ������������������ ����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ id����������� ������������������ :����������� ������������������ "book-jLQ5BADJFIEWL",����������� ������������������ ����������� ������������������ ����������� ������������������ name����������� ������������������ :����������� ������������������ "어린왕자",����������� ������������������ ����������� ������������������ ����������� ������������������ imgSrc����������� ������������������ :����������� ������������������ "http://goo.gl/pDXdVo",����������� ������������������ ����������� ������������������ ����������� ������������������ src����������� ������������������ :����������� ������������������ "http://goo.gl/aSvgGF",����������� ������������������ ����������� ������������������ ����������� ������������������ author����������� ������������������ :����������� ������������������ "앙투안����������� ������������������ 드����������� ������������������ 생텍쥐페리"����������� ������������������ ����������� ������������������ }����������� ������������������ ];����������� ������������������ !var����������� ������������������ sTemplate����������� ������������������ =����������� ������������������ "<h2><%=title%></h2><div><a����������� ������������������ href='<%=endPageLink%>'><img����������� ������������������ src='<%=imgUrl%>'></a></div>"����������� ������������������ !!makeBookElement(sTemplate,����������� ������������������ aBookList);����������� ������������������ ����������� ������������������
//����������� ������������������ “<h2>어린왕자</h2><div><a����������� ������������������ href='http://goo.gl/aSvgGF'><img����������� ������������������ src='http://goo.gl/pDXdVo'></a></div>"
데이터를����������� ������������������ 기반으로����������� ������������������ 동적으로����������� ������������������ HTML����������� ������������������ 문자열을����������� ������������������ 만드는����������� ������������������ 함수를����������� ������������������ 제작합니다.
![Page 14: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/14.jpg)
데이터를����������� ������������������ 정의해둔후,����������� ������������������ 어딘가를����������� ������������������ 클릭하면����������� ������������������ 그����������� ������������������ 데이터가����������� ������������������ HTML문자열로����������� ������������������
결합되면서����������� ������������������ ����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
![Page 15: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/15.jpg)
생각나니����������� ������������������ ?
![Page 16: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/16.jpg)
..����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
엔터치면!
![Page 17: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/17.jpg)
..����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
![Page 18: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/18.jpg)
미션����������� ������������������ 책의����������� ������������������ 특정����������� ������������������ 장르를����������� ������������������ 마우스����������� ������������������ 클릭하면����������� ������������������
책����������� ������������������ 10권에����������� ������������������ 해당하는����������� ������������������ 임의����������� ������������������ 데이터가����������� ������������������ 본문내용으로����������� ������������������ ����������� ������������������ 대체되도록����������� ������������������ 합니다.
개발할����������� ������������������ 것은,����������� ������������������ 특정����������� ������������������ 장르에����������� ������������������ 클릭이벤트����������� ������������������ 핸들러����������� ������������������ 만들고,����������� ������������������ 본문에����������� ������������������ 대체될����������� ������������������ html����������� ������������������ 템플릿����������� ������������������ 만들어두고,����������� ������������������
템플릿에����������� ������������������ 넣을����������� ������������������ dummy����������� ������������������ 데이터����������� ������������������ 10개����������� ������������������ 정도����������� ������������������ 만들어야����������� ������������������ 하고,����������� ������������������ innerHTML에����������� ������������������ 결과를����������� ������������������ 넣어야����������� ������������������ 하고����������� ������������������
![Page 19: 8주 dom & event basic 실습](https://reader033.fdocuments.net/reader033/viewer/2022060118/558c64add8b42a176c8b4762/html5/thumbnails/19.jpg)
End ;-D