HTML 문서에서 JavaScript를 사용하려면 <script> 태그를 활용해야 합니다. JavaScript를 HTML에 포함하는 방식은 크게 두 가지입니다. 하나는 HTML 문서 안에 코드를 직접 작성하는 내부(인라인) 스크립트 방식이고, 다른 하나는 별도의 .js 파일로 분리한 후 불러오는 외부 스크립트 방식입니다.
JavaScript 포함 방식 비교
- 내부(인라인) 스크립트:
<script>태그 사이에 코드를 직접 작성합니다. 간단한 기능 구현에 적합합니다. - 외부 스크립트:
<script src="파일명.js">형태로 외부 파일을 연결합니다. 코드 재사용성과 유지보수성이 뛰어나 실무에서 권장되는 방식입니다.
예제
다음은 두 가지 방식을 모두 활용하여 JavaScript를 HTML 파일에 포함하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="script.js" defer></script>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Embed javascript in html file</h1>
<div class="result"></div>
<script>
let resEle = document.querySelector(".result");
resEle.innerHTML += "Inline javaScript loaded" + "<br>";
</script>
</body>
</html>
script.js (외부 자바스크립트 파일)
resEle.innerHTML += 'External JavaScript loaded ';
코드 설명
위 예제의 핵심 요소는 다음과 같습니다.
<head>안의<script src="script.js" defer>는 외부 자바스크립트 파일을 연결하는 부분입니다. defer 속성을 추가하면 HTML 문서 파싱이 완료된 후 스크립트가 실행되므로, DOM 요소가 준비되기 전에 스크립트가 실행되어 발생하는 오류를 방지할 수 있습니다.<body>안의<script>태그는 인라인 방식으로,.result클래스를 가진 div 요소를 선택한 뒤 텍스트를 추가합니다.- 외부 스크립트와 인라인 스크립트가 모두 같은 요소에 내용을 덧붙이기 때문에, 두 메시지가 순서대로 화면에 출력됩니다.
출력
위 코드를 실행하면 다음과 같은 결과가 화면에 표시됩니다.
