1
00:00:00,420 --> 00:00:05,037
이것저것 해보려고
이 페이지를 만들었어요

2
00:00:05,757 --> 00:00:07,578
그런데
좀 지루하네요

3
00:00:08,038 --> 00:00:10,163
내용도 없고

4
00:00:10,891 --> 00:00:15,134
이 버튼은 눌러도
아무 반응이 없어요

5
00:00:16,174 --> 00:00:18,387
이 버튼을 인터랙티브하게
만들어 볼거에요

6
00:00:18,842 --> 00:00:20,248
사용자가
버튼을 클릭하면

7
00:00:20,248 --> 00:00:23,428
버튼 안의 문구가
바뀌게 할거에요

8
00:00:24,416 --> 00:00:27,301
첫번째는
요소를 찾는거에요

9
00:00:27,301 --> 00:00:29,630
우리가 이벤트에
반응할 요소 말이에요

10
00:00:30,062 --> 00:00:32,378
이 경우엔
그 요소는 버튼이죠

11
00:00:32,846 --> 00:00:35,117
그리고 버튼은
클릭이 가능해요

12
00:00:35,443 --> 00:00:39,483
그래서 우리는
clickerButton변수를 만들고

13
00:00:40,004 --> 00:00:44,991
document.getElementById
를 이용해서

14
00:00:45,552 --> 00:00:48,405
값을 받아오고
이 변수에 저장할 거에요

15
00:00:49,399 --> 00:00:53,068
다음 단계는
함수를 정의해서

16
00:00:53,068 --> 00:00:56,071
클릭이 발생하면
호출되게 하는 거에요

17
00:00:58,046 --> 00:01:02,010
이 함수는
onButtonClick이라고 하고

18
00:01:03,535 --> 00:01:06,893
비어있는 함수를
여기 정의해둘게요

19
00:01:07,233 --> 00:01:09,711
당연히 뭔가를
채워야해요

20
00:01:09,711 --> 00:01:11,963
아니면 별로 재미없는
함수가 될테니까요

21
00:01:12,319 --> 00:01:14,101
이 버튼의 문구를
바꾸려면

22
00:01:14,101 --> 00:01:18,632
clickerButton의 값을 이용해
textContent에 넣어주면 돼요

23
00:01:19,777 --> 00:01:22,836
"Oh wow, you clicked me"
라고 해보죠

24
00:01:23,495 --> 00:01:25,590
와
행복한 버튼이에요!

25
00:01:27,369 --> 00:01:30,028
많은 코드는 아니지만
더 복잡하게 만들 수 있어요

26
00:01:30,166 --> 00:01:31,256
이게 작동된다면요

27
00:01:32,970 --> 00:01:37,226
우리가 쓴 코드가 한 건
변수를 정의한 것 뿐이에요

28
00:01:37,638 --> 00:01:41,345
그래서 버튼을 눌렀을 때
아직 아무것도 일어나지 않아요

29
00:01:42,236 --> 00:01:44,777
마지막 단계는
모든 걸 합치는 거에요

30
00:01:45,149 --> 00:01:50,028
그래서 브라우저에게
우리가 만든 함수를 호출하라고

31
00:01:50,028 --> 00:01:54,292
우리가 찾아둔 버튼이
클릭이 될 때마다 말이죠

32
00:01:55,051 --> 00:02:00,519
이건 이벤트 리스너를
버튼에 추가해서 구현할 수 있어요

33
00:02:00,716 --> 00:02:05,898
clickerButton.addeventlistener
처럼요

34
00:02:06,452 --> 00:02:10,528
그리고 이 방법에는
두 가지의 인자를 전달해야해요

35
00:02:10,975 --> 00:02:14,023
첫번째는 이벤트의 이름
'click'

36
00:02:14,443 --> 00:02:17,845
두번째는 우리가 호출하려는
함수의 이름이에요

37
00:02:18,255 --> 00:02:21,670
클릭할 때 호출되는 함수죠
'onButtonClick'

38
00:02:23,209 --> 00:02:26,657
이걸 잠시 멈추고
버튼을 한번 클릭해보세요

39
00:02:28,707 --> 00:02:30,081
동작하나요?

40
00:02:30,081 --> 00:02:31,983
그랬으면 좋겠네요
전 동작하거든요

41
00:02:33,226 --> 00:02:36,378
이 함수가 어떻게
작동되는 지에 대해 얘기해보죠

42
00:02:36,378 --> 00:02:37,608
약간 어려울 수 있거든요

43
00:02:37,937 --> 00:02:41,102
이 함수를
이벤트 리스너 함수라고 하거나

44
00:02:41,102 --> 00:02:46,685
콜백 함수라고 해요
그게 사용되고 있는 방법이니까요

45
00:02:47,157 --> 00:02:50,265
이 함수가 이벤트가 일어나면
호출(콜)되길 원해요

46
00:02:51,229 --> 00:02:55,317
보통 페이지 로드될 때
이게 호출되길 원하진 않잖아요

47
00:02:56,057 --> 00:02:58,323
만약에 페이지가 로드될 때
호출되게 하고 싶다면

48
00:02:58,323 --> 00:03:01,991
여기 아래에 한 줄을
이렇게 추가해야 할거에요

49
00:03:03,819 --> 00:03:06,287
함수이름 뒤에 괄호를 쓰는걸
기억하세요

50
00:03:06,671 --> 00:03:09,611
이 괄호로
함수를 호출하는 거에요

51
00:03:10,029 --> 00:03:13,760
이걸 내버려두면
함수를 호출하는게 아니라

