JavaScript 与 HTML 的结合
在 HTML 页面中嵌入 JavaScript 代码是实现动态效果和交互功能的关键一步。下面是一些常用的方法来实现 JavaScript 与 HTML 的结合。
- 内联方式：可以直接在 HTML 元素的事件属性中嵌入 JavaScript 代码。例如，可以在按钮的
onclick属性中添加 JavaScript 代码来定义按钮被点击时要执行的操作。
<button onclick="myFunction()">点击我</button>
<script>
function myFunction() {
alert("Hello, world!");
}
</script>
<script>标签：可以在 HTML 页面的<script>标签中嵌入 JavaScript 代码。可以放置在<head>或<body>中，但一般推荐将 JavaScript 代码放在页面的末尾，这样可以确保 JavaScript 代码在页面加载完成后才执行。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 与 HTML 的结合</title>
</head>
<body>
<h1>JavaScript 与 HTML 的结合</h1>
<script>
function myFunction() {
alert("Hello, world!");
}
myFunction(); // 在页面加载完成后执行函数
</script>
</body>
</html>
- 外部文件：可以将 JavaScript 代码保存在外部
.js文件中，然后通过<script>标签的src属性引入到 HTML 页面中。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 与 HTML 的结合</title>
<script src="script.js"></script>
</head>
<body>
<h1>JavaScript 与 HTML 的结合</h1>
<button onclick="myFunction()">点击我</button>
</body>
</html>
script.js 文件中的代码：
function myFunction() {
alert("Hello, world!");
}
无论是哪种方式，JavaScript 代码可以通过操作 HTML 元素的属性和内容来改变网页的外观和行为。你可以通过 JavaScript 来修改元素的样式、内容、添加、删除或修改元素，以及处理用户的交互事件等等。