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

HTML 파일에서 외부 자바스크립트(.js) 파일을 연결하고 사용하는 방법

웹 개발에서 코드를 체계적으로 관리하려면 자바스크립트를 HTML 파일과 분리하는 것이 좋습니다. 이 글에서는 외부 자바스크립트 파일을 만들고 HTML 문서에 연결하는 방법을 단계별로 알아봅니다.

1. 외부 자바스크립트 파일 만들기

먼저 확장자가 .js인 외부 자바스크립트 파일을 생성합니다. 파일이 준비되면 HTML 문서의 <script> 태그에 추가하고, src 속성을 사용하여 해당 외부 자바스크립트 파일을 불러옵니다.

만약 외부 자바스크립트 파일이 두 개 이상이라면, 같은 웹 페이지에 모두 포함시켜 페이지 성능을 향상시킬 수 있습니다.

2. 외부 자바스크립트 파일 작성 예시

예를 들어, 다음과 같은 내용의 new.js 파일이 우리의 외부 자바스크립트 파일이라고 가정해 보겠습니다.

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

3. HTML 파일에 외부 자바스크립트 연결하기

이제 위에서 만든 외부 자바스크립트 파일을 HTML 웹 페이지에 추가합니다. <script> 태그의 src 속성에 파일 경로를 지정하면 됩니다.

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

정리

외부 자바스크립트 파일을 사용하면 HTML과 스크립트 코드를 분리할 수 있어 코드 재사용성이 높아지고 유지보수가 쉬워집니다. 핵심 순서는 다음과 같습니다.

① .js 확장자로 자바스크립트 파일을 생성한다 → ② HTML 문서에서 <script> 태그를 작성한다 → ③ src 속성에 파일 경로를 지정하여 연결한다. 버튼 클릭 시 new.js에 정의된 display() 함수가 호출되어 알림 창이 표시되는 것을 확인할 수 있습니다.