8주 dom & event basic

1. DOM

3. Event

4. BASIC 8주

5. 목표 HTML

6. 을

7. 동적으로

8. 조작할

9. 수

10. 있다

11. U I

12. 개 발 에 서 의

13. D O M

15. E v e n t

17. 어느

18. 영역에서,

19. 키보드

20. 입력을

21. 하면,

23. 어떤

24. 일이

25. 일어난다.

26. 어느

27. 영역에서,

28. 키보드

29. 입력을

30. 하면,

32. 어떤

33. 일이

34. 일어난다.

35. 어느

36. 영역에서,

37. 키보드

38. 입력을

39. 하면,

41. 어떤

42. 일이

43. 일어난다. DOM

44. API로

45. 찾기

46. 어느

47. 영역에서,

48. 키보드

49. 입력을

50. 하면,

52. 어떤

53. 일이

54. 일어난다.

55. 어느

56. 영역에서,

57. 키보드

58. 입력을

59. 하면,

61. 어떤

62. 일이

63. 일어난다. 이벤트

64. 등록

65. 어느

66. 영역에서,

67. 키보드

68. 입력을

69. 하면,

71. 어떤

72. 일이

73. 일어난다.

74. 어느

75. 영역에서,

76. 키보드

77. 입력을

78. 하면,

80. 어떤

81. 일이

83. 핸들러

84. 실행

85. DOM

86. API로

87. 찾기 어느

88. 영역에서,

89. 키보드

90. 입력을

91. 하면,

93. 이벤트

94. 등록 어떤

95. 일이

97. 핸들러

98. 실행

99. D O M 은

100. 무 엇 인 가 ?

102. DOM(Document

103. Object

104. Model)은

105. ,

106. ! HTML을

107. 위한

108. API이며,

109. HTML을

110. 탐색할

111. 수

112. 있고,

113. HTML구조를

114. 바꿀

115. 수도

116. 있다.

117. !

119. HTML은

120. DOM을

121. 통해

122. Node의

123. 계층

124. 구조로

125. 표현

126. 가능

128. html head title NEXT Home Page /title /head body h1Welcome!/h1 section h2 2013 start!/h2 pblah..blah../p /section /body /html

129. Document

130. Element

131. html

132. Element

133. head Element

134. Title

135. Element

136. Body

137. Element

138. h

139. Element

140. section

141. Text

142. NEXT

143. Home

144. Page Element

145. h2 Text

146. 2013

147. start! Element

148. p2 Text

149. blah..blah.. html head title NEXT Home Page /title /head body h1Welcome!/h1 section h2 2013 start!/h2 pblah..blah../p /section /body /html

150. Document html head title NEXT Home Page /title /head body h1Welcome!/h1 section h2 2013 start!/h2 pblah..blah../p /section /body /html

151. Element

152. html

153. Element

154. head

155. Element

156. Body

157. Element

158. h

159. Element

160. section Element

161. h2 Text

162. 2013

163. start! Element

164. p2 Text

165. blah..blah.. Element

166. Title

167. Text

168. NEXT

169. Home

170. Page

171. 각자의

172. 프로젝트에서

173. 살펴보기

174. 개발자도구

175. -

176. Elements

177. 탭

178. 선택

179. -

180. 맨

181. 하단에

182. 계층살펴보기

184. Node

185. 에는

186. 속성이

187. 존재함.

189. ! nodeType

191. nodeName

193. nodeValue

195. nodeType은

196. 숫자로

197. 표현가능.

198. html

199. 작업중에는

200. 1번

201. element와

202. 3번

203. text노드만

204. 참고함.

205. ! ! Element

207. :

208. 1

209. Attribute

211. :

212. 2

213. TEXT

216. :

217. 3 ...

219. 각자의

221. 살펴보기

222. 개발자도구

223. 우측의

224. properties

225. 항목 다른

226. 부분도

227. 살펴보자.

