웹 개발을 할 때 HTML문서에서 <script>를 정의하는 경우도 많지만 따로 JavaScript 파일을 .js파일로 별도로 생성해서 연결하는 경우도 있습니다. 이렇게 자바스크립트를 별도로 분리하면 코드의 가독성 향상, 코드의 재사용성과 유지보수성의 향상, 협업의 편리성 증가 등등 다양한 이점을 가지고 있습니다. 이번 포스팅에서는 .js 파일을 .html 파일에 연결하는 방법에 대해 알아보도록 하겠습니다.
JavaScript 파일을 별도로 분리하면 좋은 이유 4가지
- 코드의 가독성 및 유지 보수성 향상 : HTML은 구조를 정의하고, JavaScript는 웹의 동작을 담당합니다. 이렇게 기능이 다른 HTML코드와 JavaScript 코드가 하나의 파일에 혼재되어 있는 것 보다는 JavaScript 코드를 분리하면 코드가 각각의 역할에 집중되어 가독성이 향상되고, 유지 보수가 편해집니다.
- 재사용성 향상 : JavaScript 코드를 별도의 .js 파일로 분리하면 여러개의 .html 파일에서 분리한 .js 파일을 연결하여 동일한 JavaScript 코드를 사용할 수 있습니다. 이를 통해 코드의 재사용성을 높이고 중복을 방지합니다.
- 속도 개선 : JavaScript 파일은 브라우저에서 캐싱되어 한 번 다운로드된 .js파일은 다른 페이지에서 다시 다운로드할 필요가 없습니다. 이를 통해 로딩속도의 개선을 도모할 수 있습니다.
- 협업에 유리함 : 프로젝트 단위가 큰 경우에는 디자이너와, 퍼블리셔, 프론트엔드 개발자, 백엔드 개발자 등 다양한 역할군의 사람들이 작업합니다. HTML과 JavaScript를 완전히 분리하면 각각의 역할에 특화된 사람들이 별도의 파일을 관리하기 때문에 형상관리에도 유리하고 협업이 수월해집니다.
HTML에서 자바스크립트(.js) 파일 사용하기
JavaScript 파일 생성
// script.js
function loadAlert() {
alert('Test!!');
}
먼저 script.js 라는 이름의 자바스크립트 파일을 하나 만들어서 간단한 alert을 띄우는 함수를 정의해 주도록 하겠습니다.
HTML 파일에서 JavaScript 파일 연결하기
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 파일 사용 예제</title>
<!-- 외부 JavaScript 파일 연결 -->
<script src="script.js"></script>
</head>
<body>
<!-- JavaScript 함수 호출 -->
<button onclick="loadAlert()">Click</button>
</body>
</html>이제 HTML 파일에서 JavaScript 파일을 연결합니다. 위와 같이 script src="경로/자바스크립트 파일명"로 지정하면 자바스크립트 파일을 연결할 수 있습니다. 참고로 자바스크립트는 <head> 태그나 <body> 태그 아무 곳에서나 사용할 수 있으며 만약 파일을 찾지 못한다면 작성된 src의 경로가 맞는지 다시 한번 확인해 보시기 바랍니다.
이렇게 하면 HTML 파일에서 기존에 정의해둔 JavaScript 파일을 연결하여 함수를 직접 호출할 수 있습니다. 위의 예제에서 Click 버튼에 loadAlert() 메서드를 호출하여 alert("test!")가 제대로 동작하는 것을 보실 수 있습니다.
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 변수 선언자 var, let, const의 차이점과 사용법 (0) | 2024.02.09 |
|---|---|
| [JavaScript] 콘솔(console) 로그 찍는 방법 (+console 주요 메서드 사용법) (0) | 2024.02.07 |
| [JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기 (2) | 2018.07.09 |
| [JavaScript] 동적으로 테이블 만들기 (0) | 2018.07.08 |