8주 dom & event basic 실습
TRANSCRIPT
DOM����������� ������������������ &����������� ������������������ Event����������� ������������������ BASIC����������� ������������������
8주
본인����������� ������������������ 프로젝트에서����������� ������������������ ����������� ������������������
document내에����������� ������������������ 모든����������� ������������������ ‘li’태그를����������� ������������������ 찾아서����������� ������������������ class이름을����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들자.����������� ������������������
!����������� ������������������ 힌트����������� ������������������ :����������� ������������������ attribute(속성)에����������� ������������������ 접근하는����������� ������������������ 방법.����������� ������������������
element.id����������� ������������������ 및����������� ������������������ element.className����������� ������������������ 을����������� ������������������ 활용해서����������� ������������������ 접근����������� ������������������ 가능
숙제1
querySelectorAll을����������� ������������������ 활용해서����������� ������������������ ����������� ������������������
class를����������� ������������������ 가지고����������� ������������������ 있지����������� ������������������ 않은����������� ������������������ ����������� ������������������
모든����������� ������������������ element의����������� ������������������ 갯수를����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들어보자.����������� ������������������
!
숙제2
숙제3
자신의����������� ������������������ 프로젝트에����������� ������������������ ����������� ������������������
addEventListener를����������� ������������������ 활용해서����������� ������������������ onload����������� ������������������ 시점에����������� ������������������ ����������� ������������������
header����������� ������������������ 영역을����������� ������������������ 마우스클릭할����������� ������������������ 때����������� ������������������ 콘솔창에����������� ������������������ ‘header영역입니다’����������� ������������������
라는����������� ������������������ 메시지가����������� ������������������ 출력되게����������� ������������������ 해보자.����������� ������������������
!
!
hint.����������� ������������������ window.addEventListener(‘load’����������� ������������������ ,����������� ������������������ function()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ....... ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },false);
실습����������� ������������������ 1.
구글의����������� ������������������ 레이어를����������� ������������������ 살펴봅시다
var ele = document.getElementById("action-dropdown-children-장르");
???
레이어를����������� ������������������ 사라지게����������� ������������������ 하는����������� ������������������ 방법����������� ������������������ !
var ele = document.getElementById("action-dropdown-children-장르");
ele.style.display = “none";
ele.style.display = “block”;
레이어를����������� ������������������ 사라지게����������� ������������������ 하는����������� ������������������ 방법����������� ������������������ !
장르를����������� ������������������ 누르면����������� ������������������ 레이어가����������� ������������������ 나오고,����������� ������������������
장르를����������� ������������������ 다시����������� ������������������ 누르면����������� ������������������ 레이어가����������� ������������������ 닫히게����������� ������������������ 하자
내����������� ������������������ 프로젝트에����������� ������������������
아래와����������� ������������������ 같은����������� ������������������ 레이어����������� ������������������ 하나����������� ������������������ 만들자.
그렇게����������� ������������������ 동작하는����������� ������������������ 코드를����������� ������������������ ����������� ������������������
html/css����������� ������������������ 렌더링이����������� ������������������ 끝난����������� ������������������ 시점����������� ������������������ 이후로����������� ������������������ 옮겨놓자
실습����������� ������������������ 2.
생각나니����������� ������������������ ?
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����������� ������������������ 문자열을����������� ������������������ 만드는����������� ������������������ 함수를����������� ������������������ 제작합니다.
데이터를����������� ������������������ 정의해둔후,����������� ������������������ 어딘가를����������� ������������������ 클릭하면����������� ������������������ 그����������� ������������������ 데이터가����������� ������������������ HTML문자열로����������� ������������������
결합되면서����������� ������������������ ����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
생각나니����������� ������������������ ?
..����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
엔터치면!
..����������� ������������������ 본문내용으로����������� ������������������ 대체됩니다.����������� ������������������ ����������� ������������������
미션����������� ������������������ 책의����������� ������������������ 특정����������� ������������������ 장르를����������� ������������������ 마우스����������� ������������������ 클릭하면����������� ������������������
책����������� ������������������ 10권에����������� ������������������ 해당하는����������� ������������������ 임의����������� ������������������ 데이터가����������� ������������������ 본문내용으로����������� ������������������ ����������� ������������������ 대체되도록����������� ������������������ 합니다.
개발할����������� ������������������ 것은,����������� ������������������ 특정����������� ������������������ 장르에����������� ������������������ 클릭이벤트����������� ������������������ 핸들러����������� ������������������ 만들고,����������� ������������������ 본문에����������� ������������������ 대체될����������� ������������������ html����������� ������������������ 템플릿����������� ������������������ 만들어두고,����������� ������������������
템플릿에����������� ������������������ 넣을����������� ������������������ dummy����������� ������������������ 데이터����������� ������������������ 10개����������� ������������������ 정도����������� ������������������ 만들어야����������� ������������������ 하고,����������� ������������������ innerHTML에����������� ������������������ 결과를����������� ������������������ 넣어야����������� ������������������ 하고����������� ������������������
End ;-D