1
00:00:00,000 --> 00:00:03,450
윈스턴 그림이 있는
페이지를 가져와봤어요

2
00:00:03,450 --> 00:00:06,556
이제 슬슬 추워지고
윈스턴은 나이가 들어가니까

3
00:00:06,556 --> 00:00:08,646
윈스턴은 수염이
있으면 좋겠대요

4
00:00:08,646 --> 00:00:10,750
제가 수염을
그려줄 수도 있죠

5
00:00:10,750 --> 00:00:12,333
하지만 이게
더 멋질 거에요

6
00:00:12,333 --> 00:00:16,412
사용자가 원하는 대로 수염을
윈스턴에게 그려줄 수 있다면요

7
00:00:16,412 --> 00:00:21,090
긴 수염과 까칠한 부분도
약간 있고 어떤 걸 원하든지요

8
00:00:21,090 --> 00:00:22,921
그럼 이걸 어떻게 할 수 있을까요?

9
00:00:22,921 --> 00:00:28,693
한 가지 방법은 이미지 위에서의
마우스 움직임(mouseMove) 이벤트를 넣는 거에요

10
00:00:28,693 --> 00:00:34,441
사용자가 마우스를 얼굴 위로
움직이면 함수가 호출되게요

11
00:00:34,441 --> 00:00:38,274
방금 배운 것으로
한번 해볼게요

12
00:00:38,274 --> 00:00:40,092
첫 번째는
요소를 찾는거에요

13
00:00:40,092 --> 00:00:42,241
이미지 말이죠

14
00:00:42,241 --> 00:00:46,996
var face = document.getElementById()

15
00:00:47,009 --> 00:00:50,561
id는 face라고 하죠
괜찮은 ID네요

16
00:00:50,561 --> 00:00:53,866
두 번째는 콜백함수를
만드는 거에요

17
00:00:53,866 --> 00:00:58,267
일단 적용되는 걸 봐야하니까
간단한 걸로 해볼게요

18
00:00:58,267 --> 00:01:10,426
나중에 더 많은 걸
만들어 볼게요

19
00:01:10,426 --> 00:01:13,308
좋아요

20
00:01:13,308 --> 00:01:17,946
마지막 단계는
이걸 이것과 연결하는 거에요

21
00:01:17,946 --> 00:01:22,351
마우스 이벤트가 발생했을 때
이 함수가 호출되어야 하니까요

