HTML은 JavaScript 결과를 어떻게 호출합니까?
- PHPz원래의
- 2023-04-25 17:30:551312검색
웹 개발에서 JavaScript는 동적 효과와 사용자 상호 작용 기능을 제공하는 데 널리 사용됩니다. 그러나 JavaScript 코드가 적용되려면 HTML 파일에서 호출되어야 합니다. 이 기사에서는 HTML에서 JavaScript를 호출하는 방법을 소개하고 몇 가지 샘플 코드를 제공합니다.
1. 문서 헤더
HTML 문서에서 JavaScript를 호출하기 전에 다음과 같이 문서 헤더에서 JavaScript 코드를 선언해야 합니다.
<head> <script type="text/javascript"> // JavaScript代码 </script> </head>
type 속성은 필수이며 지정에 사용됩니다. 스크립팅 언어의 유형인 text/javascript는 JavaScript 코드를 나타냅니다. HTML5를 사용하는 경우 type 속성을 생략할 수 있습니다. type属性是必填项，用于指定脚本语言的类型，text/javascript表示JavaScript代码。如果你使用的是HTML5，则可以省略type属性。
二、内部JavaScript代码
可以在HTML文件中直接编写JavaScript代码，存放在<script>标签内，例如：
<!DOCTYPE html>
<html>
<head>
<title>调用JavaScript的例子</title>
<meta charset="utf-8" />
</head>
<body>
<h1>内部JavaScript的例子</h1>
<script>
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
showMessage();
</script>
</body>
</html>
上面的例子中，showMessage()函数用于弹出一个对话框，里面包含一条欢迎消息。最后一行代码调用了该函数，页面加载后会立即弹出对话框。
三、外部JavaScript文件
当JavaScript代码较长或需要反复使用时，一般会将它们存放在外部文件中，然后在HTML文件中引用这个文件。例如，可以将上面的例子的JavaScript代码保存在一个名为myscript.js的文件中。
在HTML文件中，使用<script>标签引用这个文件，方式如下所示：
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> <script src="myscript.js"></script> </head> <body> <h1>外部JavaScript的例子</h1> </body> </html>
文件名为myscript.js，放在HTML文件相同的目录下。<script>标签中的src属性用于指定外部文件路径。
四、事件处理器调用JavaScript
在HTML文档中，用户的交互事件（例如鼠标点击、鼠标悬停、键盘按键等）可以通过JavaScript来响应。本节将展示通过事件处理器调用JavaScript的方式。
1.指定事件处理器
下面是一个鼠标点击事件处理器的例子：
<!DOCTYPE html>
<html>
<head>
<title>event handling example</title>
<meta charset="utf-8" />
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
</script>
</head>
<body>
<h1>事件处理器调用JavaScript的例子</h1>
<button onclick="showMessage()">点击这里发送欢迎消息</button>
</body>
</html>
在这个例子中，我们为按钮元素添加了一个onclick属性，该属性的值是showMessage()函数。当按钮被点击时，浏览器会执行这个函数，弹出对话框。
2.DOM事件模型
在DOM事件模型中，通过添加事件监听器来响应用户交互事件。例如，以下代码将在鼠标悬停元素上时弹出消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM事件模型的例子</title>
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
var myButton = document.getElementById("myButton");
myButton.addEventListener("mouseover", showMessage);
</script>
</head>
<body>
<h1>调用JavaScript的例子</h1>
<button id="myButton">鼠标悬停在此处弹出欢迎消息</button>
</body>
</html>
在这个例子中，我们使用了DOM方法addEventListener()来添加事件监听器，与前面的onclick方式不同。mouseover是事件类型，showMessage
<script> 태그에 저장할 수 있습니다. 예: rrreee
위 예에서showMessage( ) 함수는 환영 메시지가 포함된 대화 상자를 팝업하는 데 사용됩니다. 코드의 마지막 줄은 이 함수를 호출하고 페이지가 로드된 후 즉시 대화 상자가 나타납니다. 🎜🎜3. 외부 JavaScript 파일🎜🎜JavaScript 코드가 길거나 반복적으로 사용해야 하는 경우 일반적으로 외부 파일에 저장한 후 HTML 파일에서 참조합니다. 예를 들어 위 예의 JavaScript 코드를 myscript.js라는 파일에 저장할 수 있습니다. 🎜🎜HTML 파일에서 <script> 태그를 사용하여 다음과 같이 이 파일을 참조합니다. 🎜rrreee🎜파일 이름은 myscript.js이며 HTML에 배치됩니다. 같은 디렉토리에 있는 파일입니다. <script> 태그의 src 속성은 외부 파일 경로를 지정하는 데 사용됩니다. 🎜🎜4. 이벤트 핸들러는 JavaScript를 호출합니다.🎜🎜HTML 문서에서는 사용자 상호 작용 이벤트(예: 마우스 클릭, 마우스 호버, 키보드 키 등)가 JavaScript를 통해 응답될 수 있습니다. 이 섹션에서는 이벤트 핸들러를 통해 JavaScript를 호출하는 방법을 보여줍니다. 🎜🎜1. 이벤트 핸들러 지정🎜🎜다음은 마우스 클릭 이벤트 핸들러의 예입니다. 🎜rrreee🎜이 예에서는 버튼 요소에 onclick 속성을 추가했고 이 값을 추가했습니다. 속성 showMessage() 함수입니다. 버튼을 클릭하면 브라우저가 이 기능을 실행하고 대화 상자를 표시합니다. 🎜🎜2.DOM 이벤트 모델🎜🎜DOM 이벤트 모델에서는 이벤트 리스너를 추가하여 사용자 상호작용 이벤트에 응답합니다. 예를 들어, 다음 코드는 요소 위로 마우스를 가져갈 때 메시지를 표시합니다. 🎜rrreee🎜 이 예에서는 DOM 메서드 addEventListener()를 사용하여 이벤트 리스너를 추가합니다. 이전 onclick이 다르게 작동하기 때문입니다. mouseover는 이벤트 유형이고 showMessage는 이벤트 응답 함수입니다. 🎜🎜요약🎜🎜이 글에서는 내부 JavaScript 코드, 외부 JavaScript 파일, JavaScript를 호출하는 이벤트 핸들러 등을 포함하여 HTML에서 JavaScript를 호출하는 다양한 방법을 소개합니다. 이러한 방법을 통해 웹 개발자는 JavaScript를 사용하여 더 나은 동적 효과와 대화형 경험을 얻을 수 있습니다. 🎜위 내용은 HTML은 JavaScript 결과를 어떻게 호출합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!