HTML에 자바스크립트를 추가하는 방법-프런트엔드 Q&A-php.cn

HTML에 자바스크립트를 추가하는 방법

PHPz

풀어 주다： 2023-05-27 09:02:37

원래의

1640명이 탐색했습니다.

HTML과 JavaScript는 가장 일반적으로 사용되는 두 가지 클라이언트 측 기술입니다. HTML은 웹 페이지의 기초인 반면 JavaScript는 웹 사이트의 상호 작용성과 동적 특성을 향상시킵니다. HTML 코드를 작성할 때 JavaScript 코드를 쉽게 추가하여 더 많은 기능과 효과를 얻을 수 있습니다. 이 문서에서는 HTML에 JavaScript를 추가하는 방법을 설명합니다.

I. 내장 태그 사용

HTML 5에서는 페이지에 JavaScript 코드를 삽입하기 위한 내장 <script> 태그가 도입되었습니다. HTML 코드의 시작이나 끝 부분에 <script> 태그를 배치하고 그 안에 JavaScript 코드를 추가할 수 있습니다. 예: <script> 标签，用于在页面中嵌入 JavaScript 代码。您可以将 <script> 标签放在 HTML 代码的头部或尾部，并在其中添加 JavaScript 代码。例如：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
  <script>
    alert("Hello World!");
  </script>
</body>
</html>

로그인 후 복사

在上面的代码中，我们在 <script> 标签中添加了一个简单的 alert 对话框，用来在页面加载时显示消息。需要注意的是，如果您将 <script> 标签放在头部，则应该使用异步或延迟属性来加载 JavaScript 文件，以确保 HTML 页面不会被 JavaScript 代码阻塞。

II. 使用外部文件

如果您的 JavaScript 代码较长或者需要在多个页面中使用，则最好将其保存在单独的 .js 文件中，并使用外部 <script> 标签进行引用。例如：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
</body>
</html>

로그인 후 복사

在上面的代码中，我们使用 <script> 标签的 src 属性引用了一个名为 script.js 的外部 JavaScript 文件。这种方式提高了代码的可维护性和可重用性，也有助于缩短 HTML 代码的长度。

III. 放置位置

通常情况下，我们将 <script> 标签放在 HTML 文档的 <head> 或 <body> 标签中。将其放在 <head> 中可以确保 JavaScript 代码在网页内容加载之前执行，有助于提高页面性能和响应速度。但是，如果您的 JavaScript 代码实现了页面的动态特效或交互功能，则应该将其放在 <body> 标签中。

IV. 事件监听

在 JavaScript 中，事件监听是实现交互性和动态特效的重要方式。例如，您可以在 HTML 中添加按钮，并在 JavaScript 代码中添加事件监听器来实现按钮的点击响应。例如：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
  <button id="myButton">点击我</button>
</body>
</html>

로그인 후 복사

在上面的代码中，我们添加了一个按钮元素，其中 id 属性为 myButton。然后在 JavaScript 文件中添加以下代码：

document.getElementById("myButton").addEventListener("click", function() {
  alert("已点击按钮");
});

로그인 후 복사

在这段代码中，我们使用 addEventListener 方法为 myButton 元素添加了一个点击事件监听器，以便在用户单击按钮时显示弹出消息。您还可以使用其他事件类型，例如 mouseover 和 keydownrrreee

위 코드에서는 페이지가 로드될 때 메시지를 표시하기 위해 <script> 태그에 간단한 alert 대화 상자를 추가했습니다. <script> 태그를 헤드에 배치하는 경우 HTML 페이지가 JavaScript에 의해 차단되지 않도록 JavaScript 파일을 로드하기 위해 비동기 또는 지연 속성을 사용해야 한다는 점에 유의하는 것이 중요합니다. 암호.

II. 외부 파일 사용

JavaScript 코드가 길거나 여러 페이지에서 사용해야 하는 경우 별도의 .js 파일에 저장하고 외부

<script>를 사용하는 것이 가장 좋습니다. 참고용 태그입니다. 예: 🎜rrreee🎜위 코드에서는 <script> 태그의 src 속성을 사용하여 script.js라는 파일을 참조합니다. 코드> 외부 JavaScript 파일. 이 접근 방식은 코드의 유지 관리성과 재사용성을 향상시키고 HTML 코드의 길이를 줄이는 데도 도움이 됩니다. 🎜🎜III. 배치🎜🎜일반적으로 HTML 문서의 <code> 또는 에 <script> 태그를 배치합니다. > 태그. <head> 내에 배치하면 페이지 콘텐츠가 로드되기 전에 JavaScript 코드가 실행되어 페이지 성능과 응답성을 향상시키는 데 도움이 됩니다. 그러나 JavaScript 코드가 페이지에 동적 효과나 대화형 기능을 구현하는 경우 <body> 태그에 배치해야 합니다. 🎜🎜IV. 이벤트 청취🎜🎜JavaScript에서 이벤트 청취는 상호작용성과 동적 특수 효과를 달성하는 중요한 방법입니다. 예를 들어 HTML에 버튼을 추가하고 JavaScript 코드에 이벤트 리스너를 추가하여 버튼 클릭에 응답할 수 있습니다. 예: 🎜rrreee🎜위 코드에서는 id 속성이 myButton인 버튼 요소를 추가했습니다. 그런 다음 JavaScript 파일에 다음 코드를 추가합니다. 🎜rrreee🎜이 코드에서는 addEventListener 메서드를 사용하여 myButton 요소에 클릭 이벤트 리스너를 추가합니다. user 버튼을 클릭하면 팝업 메시지를 표시합니다. mouseover 및 keydown과 같은 다른 이벤트 유형을 사용하여 더 많은 대화형 기능을 구현할 수도 있습니다. 🎜🎜요약🎜🎜위는 HTML에 JavaScript를 추가하는 방법과 기법입니다. JavaScript 코드를 HTML 페이지에 포함시키거나 외부 JavaScript 파일을 참조하는 경우 웹 사이트에서 동적 대화형 효과를 쉽게 얻을 수 있습니다. JavaScript를 더 깊이 배우고 싶다면 MDN 문서, W3Schools, Codecademy 등과 같은 훌륭한 튜토리얼과 학습 리소스가 있습니다. 즐겁게 공부하세요! 🎜