출처
script.js
생성
인덱스 파일 옆에 생성
임포트 하기
<script src="script.js"></script>
JavaScript
복사
해당 태그를 헤드 태그 내부에 명시하면, 가져올 수 있다.
hello world 찍어보기
콘솔로그 한번 찍어보자.
잘 나옴
버튼 이벤트 리스너
정의
console.log("hello world!");
let btn = document.querySelector("#btn");
// console.log("btn: ", btn);
btn.addEventListener("click", function () {
alert("Hello World!");
});
JavaScript
복사
이렇게 선언하고 실행해보면 에러가 난다.
이런 에러가 나는 이유가 뭘까?
에러가 나는 이유
HTML는 코드를 위에서 부터 순차적으로 실행해 가는데, script가 실행될 시점에 버튼이 생성되어 있지 않기 때문
스크립트 에러 해결 방법 - 기존 해결방법
바디태그 하단에서 선언하는 방법 
이렇게 스크립트 로드를 제일 하단으로 내려서, 버튼이 로드가 된 이후에 사용할 수 있게 한다.
window.onload 이벤트 리스너 등록•
script.js 정의
window.onload = function () {
let btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
alert("Hello world!");
});
};
JavaScript
복사
onload 이벤트 리스너를 사용하서 함수를 정의한다.
•
script.js 위치
script.js는 제 위치에 있어도 된다.
•
확인
이제 에러없이 버튼이 정상적으로 작동한다.
DOM ContentLoaded
HTML 로드되고 DOM생성 후 발생되는 이벤트이다.
•
정의
document.addEventListener("DOMContentLoaded", function () {
let btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
alert("Hello world!");
});
});
JavaScript
복사
DOMContentLoaded 로 사용해보자.
•
확인
정상 작동 확인, onload보다 DOMContentLoaded가 더 빨리 실행이 된다.
•
설명
현재 구조에서는 HTML이 만들어지고 난 후에
스크립트를 가져와서 실행한다. 여기서 HTML 그릴 때 부터 자바스크립트를 가져오는 작업하면 안될까라는 생각을 할 수 있다.
defer 속성
defer 속성은 HTML이 로드되는 동안 스크립트를 로드하고, HTML파싱이 완료가 된 후에 스크립트를 실행한다.
•
defer 속성 사용
이렇게 스크립트 내부에 defer 속성을 넣으면 병렬처리가 된다.
스크립트도 원래대로 되돌려 보고 테스트 해보자.
•
확인
정상 작동한다.
async
async속성은 가져오기를 병렬로 가져오는 것은 같지만, 실행이 될 때 html 파싱이 멈춘다.
효율적인 것은 아니지만, 꼭 이런게 필요할 상황은 생길 수 있으니 때에 맞게 사용하자.