Enviar pesquisa
Carregar
[WEB UI BASIC] JavaScript 3탄
•
4 gostaram
•
639 visualizações
Jae Woo Woo
Seguir
자바스크립트 3탄입니다. DOM Element 수정과 이벤트 등록에 대해 공부했습니다. 다음 시간에는 이벤트를 더 자세히 다룰 예정입니다.
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 34
Baixar agora
Baixar para ler offline
Recomendados
[WEB UI BASIC] WEB과 HTML
[WEB UI BASIC] WEB과 HTML
Jae Woo Woo
[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2
성일 한
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김
CSS 선택자와 디버그
CSS 선택자와 디버그
성일 한
Why javaScript?
Why javaScript?
Kim Hunmin
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
정석 양
3주 CSS Basic
3주 CSS Basic
지수 윤
Recomendados
[WEB UI BASIC] WEB과 HTML
[WEB UI BASIC] WEB과 HTML
Jae Woo Woo
[하코사세미나] 한 시간 만에 배우는 Jquery
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
처음배우는 자바스크립트, 제이쿼리 #2
처음배우는 자바스크립트, 제이쿼리 #2
성일 한
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김
CSS 선택자와 디버그
CSS 선택자와 디버그
성일 한
Why javaScript?
Why javaScript?
Kim Hunmin
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
정석 양
3주 CSS Basic
3주 CSS Basic
지수 윤
JavaSript Template Engine
JavaSript Template Engine
Ohgyun Ahn
9주 dom & event advanced 실습
9주 dom & event advanced 실습
지수 윤
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
지수 윤
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
DK Lee
8주 dom & event basic 실습
8주 dom & event basic 실습
지수 윤
Handlebars
Handlebars
Han Jung Hyun
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
Ukjae Jeong
웹퍼블리싱강의
웹퍼블리싱강의
재은 박
Django in Production
Django in Production
Hyun-woo Park
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
DK Lee
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
Ukjae Jeong
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
정석 양
jQuery 구조와 기능
jQuery 구조와 기능
Kenu, GwangNam Heo
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
Chang W. Doh
플라스크 템플릿
플라스크 템플릿
Thomas Hyunsik Kim
Basic html
Basic html
협수 남
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Mayuko Sekiya
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육
준일 엄
Aws ses 이메일 보내기 받기 송신 수신
Aws ses 이메일 보내기 받기 송신 수신
라한사 아
Hacosa js study 5th
Hacosa js study 5th
Seong Bong Ji
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
민태 김
[WEB UI BASIC] JavaScript 4탄
[WEB UI BASIC] JavaScript 4탄
Jae Woo Woo
Mais conteúdo relacionado
Mais procurados
JavaSript Template Engine
JavaSript Template Engine
Ohgyun Ahn
9주 dom & event advanced 실습
9주 dom & event advanced 실습
지수 윤
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
지수 윤
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
DK Lee
8주 dom & event basic 실습
8주 dom & event basic 실습
지수 윤
Handlebars
Handlebars
Han Jung Hyun
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
Ukjae Jeong
웹퍼블리싱강의
웹퍼블리싱강의
재은 박
Django in Production
Django in Production
Hyun-woo Park
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
DK Lee
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
Ukjae Jeong
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
정석 양
jQuery 구조와 기능
jQuery 구조와 기능
Kenu, GwangNam Heo
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
Chang W. Doh
플라스크 템플릿
플라스크 템플릿
Thomas Hyunsik Kim
Basic html
Basic html
협수 남
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
Mayuko Sekiya
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육
준일 엄
Aws ses 이메일 보내기 받기 송신 수신
Aws ses 이메일 보내기 받기 송신 수신
라한사 아
Hacosa js study 5th
Hacosa js study 5th
Seong Bong Ji
Mais procurados
(20)
JavaSript Template Engine
JavaSript Template Engine
9주 dom & event advanced 실습
9주 dom & event advanced 실습
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
코드스쿼드 마스터즈세미나 - UI개발자가돼보자
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
자바 웹 개발 시작하기 (10주차 : ㅌㅗㅇ ㅎㅏ ㄹㅏ)
8주 dom & event basic 실습
8주 dom & event basic 실습
Handlebars
Handlebars
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
웹퍼블리싱강의
웹퍼블리싱강의
Django in Production
Django in Production
자바 웹 개발 시작하기 : 계획
자바 웹 개발 시작하기 : 계획
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
현대고등학교 PHP 강의 - 4차시 (설리번 프로젝트)
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
jQuery 구조와 기능
jQuery 구조와 기능
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
플라스크 템플릿
플라스크 템플릿
Basic html
Basic html
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
프로그래머로 부터 배우는 코딩 기술 (プログラマから学ぶコーディングテクニック)
엄준일 04일차 HTML/Javascript 교육
엄준일 04일차 HTML/Javascript 교육
Aws ses 이메일 보내기 받기 송신 수신
Aws ses 이메일 보내기 받기 송신 수신
Hacosa js study 5th
Hacosa js study 5th
Destaque
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
민태 김
[WEB UI BASIC] JavaScript 4탄
[WEB UI BASIC] JavaScript 4탄
Jae Woo Woo
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
민태 김
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
민태 김
[WEB UI BASIC] JavaScript 1탄
[WEB UI BASIC] JavaScript 1탄
Jae Woo Woo
Taste Picker 개발경험기
Taste Picker 개발경험기
Jae Woo Woo
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
민태 김
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
민태 김
[WEB UI BASIC] Javascript 2탄
[WEB UI BASIC] Javascript 2탄
Jae Woo Woo
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
민태 김
1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초
Circulus
WEB Front-End 개발과정 살펴보기
WEB Front-End 개발과정 살펴보기
지수 윤
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
민태 김
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
Nasol Kim
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
민태 김
Git - Level 2
Git - Level 2
민태 김
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Ohgyun Ahn
Destaque
(17)
비개발자를 위한 Javascript 알아가기 #4
비개발자를 위한 Javascript 알아가기 #4
[WEB UI BASIC] JavaScript 4탄
[WEB UI BASIC] JavaScript 4탄
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #5
비개발자를 위한 Javascript 알아가기 #7
비개발자를 위한 Javascript 알아가기 #7
[WEB UI BASIC] JavaScript 1탄
[WEB UI BASIC] JavaScript 1탄
Taste Picker 개발경험기
Taste Picker 개발경험기
비개발자를 위한 Javascript 알아가기 #6.1
비개발자를 위한 Javascript 알아가기 #6.1
외계어 스터디 4/5 Event & Library
외계어 스터디 4/5 Event & Library
[WEB UI BASIC] Javascript 2탄
[WEB UI BASIC] Javascript 2탄
비개발자를 위한 Javascript 알아가기 #7.1
비개발자를 위한 Javascript 알아가기 #7.1
1.Startup JavaScript - 프로그래밍 기초
1.Startup JavaScript - 프로그래밍 기초
WEB Front-End 개발과정 살펴보기
WEB Front-End 개발과정 살펴보기
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
웹을 지탱하는 차세대 기술 @한국웹20주년 컨퍼런스
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
인내심없는 개발자를 위한 자바스크립트 - 한줄씩 영어공부하기.
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
초보자를 위한 정규 표현식 가이드 (자바스크립트 기준)
Git - Level 2
Git - Level 2
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Semelhante a [WEB UI BASIC] JavaScript 3탄
Java script 강의자료_ed13
Java script 강의자료_ed13
hungrok
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Hyuncheol Jeon
Hacosa jquery 1th
Hacosa jquery 1th
Seong Bong Ji
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
First Step In Ajax Korean
First Step In Ajax Korean
Terry Cho
웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
Kim Sehwan
3-2. selector api
3-2. selector api
JinKyoungHeo
Java script
Java script
영남 허
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
Gyutae Jo
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
Chang W. Doh
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
창규 김
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
JoonHee Lee
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)
DK Lee
Django - CRUD 기능 구현
Django - CRUD 기능 구현
Jessica Lee
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
NAVER D2
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
YoungSu Son
[week14] Getting started with D3.js
[week14] Getting started with D3.js
neuroassociates
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
중선 곽
Web_05_ jQuery
Web_05_ jQuery
team air @ Dimigo
Servlet design pattern
Servlet design pattern
Sukjin Yun
Semelhante a [WEB UI BASIC] JavaScript 3탄
(20)
Java script 강의자료_ed13
Java script 강의자료_ed13
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Hacosa jquery 1th
Hacosa jquery 1th
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
First Step In Ajax Korean
First Step In Ajax Korean
웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1
3-2. selector api
3-2. selector api
Java script
Java script
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
Web Components - Part.I, @KIG 30th
Web Components - Part.I, @KIG 30th
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
자바 웹 개발 시작하기 (4주차 : MVC)
자바 웹 개발 시작하기 (4주차 : MVC)
Django - CRUD 기능 구현
Django - CRUD 기능 구현
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[NEXT] Android 개발 경험 프로젝트 3일차 (Database)
[week14] Getting started with D3.js
[week14] Getting started with D3.js
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
Web_05_ jQuery
Web_05_ jQuery
Servlet design pattern
Servlet design pattern
Mais de Jae Woo Woo
[WEB UI BASIC] WEB Animation 2탄
[WEB UI BASIC] WEB Animation 2탄
Jae Woo Woo
[WEB UI BASIC] WEB Animation 1탄
[WEB UI BASIC] WEB Animation 1탄
Jae Woo Woo
[DATABASE] Join
[DATABASE] Join
Jae Woo Woo
[WEB UI ADVANCED] Mobile Touch Event
[WEB UI ADVANCED] Mobile Touch Event
Jae Woo Woo
[WEB UI ADVANCED] Mobile WEB 개발하기
[WEB UI ADVANCED] Mobile WEB 개발하기
Jae Woo Woo
Naver 웹툰 앱 사용성 조사
Naver 웹툰 앱 사용성 조사
Jae Woo Woo
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_2
Jae Woo Woo
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1
Jae Woo Woo
C++ VECTOR, LIST, MAP
C++ VECTOR, LIST, MAP
Jae Woo Woo
Swimming Smith 포스트 모템
Swimming Smith 포스트 모템
Jae Woo Woo
Swimming Smith 개발기
Swimming Smith 개발기
Jae Woo Woo
XCOM_Post Mortem
XCOM_Post Mortem
Jae Woo Woo
Mais de Jae Woo Woo
(12)
[WEB UI BASIC] WEB Animation 2탄
[WEB UI BASIC] WEB Animation 2탄
[WEB UI BASIC] WEB Animation 1탄
[WEB UI BASIC] WEB Animation 1탄
[DATABASE] Join
[DATABASE] Join
[WEB UI ADVANCED] Mobile Touch Event
[WEB UI ADVANCED] Mobile Touch Event
[WEB UI ADVANCED] Mobile WEB 개발하기
[WEB UI ADVANCED] Mobile WEB 개발하기
Naver 웹툰 앱 사용성 조사
Naver 웹툰 앱 사용성 조사
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_2
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1
C++ VECTOR, LIST, MAP
C++ VECTOR, LIST, MAP
Swimming Smith 포스트 모템
Swimming Smith 포스트 모템
Swimming Smith 개발기
Swimming Smith 개발기
XCOM_Post Mortem
XCOM_Post Mortem
[WEB UI BASIC] JavaScript 3탄
1.
JavaScript
2.
3탄 [WEB
3.
UI
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,
18.
19.
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
52.
53.
54.
55.
56.
/
57.
58.
59.
60.
61.
id
62.
63.
64.
65.
66.
/
67.
68.
69.
70.
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
90.
a
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);
146.
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.
들어서...
215.
216.
마우스
217.
버튼을
218.
누른다
219.
/
220.
마우스가
221.
움직이고
222.
있다
223.
/
224.
키보드가
225.
눌렸다
226.
227.
입력양식이
228.
선택되었다
229.
/
230.
웹브라우저
231.
문서를
232.
읽었다
233.
등등등
234.
많아요.
235.
236.
237.
238.
239.
그리고
240.
이
241.
이벤트를
242.
관리하고,
243.
함수
244.
처리를
245.
도와주는
246.
녀석을
247.
Event
248.
Listener
249.
또는
250.
Event
251.
Handler라고
252.
합니다.
253.
254.
이벤트가
255.
발생하면
256.
다양한
257.
이벤트
258.
정보를
259.
얻을
260.
수
261.
있어요.
262.
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.
{
341.
342.
343.
344.
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.
{
391.
392.
393.
394.
395.
alert(‘hi!’); }
396.
hello.addEventListener(“click”,
397.
greeting,
398.
false);
399.
붙인 EventListener를 뗄
때는 removeEventListener();
400.
Event Loop??
401.
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
423.
424.
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.
후훗
Baixar agora