[WEB UI BASIC] JavaScript 3탄

1. JavaScript

2. 3탄 [WEB

4. BASIC] 본

5. 자료는

6. NHN

7. NEXT

8. 윤지수

9. 교수님의

10. 자료를

11. 바탕으로

12. 제작했습니다. NHN NEXT 우재우

13. 오늘은 JS를 이용해서 DOM을 조작합시다! 그리고 조작한 DOM에 이벤트도 걸어보구요!

14. DOM???

15. DOM(Document

16. Object

17. Model,

20. 문서

21. 객체

22. 모델)은

23. HTML

24. 및

25. XML

26. 문서를

27. 처리하는

28. API입니다.

29. 문서 의

30. 구조적

31. 형태를

32. 제공하므로

33. 자 바스크립트(JavaScript)와

34. 같은

35. 스크립트

36. 언어를

37. 사용하여

38. 문서

39. 내용과

40. 시각적

41. 표현을

42. 수정할

43. 수

44. 있습니다.

45. DOM을 탐색해봅시다!! 원하는 영역을 가져오려면 어떻게 해야할까요?

46. 이미 답은 우리가 작성했다! div

47. id=“hello”

48. class=“world”

49. div

50. id=“hello”

51. class=“world” tag

61. id

71. class

72. DOM Element를 찾는 세가지 방법 document.getElementsByTagName(‘div’); • Tag

73. Name으로

74. 찾기 document.getElementById(‘hello’); • ID로

75. 찾기 document.getElementsByClassName(‘wolrd’); • Class로

76. 찾기

77. s를 주의합시다!!! document.getElementsByTagName(‘div’); • Tag

78. Name으로

79. 찾기 document.getElementById(‘hello’); • ID로

80. 찾기 document.getElementsByClassName(‘wolrd’); • Class로

81. 찾기

82. 크롬 개발자 도구 콘솔에서 확인해봐요~ 나머지

83. 두

84. 개도

85. 해봅시다!!!

86. 크롬 개발자 도구 콘솔에서 확인해봐요~ The

87. getElementsByClassName()

88. method

89. returns

91. collection

92. of

93. all

94. elements

95. in

96. the

97. document

98. with

99. the

100. specified

101. class

102. name,

103. as

104. a

105. NodeList

106. object. 출처:

107. w3schools.com

108. 그치만 id나 class를 입히지 않은 엘리먼트는 어떻게 탐색해야 하죠?? tagName으로 잡아올 수도 없는 노릇이고...

109. 우리의 필살기 CSS Selector

110. CSS Selector로 가져오기 document.querySelector(‘#hello’);

111. document.querySelectorAll(‘.world’); 크롬

112. 개발자

113. 도구에서

114. 확인해봅시다! 일치하는

115. 첫

116. 번째

117. Element

118. 반환

119. 일치하는

120. 모든

121. Element

122. 반환

123. 그래도 ID 검색이 빠르기 때문에 섞어 쓰는 것이 이상적입니다! document.getElementById(‘wrap’).querySelector(‘ul

124. li:last-child’);

125. 잡아왔으니 이제 수정해봅시다!!! 잡았다, 요놈!

126. 바로 HTML코드 때려박기 var

127. hello

128. =

129. document.getElementById(‘hello’);

130. hello.innerHTML

131. =

132. “divBye,

133. world!/div”; 근데

134. 이렇게

135. 하면...

136. 원래

137. 있던

138. 내용은

139. 다

140. 날아가는데?

141. 방법은 많다! 사용법은 생략한다. 구글링해라! element.innerHTML

142. +=

143. “html”;

144. element.insertAdjacentHTML(position,

145. html);

147. element.insertBefore(new

148. node,existing

149. node);

150. Element 만들어서 넣기 1단계:

151. Element를

152. 만들자!

153. var

154. newDiv

155. =

156. document.createElement(‘div’);

157. 2단계:

158. newDiv에

159. ID를

160. 줄까?

161. newDiv.id

162. =

163. ‘newId’;

164. 3단계:

165. class도

166. 줘볼까?

167. newDiv.className

168. =

169. ‘newClass’;

170. 4단계:

171. hello

172. element(var

173. hello)

174. 밑에

175. 추가해주자!

176. hello.appendChild(newDiv);

177. 5단계:

178. 아냐,

179. 잘못

180. 넣었어.

181. 지우자!

182. hello.removeChild(newDiv);

183. Text 조작하기 element.textContent

184. =

185. “blah

186. blah”;

187. document.createTextNode

188. =

189. “blah

190. blah”;

191. 이쯤에서 DOM 조작을 마치고 이벤트로 가봅시다! 걱정 마세요~ JavaScript 이벤트가 어렵다고 해도 여자친구 이벤트보다 어렵지는 않아요

192. 이벤트가 어디있다는 거냐? 이거

193. 이벤트

194. 사용한

195. 겁니다!

196. 키보드

197. 입력이

198. 있으면

199. 자동완성

200. 문구들을

201. 가져오죠??

202. 이벤트(Event)?

203. 이벤트는

204. 해당

205. 엘리먼트에서

206. 어떤

207. 동작이나

208. 사건이

209. 발생했음을

210. 알려주는

211. 신호

212. 입니다.

213. 예를

214. 들어서...

216. 마우스

217. 버튼을

218. 누른다

219. /

220. 마우스가

221. 움직이고

222. 있다

223. /

224. 키보드가

225. 눌렸다

227. 입력양식이

228. 선택되었다

229. /

230. 웹브라우저

231. 문서를

232. 읽었다

233. 등등등

234. 많아요.

239. 그리고

240. 이

241. 이벤트를

242. 관리하고,

243. 함수

244. 처리를

245. 도와주는

246. 녀석을

247. Event

248. Listener

249. 또는

250. Event

251. Handler라고

252. 합니다.

254. 이벤트가

255. 발생하면

256. 다양한

257. 이벤트

258. 정보를

259. 얻을

260. 수

261. 있어요.

263. 이벤트가

264. 발생한

265. element가

266. 어디인지,

267. 마우스

268. 좌표가

269. 어디인지,

270. 무슨

271. 버튼이

272. 눌렸는지,

273. 밥은

274. 잘

275. 먹는지

276. 읭?

277. 이벤트를 설정해봅시다 크게 HTML에 넣는 방법과 JS로 접근하는 방법이 있어요

278. 이벤트를 HTML에 직접 넣기 div

279. onclick=‘alert(“CLICK!!”);’CLICK

280. ME!/div JavaScript에

281. 있는

282. 함수를

283. 불러올

284. 수도

285. 있어요~ script

286. function

287. greeting()

288. {

289. alert(“hello,

290. world”);

291. }

292. /script

293. div

294. onclick=‘greeting();’CLICK

295. ME!/div click

296. event를

297. 등록해볼까요?

298. HTML EVENT onclick

299. 외에도

300. HTML

301. EVENT에

302. 관해서

303. 더

304. 알고

305. 싶다면

306. http://www.w3schools.com/tags/ref_eventattributes.asp

307. 여기서

308. 공부해보세요~

309. 저도

310. 요즘

311. 여기

312. 찬찬히

313. 보고

314. 있는데

315. 재미있 더라구요.

316. 조만간

317. 정리해서

318. 공유할게요

319. :)

