在HTML中，我们可以使用<script>标签来嵌入JavaScript代码。<script>标签可以放在HTML文档的<head>部分或<body>部分。
1、内联JavaScript
在HTML文档中，可以直接使用<script>标签来编写JavaScript代码，这种方式称为内联JavaScript。
```html
<!DOCTYPE html>
<html>
<head>
<title>内联JavaScript示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p id="demo">这是一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
```
2、外部JavaScript文件
另一种方式是将JavaScript代码放在一个单独的文件中，然后在HTML文档中使用<script>标签引用该文件，我们将上述代码保存为script.js文件，然后在HTML文档中引用它：
```html
<!DOCTYPE html>
<html>
<head>
<title>外部JavaScript示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p id="demo">这是一个段落。</p>
<script src="script.js"></script>
</body>
</html>
```
3、事件处理程序
JavaScript还可以用于处理HTML元素的事件，我们可以使用JavaScript为按钮添加点击事件：
```html
<!DOCTYPE html>
<html>
<head>
<title>事件处理程序示例</title>
</head>
<body>
<button onclick="myFunction()">点击我！</button>
<p id="demo">你点击了按钮！</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "你点击了按钮！";
}
</script>
</body>
</html>
```
4、DOM操作
JavaScript还可以用于操作HTML文档的结构，我们可以使用JavaScript创建一个新元素并添加到页面上：
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
</head>
<body>
<h1 id="myHeading">欢迎来到我的网站</h1>
<button onclick="changeText()">改变文本</button>
<script>
function changeText() {
document.getElementById("myHeading").innerHTML = "文本已更改！";
}
</script>
</body>
</html>
```
5、使用JavaScript库和框架
JavaScript有很多库和框架，可以帮助我们更高效地编写代码，我们可以使用jQuery库来简化DOM操作：
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例</title>
<!-引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="myHeading">欢迎来到我的网站</h1>
<button id="changeTextButton">改变文本</button>
<script>
$(document).ready(function() {
$("changeTextButton").click(function() {
$("myHeading").text("文本已更改！");
});
});
</script>
</body>
</html>
```
相关问题与解答：
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/376138.html
微信扫一扫