在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