0:00:00.420,0:00:05.037
이것저것 해보려고[br]이 페이지를 만들었어요

0:00:05.757,0:00:07.578
그런데[br]좀 지루하네요

0:00:08.038,0:00:10.163
내용도 없고

0:00:10.891,0:00:15.134
이 버튼은 눌러도[br]아무 반응이 없어요

0:00:16.174,0:00:18.387
이 버튼을 인터랙티브하게[br]만들어 볼거에요

0:00:18.842,0:00:20.248
사용자가[br]버튼을 클릭하면

0:00:20.248,0:00:23.428
버튼 안의 문구가[br]바뀌게 할거에요

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

0:00:27.301,0:00:29.630
우리가 이벤트에[br]반응할 요소 말이에요

0:00:30.062,0:00:32.378
이 경우엔[br]그 요소는 버튼이죠

0:00:32.846,0:00:35.117
그리고 버튼은[br]클릭이 가능해요

0:00:35.443,0:00:39.483
그래서 우리는[br]clickerButton변수를 만들고

0:00:40.004,0:00:44.991
document.getElementById[br]를 이용해서

0:00:45.552,0:00:48.405
값을 받아오고[br]이 변수에 저장할 거에요

0:00:49.399,0:00:53.068
다음 단계는[br]함수를 정의해서

0:00:53.068,0:00:56.071
클릭이 발생하면[br]호출되게 하는 거에요

0:00:58.046,0:01:02.010
이 함수는[br]onButtonClick이라고 하고

0:01:03.535,0:01:06.893
비어있는 함수를[br]여기 정의해둘게요

0:01:07.233,0:01:09.711
당연히 뭔가를[br]채워야해요

0:01:09.711,0:01:11.963
아니면 별로 재미없는[br]함수가 될테니까요

0:01:12.319,0:01:14.101
이 버튼의 문구를[br]바꾸려면

0:01:14.101,0:01:18.632
clickerButton의 값을 이용해[br]textContent에 넣어주면 돼요

0:01:19.777,0:01:22.836
"Oh wow, you clicked me"[br]라고 해보죠

0:01:23.495,0:01:25.590
와[br]행복한 버튼이에요!

0:01:27.369,0:01:30.028
많은 코드는 아니지만[br]더 복잡하게 만들 수 있어요

0:01:30.166,0:01:31.256
이게 작동된다면요

0:01:32.970,0:01:37.226
우리가 쓴 코드가 한 건[br]변수를 정의한 것 뿐이에요

0:01:37.638,0:01:41.345
그래서 버튼을 눌렀을 때[br]아직 아무것도 일어나지 않아요

0:01:42.236,0:01:44.777
마지막 단계는[br]모든 걸 합치는 거에요

0:01:45.149,0:01:50.028
그래서 브라우저에게[br]우리가 만든 함수를 호출하라고

0:01:50.028,0:01:54.292
우리가 찾아둔 버튼이[br]클릭이 될 때마다 말이죠

0:01:55.051,0:02:00.519
이건 이벤트 리스너를[br]버튼에 추가해서 구현할 수 있어요

0:02:00.716,0:02:05.898
clickerButton.addeventlistener[br]처럼요

0:02:06.452,0:02:10.528
그리고 이 방법에는[br]두 가지의 인자를 전달해야해요

0:02:10.975,0:02:14.023
첫번째는 이벤트의 이름[br]'click'

0:02:14.443,0:02:17.845
두번째는 우리가 호출하려는[br]함수의 이름이에요

0:02:18.255,0:02:21.670
클릭할 때 호출되는 함수죠[br]'onButtonClick'

0:02:23.209,0:02:26.657
이걸 잠시 멈추고[br]버튼을 한번 클릭해보세요

0:02:28.707,0:02:30.081
동작하나요?

0:02:30.081,0:02:31.983
그랬으면 좋겠네요[br]전 동작하거든요

0:02:33.226,0:02:36.378
이 함수가 어떻게[br]작동되는 지에 대해 얘기해보죠

0:02:36.378,0:02:37.608
약간 어려울 수 있거든요

0:02:37.937,0:02:41.102
이 함수를[br]이벤트 리스너 함수라고 하거나

0:02:41.102,0:02:46.685
콜백 함수라고 해요[br]그게 사용되고 있는 방법이니까요

0:02:47.157,0:02:50.265
이 함수가 이벤트가 일어나면[br]호출(콜)되길 원해요

0:02:51.229,0:02:55.317
보통 페이지 로드될 때[br]이게 호출되길 원하진 않잖아요

0:02:56.057,0:02:58.323
만약에 페이지가 로드될 때[br]호출되게 하고 싶다면

0:02:58.323,0:03:01.991
여기 아래에 한 줄을[br]이렇게 추가해야 할거에요

0:03:03.819,0:03:06.287
함수이름 뒤에 괄호를 쓰는걸[br]기억하세요

0:03:06.671,0:03:09.611
이 괄호로[br]함수를 호출하는 거에요

0:03:10.029,0:03:13.760
이걸 내버려두면[br]함수를 호출하는게 아니라

