1. DOM

3. Event

4.
BASIC

5.
8주

6. 숙제1
본인

7. 프로젝트에서

9.
document내에

10. 모든

11. ‘li’태그를

12. 찾아서

13. class이름을

14. 출력하는

15. 함수를

16. 만들자.

17.
!

18. 힌트

19. :

20. attribute(속성)에

21. 접근하는

22. 방법.

23.
element.id

24. 및

25. element.className

26. 을

27. 활용해서

28. 접근

29. 가능

30. 숙제2
querySelectorAll을

31. 활용해서

33.
class를

34. 가지고

35. 있지

36. 않은

38.
모든

39. element의

40. 갯수를

41. 출력하는

42. 함수를

43. 만들어보자.

44.
!

45. 숙제3
자신의

46. 프로젝트에

48.
addEventListener를

49. 활용해서

50. onload

51. 시점에

53.
header

54. 영역을

55. 마우스클릭할

56. 때

57. 콘솔창에

58. ‘header영역입니다’

59.
라는

60. 메시지가

61. 출력되게

62. 해보자.

63.
!
!
hint.

64.
window.addEventListener(‘load’

65. ,

66. function()

67. {

73. .......

78. },false);

79. 실습

80. 1.

81. 구글의

82. 레이어를

83. 살펴봅시다

84. 레이어를

85. 사라지게

86. 하는

87. 방법

88. !
var ele = document.getElementById(action-dropdown-children-장르);
???

89. 레이어를

90. 사라지게

91. 하는

92. 방법

93. !
var ele = document.getElementById(action-dropdown-children-장르);
ele.style.display = “none;
ele.style.display = “block”;

94. 장르를

95. 누르면

96. 레이어가

97. 나오고,

98.
장르를

99. 다시

100. 누르면

101. 레이어가

102. 닫히게

103. 하자

104. 내

105. 프로젝트에

106.
아래와

107. 같은

108. 레이어

109. 하나

110. 만들자.

111. 그렇게

112. 동작하는

113. 코드를

115.
html/css

116. 렌더링이

117. 끝난

118. 시점

119. 이후로

120. 옮겨놓자

121. 실습

122. 2.

123. 생각나니

124. ?
데이터를

125. 기반으로

126. 동적으로

127. HTML

128. 문자열을

129. 만드는

130. 함수를

131. 제작합니다.
var

132. aBookList

133. =

134. [

136. {

139. id

140. :

141. book-iLQ5BAAAQBAJ,

144. name

145. :

146. 아서왕과

147. 원탁의

148. 기사들,

151. imgSrc

152. :

153. http://goo.gl/tfHw4e,

156. src

157. :

158. http://goo.gl/65Im7q,

161. author

162. :

163. 토머스

164. 불핀치

166. },

168. {

171. id

172. :

173. book-jLQ5BADJFIEWL,

176. name

177. :

178. 어린왕자,

181. imgSrc

182. :

183. http://goo.gl/pDXdVo,

186. src

187. :

188. http://goo.gl/aSvgGF,

191. author

192. :

193. 앙투안

194. 드

195. 생텍쥐페리

197. }

198.
];

199.
!
var

200. sTemplate

201. =

202. h2%=title%/h2diva

203. href='%=endPageLink%'img

204. src='%=imgUrl%'/a/div

205.
!!
makeBookElement(sTemplate,

206. aBookList);

208.
//

209. “h2어린왕자/h2diva

210. href='http://goo.gl/aSvgGF'img

211. src='http://goo.gl/pDXdVo'/a/div

212. 데이터를

213. 정의해둔후,

214.
어딘가를

215. 클릭하면

216. 그

217. 데이터가

218. HTML문자열로

219.
결합되면서

221.
본문내용으로

222. 대체됩니다.

225. 생각나니

226. ?

227. ..

228.
본문내용으로

229. 대체됩니다.

231.
엔터치면!

232. ..

233.
본문내용으로

234. 대체됩니다.

237. 미션

238.
책의

239. 특정

240. 장르를

241. 마우스

242. 클릭하면

243.
책

244. 10권에

245. 해당하는

246. 임의

247. 데이터가

248. 본문내용으로

250.
대체되도록

251. 합니다.
개발할

252. 것은,

253.
특정

254. 장르에

255. 클릭이벤트

256. 핸들러

257. 만들고,

258.
본문에

259. 대체될

260. html

261. 템플릿

262. 만들어두고,

263.
템플릿에

264. 넣을

265. dummy

266. 데이터

267. 10개

268. 정도

269. 만들어야

270. 하고,

271.
innerHTML에

272. 결과를

273. 넣어야

274. 하고

276. End
;-D