분류 javascript

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

컨텐츠 정보

  • 조회 183 (작성일 )

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

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 코드를 추가 할 수 있습니다.


<script> 태그는 JavaScript 로드 시기에 따라 HTML의 <head> 섹션, <body> 섹션 또는 </ body> 닫기 태그 뒤에 배치 할 수 있습니다.


일반적으로 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>

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

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>

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


JavaScript Date with CSS Example 


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


결론 


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