집 >웹 프론트엔드 >프런트엔드 Q&A >HTML에 자바스크립트를 도입하는 방법

HTML에 자바스크립트를 도입하는 방법

WBOY원래의: 2023-05-09 15:24:3716560검색

웹 개발 과정에서 웹 페이지에 동적 효과와 대화형 기능을 추가하기 위해 JavaScript를 사용해야 하는 경우가 종종 있습니다. 그렇다면 HTML 파일에 JavaScript를 도입하는 방법은 무엇입니까? 이번 글에서는 JavaScript를 도입하는 방법과 주의할 점을 소개하겠습니다.

1. JavaScript 태그를 사용하여 JavaScript를 도입하세요

HTML 파일에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 태그를 사용하여 JavaScript 코드를 도입할 수 있습니다. 구체적인 단계는 다음과 같습니다.

HTML 파일에서 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 태그를 찾으세요.
3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 태그를
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入</title>
  <script src="test.js"></script> 

</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
```
에 추가하세요. 위 코드에서 볼 수 있듯이 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 태그를 사용하여 JavaScript 코드를 HTML 파일에 삽입하거나 외부 js 파일을 도입하여 코드를 참조할 수 있습니다.

그 중 352b1442a1f39d4f49881b7e5087d9182cacc6d41bbb37262a98f745aa00fbf0를 사용하여 외부 JavaScript 파일을 소개합니다. test.js 파일은 HTML 페이지와 동일한 디렉토리에 위치하며 그 내용은 다음과 같습니다.

alert("Hello World!");

HTML 파일이 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 로드되면 자동으로 JavaScript 코드를 해석하고 실행합니다. test.js 파일. 이때 "Hello World"라는 내용의 대화 상자가 나타납니다.

2. 스크립트 태그 속성 소개

위 코드에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 src 속성을 사용하여 외부 JavaScript 파일을 참조합니다. 그렇다면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 다른 속성은 무엇입니까? 이러한 속성을 사용하여 JavaScript를 포함하려면 어떻게 해야 합니까? 아래에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 몇 가지 중요한 속성을 소개합니다.

src 속성

이 속성은 연결해야 하는 JavaScript 파일을 지정하는 데 사용됩니다.

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

위 코드와 같이 src 속성에 import해야 하는 JavaScript 파일의 경로를 지정할 수 있습니다.

경로가 상대 경로인 경우 HTML 파일의 위치를 기준으로 한 상대 경로입니다. 경로를 지정할 때 경로의 정확성에 주의해야 합니다.

async 속성

이 속성은 페이지를 차단하지 않고 JavaScript 코드를 비동기적으로 실행하는 데 사용됩니다. 예:

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

async 속성을 사용하면 브라우저는 웹 페이지의 다른 리소스와 요소를 계속 로드하기 전에 JavaScript 파일이 로드될 때까지 기다리지 않고 다른 리소스와 요소를 로드한 후에 JS 파일을 로드하게 됩니다. 결과적으로 페이지 렌더링 속도가 빨라지고 사용자는 페이지 콘텐츠를 더 빠르게 볼 수 있습니다. 그러나 async 속성에 의해 도입된 JavaScript는 페이지 렌더링이 완료된 후에 실행되므로 후속 페이지 동작에 영향을 미칠 수 있습니다.

defer 속성

이 속성은 비동기 속성과 달리 JavaScript 코드를 비동기적으로 실행하는 데에도 사용되며 HTML 파일이 구문 분석된 후 페이지 "DOMContentLoaded" 이벤트 전에 JavaScript 코드를 실행합니다.

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

async 속성에 비해 defer 속성은 실행 시 모든 DOM 요소가 로드되기 때문에 DOM 요소에 의존해야 하는 JavaScript에 더 적합합니다. 따라서 일반적으로 JavaScript 파일을 도입할 때 defer 속성을 추가합니다.

type 속성

이 속성은 포함되거나 연결된 JavaScript 코드의 MIME 유형을 지정합니다. HTML5에서는 JavaScript의 MIME 유형이 기본적으로 "text/javascript"이므로 일반적으로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 지정된 유형 속성을 표시할 필요가 없습니다.

<script type="text/javascript" src="test.js"></script>

그러나 다른 유형의 JavaScript 파일(예: ts 파일)을 도입하려면 type 속성을 통해 해당 파일 유형을 지정해야 합니다.

3. JavaScript 도입 시 주의 사항

JavaScript 파일 도입 시 다음 사항에도 주의해야 합니다.

HTTP 요청 수를 줄이기 위해 JavaScript 파일을 함께 배치해 보세요.
CDN 가속을 사용할 수 있다면 CDN의 JavaScript 파일을 사용해 보세요.
페이지 하단에 JavaScript 파일을 소개하거나 지연 또는 비동기로 표시하세요.
페이지에 JavaScript를 직접 작성하지 말고 외부 JS 파일로 가져옵니다.

대체로 HTML에 JavaScript를 도입하는 것은 매우 간단합니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 태그를 사용하면 됩니다. 그러나 실제 개발에서도 성능과 코드 품질을 향상시키기 위해 다양한 속성과 주의사항을 사용해야 합니다. 이 기사가 모든 사람이 HTML의 JavaScript 도입 방법을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 HTML에 자바스크립트를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript의 주석 구문은 다음과 같습니다.다음 기사：JavaScript의 주석 구문은 다음과 같습니다.