22
00:01:22,351 --> 00:01:27,854
face.addEventListener("mousemove",
라고 쓰고

23
00:01:27,854 --> 00:01:32,220
함수 이름을 쓰세요
'onMouseMove'

24
00:01:32,220 --> 00:01:36,590
이제 이걸 멈추고 얼굴 위로
마우스를 움직여봐요

25
00:01:36,590 --> 00:01:39,915
문구가 보이세요?

26
00:01:39,915 --> 00:01:43,856
이 효과가 적용되는 걸
여러분도 봤을 거에요

27
00:01:43,856 --> 00:01:47,454
하지만 이게 우리가
원하는 효과는 아니에요

28
00:01:47,454 --> 00:01:50,480
우린 문구를 쓰는게 아니라
그림을 그리고 싶어요

29
00:01:50,480 --> 00:01:53,466
웹페이지에 어떻게
그림을 그릴 수 있을까요?

30
00:01:53,466 --> 00:01:58,256
canvas 태그를 사용해서
픽셀을 그릴 수 있어요

31
00:01:58,256 --> 00:02:01,162
여기 ProcessingJS에서
하는 것 처럼요

32
00:02:01,162 --> 00:02:06,502
우리가 그리는 건 수염이지만 
실제로는 수많은 검은 점일 거에요

33
00:02:06,502 --> 00:02:10,606
그냥 각 점에
div를 생성해서

34
00:02:10,606 --> 00:02:13,551
절대 위치로 div에게
위치를 줄 수 있죠

35
00:02:13,551 --> 00:02:18,370
여기 수염 하나로
해볼게요

36
00:02:18,370 --> 00:02:22,724
beard 클래스를 가진
div를 만들고

37
00:02:22,724 --> 00:02:29,721
이 수염에게 CSS를 주고요
여기 넣을게요

38
00:02:29,721 --> 00:02:31,750
이건 이렇게 고칠게요

39
00:02:31,750 --> 00:02:36,471
이 수염의 배경색은
검정색이고 5x5 픽셀이에요

40
00:02:36,471 --> 00:02:40,525
둥글게 만들려면
여기 2픽셀의 테두리를 줘요

41
00:02:40,525 --> 00:02:44,704
그리고 절대 위치 값을 쓰고 있어요

42
00:02:44,704 --> 00:02:48,488
지금은 div가 얼굴 밑에 있네요

43
00:02:48,488 --> 00:02:51,473
얼굴 위로 올리려면
어떻게 해야할까요?

44
00:02:51,473 --> 00:02:54,271
절대 위치를 사용한다는 것은

45
00:02:54,271 --> 00:02:57,657
'top'과 'left' 속성을 사용해서

46
00:02:57,657 --> 00:03:02,073
실제 위치를 표시해줘야해요
절대 위치니까요

47
00:03:02,073 --> 00:03:07,923
여기 'top:80px'와
'left:15px'를 줄게요

48
00:03:07,923 --> 00:03:09,482
좋아요

49
00:03:09,482 --> 00:03:13,750
이제 HTML으로는 되니까
자바스크립트로 해볼게요

50
00:03:13,750 --> 00:03:19,055
사용자가 마우스를 움직일 때마다
이 div가 생길 수 있게요

51
00:03:19,055 --> 00:03:22,908
자바스크립트 콜백 함수로
돌아가 볼게요

52
00:03:22,908 --> 00:03:25,534
첫 번째는 div를 만드는 거에요

53
00:03:25,534 --> 00:03:31,406
document.createElement()
함수로 할 수 있어요

54
00:03:31,406 --> 00:03:33,590
여긴 div가 되겠죠

55
00:03:33,590 --> 00:03:39,580
두 번째로는 클래스를 추가해요
'beard.className = "beard";'

56
00:03:39,580 --> 00:03:42,198
이제 div가 생겼는데 어딘가에 떠 있어요

57
00:03:42,198 --> 00:03:47,072
마지막으로는 바디에 넣어주세요

58
00:03:47,072 --> 00:03:52,103
이제 HTML에서 한 걸
자바스크립트로 해봤어요

59
00:03:52,103 --> 00:03:54,666
HTML에서는 지울게요

60
00:03:54,666 --> 00:03:58,764
이제 윈스턴을 클릭해 보세요

61
00:03:58,764 --> 00:04:02,542
어떤 일이 일어나는지 보세요

62
00:04:02,542 --> 00:04:04,933
수염이 생기는 거 봤어요?

63
00:04:04,933 --> 00:04:07,191
이걸 여러번 하면요?

64
00:04:07,191 --> 00:04:11,090
그러면 두 번째 클릭에서는
아무것도 안 되는게 보일 거에요

65
00:04:11,090 --> 00:04:13,525
또는 아무것도
안 되는 것처럼 보이죠

66
00:04:13,525 --> 00:04:17,863
왜냐하면 모든 div가
top과 left 값이 같아서

67
00:04:17,863 --> 00:04:21,081
새 div가 예전 것 위에
겹쳐지고 있어요

68
00:04:21,081 --> 00:04:25,493
우리는 div가 사용자의 마우스가
있는 곳에 생기길 원해요

69
00:04:25,493 --> 00:04:30,386
마우스의 위치를
어떻게 알 수 있을까요?

70
00:04:30,386 --> 00:04:34,317
브라우저는 많은 정보들을
기록하고 있어요

71
00:04:34,317 --> 00:04:38,082
사용자 이벤트가 발생할 때마다
어디서 일어나는 지 같은 것들요

72
00:04:38,082 --> 00:04:41,018
브라우저는 여러분들에게
매번 그 정보를 제공해요

73
00:04:41,018 --> 00:04:43,224
이벤트 리스너 함수가
호출될 때마다 불러와요

74
00:04:43,224 --> 00:04:46,804
그럼 어디서 어떻게 놀라운 
정보를 얻을 수 있을까요?

75
00:04:46,804 --> 00:04:51,412
힌트로 한 글자만 보여줄게요

76
00:04:51,412 --> 00:04:56,074
이 e는 이벤트 정보 객체에요

77
00:04:56,074 --> 00:04:59,609
브라우저는 이 객체를
첫 번째 인자로 전송해요

78
00:04:59,609 --> 00:05:02,129
이벤트 리스너 콜백 함수가
호출되어질 때마다 말이죠

79
00:05:02,129 --> 00:05:06,178
전에는 필요없었으니까
이 인자를 쓰지 않았어요

80
00:05:06,178 --> 00:05:09,002
하지만 이제 사용할 거니까
객체에 이름을 줄거에요

81
00:05:09,002 --> 00:05:11,594
이름은 함수에서 참조하기
쉽게 해줄거에요

82
00:05:11,594 --> 00:05:15,886
자바스크립트에서는 함수에 여러 개의
인자를 줘도 호출할 수 있어요

83
00:05:15,886 --> 00:05:18,588
함수가 그 인자를 사용하지 않고
참조하지 않아도 말이죠

84
00:05:18,588 --> 00:05:22,821
이 정보는 항상 받고있었어요
우리가 몰랐을 뿐이죠

85
00:05:22,821 --> 00:05:28,278
이제 이 e의 로그를 보기 위해
'console.log(e)'를 쓸게요

86
00:05:28,278 --> 00:05:32,162
이제 잠깐 윈스턴을 클릭하고
콘솔을 관찰해보세요

87
00:05:32,162 --> 00:05:34,410
이 이벤트 객체의
로그가 출력되는게 보일 거에요

88
00:05:34,410 --> 00:05:38,871
그리고 이 객체의
속성을 볼 수 있어요

89
00:05:38,871 --> 00:05:43,267
우리가 관심있는 속성은
두 개가 있어요

90
00:05:43,267 --> 00:05:45,594
'clientX'와
'clientY'에요

91
00:05:45,594 --> 00:05:49,314
이벤트의 x와 y 위치가 기록되는데
이걸 사용하게 될 거에요

92
00:05:49,314 --> 00:05:51,665
수염의 위치를
지정하기 위해서요

93
00:05:51,665 --> 00:06:02,015
수염의 top을 e.clientY로 하고
단위로는 px를 추가하세요

94
00:06:02,015 --> 00:06:11,343
left는 e.clientX로 하고
단위로는 px를 추가하세요

95
00:06:11,343 --> 00:06:14,320
이제 잠시 멈추고
마우스를 올려보세요

96
00:06:14,320 --> 00:06:18,007
윈스턴에게 수염을 그려주세요

97
00:06:18,007 --> 00:06:19,454
꽤 멋지죠?

98
00:06:19,454 --> 00:06:23,157
여러분이 각종 색칠 프로그램을
상상할 수 있을거에요

99
00:06:23,157 --> 00:06:25,559
clientX와 clientY를 이용해서요

100
00:06:25,559 --> 00:06:28,793
콘솔에서 본 것 처럼
여러 속성들이 있어요

101
00:06:28,793 --> 00:06:31,251
여러분이 이벤트 객체에서
사용할 수 있는 것들이요

102
00:06:31,251 --> 00:06:35,354
제 생각에 가장 유용한 것은
키보드와 관련된 거에요

103
00:06:35,354 --> 00:06:38,107
여러분은 사용자가 누르고
있던 키를 알 수 있어요

104
00:06:38,107 --> 00:06:39,971
이벤트가 일어날 때 말이죠

105
00:06:39,971 --> 00:06:45,692
이걸로 키보드를 사용하는 인터페이스나
아주 재밌는 게임을 만들 수 있어요

106
00:06:45,692 --> 00:06:47,206
한 가지 더 있어요

107
00:06:47,206 --> 00:06:49,700
이 인자를 e라고
부르지 않아도 돼요

108
00:06:49,700 --> 00:06:57,312
일반적이지만 어떤 개발자들은
evt나 evert라고 불러요

109
00:06:57,312 --> 00:06:59,352
뭐라고 부르든지 상관없어요

110
00:06:59,352 --> 00:07:03,695
그게 브라우저가 여러분의 함수에
전달하는 첫번째 인자라면요

111
00:07:03,695 --> 00:07:09,485
그리고 그 객체를 이런 방식으로
참조할 것이라면요

112
00:07:09,485 --> 00:07:13,281
만약 문제가 생긴다면
console.log를 사용하도록 해요

113
00:07:13,281 --> 00:07:15,639
어떤 일이 일어나는지
디버깅을 도와줄거에요

114
00:07:15,639 --> 00:07:17,235
여러분이 웹 개발자가 되면

115
00:07:17,235 --> 00:07:20,666
콘솔은 아마 여러분의
가장 친한 친구가 될거에요

116
00:07:20,666 --> 00:07:21,914
쓰세요!