웹사이트 검색

HTML에 JavaScript를 추가하는 방법


소개

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

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

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

HTML 문서에 JavaScript 추가

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

<script> 태그는 HTML의 <head> 섹션 또는 <body> 섹션에 배치할 수 있습니다. 자바스크립트를 로드하고 싶습니다.

일반적으로 JavaScript 코드는 문서 <head> 섹션 내부에 들어가 HTML 문서의 주요 콘텐츠에 포함되지 않고 제외되도록 합니다.

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

브라우저 제목이 Todays Date인 다음 빈 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>

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

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 문서의 출력은 다음과 유사합니다.

크기가 작거나 한 페이지에서만 실행되는 스크립트는 HTML 파일 내에서 잘 작동할 수 있지만 더 큰 스크립트나 여러 페이지에서 사용될 스크립트의 경우 포함하는 것이 다루기 힘들거나 읽기 어려울 수 있으므로 그다지 효과적인 솔루션이 아닙니다. 그리고 이해합니다. 다음 섹션에서는 HTML 문서에서 별도의 JavaScript 파일을 처리하는 방법을 살펴보겠습니다.

별도의 JavaScript 파일 작업

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

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

  • HTML 마크업과 자바스크립트 코드를 분리하여 더 간단하게 만들기
  • 별도의 파일을 사용하면 유지 관리가 더 쉬워집니다.
  • 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>

<script> 태그는 웹 프로젝트의 js/ 디렉토리에 있는 script.js 파일을 가리킵니다.

이 경우 <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>
 

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

</body> 
 
</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>
 

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

</body>
 
</html>

이제 JavaScript와 CSS를 사용하여 선택한 웹 브라우저에 index.html 페이지를 로드할 수 있습니다. 다음과 유사한 페이지가 표시됩니다.

이제 파일에 JavaScript를 배치했으므로 추가 웹 페이지에서 동일한 방식으로 호출하고 단일 위치에서 모두 업데이트할 수 있습니다.

결론

이 자습서에서는 HTML 문서에 인라인으로 그리고 별도의 .js 파일로 JavaScript를 웹 파일에 통합하는 방법을 살펴보았습니다.

여기에서 JavaScript로 주석을 작성하는 방법으로 작업하는 방법을 배울 수 있습니다.