229. 꽤

230. 다양한

231. 속성들이

232. 많다.

234. Node

235. 에는

236. 자식노드를

237. 모두

238. 담고

239. 있는

240. childNodes가

241. 있다.

242. 이것은

243. NodeList

244. Type이며

245. 배열과

246. 유사하지만

247. 배열이

248. 아니다.

249. ! ! childNodes;

250. childNodes.length;

251. childNodes[0];

253. 각자의

255. 살펴보기

256. body태그의

257. 이름은?

258. ,

261. Node의

262. type

263. 은?

265. ,

268. 자식

269. 노드의

270. 갯수는?

272. ! 이번에는

273. Console탭에서

274. 하기. document.body.nodeName; document.body.nodeType; document.body.childNodes; document.body.childNodes.length;

275. D O M

276. 탐 색

278. 원하는

279. 영역

280. 쉽게

281. 찾는

282. 방법은?

283. 원하는

284. 영역을

285. 보자. div id=image_promotion class=cmn_promotion_image style=“display:none”!

286. 원하는

287. 영역을

288. 보자. div id=image_promotion class=cmn_promotion_image style=“display:none”!

289. 우리가

290. 활용할

291. 수

292. 있는

293. 정보들

294. ! div id=image_promotion class=cmn_promotion_image style=“display:none”! tag(nodename),

300. id,

306. class

307. ID로

308. 찾기

309. (성능이

310. 좋다.

311. 다시말해

312. 빠르게

313. 찾는

314. 좋은

315. 방법) document.getElementById(‘wrap’)

316. ID로

317. 찾기

318. (성능이

319. 좋다.

320. 다시말해

321. 빠르게

322. 찾는

323. 좋은

324. 방법) document.getElementById(‘wrap’) tag로

325. 찾기 document.getElementsByTagName(‘div’)

326. ID로

327. 찾기

328. (성능이

329. 좋다.

330. 다시말해

331. 빠르게

332. 찾는

333. 좋은

334. 방법) document.getElementById(‘wrap’) tag로

335. 찾기 document.getElementsByTagName(‘div’) className

336. 으로

337. 찾기 document.getElementsByClassName(‘on’)

338. document.getElementById(‘wrap’) document.getElementsByTagName(‘div’) document.getElementsByClassName(‘on’) return

339. type

341. ?

342. document.getElementById(‘wrap’) return

343. type

344. :

346. HTMLElement document.getElementsByTagName(‘div’) document.getElementsByClassName(‘on’) return

347. type

348. :

349. nodeList

350. 숙제1

351. 본인

354. document내에

355. 모든

356. ‘li’태그를

357. 찾아서

358. class이름을

359. 출력하는

360. 함수를

361. 만들자.

362. !

363. 힌트

364. :

365. attribute(속성)에

366. 접근하는

367. 방법.

368. element.id

369. 및

370. element.className

371. 을

372. 활용해서

373. 접근

374. 가능

375. D O M

376. 탐 색

377. css

378. selector

379. DOM을

380. 탐색하는

381. 또

382. 다른

383. 방법,

384. CSS

385. Selector

386. 를

387. 활용한

388. 막강한

389. 방법 id,tagname으로만

390. DOM을

391. 탐색하였지만,

392. CSS

393. Selector를

394. 기반으로

395. 찾는

396. 것이

397. 알려지면서

398. 웹표준으로

399. 반영

400. 되었음.

401. CSS

402. Selector document.querySelector(Selector 문법); 일치하는

403. 첫번째

404. element document.querySelectorAll(Selector 문법); 일치하는

405. 모든

406. element

407. CSS

408. Selector

409. 문법 http://www.w3.org/TR/CSS2/selector.html http://www.w3schools.com/cssref/css_selectors.asp

410. id검색이

411. 비교적

412. 빠름으로,

414. 이렇게

415. 사용하는

416. 것이

