HTML에서 JavaScript를 로드하는 방법은 총 3가지가 있다.
1. inline
HTML 태그에 직접 JavaScript 코드를 작성하는 방식이다.
<body>
<input type="button" onclick="alert('Hello World')" value="Hello World!"/>
</body>onclick은 웹 페이지를 통해 발생하는 이벤트를 처리할 수 있는 html 속성 중 하나다. JavaScript 코드가 속성값으로 들어갈 수 있다. 이 방법은 사용하기 간편하고, JavaScript코드가 적용되는 HTML 엘리먼트가 명확하지만, 정보를 표현하는 HTML 코드의 의도를 흐릴 수 있고, HTML과 JavaScript가 섞인 문서의 특성상 유지보수가 어렵다는 치명적인 단점이 있다.
2. Script Tag
HTML 문서 안에서 script 태그 안에 JavaScript 코드를 삽입해 로딩할 수 있다.
<body>
<input type="button" id="hw" value="Hello World!">
<script type="text/javascript">
const hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>웹 브라우저는 script 태그 안에 있는 코드를 JavaScript로 해석한다. 앞서 정리한 inline 방식보다는 HTML 태그와 JavaScript의 구분이 더 명확하다.
3. 외부 파일로 분리
CSS 문서를 따로 분리하여 관리하는 것 처럼 JavaScript 문서 또한 별도로 분리할 수 있다.
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Review</title>
</head>
<body>
<input type="button" id="hw" value="Hello World!">
<script src="./script.js"></script>
</body>
</html>HTML 문서 내의 script 태그의 src 속성을 사용해 로드하고자 하는 JavaScript 파일의 주소를 입력해준다.
- JavaScript
const hw = document.getElementById('hw');
hw.addEventListener('click',function() {
alert('Hello World');
})이 방법은 HTML 문서와 JavaScript를 별도의 문서로 관리하므로 유지보수가 쉽고 가장 바람직한 구조라고 할 수 있다. 또한, 최초로 브라우저를 실행할 때 연동되어있는 JavaScript 파일을 사용자의 캐시에 보관해놓기 때문에 페이지의 로딩 시간이 줄어든다는 장점이 있다.
주니어 개발쟈🤦♂️