HTML의 <script> 태그는 HTML 문서 안에서 스크립트를 선언할 때 사용됩니다. 이를 통해 클라이언트 측 JavaScript를 정의할 수 있습니다. 그렇다면 외부 JavaScript 파일을 HTML 페이지에 추가하려면 어떻게 해야 할까요? 다행히 <script> 태그의 src 속성을 사용하면 아주 간단하게 처리할 수 있습니다.
먼저 <script> 태그에서 사용할 수 있는 주요 속성을 살펴보겠습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| async | async | 스크립트가 비동기적으로 실행되도록 지정합니다. 다운로드와 실행이 페이지 로딩을 차단하지 않습니다. |
| charset | charset | 스크립트가 사용하는 문자 인코딩을 정의합니다. |
| defer | defer | 스크립트가 별도의 콘텐츠를 생성하지 않는다고 선언합니다. 따라서 브라우저(사용자 에이전트)는 나머지 페이지의 파싱과 렌더링을 계속 진행할 수 있으며, 스크립트는 문서 파싱이 끝난 후 실행됩니다. |
| src | URL | 외부 스크립트 파일의 URI/URL을 지정합니다. |
| type | text/javascript application/ecmascript application/javascript text/vbscript | 스크립팅 언어를 콘텐츠 타입(MIME 타입) 형식으로 지정합니다. |
외부 JavaScript 파일을 추가할 때는 위 표의 src 속성을 사용합니다.
예제
다음 코드를 실행하면 HTML에 외부 JS 파일을 포함시키는 방법을 직접 확인할 수 있습니다. 아래 HTML 파일은 myscript.js라는 외부 JS 파일을 src 속성으로 참조하고 있습니다.
<!DOCTYPE html> <html> <body> <h2>Alert Button</h2> <p> 외부 JavaScript 파일은 myscript.js입니다.</p> <button type="button" onclick="sayHello()">Click</button> <script src="myscript.js"></script> </body> </html>
외부 파일에 작성된 JavaScript를 사용하려면 먼저 모든 JavaScript 소스 코드를 확장자가 ".js"인 일반 텍스트 파일로 저장한 뒤, 위 예제처럼 <script src="myscript.js"></script> 형태로 해당 파일을 HTML 문서에 포함시키면 됩니다.
myscript.js 파일에는 다음과 같은 내용을 작성합니다.
function sayHello() {
alert("Hello World")
}버튼을 클릭하면 sayHello() 함수가 호출되어 "Hello World" 알림 창이 화면에 표시됩니다. 이처럼 src 속성을 활용하면 HTML과 JavaScript 코드를 분리할 수 있어 코드 관리가 쉬워지고, 여러 페이지에서 동일한 스크립트를 재사용할 수 있다는 장점이 있습니다.