52
00:03:13,760 --> 00:03:15,550
그냥 참조하는 거에요

53
00:03:15,895 --> 00:03:19,172
그건 이렇게 인자를
전달하고 싶을 때 하는 거에요

54
00:03:19,172 --> 00:03:20,585
이건 그냥 브라우저에게
이렇게 말해주는 거에요

55
00:03:20,585 --> 00:03:25,608
"여기 나중에 호출할 함수가 있어.
지금은 말고"

56
00:03:27,360 --> 00:03:30,638
그러니까 괄호를 여기에는
적지 않도록 해요

57
00:03:30,983 --> 00:03:32,595
이 함수 이름 뒤에요

58
00:03:32,721 --> 00:03:37,336
왜냐하면 함수 자체가 아니라
함수의 리턴값을 전달하는 거니까요

59
00:03:38,234 --> 00:03:39,628
실수로 그렇게 했다면

60
00:03:39,628 --> 00:03:44,149
이 버튼은 페이지가 로드될 때
바뀌고 다음엔 바뀌지 않을 거에요

61
00:03:44,727 --> 00:03:47,418
고치려면
여기 괄호만 지우면 돼요

62
00:03:47,418 --> 00:03:49,167
실수로 추가했던 것을요

63
00:03:49,167 --> 00:03:52,418
이제 이 함수는 클릭될 때만
호출될 거에요

64
00:03:54,012 --> 00:03:56,470
한 가지
다른 방법은

65
00:03:56,496 --> 00:04:02,658
여기 익명의 함수를
넣어주는 거에요

66
00:04:02,658 --> 00:04:05,705
익명 함수는
미리 정의된 이름은 없지만

67
00:04:06,530 --> 00:04:10,164
명령어 안에
구현된 함수에요

68
00:04:10,530 --> 00:04:15,146
이 addEventListener부분을
복사해서 붙여넣기 할게요

69
00:04:15,146 --> 00:04:18,127
그리고 이 방법을
하나씩 보여줄게요

70
00:04:18,127 --> 00:04:20,410
그럼 무슨 뜻인지
알 수 있을 거에요

71
00:04:20,648 --> 00:04:22,986
이 함수 이름을 지우고

72
00:04:22,986 --> 00:04:25,604
함수 정의로 대체할게요

73
00:04:26,051 --> 00:04:29,144
여기 붙여넣고

74
00:04:31,474 --> 00:04:32,144
좋아요

75
00:04:32,144 --> 00:04:37,256
이 두 라인의 코드는
정확히 똑같은 일을 해요

76
00:04:37,777 --> 00:04:39,134
음
거의 같게요

77
00:04:39,708 --> 00:04:41,837
두 개 모두 함수를
전달해요

78
00:04:41,837 --> 00:04:43,955
같은 내용의 함수를요

79
00:04:44,285 --> 00:04:46,052
차이점은 첫번째 것은

80
00:04:46,052 --> 00:04:50,117
위에 미리 정의해 둔 함수를
전달하는 것이고

81
00:04:50,117 --> 00:04:53,284
두번째 것은
익명 함수를

82
00:04:53,284 --> 00:04:57,551
명령어 속에 정의함과
동시에 전달하는 거에요

83
00:04:58,438 --> 00:04:59,724
두 방법 모두 작동해요

84
00:04:59,958 --> 00:05:02,777
많은 개발자들은
미리 정의된 함수를 선호해요

85
00:05:02,966 --> 00:05:04,750
왜냐하면 코드가 읽기 쉽고

86
00:05:04,750 --> 00:05:06,465
디버깅도 쉽고

87
00:05:06,465 --> 00:05:11,176
미리 정의된 함수를
여러 번 호출하고

88
00:05:11,176 --> 00:05:12,605
다른 이벤트에서도
호출할 수 있으니까요

89
00:05:13,277 --> 00:05:15,220
어떤 방법을 쓰든지
여러분 마음이에요

90
00:05:15,663 --> 00:05:17,734
두 개를 동시에
사용하지는 마세요

91
00:05:17,734 --> 00:05:21,955
브라우저는 클릭이 발생할 때
두 개 모두를 호출할 것이고

92
00:05:21,955 --> 00:05:25,119
두 번 부를 이유가 없으니까요

93
00:05:26,154 --> 00:05:29,118
앞으로 가서
익명 함수를 지울게요

94
00:05:29,118 --> 00:05:30,937
전 첫번째 방법이
더 좋으니까요

95
00:05:31,994 --> 00:05:33,780
이제 여러분은 많은 것을
할 수 있게 되었어요

96
00:05:33,780 --> 00:05:35,274
이벤트 리스너를
추가할 수있게 되었으니까요

97
00:05:35,274 --> 00:05:37,806
페이지의 더 많은 부분에
추가해 볼 수도 있고

98
00:05:38,019 --> 00:05:39,656
다른 이벤트를
사용해 볼 수도 있고

99
00:05:39,914 --> 00:05:41,075
다음 시간에
다뤄볼 거에요

100
00:05:41,455 --> 00:05:43,209
DOM을
수정해 볼 수도 있어요

101
00:05:43,209 --> 00:05:45,435
전에 배운 방법들로요

102
00:05:45,849 --> 00:05:49,287
그리고 반응했던
요소 말고도

103
00:05:49,308 --> 00:05:52,215
페이지의 다른 것들도
수정할 수 있어요

104
00:05:52,562 --> 00:05:53,561
한번 해보세요

105
00:05:53,561 --> 00:05:55,455
여러분이 할 수 있는 것을
찾아봐요