소개

HTML은 웹 페이지의 구조를 만들고, CSS는 스타일을 담당합니다. 하지만 웹 페이지에 동적인 기능을 부여하고 사용자와 상호작용을 하기 위해서는 자바스크립트가 필요합니다. 자바스크립트를 통해 버튼 클릭 시 알림창을 띄우거나, 페이지 내용을 동적으로 변경하는 등 다양한 기능을 구현할 수 있습니다.

여기에서는 HTML에 자바스크립트 적용과 연결하는 방법, 각각의 특징에 대해 알아보겠습니다.
HTML에 직접 자바스크립트를 적용하는 방법과 외부 자바스크립트 파일을 연결하여 적용하는 방법, 그리고 각각의 고려할 점에 대해 소개합니다.

<script> 태그를 이용한 방법

<script> 태그는 HTML 문서 내에 자바스크립트 코드를 포함시키는 가장 기본적인 방법입니다.
이 태그를 이용해서 HTML 문서 안에 직접 자바스크립트를 작성하는 내부 스크립트 방법과, 외부의 자바스크립트 파일을 연결해서 사용하는 외부 스크립트 방법으로 사용할 수 있습니다.

내부 스크립트(Inline Script)

HTML 문서 안에 직접 자바스크립트를 작성하는 방법입니다. <script> 태그를 사용하여 HTML 파일 내에서 자바스크립트를 삽입합니다.

HTML HTML 문서 안에 직접 자바스크립트를 작성하는 방법 
<script>
    // 자바스크립트 코드 작성
    alert("자바스크립트 코드를 포함합니다.");
</script>

예제

HTML 
<button type="button" id="inline">버튼을 클릭하세요!</button>
<script>
    document.querySelector("#inline").addEventListener("click", () => {
        alert("내부 스크립트로 적용되었습니다.");
    });
</script>
실제 적용된 모습

이 방법은 간단한 스크립트나 페이지 특정 코드를 삽입할 때 유용합니다.
하지만, HTML과 자바스크립트 코드가 많이 섞여있을 경우에는 복잡해질 수 있어서 코드 가독성이 떨어지고, 유지보수가 어려울 수 있습니다.

외부 스크립트(External Script)

자바스크립트를 별도의 .js 파일로 분리하고 HTML 문서에서 <script> 태그의 src 속성을 사용하여 연결할 수 있습니다. 이 방법은 코드의 재사용성과 유지 보수성을 높이는 데 유리합니다.

HTML 외부 자바스크립트 파일로 코드를 포함하는 방법 
<!-- HTML 문서에서 외부 자바스크립트 파일로 코드를 포함 -->
<script src="example.js"></script>

예제

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>외부 자바스크립트 예제</title>
</head>
<body>
    <button type="button" id="external">버튼을 클릭하세요!</button>
    <script src="script.js"></script>
</body>
</html>
JavaScript - script.js 파일 
document.querySelector("#external").addEventListener("click", () => {
    alert("외부 스크립트로 적용되었습니다.");
});

이 방법은 자바스크립트 파일로 코드가 분리되어 있기 때문에 코드의 재사용성과 유지 보수성을 높이는 데 유리합니다. 하지만, 파일을 추가로 관리해야 하는 번거로움이 있습니다.

추가적으로 고려해야 할 사항

<script> 태그를 이용할 때에는 태그의 위치를 고려해야 합니다.
매우 중요한 고려 사항으로 태그의 위치에 따라 자바스크립트의 실행 순서와 페이지 로드 성능이 달라질 수 있습니다. 여기에 대해 추가적으로 설명하겠습니다.

<head> 태그 내부에 위치

<head> 태그 내부에 <script> 태그를 배치하면 HTML 문서가 파싱되는 동안 자바스크립트가 먼저 실행됩니다. 이는 자바스크립트가 DOM(Document Object Model) 요소를 참조하기 전에 실행될 수 있기 때문에, DOM이 완전히 파싱되기 전에 실행하려는 자바스크립트가 실패할 수 있습니다.

HTML 
<head>
    
    <!-- 외부 스크립트 예 -->
    <script src="script.js"></script>
    
    <!-- 내부 스크립트 예 -->
    <script>
        // 실행할 자바스크립트 코드
    </script>
    
