0:00:00.000,0:00:03.450
윈스턴 그림이 있는[br]페이지를 가져와봤어요

0:00:03.450,0:00:06.556
이제 슬슬 추워지고[br]윈스턴은 나이가 들어가니까

0:00:06.556,0:00:08.646
윈스턴은 수염이[br]있으면 좋겠대요

0:00:08.646,0:00:10.750
제가 수염을[br]그려줄 수도 있죠

0:00:10.750,0:00:12.333
하지만 이게[br]더 멋질 거에요

0:00:12.333,0:00:16.412
사용자가 원하는 대로 수염을[br]윈스턴에게 그려줄 수 있다면요

0:00:16.412,0:00:21.090
긴 수염과 까칠한 부분도[br]약간 있고 어떤 걸 원하든지요

0:00:21.090,0:00:22.921
그럼 이걸 어떻게 할 수 있을까요?

0:00:22.921,0:00:28.693
한 가지 방법은 이미지 위에서의[br]마우스 움직임(mouseMove) 이벤트를 넣는 거에요

0:00:28.693,0:00:34.441
사용자가 마우스를 얼굴 위로[br]움직이면 함수가 호출되게요

0:00:34.441,0:00:38.274
방금 배운 것으로[br]한번 해볼게요

0:00:38.274,0:00:40.092
첫 번째는[br]요소를 찾는거에요

0:00:40.092,0:00:42.241
이미지 말이죠

0:00:42.241,0:00:46.996
var face = document.getElementById()

0:00:47.009,0:00:50.561
id는 face라고 하죠[br]괜찮은 ID네요

0:00:50.561,0:00:53.866
두 번째는 콜백함수를[br]만드는 거에요

0:00:53.866,0:00:58.267
일단 적용되는 걸 봐야하니까[br]간단한 걸로 해볼게요

0:00:58.267,0:01:10.426
나중에 더 많은 걸[br]만들어 볼게요

0:01:10.426,0:01:13.308
좋아요

0:01:13.308,0:01:17.946
마지막 단계는[br]이걸 이것과 연결하는 거에요

0:01:17.946,0:01:22.351
마우스 이벤트가 발생했을 때[br]이 함수가 호출되어야 하니까요

