9주 dom & event advanced 실습

18
DOM & Event Advanced 실습 9주

Upload: -

Post on 26-Jun-2015

239 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: 9주  dom & event advanced 실습

DOM����������� ������������������  &����������� ������������������  Event����������� ������������������  Advanced����������� ������������������  실습����������� ������������������  

9주

Page 2: 9주  dom & event advanced 실습

공지차주����������� ������������������  수업있어요����������� ������������������  :����������� ������������������  -)����������� ������������������  금요일����������� ������������������  2,3분반����������� ������������������  중����������� ������������������  선택참여

최종����������� ������������������  시험일정����������� ������������������  9월23일까지����������� ������������������  완료하고����������� ������������������  당일����������� ������������������  면담평가를����������� ������������������  합니다����������� ������������������  <1분반>����������� ������������������  9월25,����������� ������������������  26일까지����������� ������������������  완료하고����������� ������������������  당일����������� ������������������  면담평가를����������� ������������������  합니다����������� ������������������  <2,3분반>

Page 3: 9주  dom & event advanced 실습

숙제1

Page 4: 9주  dom & event advanced 실습

생각나니����������� ������������������  ?

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 5: 9주  dom & event advanced 실습

미션����������� ������������������  책의����������� ������������������  특정����������� ������������������  장르를����������� ������������������  마우스����������� ������������������  클릭하면����������� ������������������  

책����������� ������������������  10권에����������� ������������������  해당하는����������� ������������������  임의����������� ������������������  데이터가����������� ������������������  본문내용으로����������� ������������������  ����������� ������������������  대체되도록����������� ������������������  합니다.

개발할����������� ������������������  것은,����������� ������������������  특정����������� ������������������  장르에����������� ������������������  클릭이벤트����������� ������������������  핸들러����������� ������������������  만들고,����������� ������������������  본문에����������� ������������������  대체될����������� ������������������  html����������� ������������������  템플릿����������� ������������������  만들어두고,����������� ������������������  

템플릿에����������� ������������������  넣을����������� ������������������  dummy����������� ������������������  데이터����������� ������������������  10개����������� ������������������  정도����������� ������������������  만들어야����������� ������������������  하고,����������� ������������������  innerHTML에����������� ������������������  결과를����������� ������������������  넣어야����������� ������������������  하고����������� ������������������  

Page 6: 9주  dom & event advanced 실습

숙제2

Page 7: 9주  dom & event advanced 실습

다음과����������� ������������������  같은����������� ������������������  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

Page 8: 9주  dom & event advanced 실습

실습

Page 9: 9주  dom & event advanced 실습

실습1

Page 10: 9주  dom & event advanced 실습

숙제를����������� ������������������  했다면����������� ������������������  현재����������� ������������������  ����������� ������������������  ’장르’를����������� ������������������  클릭하면����������� ������������������  본문의����������� ������������������  책����������� ������������������  내용이����������� ������������������  교체됩니다.����������� ������������������  !

모든����������� ������������������  ‘장르’에����������� ������������������  이벤트를����������� ������������������  등록하지����������� ������������������  않고����������� ������������������  

이벤트����������� ������������������  위임(delegation)방식으로����������� ������������������  처리해보세요.

Page 11: 9주  dom & event advanced 실습

실습2

Page 12: 9주  dom & event advanced 실습

!

‘더보기’����������� ������������������  버튼을����������� ������������������  클릭하면����������� ������������������  기존����������� ������������������  책����������� ������������������  내용에����������� ������������������  ����������� ������������������  

추가로����������� ������������������  책����������� ������������������  내용이����������� ������������������  추가되도록����������� ������������������  합니다.����������� ������������������  

(data는����������� ������������������  임의로����������� ������������������  만들어둡니다)

Page 13: 9주  dom & event advanced 실습

실습3

Page 14: 9주  dom & event advanced 실습

http://goo.gl/qpk3W6

모바일 부분 !

Page 15: 9주  dom & event advanced 실습

A B C

실습 3-1과 3-2중 선택해서 하면 됨

Page 16: 9주  dom & event advanced 실습

실습����������� ������������������  3-1����������� ������������������  ����������� ������������������  

“좌,우����������� ������������������  버튼을����������� ������������������  터치하면����������� ������������������  다른����������� ������������������  콘텐츠가����������� ������������������  노출됩니다”

A B C><

touchstart? , touchend?

Page 17: 9주  dom & event advanced 실습

A B C

image : http://jessefreeman.com/articles/from-webkit-to-windows-8-touch-events/

방향탐지! touchstart, touchmove, touchend

실습����������� ������������������  3-2����������� ������������������  ����������� ������������������  

“슬라이딩����������� ������������������  하면����������� ������������������  다른콘텐츠가����������� ������������������  나옵니다”

Page 18: 9주  dom & event advanced 실습

End ;-D