如何在 html 中使用 javascript

📌 相关文章

📜 如何在 html 中使用 javascript - Javascript (1)

📅 最后修改于: 2023-12-03 15:38:16.337000 🧑 作者: Mango

JavaScript 是前端开发中必不可少的语言之一。在 HTML 中使用 JavaScript 可以实现动态效果，增强用户体验。本文将介绍如何在 HTML 中使用 JavaScript。

内嵌式

在 HTML 页面内部，可以使用内嵌式 JavaScript。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Demo</title>
</head>
<body>
	<h1>Hello, World!</h1>
	<button onclick="alert('Hello, World!')">点击我</button>

	<script>
		// 内嵌式 JavaScript
		console.log('Hello, World!');
	</script>
</body>
</html>

可以看到，<script> 标签用于载入 JavaScript 代码，同时也可以直接写在 HTML 内部。在本例中，通过点击按钮弹出提示框，同时在控制台输出字符串。

外部引用式

除了内嵌式，也可以通过外部引用 JS 文件的方式来使用 JavaScript。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Demo</title>
	<script src="main.js"></script>
</head>
<body>
	<h1>Hello, World!</h1>
	<button onclick="sayHello()">点击我</button>
</body>
</html>

<script> 标签的 src 属性可以用于引用外部的 JS 文件。在本例中，通过点击按钮调用 sayHello() 函数，其定义保存在 main.js 文件中。

function sayHello() {
	alert('Hello, World!');
}

文档加载后再执行

有时候需要等到 HTML 文档加载完成后，再执行 JavaScript 代码，避免在页面未加载完成时就进行 DOM 操作导致错误。可以使用 window.onload 或 document.addEventListener('DOMContentLoaded', ...) 来实现。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Demo</title>
</head>
<body>
	<h1>Hello, World!</h1>
	<button id="btn">点击我</button>

	<script>
		// window.onload
		window.onload = function() {
			var btn = document.getElementById('btn');
			btn.addEventListener('click', function() {
				alert('Hello, World!');
			});
		}

		// document.addEventListener
		document.addEventListener('DOMContentLoaded', function() {
			var btn = document.getElementById('btn');
			btn.addEventListener('click', function() {
				alert('Hello, World!');
			});
		});
	</script>
</body>
</html>

以上两种方式效果一样，都是等待页面加载完成后再进行相应的操作。需要注意的是，window.onload 要等到所有资源加载完成后才会执行，比 document.addEventListener('DOMContentLoaded', ...) 要慢。因此，仅在必要时使用 window.onload。

结语

以上介绍了如何在 HTML 中使用 JavaScript 的三种方式：内嵌式、外部引用式、文档加载后再执行。根据场景选择合适的方式，可以提高开发效率，增强用户体验。