在HTML中调用JavaScript的方法有很多，这里我们主要介绍两种常用的方法：内联JavaScript和外部JavaScript文件。
1. 内联JavaScript
内联JavaScript是指将JavaScript代码直接写在HTML文档的<script>标签中，这种方法的优点是简单易用，缺点是代码冗余，不利于代码维护，下面是一个简单的内联JavaScript示例：
<!DOCTYPE html>
<html>
<head>
<title>内联JavaScript示例</title>
</head>
<body>
<h1>内联JavaScript示例</h1>
<button onclick="showAlert()">点击我</button>
<script>
function showAlert() {
alert('你好，这是一个内联JavaScript示例！');
}
</script>
</body>
</html>
在这个示例中，我们在<button>标签的onclick属性中调用了showAlert()函数，当用户点击按钮时，会弹出一个包含提示信息的对话框，这个函数定义在了<script>标签中，实现了在HTML文档中直接嵌入JavaScript代码的功能。
2. 外部JavaScript文件
外部JavaScript文件是指将JavaScript代码保存在一个单独的.js文件中，然后通过<script>标签的src属性引用这个文件，这种方法的优点是代码模块化，有利于代码维护；缺点是需要额外的HTTP请求来加载脚本文件，下面是一个简单的外部JavaScript文件示例：
我们创建一个名为main.js的外部JavaScript文件，内容如下：
function showAlert() {
alert('你好，这是一个外部JavaScript示例！');
}
在HTML文档中引用这个外部JavaScript文件：
<!DOCTYPE html> <html> <head> <title>外部JavaScript示例</title> </head> <body> <h1>外部JavaScript示例</h1> <button onclick="showAlert()">点击我</button> <script src="main.js"></script> </body> </html>
在这个示例中，我们通过<script src="main.js"></script>引入了main.js文件，并在HTML文档中调用了其中的showAlert()函数，这样，当用户点击按钮时，同样会弹出一个包含提示信息的对话框。
相关问题与解答
Q: 在HTML中如何调用已经定义好的JavaScript变量？
A: 在HTML文档中的任何位置都可以使用JavaScript变量，只需确保在调用变量之前已经对其进行了赋值，如果我们已经在外部JavaScript文件中定义了一个变量myVar,那么在HTML文档中的任意地方都可以使用它，如：
<p id="demo"></p>
<script>
var myVar = "Hello, World!";
document.getElementById("demo").innerHTML = myVar;
</script>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/189880.html
微信扫一扫 