Efficient, Rapid, Accurate

💻 Programming/웹프로그래밍

[HTML 기본] HTML파일에 자바스크립트 파일 링크/import/include하기

웹사이트를 만들다보면 HTML파일 크기가 커지기 마련입니다.

웹사이트가 dynamic한 동적 사이트라면 더더욱 그럴 가능성이 커집니다.

이런 저런 기능을 자바스크립트로 구현을 하다보면 주체할 수 없이 커지는 html 파일을 볼 수도 있는데요

이럴 때는 자바스크립트 부분을 별도의 .js 파일로 분리한 뒤 html 파일에 링크를 걸어서

마치 html 파일에 자바스크립트를 직접 작성한 것처럼 사용할 수 있습니다.

방법도 매우 간단합니다.

아래 html 예제를 먼저 보도록 하겠습니다.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="toggle.css" />
</head>

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>

    <script>
        function toggle(element) {
            console.log(element.checked);
        }
    </script>
</body>

</html>

위 코드는 토글버튼 만들기 시간에 사용했던 코드입니다.

위 코드에서 <script> 태그로 감싼 부분을 .js 파일로 분리해내고 해당 파일을 html파일에 링크(import, include라고 얘기하기도 함)를 걸어서 기능이 정상적으로 돌아가도록 해보겠습니다.

우선 html 문서의 <script> 태그 내에 있던 내용을 복사하여 toggle.js 파일을 만들어 넣어줍니다.

function toggle(element) {
    console.log(element.checked);
}

이제 <head>태그 내에 아래와 같이 toggle.js 파일을 연결시켜주고, <body>안에 있던 script는 제거합니다.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="toggle.css" />
    <script src="toggle.js"></script>
</head>

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>
</body>

</html>

위 코드 자체가 워낙 작은 코드라 깔끔해졌다는 느낌을 받지 못할 수 있으나,

위 처럼 짧은 html 문서는 테스트용밖에 없을 것입니다.

개발자가 되고싶다면 항상 .js 파일을 분리하여 링크걸어 사용하길 추천합니다.

뭔가 길게 설명드렸지만, html파일에 자바스크립트 파일을 연결/링크/import/include 시키는 방법은 <head>태그 내에 아래와 같이 한 줄만 추가해주시면 됩니다.

<script src="toggle.js"></script>

여기서 .js 파일의 위치는 html 파일의 위치에서 상대경로로 지정해주시면 됩니다.

또는 웹상에 있는 파일일 경우 URL 주소가 들어올 수도 있으니 참고하시기 바랍니다.

저작자표시 비영리 변경금지

'💻 Programming > 웹프로그래밍' 카테고리의 다른 글

TypeHandler를 이용한 객체 리스트를 text(varchar)로 저장하기 (1)	2020.07.02
[AWS] Beanstalk IP 주소 조회 (0)	2020.04.03
이클립스에 스프링부트 설치하기 (Install SpringBoot in Eclipse) (0)	2019.06.26
[jQuery] 10. Effects ( 효과 ) (0)	2016.06.12
[jQuery] 9. AJAX (0)	2016.06.12

💻 Programming/웹프로그래밍

[HTML 기본] HTML파일에 자바스크립트 파일 링크/import/include하기

'💻 Programming > 웹프로그래밍' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바