在HTML中嵌入JavaScript主要有两种方式：内联JavaScript和外部JavaScript。
内联JavaScript
内联JavaScript是在HTML文档中使用<script>标签直接编写的JavaScript代码，这种方式的优点是简单快捷，但缺点是如果有多个脚本，可能会导致HTML结构变得混乱。
下面是一个简单的内联JavaScript的例子：
<!DOCTYPE html>
<html>
<body>
<h2>内联JavaScript示例</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">点击这里</button>
<p id="demo"></p>
</body>
</html>
在这个例子中，当用户点击按钮时，页面上显示的文本将会变为当前的日期和时间，这是因为onclick事件触发了内联JavaScript函数，该函数修改了id为demo的元素的内容。
外部JavaScript
外部JavaScript是在HTML文档中使用<script>标签引用外部JavaScript文件，这种方式的优点是可以使HTML结构保持清晰，但缺点是需要额外的HTTP请求来加载JavaScript文件。
下面是一个简单的外部JavaScript的例子：
创建一个名为main.js的JavaScript文件，内容如下：
window.onload = function() {
document.getElementById('demo').innerHTML = Date();
}
在HTML文档中引用这个JavaScript文件：
<!DOCTYPE html>
<html>
<body>
<h2>外部JavaScript示例</h2>
<button type="button" onclick="loadScript()">点击这里</button>
<p id="demo"></p>
<script src="main.js"></script>
<script>
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'main.js';
document.body.appendChild(script);
}
</script>
</body>
</html>
在这个例子中，当用户点击按钮时，会调用loadScript函数，这个函数创建了一个新的<script>元素，设置了其类型为'text/javascript',并将其源设置为'main.js'，将这个新的<script>元素添加到文档的末尾，从而触发了对main.js的加载，加载完成后，页面上的文本将会变为当前的日期和时间。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/274718.html
微信扫一扫 