javascript

HTML에 JavaScript를 추가하는 방법 - JavaScript guide

조회 485 (작성일 2019.10.27 10:20)
- 음성
- 목록

목차

HTML에 JavaScript를 추가하는 방법

소개

JS라고도 하는 JavaScript는 웹 개발에 사용되는 프로그래밍 언어입니다. HTML 및 CSS와 함께 웹의 핵심 기술 중 하나 인 JavaScript는 웹 페이지를 대화식으로 만들고 웹 앱을 구축하는 데 사용됩니다. 일반적인 디스플레이 표준을 준수하는 최신 웹 브라우저는 추가 플러그인 없이 내장 엔진을 통해 JavaScript를 지원합니다.

웹용 파일로 작업 할 때는 JavaScript를 로드하고 HTML 마크 업과 함께 실행해야 합니다. 이는 HTML 문서 내에서 인라인으로 수행하거나 브라우저가 HTML 문서와 함께 다운로드 할 별도의 파일로 수행 할 수 있습니다.

이 튜토리얼에서는 JavaScript를 웹 파일에 인라인으로 HTML 문서와 별도의 파일로 통합하는 방법을 설명합니다.

https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html

HTML 문서에 JavaScript 추가

JavaScript 코드를 둘러싸는 전용 HTML 태그 <script>를 사용하여 HTML 문서에 JavaScript 코드를 추가 할 수 있습니다.

일반적으로 JavaScript 코드는 HTML 문서의 주요 내용에 포함되지 않도록 하기 위해 <head> 섹션 내부로 이동할 수 있습니다.

그러나 document.write를 사용하여 콘텐츠를 생성 할 때와 같이 페이지 레이아웃 내의 특정 지점에서 스크립트를 실행 해야 하는 경우 일반적으로 <body> 섹션 내에 호출해야 하는 지점에 스크립트를 배치해야 합니다.

브라우저 날짜가 오늘 날짜 인 다음 빈 HTML 문서를 살펴 보겠습니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

현재 이 파일에는 HTML 마크 업 만 포함되어 있습니다. 문서에 다음 JavaScript 코드를 추가한다고 가정 해 보겠습니다.

let d = new Date();
alert("Today's date is " + d);

이렇게 하면 사용자가 사이트를 로드 하는 시기와 상관없이 웹 페이지에 현재 날짜와 함께 경고가 표시됩니다.

이를 위해 일부 JavaScript 코드와 함께 <script> 태그를 HTML 파일에 추가합니다.

먼저 <head> 태그 사이에 JavaScript 코드를 추가하여 브라우저가 나머지 페이지에 로드 하기 전에 JavaScript 스크립트를 실행하도록 알립니다. 예를 들어 아래와 같이 <title> 태그 아래에 JavaScript를 추가 할 수 있습니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>

<body>

</body>



</html>

페이지를 로드 하면 다음과 유사한 경고가 표시됩니다.

JavaScript Alert Example

스크립트를 <body> 태그의 내부 또는 외부에 놓고 페이지를 다시 로드 하는 방법도 실험 해 볼 수 있습니다. 이것은 강력한 HTML 문서가 아니기 때문에 페이지 로드에 차이가 없을 것입니다.

HTML 본문에 표시된 내용을 수정하는 경우 <head> 섹션 뒤에 이를 구현하여 아래 예와 같이 페이지에 표시되도록해야합니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>

</body>

</html>

웹 브라우저를 통해 로드 된 위 HTML 문서의 출력은 다음과 유사합니다.

JavaScript Date Example

작거나 한 페이지에서만 실행되는 스크립트는 HTML 파일 내에서 잘 작동 할 수 있지만 많은 페이지에서 사용될 큰 스크립트 나 스크립트의 경우 포함하기가 어렵거나 읽기 어려워 질 수 있으므로 매우 효과적인 솔루션은 아닙니다. 이해합니다. 다음 섹션에서는 HTML 문서에서 별도의 JavaScript 파일을 처리하는 방법을 설명합니다.

별도의 JavaScript 파일을 사용한 작업

여러 페이지에서 사용될 더 큰 스크립트 나 스크립트를 수용하기 위해 JavaScript 코드는 일반적으로 CSS와 같은 외부 자산이 참조되는 방식과 유사하게 HTML 문서 내에서 참조되는 하나 이상의 js 파일에 존재합니다.

별도의 JavaScript 파일을 사용하면 다음과 같은 이점이 있습니다.

보다 직관적 인 HTML 마크 업 및 JavaScript 코드 사용 가능
별도의 파일로 유지 보수가 쉬움
JavaScript 파일이 캐시 되면 페이지가 더 빨리 로드 됩니다

JavaScript 문서를 HTML 문서에 연결하는 방법을 보여주기 위해 작은 웹 프로젝트를 만들어 봅시다. js / 디렉토리의 script.js, css / 디렉토리의 style.css 및 프로젝트 루트의 기본 index.html로 구성됩니다.

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

위의 섹션에서 이전 HTML 템플릿으로 시작할 수 있습니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

이제 날짜를 <h1> 헤더로 표시하는 JavaScript 코드를 script.js 파일로 옮깁니다.

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

다음 코드 줄을 사용하여 이 스크립트에 대한 참조를 <body> 섹션 아래 또는 아래에 추가 할 수 있습니다.

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

HTML 파일과 관련하여 이 경우 <body> 섹션 아래에서 이 행을 살펴 보겠습니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

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

</html>

마지막으로 <h1> 헤더에 배경색과 스타일을 추가하여 style.css 파일을 편집하겠습니다.

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

HTML 문서의 <head> 섹션에서 해당 CSS 파일을 참조 할 수 있습니다.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

</body>

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

</html>