HTML 按钮调用 JavaScript
在网页开发中，我们经常需要为用户提供一些交互功能，例如按钮点击事件。HTML 提供了 <button> 元素用于创建按钮，而 JavaScript 可以帮助我们实现按钮的功能。本文将介绍如何使用 HTML 按钮调用 JavaScript，并提供一些代码示例帮助读者理解。
HTML 按钮
首先，让我们来了解一下 HTML 中的按钮元素 <button>。按钮通常用于触发某些操作，例如提交表单或执行一段 JavaScript 代码。
HTML 中的按钮元素可以通过不同的属性来定义其外观和行为。下面是一些常用的属性：
type：指定按钮的类型。常见的类型有"button"（默认值）、"submit"（提交表单）和"reset"（重置表单）。value：指定按钮的值。当按钮类型为"submit"时，该值将作为表单数据的一部分提交到服务器。disabled：禁用按钮，使其无法点击。
下面是一个简单的 HTML 按钮示例：
<button type="button" onclick="alert('Hello, World!')">Click me</button>
在这个示例中，按钮的类型是 "button"，当用户点击按钮时，将弹出一个包含字符串 "Hello, World!" 的提示框。
JavaScript 事件处理
为了使按钮能够执行 JavaScript 代码，我们需要使用 JavaScript 的事件处理机制。事件处理指定了当某个事件发生时要执行的代码。
在 HTML 中，可以使用 onclick 属性来指定按钮被点击时要执行的 JavaScript 代码。在上面的示例中，我们使用了 onclick="alert('Hello, World!')"，这意味着当按钮被点击时，将弹出一个提示框。
除了 onclick，还有其他常用的事件处理属性，例如 onmouseover（鼠标悬停时触发）、onkeydown（按下键盘按键时触发）等等。
外部 JavaScript 文件
虽然我们可以直接在 HTML 中编写 JavaScript 代码，但通常将 JavaScript 代码放在外部文件中更为方便和可维护。使用外部 JavaScript 文件可以使代码更清晰，并帮助我们更好地组织和重用代码。
要使用外部 JavaScript 文件，我们需要在 HTML 中使用 <script> 元素，并通过其 src 属性引入外部文件。下面是一个示例：
<script src="script.js"></script>
在这个示例中，我们将 JavaScript 代码存储在名为 script.js 的文件中，并通过 <script> 元素将其引入到 HTML 中。现在，按钮的 onclick 属性可以调用外部文件中的函数或执行其他 JavaScript 代码。
JavaScript 函数
在 JavaScript 中，我们可以使用函数来组织和封装代码块，以便在需要时进行调用。通过将 JavaScript 代码封装为函数，我们可以实现更高级的功能，并提高代码的可读性和可维护性。
下面是一个示例，展示了如何在按钮点击时调用 JavaScript 函数：
<script>
function sayHello() {
alert('Hello, World!');
}
</script>
<button type="button" onclick="sayHello()">Click me</button>
在这个示例中，我们定义了一个名为 sayHello 的 JavaScript 函数，并在按钮的 onclick 属性中调用该函数。当用户点击按钮时，将弹出一个提示框，显示字符串 "Hello, World!"。
与 HTML 元素交互
通过 JavaScript，我们可以动态地操作 HTML 元素的属性和内容。这使得我们能够根据用户的交互来改变页面的外观和行为。
以下是一些常见的 JavaScript 方法，可用于与 HTML 元素交互：
getElementById：通过元素的id属性获取元素对象。innerHTML：设置或获取元素的 HTML 内容。style：设置或获取元素的样式属性。
下面是一个示例，展示了如何使用 JavaScript 改变按钮的文本：
<script>
function changeText() {
var button = document.getElementById('myButton');
button.innerHTML = 'Clicked!';
}
