Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript를 외부 파일(.js)로 작성하고 HTML에 연결하는 방법

JavaScript 외부 파일 작성 및 연결 방법

JavaScript 코드를 HTML 문서와 분리하여 별도의 외부 파일로 관리하면 코드의 재사용성과 유지보수성이 크게 향상됩니다. 외부 파일은 .js 확장자를 가진 파일로 생성하며, 생성 후에는 HTML 문서의 <script> 태그 안에서 src 속성을 사용해 해당 파일을 불러올 수 있습니다.

1. 외부 JavaScript 파일 생성하기

먼저 .js 확장자를 가진 새 파일을 생성합니다. 예를 들어 아래와 같은 내용을 담은 new.js 파일을 외부 JavaScript 파일로 만들어 보겠습니다.

function display() {
    alert("Hello World!");
}

2. HTML 웹 페이지에 외부 파일 추가하기

생성한 외부 JavaScript 파일은 <script> 태그의 src 속성에 파일 경로를 지정하여 HTML 웹 페이지에 포함시킵니다.

<html>
    <body>
        <form>
        <input type="button" value="Result" onclick="display()"/>
        </form>
        <script src="new.js">
        </script>
    </body>
</html>

위 예제처럼 버튼을 클릭하면 외부 파일에 정의된 display() 함수가 호출되어 알림창이 표시됩니다.

여러 외부 파일을 사용할 때의 장점

외부 JavaScript 파일이 두 개 이상일 경우에도 동일한 방식으로 하나의 웹 페이지에 모두 추가할 수 있습니다. 이렇게 하면 브라우저가 스크립트 파일을 캐싱할 수 있어 페이지 로딩 성능이 향상되고, 코드 중복 없이 여러 페이지에서 같은 기능을 재사용할 수 있다는 장점이 있습니다.