在HTML中调用JavaScript的方法主要有以下几种：
1、直接在HTML文件中使用<script>标签插入JavaScript代码，这种方法适用于简单的JavaScript代码，可以直接写在HTML文件中。
<!DOCTYPE html>
<html>
<head>
<title>直接插入JavaScript代码</title>
</head>
<body>
<button onclick="alert('Hello, World!')">点击我</button>
<script>
function sayHello() {
alert('Hello, World!');
}
</script>
</body>
</html>
2、使用<script>标签的src属性引用外部JavaScript文件，这种方法适用于复杂的JavaScript代码，可以将代码写在单独的.js文件中，然后在HTML文件中引用。
<!DOCTYPE html>
<html>
<head>
<title>引用外部JavaScript文件</title>
</head>
<body>
<button onclick="sayHello()">点击我</button>
<script src="hello.js"></script>
</body>
</html>
在这个例子中，hello.js文件的内容如下：
function sayHello() {
alert('Hello, World!');
}
3、使用HTML元素的事件属性调用JavaScript函数，这种方法可以在用户与页面交互时触发JavaScript函数。
<!DOCTYPE html>
<html>
<head>
<title>使用事件属性调用JavaScript函数</title>
</head>
<body>
<button onclick="sayHello()">点击我</button>
<script>
function sayHello() {
alert('Hello, World!');
}
</script>
</body>
</html>
4、使用<script>标签的async和defer属性控制JavaScript文件的加载和执行时机。async属性表示异步加载和执行JavaScript文件，不会阻塞HTML解析；defer属性表示延迟执行JavaScript文件，会等待HTML解析完成后再执行。
<!DOCTYPE html>
<html>
<head>
<title>控制JavaScript文件的加载和执行时机</title>
</head>
<body>
<button onclick="sayHello()">点击我</button>
<script async src="hello.js"></script>
<script defer src="hello.js"></script>
</body>
</html>
相关问题与解答：
Q1: <script>标签应该放在HTML文件的哪个位置？
A1: <script>标签可以放在<head>标签内或者<body>标签内，放在<head>标签内的优点是可以让浏览器尽早开始下载JavaScript文件，缺点是可能会阻塞HTML解析，放在<body>标签内的优点是不会影响HTML解析，缺点是可能会导致页面内容已经加载完成但JavaScript还没有执行完成，具体选择哪种方式需要根据实际情况权衡。
Q2: 如何在JavaScript中调用HTML元素的方法或属性？
A2: 在JavaScript中，可以使用document.getElementById()、document.getElementsByClassName()等方法获取HTML元素，然后通过元素的属性和方法进行操作。
<!DOCTYPE html>
<html>
<head>
<title>在JavaScript中调用HTML元素的方法或属性</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
var button = document.getElementById("myButton");
button.onclick = function() {
alert('Hello, World!');
};
</script>
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/401814.html
微信扫一扫 