📌  相关文章
📜  在 html 中运行 javascript - Javascript (1)

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

在 HTML 中运行 JavaScript - JavaScript

在 web 开发中，JavaScript 是一门广泛使用的编程语言，它可以让网页变得更加交互和生动。在 HTML 页面中运行 JavaScript 可以实现很多功能，比如表单验证、动态效果、与服务器交互等。

嵌入 JavaScript

在 HTML 中嵌入 JavaScript 代码可以使用 <script> 标签，语法如下：

<script>
  // JavaScript 代码
</script>

也可以在 <script> 标签中通过 src 属性引入外部的 JavaScript 文件，语法如下：

<script src="filename.js"></script>

引入外部 JavaScript 文件的好处在于可以将代码进行分离，使得 HTML 代码更加简洁易读。

在 HTML 元素中使用事件

JavaScript 可以通过在 HTML 元素中添加事件使得网页更加交互。比如在按钮上添加 click 事件，当用户点击按钮时就会触发事件。语法如下：

<button onclick="alert('Hello world!')">点击我</button>

其中 onclick 属性用于添加事件，事件触发后会执行 alert() 函数，弹出一个包含 "Hello world!" 文本的提示框。

在 JavaScript 中操作 HTML 元素

JavaScript 可以通过操作 HTML 元素来更改网页的样式和内容。比如通过 document.getElementById() 方法获取元素，然后通过修改其属性来更改元素的样式和内容。以下是一个例子：

<!DOCTYPE html>
<html>
<body>

<h1 id="my-heading">Hello world!</h1>

<button onclick="changeHeading()">点击我</button>

<script>
function changeHeading() {
  var heading = document.getElementById("my-heading");
  heading.style.color = "red";
  heading.innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

在这个例子中，点击按钮时会执行 changeHeading() 函数，该函数通过 document.getElementById() 方法获取 my-heading 元素，然后更改其样式和内容。

总结

JavaScript 是一门非常重要的编程语言，它可以使得网页更加交互和生动。在 HTML 中嵌入 JavaScript 代码或引入外部 JavaScript 文件都可以实现在 HTML 页面中运行 JavaScript。通过在 HTML 元素中添加事件或操作 HTML 元素可以实现很多功能，开发者要熟练掌握这些技能。