JavaScript 입문 | 개요 | 자바스크립트 적용

Tags:

자바스크립트를 적용하는 방법

HTML 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있다.

  1. 내부 자바스크립트 코드로 적용
  2. 외부 자바스크립트 파일로 적용

자바스크립트 코드

자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있다.

문법

<script>
    document.getElementById("text").innerHTML = "여러분을 환영합니다!";
</script>

이렇게 삽입된 자바스크립트 코드는 HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있다.

다음 예제는 HTML 문서의 <head>태그에 자바스크립트 코드를 삽입한 예제이다.

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

다음 예제는 HTML 문서의 <body>태그에 자바스크립트 코드를 삽입한 예제이다.

<body>
    <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
    <button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
    <p id="date"></p>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</body>

위의 두 예제에서 살펴볼 수 있듯이 자바스크립트 코드를 <head>태그에 삽입하나 <body>태그에 삽입하나 동작상의 차이는 없다.

외부 자바스크립트 파일

자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있다.

외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장한다.
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 된다.

example.js

function printDate() {
    document.getElementById("date").innerHTML = Date();
}

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있다.
이렇게 하면 HTML 코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워진다.
또한, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도 또한 빨라진다.




최종 수정 : 2021-08-27