417. 이상적 document.getElementById(‘wrap’).querySelector(‘ulli’);

418. 숙제2

419. querySelectorAll을

420. 활용해서

422. class를

423. 가지고

424. 있지

425. 않은

427. 모든

428. element의

429. 갯수를

430. 출력하는

431. 함수를

432. 만들어보자.

433. !

434. navigating

436. DOM

437. Nodes element만

438. 찾아주는

439. 속성도

440. 있음

442. firstElementChild

444. lastElementChild

446. nextElementSibling

448. previousElementSibling

449. 이미지 : http://www.w3schools.com/dom/dom_nodes_navigate.asp

450. E v e n t 란

451. 무 엇 인 가 ?

452. 동적인

453. 웹은

454. 사용자와

455. 상호작용이

456. 잘

457. 돼야

458. 함

459. 상호작용은

460. 어떤

461. 이벤트(Event)에

462. 의해서

463. 발생

464. 이벤트(Event)

465. ! 마우스로

466. 어떤

467. 걸

468. 눌렀다.

469. 화면을

470. 이동하려고

471. 마우스를

472. 움직인다.

473. 뭔가

474. 입력하려고

475. 키보드를

476. 누른다.

477. ....

478. Event가

479. 발생하면

480. 예약해둔

481. 것이

482. 실행

483. 됨.

484. ! event

485. handler

486. 또는

487. event

488. listener

489. 라고

490. 함

491. event는

492. 사용자의

493. 조작과정에서

494. 다양한

495. 형태로

496. 발생

497. ! 브라우저

498. 화면이

499. 다

500. 보여지고

501. 나서(로딩후)

502. 마우스가

503. 클릭,이동

504. 될

505. 때,

506. 키보드를

507. 눌렀을

508. 때

509. 어떤

510. 값을

511. 입력

512. 할

513. 때,

514. 손가락으로

515. 터치

516. 할

517. 때,

518. 휴대폰을

519. 가로모드로

520. 변경

521. 할

522. 때,

523. event가

524. 발생하면

525. 다양한

526. event

527. 정보를

528. 알

529. 수

530. 있음

531. ! 눌려진

532. 위치가

533. 어디인지

534. ?

535. 어떤

536. element

537. 인지?

539. 어떤

540. 글자가

541. 쓰여졌는지

542. ?

543. 어떤

544. 버튼을

545. 눌렀는지

546. ?

547. E v e n t

548. 설 정

549. 크게,

550. ! HTML에

551. 직접

552. 만들거나,

553. Javascript로

554. 접근해서

555. 만들거냐의

556. 차이.

557. HTML에

558. 직접

559. 만들거나, div onclick='alert(1);'click/div

560. HTML에

561. 직접

562. 만들거나, script

563. Javascript function clickTest() { alert('click'); } /script

564. HTML div onclick='clickTest();'click/div

565. HTML에

566. 직접

567. 만들거나, div onclick='clickTest();'click/div html

568. 코드

569. 안에

570. Javascript

571. 라니...분리하는

572. 게

573. 좋다.

574. (구조,스타일,동작의

575. 분리)

576. 따라서

577. HTML에

578. Event를

579. 등록하는

580. 건

581. 좋지

582. 않다.

583. Javascript로

584. 접근해서

585. 만들거나.

586. Javascript var eleMain = document.getElementById('main'); eleMain.onclick = function() {alert(1);}

587. HTML div id=mainclick/div

588. Javascript로

589. 접근해서

590. 만드는데

591. 문제... html head script var eleMain = document.getElementById('main'); eleMain.onclick = function() {alert(1);} ! /script /head body ! div onclick='alert(1);'click/div div id=mainclick/div ! /body /html

593. 이시점에는

594. 아직

595. 브라우저에서

599. document

600. 의

601. 형태를

602. 다

603. 만들지

604. 못했음

605. 가장

606. 적절한

607. Javascript

608. 코드의

609. 위치는

