JavaScript가 웹 페이지의 데이터와 동작을 바꾸는 역할을 이해합니다.
JavaScript는 값을 계산하고 조건을 판단하며 DOM을 통해 HTML을 변경합니다. 브라우저에서는 클릭·입력 같은 이벤트를 기다렸다가 필요한 코드를 실행하는 방식이 흔합니다.
스크립트가 처음 실행될 때 하는 일은 두 가지뿐입니다. querySelector로 id가 output인 pre 요소를 찾아 output에 담고, run 버튼에 click 리스너를 등록합니다. 화살표 함수 본문은 버튼을 눌러야 비로소 실행되어 pre의 글자를 버튼 이벤트가 JavaScript 함수를 실행했습니다.로 바꾸고, 그 전까지는 HTML에 적힌 안내 문구가 그대로 남습니다.
addEventListener에 넘긴 함수는 등록하는 순간 호출되지 않고, 브라우저가 클릭을 감지할 때마다 이벤트 객체를 인수로 받아 호출됩니다. 같은 요소에 click 리스너를 여러 개 등록하면 등록한 순서대로 모두 실행되므로, onclick 속성에 함수를 대입할 때처럼 앞의 처리기를 덮어쓰지 않습니다.
JavaScript 오류가 하나 발생하면 그 이후 코드가 실행되지 않을 수 있습니다. 콘솔의 첫 오류부터 확인하세요.
직접 바꿔보세요출력 문구와 버튼의 이벤트 종류를 바꿔보세요.