이것저것 해보려고 이 페이지를 만들었어요 그런데 좀 지루하네요 내용도 없고 이 버튼은 눌러도 아무 반응이 없어요 이 버튼을 인터랙티브하게 만들어 볼거에요 사용자가 버튼을 클릭하면 버튼 안의 문구가 바뀌게 할거에요 첫번째는 요소를 찾는거에요 우리가 이벤트에 반응할 요소 말이에요 이 경우엔 그 요소는 버튼이죠 그리고 버튼은 클릭이 가능해요 그래서 우리는 clickerButton변수를 만들고 document.getElementById 를 이용해서 값을 받아오고 이 변수에 저장할 거에요 다음 단계는 함수를 정의해서 클릭이 발생하면 호출되게 하는 거에요 이 함수는 onButtonClick이라고 하고 비어있는 함수를 여기 정의해둘게요 당연히 뭔가를 채워야해요 아니면 별로 재미없는 함수가 될테니까요 이 버튼의 문구를 바꾸려면 clickerButton의 값을 이용해 textContent에 넣어주면 돼요 "Oh wow, you clicked me" 라고 해보죠 와 행복한 버튼이에요! 많은 코드는 아니지만 더 복잡하게 만들 수 있어요 이게 작동된다면요 우리가 쓴 코드가 한 건 변수를 정의한 것 뿐이에요 그래서 버튼을 눌렀을 때 아직 아무것도 일어나지 않아요 마지막 단계는 모든 걸 합치는 거에요 그래서 브라우저에게 우리가 만든 함수를 호출하라고 우리가 찾아둔 버튼이 클릭이 될 때마다 말이죠 이건 이벤트 리스너를 버튼에 추가해서 구현할 수 있어요 clickerButton.addeventlistener 처럼요 그리고 이 방법에는 두 가지의 인자를 전달해야해요 첫번째는 이벤트의 이름 'click' 두번째는 우리가 호출하려는 함수의 이름이에요 클릭할 때 호출되는 함수죠 'onButtonClick' 이걸 잠시 멈추고 버튼을 한번 클릭해보세요 동작하나요? 그랬으면 좋겠네요 전 동작하거든요 이 함수가 어떻게 작동되는 지에 대해 얘기해보죠 약간 어려울 수 있거든요 이 함수를 이벤트 리스너 함수라고 하거나 콜백 함수라고 해요 그게 사용되고 있는 방법이니까요 이 함수가 이벤트가 일어나면 호출(콜)되길 원해요 보통 페이지 로드될 때 이게 호출되길 원하진 않잖아요 만약에 페이지가 로드될 때 호출되게 하고 싶다면 여기 아래에 한 줄을 이렇게 추가해야 할거에요 함수이름 뒤에 괄호를 쓰는걸 기억하세요 이 괄호로 함수를 호출하는 거에요 이걸 내버려두면 함수를 호출하는게 아니라 그냥 참조하는 거에요 그건 이렇게 인자를 전달하고 싶을 때 하는 거에요 이건 그냥 브라우저에게 이렇게 말해주는 거에요 "여기 나중에 호출할 함수가 있어. 지금은 말고" 그러니까 괄호를 여기에는 적지 않도록 해요 이 함수 이름 뒤에요 왜냐하면 함수 자체가 아니라 함수의 리턴값을 전달하는 거니까요 실수로 그렇게 했다면 이 버튼은 페이지가 로드될 때 바뀌고 다음엔 바뀌지 않을 거에요 고치려면 여기 괄호만 지우면 돼요 실수로 추가했던 것을요 이제 이 함수는 클릭될 때만 호출될 거에요 한 가지 다른 방법은 여기 익명의 함수를 넣어주는 거에요 익명 함수는 미리 정의된 이름은 없지만 명령어 안에 구현된 함수에요 이 addEventListener부분을 복사해서 붙여넣기 할게요 그리고 이 방법을 하나씩 보여줄게요 그럼 무슨 뜻인지 알 수 있을 거에요 이 함수 이름을 지우고 함수 정의로 대체할게요 여기 붙여넣고 좋아요 이 두 라인의 코드는 정확히 똑같은 일을 해요 음 거의 같게요 두 개 모두 함수를 전달해요 같은 내용의 함수를요 차이점은 첫번째 것은 위에 미리 정의해 둔 함수를 전달하는 것이고 두번째 것은 익명 함수를 명령어 속에 정의함과 동시에 전달하는 거에요 두 방법 모두 작동해요 많은 개발자들은 미리 정의된 함수를 선호해요 왜냐하면 코드가 읽기 쉽고 디버깅도 쉽고 미리 정의된 함수를 여러 번 호출하고 다른 이벤트에서도 호출할 수 있으니까요 어떤 방법을 쓰든지 여러분 마음이에요 두 개를 동시에 사용하지는 마세요 브라우저는 클릭이 발생할 때 두 개 모두를 호출할 것이고 두 번 부를 이유가 없으니까요 앞으로 가서 익명 함수를 지울게요 전 첫번째 방법이 더 좋으니까요 이제 여러분은 많은 것을 할 수 있게 되었어요 이벤트 리스너를 추가할 수있게 되었으니까요 페이지의 더 많은 부분에 추가해 볼 수도 있고 다른 이벤트를 사용해 볼 수도 있고 다음 시간에 다뤄볼 거에요 DOM을 수정해 볼 수도 있어요 전에 배운 방법들로요 그리고 반응했던 요소 말고도 페이지의 다른 것들도 수정할 수 있어요 한번 해보세요 여러분이 할 수 있는 것을 찾아봐요