[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.42,0:00:05.04,Default,,0000,0000,0000,,이것저것 해보려고\N이 페이지를 만들었어요
Dialogue: 0,0:00:05.76,0:00:07.58,Default,,0000,0000,0000,,그런데\N좀 지루하네요
Dialogue: 0,0:00:08.04,0:00:10.16,Default,,0000,0000,0000,,내용도 없고
Dialogue: 0,0:00:10.89,0:00:15.13,Default,,0000,0000,0000,,이 버튼은 눌러도\N아무 반응이 없어요
Dialogue: 0,0:00:16.17,0:00:18.39,Default,,0000,0000,0000,,이 버튼을 인터랙티브하게\N만들어 볼거에요
Dialogue: 0,0:00:18.84,0:00:20.25,Default,,0000,0000,0000,,사용자가\N버튼을 클릭하면
Dialogue: 0,0:00:20.25,0:00:23.43,Default,,0000,0000,0000,,버튼 안의 문구가\N바뀌게 할거에요
Dialogue: 0,0:00:24.42,0:00:27.30,Default,,0000,0000,0000,,첫번째는\N요소를 찾는거에요
Dialogue: 0,0:00:27.30,0:00:29.63,Default,,0000,0000,0000,,우리가 이벤트에\N반응할 요소 말이에요
Dialogue: 0,0:00:30.06,0:00:32.38,Default,,0000,0000,0000,,이 경우엔\N그 요소는 버튼이죠
Dialogue: 0,0:00:32.85,0:00:35.12,Default,,0000,0000,0000,,그리고 버튼은\N클릭이 가능해요
Dialogue: 0,0:00:35.44,0:00:39.48,Default,,0000,0000,0000,,그래서 우리는\NclickerButton변수를 만들고
Dialogue: 0,0:00:40.00,0:00:44.99,Default,,0000,0000,0000,,document.getElementById\N를 이용해서
Dialogue: 0,0:00:45.55,0:00:48.40,Default,,0000,0000,0000,,값을 받아오고\N이 변수에 저장할 거에요
Dialogue: 0,0:00:49.40,0:00:53.07,Default,,0000,0000,0000,,다음 단계는\N함수를 정의해서
Dialogue: 0,0:00:53.07,0:00:56.07,Default,,0000,0000,0000,,클릭이 발생하면\N호출되게 하는 거에요
Dialogue: 0,0:00:58.05,0:01:02.01,Default,,0000,0000,0000,,이 함수는\NonButtonClick이라고 하고
Dialogue: 0,0:01:03.54,0:01:06.89,Default,,0000,0000,0000,,비어있는 함수를\N여기 정의해둘게요
Dialogue: 0,0:01:07.23,0:01:09.71,Default,,0000,0000,0000,,당연히 뭔가를\N채워야해요
Dialogue: 0,0:01:09.71,0:01:11.96,Default,,0000,0000,0000,,아니면 별로 재미없는\N함수가 될테니까요
Dialogue: 0,0:01:12.32,0:01:14.10,Default,,0000,0000,0000,,이 버튼의 문구를\N바꾸려면
Dialogue: 0,0:01:14.10,0:01:18.63,Default,,0000,0000,0000,,clickerButton의 값을 이용해\NtextContent에 넣어주면 돼요
Dialogue: 0,0:01:19.78,0:01:22.84,Default,,0000,0000,0000,,"Oh wow, you clicked me"\N라고 해보죠
Dialogue: 0,0:01:23.50,0:01:25.59,Default,,0000,0000,0000,,와\N행복한 버튼이에요!
Dialogue: 0,0:01:27.37,0:01:30.03,Default,,0000,0000,0000,,많은 코드는 아니지만\N더 복잡하게 만들 수 있어요
Dialogue: 0,0:01:30.17,0:01:31.26,Default,,0000,0000,0000,,이게 작동된다면요
Dialogue: 0,0:01:32.97,0:01:37.23,Default,,0000,0000,0000,,우리가 쓴 코드가 한 건\N변수를 정의한 것 뿐이에요
Dialogue: 0,0:01:37.64,0:01:41.34,Default,,0000,0000,0000,,그래서 버튼을 눌렀을 때\N아직 아무것도 일어나지 않아요
Dialogue: 0,0:01:42.24,0:01:44.78,Default,,0000,0000,0000,,마지막 단계는\N모든 걸 합치는 거에요
Dialogue: 0,0:01:45.15,0:01:50.03,Default,,0000,0000,0000,,그래서 브라우저에게\N우리가 만든 함수를 호출하라고
Dialogue: 0,0:01:50.03,0:01:54.29,Default,,0000,0000,0000,,우리가 찾아둔 버튼이\N클릭이 될 때마다 말이죠
Dialogue: 0,0:01:55.05,0:02:00.52,Default,,0000,0000,0000,,이건 이벤트 리스너를\N버튼에 추가해서 구현할 수 있어요
Dialogue: 0,0:02:00.72,0:02:05.90,Default,,0000,0000,0000,,clickerButton.addeventlistener\N처럼요
Dialogue: 0,0:02:06.45,0:02:10.53,Default,,0000,0000,0000,,그리고 이 방법에는\N두 가지의 인자를 전달해야해요
Dialogue: 0,0:02:10.98,0:02:14.02,Default,,0000,0000,0000,,첫번째는 이벤트의 이름\N'click'
Dialogue: 0,0:02:14.44,0:02:17.84,Default,,0000,0000,0000,,두번째는 우리가 호출하려는\N함수의 이름이에요
Dialogue: 0,0:02:18.26,0:02:21.67,Default,,0000,0000,0000,,클릭할 때 호출되는 함수죠\N'onButtonClick'
Dialogue: 0,0:02:23.21,0:02:26.66,Default,,0000,0000,0000,,이걸 잠시 멈추고\N버튼을 한번 클릭해보세요
Dialogue: 0,0:02:28.71,0:02:30.08,Default,,0000,0000,0000,,동작하나요?
Dialogue: 0,0:02:30.08,0:02:31.98,Default,,0000,0000,0000,,그랬으면 좋겠네요\N전 동작하거든요
Dialogue: 0,0:02:33.23,0:02:36.38,Default,,0000,0000,0000,,이 함수가 어떻게\N작동되는 지에 대해 얘기해보죠
Dialogue: 0,0:02:36.38,0:02:37.61,Default,,0000,0000,0000,,약간 어려울 수 있거든요
Dialogue: 0,0:02:37.94,0:02:41.10,Default,,0000,0000,0000,,이 함수를\N이벤트 리스너 함수라고 하거나
Dialogue: 0,0:02:41.10,0:02:46.68,Default,,0000,0000,0000,,콜백 함수라고 해요\N그게 사용되고 있는 방법이니까요
Dialogue: 0,0:02:47.16,0:02:50.26,Default,,0000,0000,0000,,이 함수가 이벤트가 일어나면\N호출(콜)되길 원해요
Dialogue: 0,0:02:51.23,0:02:55.32,Default,,0000,0000,0000,,보통 페이지 로드될 때\N이게 호출되길 원하진 않잖아요
Dialogue: 0,0:02:56.06,0:02:58.32,Default,,0000,0000,0000,,만약에 페이지가 로드될 때\N호출되게 하고 싶다면
Dialogue: 0,0:02:58.32,0:03:01.99,Default,,0000,0000,0000,,여기 아래에 한 줄을\N이렇게 추가해야 할거에요
Dialogue: 0,0:03:03.82,0:03:06.29,Default,,0000,0000,0000,,함수이름 뒤에 괄호를 쓰는걸\N기억하세요
Dialogue: 0,0:03:06.67,0:03:09.61,Default,,0000,0000,0000,,이 괄호로\N함수를 호출하는 거에요
Dialogue: 0,0:03:10.03,0:03:13.76,Default,,0000,0000,0000,,이걸 내버려두면\N함수를 호출하는게 아니라
Dialogue: 0,0:03:13.76,0:03:15.55,Default,,0000,0000,0000,,그냥 참조하는 거에요
Dialogue: 0,0:03:15.90,0:03:19.17,Default,,0000,0000,0000,,그건 이렇게 인자를\N전달하고 싶을 때 하는 거에요
Dialogue: 0,0:03:19.17,0:03:20.58,Default,,0000,0000,0000,,이건 그냥 브라우저에게\N이렇게 말해주는 거에요
Dialogue: 0,0:03:20.58,0:03:25.61,Default,,0000,0000,0000,,"여기 나중에 호출할 함수가 있어.\N지금은 말고"
Dialogue: 0,0:03:27.36,0:03:30.64,Default,,0000,0000,0000,,그러니까 괄호를 여기에는\N적지 않도록 해요
Dialogue: 0,0:03:30.98,0:03:32.60,Default,,0000,0000,0000,,이 함수 이름 뒤에요
Dialogue: 0,0:03:32.72,0:03:37.34,Default,,0000,0000,0000,,왜냐하면 함수 자체가 아니라\N함수의 리턴값을 전달하는 거니까요
Dialogue: 0,0:03:38.23,0:03:39.63,Default,,0000,0000,0000,,실수로 그렇게 했다면
Dialogue: 0,0:03:39.63,0:03:44.15,Default,,0000,0000,0000,,이 버튼은 페이지가 로드될 때\N바뀌고 다음엔 바뀌지 않을 거에요
Dialogue: 0,0:03:44.73,0:03:47.42,Default,,0000,0000,0000,,고치려면\N여기 괄호만 지우면 돼요
Dialogue: 0,0:03:47.42,0:03:49.17,Default,,0000,0000,0000,,실수로 추가했던 것을요
Dialogue: 0,0:03:49.17,0:03:52.42,Default,,0000,0000,0000,,이제 이 함수는 클릭될 때만\N호출될 거에요
Dialogue: 0,0:03:54.01,0:03:56.47,Default,,0000,0000,0000,,한 가지\N다른 방법은
Dialogue: 0,0:03:56.50,0:04:02.66,Default,,0000,0000,0000,,여기 익명의 함수를\N넣어주는 거에요
Dialogue: 0,0:04:02.66,0:04:05.70,Default,,0000,0000,0000,,익명 함수는\N미리 정의된 이름은 없지만
Dialogue: 0,0:04:06.53,0:04:10.16,Default,,0000,0000,0000,,명령어 안에\N구현된 함수에요
Dialogue: 0,0:04:10.53,0:04:15.15,Default,,0000,0000,0000,,이 addEventListener부분을\N복사해서 붙여넣기 할게요
Dialogue: 0,0:04:15.15,0:04:18.13,Default,,0000,0000,0000,,그리고 이 방법을\N하나씩 보여줄게요
Dialogue: 0,0:04:18.13,0:04:20.41,Default,,0000,0000,0000,,그럼 무슨 뜻인지\N알 수 있을 거에요
Dialogue: 0,0:04:20.65,0:04:22.99,Default,,0000,0000,0000,,이 함수 이름을 지우고
Dialogue: 0,0:04:22.99,0:04:25.60,Default,,0000,0000,0000,,함수 정의로 대체할게요
Dialogue: 0,0:04:26.05,0:04:29.14,Default,,0000,0000,0000,,여기 붙여넣고
Dialogue: 0,0:04:31.47,0:04:32.14,Default,,0000,0000,0000,,좋아요
Dialogue: 0,0:04:32.14,0:04:37.26,Default,,0000,0000,0000,,이 두 라인의 코드는\N정확히 똑같은 일을 해요
Dialogue: 0,0:04:37.78,0:04:39.13,Default,,0000,0000,0000,,음\N거의 같게요
Dialogue: 0,0:04:39.71,0:04:41.84,Default,,0000,0000,0000,,두 개 모두 함수를\N전달해요
Dialogue: 0,0:04:41.84,0:04:43.96,Default,,0000,0000,0000,,같은 내용의 함수를요
Dialogue: 0,0:04:44.28,0:04:46.05,Default,,0000,0000,0000,,차이점은 첫번째 것은
Dialogue: 0,0:04:46.05,0:04:50.12,Default,,0000,0000,0000,,위에 미리 정의해 둔 함수를\N전달하는 것이고
Dialogue: 0,0:04:50.12,0:04:53.28,Default,,0000,0000,0000,,두번째 것은\N익명 함수를
Dialogue: 0,0:04:53.28,0:04:57.55,Default,,0000,0000,0000,,명령어 속에 정의함과\N동시에 전달하는 거에요
Dialogue: 0,0:04:58.44,0:04:59.72,Default,,0000,0000,0000,,두 방법 모두 작동해요
Dialogue: 0,0:04:59.96,0:05:02.78,Default,,0000,0000,0000,,많은 개발자들은\N미리 정의된 함수를 선호해요
Dialogue: 0,0:05:02.97,0:05:04.75,Default,,0000,0000,0000,,왜냐하면 코드가 읽기 쉽고
Dialogue: 0,0:05:04.75,0:05:06.46,Default,,0000,0000,0000,,디버깅도 쉽고
Dialogue: 0,0:05:06.46,0:05:11.18,Default,,0000,0000,0000,,미리 정의된 함수를\N여러 번 호출하고
Dialogue: 0,0:05:11.18,0:05:12.60,Default,,0000,0000,0000,,다른 이벤트에서도\N호출할 수 있으니까요
Dialogue: 0,0:05:13.28,0:05:15.22,Default,,0000,0000,0000,,어떤 방법을 쓰든지\N여러분 마음이에요
Dialogue: 0,0:05:15.66,0:05:17.73,Default,,0000,0000,0000,,두 개를 동시에\N사용하지는 마세요
Dialogue: 0,0:05:17.73,0:05:21.96,Default,,0000,0000,0000,,브라우저는 클릭이 발생할 때\N두 개 모두를 호출할 것이고
Dialogue: 0,0:05:21.96,0:05:25.12,Default,,0000,0000,0000,,두 번 부를 이유가 없으니까요
Dialogue: 0,0:05:26.15,0:05:29.12,Default,,0000,0000,0000,,앞으로 가서\N익명 함수를 지울게요
Dialogue: 0,0:05:29.12,0:05:30.94,Default,,0000,0000,0000,,전 첫번째 방법이\N더 좋으니까요
Dialogue: 0,0:05:31.99,0:05:33.78,Default,,0000,0000,0000,,이제 여러분은 많은 것을\N할 수 있게 되었어요
Dialogue: 0,0:05:33.78,0:05:35.27,Default,,0000,0000,0000,,이벤트 리스너를\N추가할 수있게 되었으니까요
Dialogue: 0,0:05:35.27,0:05:37.81,Default,,0000,0000,0000,,페이지의 더 많은 부분에\N추가해 볼 수도 있고
Dialogue: 0,0:05:38.02,0:05:39.66,Default,,0000,0000,0000,,다른 이벤트를\N사용해 볼 수도 있고
Dialogue: 0,0:05:39.91,0:05:41.08,Default,,0000,0000,0000,,다음 시간에\N다뤄볼 거에요
Dialogue: 0,0:05:41.46,0:05:43.21,Default,,0000,0000,0000,,DOM을\N수정해 볼 수도 있어요
Dialogue: 0,0:05:43.21,0:05:45.44,Default,,0000,0000,0000,,전에 배운 방법들로요
Dialogue: 0,0:05:45.85,0:05:49.29,Default,,0000,0000,0000,,그리고 반응했던\N요소 말고도
Dialogue: 0,0:05:49.31,0:05:52.22,Default,,0000,0000,0000,,페이지의 다른 것들도\N수정할 수 있어요
Dialogue: 0,0:05:52.56,0:05:53.56,Default,,0000,0000,0000,,한번 해보세요
Dialogue: 0,0:05:53.56,0:05:55.46,Default,,0000,0000,0000,,여러분이 할 수 있는 것을\N찾아봐요