610. 어디인가요? HTML맨

611. 마지막

612. 부분에

613. 추가하거나,

614. 브라우저가

615. 완성됐다고

616. 알려주는

617. 정보를

618. 활용

619. 하면

620. 됨

621. 그래서

622. DOM

623. 이

624. 완성되기

625. 직전인

626. 부분으로

627. 옮기기 html head /head body ! div onclick='alert(1);'click/div div id=mainclick/div … … ……… ! script var eleMain = document.getElementById('main'); eleMain.onclick = function() {alert(1);} /script /body /html

628. 이벤트

629. 핸들러

630. 함수를

631. 분리하고, var eleMain = document.getElementById(‘main'); eleMain.onclick = function() {alert(1);} function alertTest() { alert(1); } ! var eleMain = document.getElementById('main'); eleMain.onclick = alertTest;

632. 하지만

633. 이렇게

634. 하면,

636. 여러

637. 개의

638. event

639. Handler를

640. 등록할

641. 수

642. 없다.. //

643. 실행

644. 안됨 function clickTest1() { alert(1); } ! function clickTest2() { alert(2); } ! document.getElementById('divEle').onclick = clickTest1; document.getElementById('divEle').onclick = clickTest2;

645. 최종적으로

646. 우리가

647. 사용할

648. 방법 document.addEventListener(이벤트 , 핸들러 , false)

649. addEventListener

650. 사용법 document.addEventListener(‘click’ , function(){alert(1)} , false) function alertTest() { alert(1); } ! document.addEventListener(‘click’ , alertTest , false)

651. 숙제3 자신의

652. 프로젝트에

654. addEventListener를

655. 활용해서

656. onload

657. 시점에

659. header

660. 영역을

661. 마우스클릭할

662. 때

663. 콘솔창에

664. ‘header영역입니다’

665. 라는

666. 메시지가

667. 출력되게

668. 해보자.

669. ! ! hint.

670. window.addEventListener(‘load’

671. ,

672. function()

673. {

679. .......

684. },false);

685. Event는

686. 특정이유로

687. 인해서

688. 해제할

689. 수도

690. 있다 등록

691. element.onclick = alertTest; document.addEventListener(‘click’ , handlerFunction , false) 해제

692. element.onclick = null; document.removeEventListener(‘click’ , handlerFunction , false)

693. E v e n t

694. 타 입

695. Event가..

696. click

697. 뿐이더냐? https://developer.mozilla.org/en-US/docs/Web/Reference/Events

698. load

700. resize

701. ! click

702. dbclick

703. mousedown,

704. mouseup,

706. mouseover,

707. mousemove,

708. mouseout

709. ! keydown

710. keyup

711. keypress ! ! 일반

712. UI

713. Event

714. ! ! 마우스

715. ! ! ! 키보드 그

716. 중

717. 자주

718. 사용되는

719. 것들은,

721. shiftKey를

722. 누르고

723. 마우스

724. 클릭을

725. 해보자.

726. shiftKey

729. ctrlKey

730. altKey

731. metaKey

732. event

733. 어디에

734. 눌러졌는가

735. ?

736. e.offsetX,

737. e.offsetY 이벤트

738. 발생

739. element

740. 의

741. 좌/우축

742. 기준으로

743. 정보가

744. 나옴

745. event

746. 어디에

747. 눌러졌는가

748. ?

749. 그밖에도..

750. ! clientX,

751. clientY

752. pageX,

753. pageY

754. screenX,

755. screenY

757. clientY

758. screenY pageY clientY

759. keyCode

760. keydown,

761. keyup,

762. keypress

763. 이벤트에서

764. 발생 http://unixpapa.com/js/key.html

765. console.log(String.fromCharCode(e.keyCode)); mousedown,

766. mouseup,

767. mouseclick

768. 이벤트를

769. 모두

770. 등록해보자.

771. 무엇부터

772. 실행되는가?

775. ! ! 문자를

776. 입력할

777. 수

778. 있는

779. input

780. 박스

781. 하나

782. 만들고,

784. keydown

785. 이벤트

786. 핸들러

787. 입력해서

788. keycode를

789. 출력해보자.

791. E v e n t

792. 객 체 활 용

793. 사용자가

794. 어떤

795. 걸

796. click했을때,

797. 뭐가

798. 클릭됐는지?

799. 어디가

800. 클릭됐는지?

801. 는

802. 어떻게

803. 알

804. 수

805. 있지?

807. 다행이도

809. 우리는

810. event

811. 객체를

812. 활용할

813. 수

814. 있음. event

815. 객체

816. ?

817. 그렇다

818. !!

820. Event

821. 는

822. 객체였고

823. 그

824. 안에

825. 꽤

826. 많은

827. 속성이

828. 존재한다

830. 인자로

831. 매개변수를

832. 아무거나

833. 선언하면

834. event객체가

835. 들어감

836. (매개변수

837. 이름은

838. ‘e’가

839. 아니여도

840. 됨) document.addEventListener(‘click’ , function(){} , false) document.addEventListener(‘click’ , function(e){} , false) document.addEventListener(‘click’ , function(ev){debugger;} , false)

842. document.addEventListener(‘click’ , function(e){ console.log(e.target); }, false) e. document.addEventListener(‘click’ , function(e){ console.log(e.target , e.type , e.clientX); }, false)

844. e.target document.addEventListener(‘click’ , function(e){ console.log(e.target.tagName); }, false) document.addEventListener(‘click’ , function(e){ console.log(e.target.className); e.target.style.backgroudColor = ‘red’; }, false)

845. 물론,

847. event

848. handler

849. 안에서는

850. 다른

851. 함수를

852. 호출할

853. 수도

854. 있다.

855. 그외에

856. javascript

857. 로

858. 할

859. 수

860. 있는

861. 걸

862. 다

863. 할

864. 수

865. 있다. function otherFunction() { console.log(“other Function Called”); } ! ! document.addEventListener(‘click’ , function(e){ otherFunction(); }, false)

866. 미션 oStyleInfo = document.defaultView.getComputedStyle(e.target); 자신의

867. 프로젝트에

868. click

869. 이벤트를

870. 등록하고

871. 특정

872. layer의

873. css

874. style

875. 중

876. display속성이,

877. block이면

878. ‘none’으로

879. 변경하고,

880. block이

881. 아니면

882. ‘block’으로

883. 변경하도록

884. 해보자.

885. ! 참고.

886. display속성은

887. default가

888. block이다.

889. css

890. 속성값을

891. 얻기

892. 위해서

893. getComputedStyle

894. 메소드를

895. 활용한다.

896. http://6opinions.blogspot.kr s t y l e

897. 조 작

898. element에는

899. style

900. 속성이

901. 있을

902. 수

903. 있다

904. ! style속성을

905. 얻고

906. 변경할

907. 수

908. 있어야

909. 한다.

910. !

912. inline태그의

913. style속성을

914. 얻고,

915. 설정하는

916. 방법 element.style.backgroundColor; element.style.backgroundColor = ‘#fff’;

917. 계산된

918. style

919. 속성을

920. 얻는

921. 방법 document.defaultView.getComputedStyle(element) var element = document.getElementById(‘divId’); var styleInfo = document.defaultView.getComputedStyle(element); console.log(styleInfo.color); ! styleInfo.color = ‘red’ //(X) 값을 할당할 수는 없다. (읽기만 가능함) ! ! //자바스크립트로 스타일 설정이 필요하면 이렇게 함. element.style.color = ‘red’;

922. End ;-D

8주 dom & event basic

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to 8주 dom & event basic

Similar to 8주 dom & event basic (14)

More from 지수 윤

More from 지수 윤 (20)

8주 dom & event basic