</head>
고려해야 할 사항
  • DOM이 완전히 파싱되지 않은 상태에서 실행하기 때문에 자바스크립트가 DOM을 조작하는 경우 오류가 발생할 수 있습니다.
  • 스크립트 파일의 크기가 크거나 여러 개의 스크립트를 로드할 때, HTML 렌더링이 지연될 수 있습니다.
  • 내부 스크립트의 경우에는 DOMContentLoaded 이벤트 등을 사용해서 자바스크립트 실행 순서를 조절할 수 있습니다. DOMContentLoaded 이벤트는 DOM이 완전히 파싱된 후 발생하는 이벤트입니다.
  • 외부 스크립트의 경우에는 defer 또는 async 속성을 사용하여 비동기 로드 방식을 조절할 수 있습니다.

defer 속성은
스크립트가 비동기적으로 로드되지만, HTML 파싱이 완료된 후 실행됩니다. 여러 스크립트를 사용할 때 순서가 보장됩니다.

async 속성은
스크립트가 비동기적으로 로드되며, 로드가 완료되는 즉시 실행됩니다. 다른 스크립트와의 실행 순서가 보장되지 않습니다.

HTML 
<head>
    
    <!-- 외부 스크립트 예 -->
    <script src="script.js" defer></script>
    
    <!-- 내부 스크립트 예 -->
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            // 실행할 자바스크립트 코드
        });
    </script>
    
</head>

<body> 태그 끝에 위치

<body> 태그 끝에 위치하면 HTML 문서의 모든 내용이 파싱된 후 자바스크립트가 실행되므로, DOM 요소를 안전하게 참조할 수 있습니다.

HTML 
<body>
    
    <!-- 페이지 내용 -->
    
    <!-- 외부 스크립트 예 -->
    <script src="script.js"></script>
    
    <!-- 내부 스크립트 예 -->
    <script>
        // 실행할 자바스크립트 코드
    </script>
    
</body>
고려해야 할 사항

파일 관리 측면에서 약간의 번거로움이 있을 수 있습니다.
이 문제는 특히 자바스크립트 코드가 많아지고, 여러 파일을 다루게 될 때 더 두드러질 수 있습니다.

이러한 경우에는 ES6에서 소개된 모듈 시스템을 사용하면 자바스크립트 파일을 모듈화하고, 필요한 파일만 불러와 사용할 수 있습니다. 의존성 관리가 쉬워지고, 코드의 재사용성과 유지보수성이 향상됩니다.

HTML 
<script type="module" src="main.js"></script>

HTML 속성을 이용한 자바스크립트 적용

HTML 속성과 값으로도 자바스크립트를 적용할 수 있습니다. 특정 이벤트가 발생할 때 실행되도록 HTML 요소에 직접 자바스크립트 코드를 삽입할 수 있는 방법이 있습니다. 이러한 방법은 이벤트 핸들러 속성을 사용하는 것입니다. 다음은 몇 가지 대표적인 방법들입니다.

이벤트 속성

onclick, onmouseover, onmouseout 등의 HTML 이벤트 속성에 직접 자바스크립트 코드를 작성하여 특정 이벤트 발생 시 실행하도록 설정할 수 있습니다.

다음은 onclick 속성에 직접 자바스크립트를 작성한 예제입니다.

HTML 
<button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>
실제 적용된 모습

이 방법은 간단한 이벤트 핸들링에 유용하지만, 복잡한 로직이 필요하거나 코드의 재사용성이 중요한 경우에는 외부 스크립트 파일을 사용하는 것이 더 적합합니다. HTML 코드와 자바스크립트 코드를 분리하면 코드의 가독성과 유지보수성이 높아집니다.

<a> 태그의 href 속성에 javascript: 프로토콜을 사용

<a> 태그의 href 속성에 javascript: 프로토콜을 사용하여 자바스크립트 코드를 직접 실행할 수 있습니다. 이 방법을 사용하면 링크를 클릭할 때 특정 자바스크립트 동작을 실행할 수 있습니다.

예를 들어, 다음과 같이 작성할 수 있습니다.

HTML 
<a href="javascript:alert('링크를 클릭했습니다!')">링크 클릭</a>
실제 적용된 모습

이 방법은 간단한 동작을 처리할 때 유용하지만, 여러 측면에서 주의할 점이 있습니다.

주의할 점

<a> 태그의 href 속성에 javascript: 프로토콜을 사용하는 것은 권장하지 않는 방법입니다. 스크린 리더를 사용하는 사용자에게 웹 접근성 문제가 있고, 일반적인 하이퍼링크와 달리 검색 엔진에서 크롤링에 제한이 될 수 있습니다.

같이 보기

참고문헌