9주 dom & event advanced 실습
TRANSCRIPT
DOM����������� ������������������ &����������� ������������������ Event����������� ������������������ Advanced����������� ������������������ 실습����������� ������������������
9주
공지차주����������� ������������������ 수업있어요����������� ������������������ :����������� ������������������ -)����������� ������������������ 금요일����������� ������������������ 2,3분반����������� ������������������ 중����������� ������������������ 선택참여
최종����������� ������������������ 시험일정����������� ������������������ 9월23일까지����������� ������������������ 완료하고����������� ������������������ 당일����������� ������������������ 면담평가를����������� ������������������ 합니다����������� ������������������ <1분반>����������� ������������������ 9월25,����������� ������������������ 26일까지����������� ������������������ 완료하고����������� ������������������ 당일����������� ������������������ 면담평가를����������� ������������������ 합니다����������� ������������������ <2,3분반>
숙제1
생각나니����������� ������������������ ?
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����������� ������������������ 문자열을����������� ������������������ 만드는����������� ������������������ 함수를����������� ������������������ 제작합니다.
미션����������� ������������������ 책의����������� ������������������ 특정����������� ������������������ 장르를����������� ������������������ 마우스����������� ������������������ 클릭하면����������� ������������������
책����������� ������������������ 10권에����������� ������������������ 해당하는����������� ������������������ 임의����������� ������������������ 데이터가����������� ������������������ 본문내용으로����������� ������������������ ����������� ������������������ 대체되도록����������� ������������������ 합니다.
개발할����������� ������������������ 것은,����������� ������������������ 특정����������� ������������������ 장르에����������� ������������������ 클릭이벤트����������� ������������������ 핸들러����������� ������������������ 만들고,����������� ������������������ 본문에����������� ������������������ 대체될����������� ������������������ html����������� ������������������ 템플릿����������� ������������������ 만들어두고,����������� ������������������
템플릿에����������� ������������������ 넣을����������� ������������������ dummy����������� ������������������ 데이터����������� ������������������ 10개����������� ������������������ 정도����������� ������������������ 만들어야����������� ������������������ 하고,����������� ������������������ innerHTML에����������� ������������������ 결과를����������� ������������������ 넣어야����������� ������������������ 하고����������� ������������������
숙제2
다음과����������� ������������������ 같은����������� ������������������ element����������� ������������������ ����������� ������������������ 가����������� ������������������ 있다.����������� ������������������ <div id= 'wrap'> <ul> <li>뉴스</li> <li>카페</li> <li>블로그</li> <li>메일</li> </ul> </div>
!위����������� ������������������ html에����������� ������������������ 어떠한����������� ������������������ id,class����������� ������������������ 를����������� ������������������ 부여하지����������� ������������������ 않고����������� ������������������ ����������� ������������������
블로그����������� ������������������ 앞에����������� ������������������ ‘쇼핑’을����������� ������������������ 동적으로����������� ������������������ 추가하라����������� ������������������ ����������� ������������������ ����������� ������������������
(insertBefore,����������� ������������������ createElement����������� ������������������ ,textContent����������� ������������������ 를����������� ������������������ 사용)
http://jsbin.com/abafid/1/edit
실습
실습1
숙제를����������� ������������������ 했다면����������� ������������������ 현재����������� ������������������ ����������� ������������������ ’장르’를����������� ������������������ 클릭하면����������� ������������������ 본문의����������� ������������������ 책����������� ������������������ 내용이����������� ������������������ 교체됩니다.����������� ������������������ !
모든����������� ������������������ ‘장르’에����������� ������������������ 이벤트를����������� ������������������ 등록하지����������� ������������������ 않고����������� ������������������
이벤트����������� ������������������ 위임(delegation)방식으로����������� ������������������ 처리해보세요.
실습2
!
‘더보기’����������� ������������������ 버튼을����������� ������������������ 클릭하면����������� ������������������ 기존����������� ������������������ 책����������� ������������������ 내용에����������� ������������������ ����������� ������������������
추가로����������� ������������������ 책����������� ������������������ 내용이����������� ������������������ 추가되도록����������� ������������������ 합니다.����������� ������������������
(data는����������� ������������������ 임의로����������� ������������������ 만들어둡니다)
실습3
A B C
실습 3-1과 3-2중 선택해서 하면 됨
실습����������� ������������������ 3-1����������� ������������������ ����������� ������������������
“좌,우����������� ������������������ 버튼을����������� ������������������ 터치하면����������� ������������������ 다른����������� ������������������ 콘텐츠가����������� ������������������ 노출됩니다”
A B C><
touchstart? , touchend?
A B C
image : http://jessefreeman.com/articles/from-webkit-to-windows-8-touch-events/
방향탐지! touchstart, touchmove, touchend
실습����������� ������������������ 3-2����������� ������������������ ����������� ������������������
“슬라이딩����������� ������������������ 하면����������� ������������������ 다른콘텐츠가����������� ������������������ 나옵니다”
End ;-D