자바스크립트 외부 파일이란?
웹 개발에서 자바스크립트 코드를 HTML 문서 안에 직접 작성하는 대신, 별도의 .js 확장자를 가진 외부 파일로 분리하여 관리할 수 있습니다. 이렇게 하면 코드의 재사용성이 높아지고, 여러 페이지에서 동일한 스크립트를 공유할 수 있어 유지보수가 훨씬 쉬워집니다.
외부 자바스크립트 파일 연결 방법
외부 파일에 자바스크립트를 배치하려면 먼저 .js 확장자를 가진 자바스크립트 파일을 생성합니다. 그다음 HTML 문서에서 <script> 태그를 사용하고, src 속성에 해당 파일의 경로를 지정하면 외부 자바스크립트 파일을 불러올 수 있습니다.
또한, 외부 자바스크립트 파일이 두 개 이상이라면 같은 웹 페이지에 여러 개의 script 태그를 추가하여 연결할 수 있습니다. 브라우저가 외부 파일을 캐시(cache)에 저장하기 때문에, 여러 페이지에서 재사용되는 스크립트는 페이지 로딩 성능 향상에도 도움이 됩니다.
외부 자바스크립트 파일 예제
다음과 같이 new.js라는 이름의 외부 자바스크립트 파일을 만들어 보겠습니다.
function display() {
alert("Hello World!");
}이제 위에서 만든 외부 자바스크립트 파일을 HTML 웹 페이지에 연결합니다.
<html>
<body>
<form>
<input type="button" value="Result" onclick="display()"/>
</form>
<script src="new.js">
</script>
</body>
</html>위 예제에서 버튼을 클릭하면 display() 함수가 호출되고, 외부 파일 new.js에 정의된 코드에 따라 "Hello World!"라는 알림 창이 화면에 나타납니다.
외부 파일 사용의 장점 정리
- 코드 분리: HTML과 자바스크립트가 분리되어 구조가 깔끔해집니다.
- 재사용성: 하나의 js 파일을 여러 페이지에서 공유할 수 있습니다.
- 캐싱 효과: 브라우저가 파일을 캐시하여 페이지 로딩 속도가 빨라집니다.
- 유지보수 용이: 코드 수정 시 한 곳만 변경하면 모든 페이지에 반영됩니다.