HTML에 JavaScript 연결

개념 이해하기

script 요소는 브라우저가 실행할 JavaScript를 포함하거나 외부 .js 파일을 불러옵니다. defer를 사용하면 HTML 파싱을 막지 않고 문서가 준비된 뒤 실행할 수 있습니다.

스크립트는 id가 toggle인 버튼을 찾아 click 리스너를 붙이고, 클릭되면 id가 state인 문단의 글자를 JavaScript가 실행되었습니다로 바꿉니다. 리스너는 같은 문장을 다시 넣을 뿐이라 두 번째 클릭부터는 화면에 변화가 없고, 버튼 이름과 달리 원래의 대기 중으로 돌아가지도 않습니다.

외부 파일은 script src=app.js로 불러오며, 이때 여는 태그와 닫는 태그 사이에 적은 코드는 실행되지 않습니다. defer와 async는 둘 다 파싱을 멈추지 않고 파일을 받지만, async는 받는 즉시 실행해 순서가 보장되지 않고 defer는 파싱이 끝난 뒤 문서 순서대로 실행합니다. type=module 스크립트는 기본적으로 defer처럼 동작합니다.