8주 dom & event basic 실습

19
DOM & Event BASIC 8주

Upload: -

Post on 26-Jun-2015

318 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: 8주  dom & event basic 실습

DOM����������� ������������������  &����������� ������������������  Event����������� ������������������  BASIC����������� ������������������  

8주

Page 2: 8주  dom & event basic 실습

본인����������� ������������������  프로젝트에서����������� ������������������  ����������� ������������������  

document내에����������� ������������������  모든����������� ������������������  ‘li’태그를����������� ������������������  찾아서����������� ������������������  class이름을����������� ������������������  출력하는����������� ������������������  함수를����������� ������������������  만들자.����������� ������������������  

!����������� ������������������  힌트����������� ������������������  :����������� ������������������  attribute(속성)에����������� ������������������  접근하는����������� ������������������  방법.����������� ������������������  

element.id����������� ������������������  및����������� ������������������  element.className����������� ������������������  을����������� ������������������  활용해서����������� ������������������  접근����������� ������������������  가능

숙제1

Page 3: 8주  dom & event basic 실습

querySelectorAll을����������� ������������������  활용해서����������� ������������������  ����������� ������������������  

class를����������� ������������������  가지고����������� ������������������  있지����������� ������������������  않은����������� ������������������  ����������� ������������������  

모든����������� ������������������  element의����������� ������������������  갯수를����������� ������������������  출력하는����������� ������������������  함수를����������� ������������������  만들어보자.����������� ������������������  

!

숙제2

Page 4: 8주  dom & event basic 실습

숙제3

자신의����������� ������������������  프로젝트에����������� ������������������  ����������� ������������������  

addEventListener를����������� ������������������  활용해서����������� ������������������  onload����������� ������������������  시점에����������� ������������������  ����������� ������������������  

header����������� ������������������  영역을����������� ������������������  마우스클릭할����������� ������������������  때����������� ������������������  콘솔창에����������� ������������������  ‘header영역입니다’����������� ������������������  

라는����������� ������������������  메시지가����������� ������������������  출력되게����������� ������������������  해보자.����������� ������������������  

!

!

hint.����������� ������������������  window.addEventListener(‘load’����������� ������������������  ,����������� ������������������  function()����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ....... ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  },false);

Page 5: 8주  dom & event basic 실습

실습����������� ������������������  1.

Page 6: 8주  dom & event basic 실습

구글의����������� ������������������  레이어를����������� ������������������  살펴봅시다

Page 7: 8주  dom & event basic 실습

var ele = document.getElementById("action-dropdown-children-장르");

???

레이어를����������� ������������������  사라지게����������� ������������������  하는����������� ������������������  방법����������� ������������������  !

Page 8: 8주  dom & event basic 실습

var ele = document.getElementById("action-dropdown-children-장르");

ele.style.display = “none";

ele.style.display = “block”;

레이어를����������� ������������������  사라지게����������� ������������������  하는����������� ������������������  방법����������� ������������������  !

Page 9: 8주  dom & event basic 실습

장르를����������� ������������������  누르면����������� ������������������  레이어가����������� ������������������  나오고,����������� ������������������  

장르를����������� ������������������  다시����������� ������������������  누르면����������� ������������������  레이어가����������� ������������������  닫히게����������� ������������������  하자

Page 10: 8주  dom & event basic 실습

내����������� ������������������  프로젝트에����������� ������������������  

아래와����������� ������������������  같은����������� ������������������  레이어����������� ������������������  하나����������� ������������������  만들자.

Page 11: 8주  dom & event basic 실습

그렇게����������� ������������������  동작하는����������� ������������������  코드를����������� ������������������  ����������� ������������������  

html/css����������� ������������������  렌더링이����������� ������������������  끝난����������� ������������������  시점����������� ������������������  이후로����������� ������������������  옮겨놓자

Page 12: 8주  dom & event basic 실습

실습����������� ������������������  2.

Page 13: 8주  dom & event basic 실습

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

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 실습

데이터를����������� ������������������  정의해둔후,����������� ������������������  어딘가를����������� ������������������  클릭하면����������� ������������������  그����������� ������������������  데이터가����������� ������������������  HTML문자열로����������� ������������������  

결합되면서����������� ������������������  ����������� ������������������  본문내용으로����������� ������������������  대체됩니다.����������� ������������������  ����������� ������������������  

Page 15: 8주  dom & event basic 실습

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

Page 16: 8주  dom & event basic 실습

..����������� ������������������  본문내용으로����������� ������������������  대체됩니다.����������� ������������������  ����������� ������������������  

엔터치면!

Page 17: 8주  dom & event basic 실습

..����������� ������������������  본문내용으로����������� ������������������  대체됩니다.����������� ������������������  ����������� ������������������  

Page 18: 8주  dom & event basic 실습

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

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

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

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

Page 19: 8주  dom & event basic 실습

End ;-D