320. 한 가지 아쉽다면... HTML은

321. 구조를

322. 잡는

323. 용도인데

324. JavaScript를

325. 넣다니!!!

326. HTML과

327. CSS를

328. 분리했듯이,

329. HTML에

330. 직접

331. 이벤트를

332. 거는

333. 것은

334. 그리

335. 권장되는

336. 바는

337. 아닙니다.

338. JS로 이벤트 걸기 function

339. greeting()

340. {

345. alert(“hello!”);  }

346. document.addEventListener(“click”,

347. greeting,

348. false); 일단

349. 무따기(무조건

350. 따라하기)!

351. addEventListener(); document.addEventListener(이벤트,

352. 함수,

353. false); 이벤트의

354. 종류는

355. http://help.dottoro.com/larrqqck.php

356. 여기를

357. 참고하세요~ 함수는

358. 이름만

359. 쓰세요!

360. 괄호()

361. 없어요~

362. 아니면

363. 여기서

364. 함수를

365. 바로

366. 쓸

367. 수도

368. 있긴하구요

369. 나중에

370. 같이

371. 볼게요 캡쳐링(true)

372. /

373. 버블링(false)에

374. 관한

375. 인자인데

376. 지금은

377. 그냥

378. 넘어갑니다~

379. 디폴트가

380. false니까

381. 안

382. 써도

383. 괜찮아요!

384. 특정 Element에 걸 수도 있어요! var

385. hello

386. =

387. document.getElementById(‘hello’);

388. function

389. greeting()

390. {

395. alert(‘hi!’);  }

396. hello.addEventListener(“click”,

397. greeting,

398. false);

399. 붙인 EventListener를 뗄 때는 removeEventListener();

400. Event Loop??

402. 아래

403. 링크는

404. JSConf

405. EU

406. 2014에서

407. 발표한

408. 자료인데

409. 이

410. 영상

411. 보시면

412. JavaScript가

413. 내부적으로

414. 어떻게

415. 동작하는지

416. 정말

417. 잘

418. 설명되어

419. 있으니

420. 꼭!꼭!꼭!

421. 참고하시길!!

422. http://youtu.be/8aGhZQkoFbQ

425. JavaScript는

426. Single

427. thread입니다.

428. 그래서

429. 이벤트를

430. 등록하 고

431. 나서

432. JavaScript가

433. 스스로

434. 이벤트를

435. 계속

436. 기다리게

437. 되면

438. 다 른

439. 작업을

440. 할

441. 수

442. 없겠죠?

443. 그래서

444. Event

445. Queue가

446. 존재합니다.

447. 오늘 너무 많이 배운 것 같으니까 여기까지 하죠 ㅋㅋㅋ 다음 시간에도 이벤트 이어서 합니다!

448. 그렇지만 아직 끝난 거 아닙니다! 실습이 남았어요~

449. [실습] 버튼을

450. 클릭하면

451. 1부터

452. 45

453. 사이의

454. 랜덤한

455. 숫자가

456. 적힌

457. 상자가

458. 중복

459. 없이

460. 7개까지

461. 추가되는

462. 프로그램

463. 짜기 추

464. 가 예) 32 23 1 17 14 41 5 이때까지

465. 배운거

466. 다

467. 써야

468. 짤

469. 수

470. 있을걸요?

471. 후훗

[WEB UI BASIC] JavaScript 3탄

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to [WEB UI BASIC] JavaScript 3탄

Similar to [WEB UI BASIC] JavaScript 3탄 (20)

More from Jae Woo Woo

More from Jae Woo Woo (12)

Recently uploaded

Recently uploaded (7)

[WEB UI BASIC] JavaScript 3탄