0:03:13.760,0:03:15.550
그냥 참조하는 거에요

0:03:15.895,0:03:19.172
그건 이렇게 인자를[br]전달하고 싶을 때 하는 거에요

0:03:19.172,0:03:20.585
이건 그냥 브라우저에게[br]이렇게 말해주는 거에요

0:03:20.585,0:03:25.608
"여기 나중에 호출할 함수가 있어.[br]지금은 말고"

0:03:27.360,0:03:30.638
그러니까 괄호를 여기에는[br]적지 않도록 해요

0:03:30.983,0:03:32.595
이 함수 이름 뒤에요

0:03:32.721,0:03:37.336
왜냐하면 함수 자체가 아니라[br]함수의 리턴값을 전달하는 거니까요

0:03:38.234,0:03:39.628
실수로 그렇게 했다면

0:03:39.628,0:03:44.149
이 버튼은 페이지가 로드될 때[br]바뀌고 다음엔 바뀌지 않을 거에요

0:03:44.727,0:03:47.418
고치려면[br]여기 괄호만 지우면 돼요

0:03:47.418,0:03:49.167
실수로 추가했던 것을요

0:03:49.167,0:03:52.418
이제 이 함수는 클릭될 때만[br]호출될 거에요

0:03:54.012,0:03:56.470
한 가지[br]다른 방법은

0:03:56.496,0:04:02.658
여기 익명의 함수를[br]넣어주는 거에요

0:04:02.658,0:04:05.705
익명 함수는[br]미리 정의된 이름은 없지만

0:04:06.530,0:04:10.164
명령어 안에[br]구현된 함수에요

0:04:10.530,0:04:15.146
이 addEventListener부분을[br]복사해서 붙여넣기 할게요

0:04:15.146,0:04:18.127
그리고 이 방법을[br]하나씩 보여줄게요

0:04:18.127,0:04:20.410
그럼 무슨 뜻인지[br]알 수 있을 거에요

0:04:20.648,0:04:22.986
이 함수 이름을 지우고

0:04:22.986,0:04:25.604
함수 정의로 대체할게요

0:04:26.051,0:04:29.144
여기 붙여넣고

0:04:31.474,0:04:32.144
좋아요

0:04:32.144,0:04:37.256
이 두 라인의 코드는[br]정확히 똑같은 일을 해요

0:04:37.777,0:04:39.134
음[br]거의 같게요

0:04:39.708,0:04:41.837
두 개 모두 함수를[br]전달해요

0:04:41.837,0:04:43.955
같은 내용의 함수를요

0:04:44.285,0:04:46.052
차이점은 첫번째 것은

0:04:46.052,0:04:50.117
위에 미리 정의해 둔 함수를[br]전달하는 것이고

0:04:50.117,0:04:53.284
두번째 것은[br]익명 함수를

0:04:53.284,0:04:57.551
명령어 속에 정의함과[br]동시에 전달하는 거에요

0:04:58.438,0:04:59.724
두 방법 모두 작동해요

0:04:59.958,0:05:02.777
많은 개발자들은[br]미리 정의된 함수를 선호해요

0:05:02.966,0:05:04.750
왜냐하면 코드가 읽기 쉽고

0:05:04.750,0:05:06.465
디버깅도 쉽고

0:05:06.465,0:05:11.176
미리 정의된 함수를[br]여러 번 호출하고

0:05:11.176,0:05:12.605
다른 이벤트에서도[br]호출할 수 있으니까요

0:05:13.277,0:05:15.220
어떤 방법을 쓰든지[br]여러분 마음이에요

0:05:15.663,0:05:17.734
두 개를 동시에[br]사용하지는 마세요

0:05:17.734,0:05:21.955
브라우저는 클릭이 발생할 때[br]두 개 모두를 호출할 것이고

0:05:21.955,0:05:25.119
두 번 부를 이유가 없으니까요

0:05:26.154,0:05:29.118
앞으로 가서[br]익명 함수를 지울게요

0:05:29.118,0:05:30.937
전 첫번째 방법이[br]더 좋으니까요

0:05:31.994,0:05:33.780
이제 여러분은 많은 것을[br]할 수 있게 되었어요

0:05:33.780,0:05:35.274
이벤트 리스너를[br]추가할 수있게 되었으니까요

0:05:35.274,0:05:37.806
페이지의 더 많은 부분에[br]추가해 볼 수도 있고

0:05:38.019,0:05:39.656
다른 이벤트를[br]사용해 볼 수도 있고

0:05:39.914,0:05:41.075
다음 시간에[br]다뤄볼 거에요

0:05:41.455,0:05:43.209
DOM을[br]수정해 볼 수도 있어요

0:05:43.209,0:05:45.435
전에 배운 방법들로요

0:05:45.849,0:05:49.287
그리고 반응했던[br]요소 말고도

0:05:49.308,0:05:52.215
페이지의 다른 것들도[br]수정할 수 있어요

0:05:52.562,0:05:53.561
한번 해보세요

0:05:53.561,0:05:55.455
여러분이 할 수 있는 것을[br]찾아봐요