[JavaScript] 자바스크립트 적용하는 방법

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

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

1. 내부 자바스크립트 코드로 적용

2. 외부 자바스크립트 코드로 적용

내부 자바스크립트 코드

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

자바스크립트 코드는 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있습니다.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>
<body>

<h1>head 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
</head>
<body>
<h1>head 태그 내의 자바스크립트</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
<script>
    function printDate() {
        document.getElementById("date").innerHTML = Date();
    }
</script>
</body>
</html>

출력 결과

외부 자바스크립트 파일

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

외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장합니다.

해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 됩니다.

hello.js

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

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JavaScript</title>
    <script src = "hello.js"></script>
</head>
<body>
<h1>외부 자바스크립트 파일</h1>
<p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
<button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
<p id="date"></p>
</body>
</html>

출력 결과

외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있습니다. 이렇게 하면 HTML 코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지보수도 쉬워집니다.

또, 외부 자바스크립트 파일은 웹브라우저가 미리 읽어올 수 있어 웹 페이지의 로딩 속도 또한 빨라집니다.

'1. 웹개발 > 1_1_1 JavaScript' 카테고리의 다른 글

[JavaScript] function 정리 (ES6) (0)	2021.06.08
[JavaScript] toFixed()와 toPrecision() 메소드 (0)	2020.06.30
[JavaScript] isInteger() - 전달된 값이 정수인지를 확인하는 메소드 (0)	2020.06.28
[JavaScript] 객체란? (0)	2020.03.17
[JavaScript] 희소 배열이란? (0)	2020.03.16

코딩병원