0:01:22.351,0:01:27.854
face.addEventListener("mousemove",[br]라고 쓰고

0:01:27.854,0:01:32.220
함수 이름을 쓰세요[br]'onMouseMove'

0:01:32.220,0:01:36.590
이제 이걸 멈추고 얼굴 위로[br]마우스를 움직여봐요

0:01:36.590,0:01:39.915
문구가 보이세요?

0:01:39.915,0:01:43.856
이 효과가 적용되는 걸[br]여러분도 봤을 거에요

0:01:43.856,0:01:47.454
하지만 이게 우리가[br]원하는 효과는 아니에요

0:01:47.454,0:01:50.480
우린 문구를 쓰는게 아니라[br]그림을 그리고 싶어요

0:01:50.480,0:01:53.466
웹페이지에 어떻게[br]그림을 그릴 수 있을까요?

0:01:53.466,0:01:58.256
canvas 태그를 사용해서[br]픽셀을 그릴 수 있어요

0:01:58.256,0:02:01.162
여기 ProcessingJS에서[br]하는 것 처럼요

0:02:01.162,0:02:06.502
우리가 그리는 건 수염이지만 [br]실제로는 수많은 검은 점일 거에요

0:02:06.502,0:02:10.606
그냥 각 점에[br]div를 생성해서

0:02:10.606,0:02:13.551
절대 위치로 div에게[br]위치를 줄 수 있죠

0:02:13.551,0:02:18.370
여기 수염 하나로[br]해볼게요

0:02:18.370,0:02:22.724
beard 클래스를 가진[br]div를 만들고

0:02:22.724,0:02:29.721
이 수염에게 CSS를 주고요[br]여기 넣을게요

0:02:29.721,0:02:31.750
이건 이렇게 고칠게요

0:02:31.750,0:02:36.471
이 수염의 배경색은[br]검정색이고 5x5 픽셀이에요

0:02:36.471,0:02:40.525
둥글게 만들려면[br]여기 2픽셀의 테두리를 줘요

0:02:40.525,0:02:44.704
그리고 절대 위치 값을 쓰고 있어요

0:02:44.704,0:02:48.488
지금은 div가 얼굴 밑에 있네요

0:02:48.488,0:02:51.473
얼굴 위로 올리려면[br]어떻게 해야할까요?

0:02:51.473,0:02:54.271
절대 위치를 사용한다는 것은

0:02:54.271,0:02:57.657
'top'과 'left' 속성을 사용해서

0:02:57.657,0:03:02.073
실제 위치를 표시해줘야해요[br]절대 위치니까요

0:03:02.073,0:03:07.923
여기 'top:80px'와[br]'left:15px'를 줄게요

0:03:07.923,0:03:09.482
좋아요

0:03:09.482,0:03:13.750
이제 HTML으로는 되니까[br]자바스크립트로 해볼게요

0:03:13.750,0:03:19.055
사용자가 마우스를 움직일 때마다[br]이 div가 생길 수 있게요

0:03:19.055,0:03:22.908
자바스크립트 콜백 함수로[br]돌아가 볼게요

0:03:22.908,0:03:25.534
첫 번째는 div를 만드는 거에요

0:03:25.534,0:03:31.406
document.createElement()[br]함수로 할 수 있어요

0:03:31.406,0:03:33.590
여긴 div가 되겠죠

0:03:33.590,0:03:39.580
두 번째로는 클래스를 추가해요[br]'beard.className = "beard";'

0:03:39.580,0:03:42.198
이제 div가 생겼는데 어딘가에 떠 있어요

0:03:42.198,0:03:47.072
마지막으로는 바디에 넣어주세요

0:03:47.072,0:03:52.103
이제 HTML에서 한 걸[br]자바스크립트로 해봤어요

0:03:52.103,0:03:54.666
HTML에서는 지울게요

0:03:54.666,0:03:58.764
이제 윈스턴을 클릭해 보세요

0:03:58.764,0:04:02.542
어떤 일이 일어나는지 보세요

0:04:02.542,0:04:04.933
수염이 생기는 거 봤어요?

0:04:04.933,0:04:07.191
이걸 여러번 하면요?

0:04:07.191,0:04:11.090
그러면 두 번째 클릭에서는[br]아무것도 안 되는게 보일 거에요

0:04:11.090,0:04:13.525
또는 아무것도[br]안 되는 것처럼 보이죠

0:04:13.525,0:04:17.863
왜냐하면 모든 div가[br]top과 left 값이 같아서

0:04:17.863,0:04:21.081
새 div가 예전 것 위에[br]겹쳐지고 있어요

0:04:21.081,0:04:25.493
우리는 div가 사용자의 마우스가[br]있는 곳에 생기길 원해요

0:04:25.493,0:04:30.386
마우스의 위치를[br]어떻게 알 수 있을까요?

0:04:30.386,0:04:34.317
브라우저는 많은 정보들을[br]기록하고 있어요

0:04:34.317,0:04:38.082
사용자 이벤트가 발생할 때마다[br]어디서 일어나는 지 같은 것들요

0:04:38.082,0:04:41.018
브라우저는 여러분들에게[br]매번 그 정보를 제공해요

0:04:41.018,0:04:43.224
이벤트 리스너 함수가[br]호출될 때마다 불러와요

0:04:43.224,0:04:46.804
그럼 어디서 어떻게 놀라운 [br]정보를 얻을 수 있을까요?

0:04:46.804,0:04:51.412
힌트로 한 글자만 보여줄게요

0:04:51.412,0:04:56.074
이 e는 이벤트 정보 객체에요

0:04:56.074,0:04:59.609
브라우저는 이 객체를[br]첫 번째 인자로 전송해요

0:04:59.609,0:05:02.129
이벤트 리스너 콜백 함수가[br]호출되어질 때마다 말이죠

0:05:02.129,0:05:06.178
전에는 필요없었으니까[br]이 인자를 쓰지 않았어요

0:05:06.178,0:05:09.002
하지만 이제 사용할 거니까[br]객체에 이름을 줄거에요

0:05:09.002,0:05:11.594
이름은 함수에서 참조하기[br]쉽게 해줄거에요

0:05:11.594,0:05:15.886
자바스크립트에서는 함수에 여러 개의[br]인자를 줘도 호출할 수 있어요

0:05:15.886,0:05:18.588
함수가 그 인자를 사용하지 않고[br]참조하지 않아도 말이죠

0:05:18.588,0:05:22.821
이 정보는 항상 받고있었어요[br]우리가 몰랐을 뿐이죠

0:05:22.821,0:05:28.278
이제 이 e의 로그를 보기 위해[br]'console.log(e)'를 쓸게요

0:05:28.278,0:05:32.162
이제 잠깐 윈스턴을 클릭하고[br]콘솔을 관찰해보세요

0:05:32.162,0:05:34.410
이 이벤트 객체의[br]로그가 출력되는게 보일 거에요

0:05:34.410,0:05:38.871
그리고 이 객체의[br]속성을 볼 수 있어요

0:05:38.871,0:05:43.267
우리가 관심있는 속성은[br]두 개가 있어요

0:05:43.267,0:05:45.594
'clientX'와[br]'clientY'에요

0:05:45.594,0:05:49.314
이벤트의 x와 y 위치가 기록되는데[br]이걸 사용하게 될 거에요

0:05:49.314,0:05:51.665
수염의 위치를[br]지정하기 위해서요

0:05:51.665,0:06:02.015
수염의 top을 e.clientY로 하고[br]단위로는 px를 추가하세요

0:06:02.015,0:06:11.343
left는 e.clientX로 하고[br]단위로는 px를 추가하세요

0:06:11.343,0:06:14.320
이제 잠시 멈추고[br]마우스를 올려보세요

0:06:14.320,0:06:18.007
윈스턴에게 수염을 그려주세요

0:06:18.007,0:06:19.454
꽤 멋지죠?

0:06:19.454,0:06:23.157
여러분이 각종 색칠 프로그램을[br]상상할 수 있을거에요

0:06:23.157,0:06:25.559
clientX와 clientY를 이용해서요

0:06:25.559,0:06:28.793
콘솔에서 본 것 처럼[br]여러 속성들이 있어요

0:06:28.793,0:06:31.251
여러분이 이벤트 객체에서[br]사용할 수 있는 것들이요

0:06:31.251,0:06:35.354
제 생각에 가장 유용한 것은[br]키보드와 관련된 거에요

0:06:35.354,0:06:38.107
여러분은 사용자가 누르고[br]있던 키를 알 수 있어요

0:06:38.107,0:06:39.971
이벤트가 일어날 때 말이죠

0:06:39.971,0:06:45.692
이걸로 키보드를 사용하는 인터페이스나[br]아주 재밌는 게임을 만들 수 있어요

0:06:45.692,0:06:47.206
한 가지 더 있어요

0:06:47.206,0:06:49.700
이 인자를 e라고[br]부르지 않아도 돼요

0:06:49.700,0:06:57.312
일반적이지만 어떤 개발자들은[br]evt나 evert라고 불러요

0:06:57.312,0:06:59.352
뭐라고 부르든지 상관없어요

0:06:59.352,0:07:03.695
그게 브라우저가 여러분의 함수에[br]전달하는 첫번째 인자라면요

0:07:03.695,0:07:09.485
그리고 그 객체를 이런 방식으로[br]참조할 것이라면요

0:07:09.485,0:07:13.281
만약 문제가 생긴다면[br]console.log를 사용하도록 해요

0:07:13.281,0:07:15.639
어떤 일이 일어나는지[br]디버깅을 도와줄거에요

0:07:15.639,0:07:17.235
여러분이 웹 개발자가 되면

0:07:17.235,0:07:20.666
콘솔은 아마 여러분의[br]가장 친한 친구가 될거에요

0:07:20.666,0:07:21.914
쓰세요!