javaScript怎么和html运行
时间: 2024-06-11 10:04:25 浏览: 13
要将 JavaScript 与 HTML 结合运行,有几种方法:
1. 在 HTML 文件中直接嵌入 JavaScript 代码:
在 `<script>` 标签中编写 JavaScript 代码,然后将标签放置在 HTML 文件中的 `<head>` 或 `<body>` 标签之间。例如:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</head>
<body>
<h1>My Website</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
```
2. 在外部 JavaScript 文件中编写代码:
在 HTML 文件中使用 `<script>` 标签引用外部 JavaScript 文件。例如:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="myscripts.js"></script>
</head>
<body>
<h1>My Website</h1>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
```
然后在 `myscripts.js` 文件中编写 JavaScript 代码:
```
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
```
3. 使用 JavaScript 框架或库:
JavaScript 框架或库可以帮助简化代码编写并提供更高级的功能。例如,使用 jQuery 库可以轻松地在 HTML 文件中操作 DOM 元素。使用 React 框架可以构建交互式用户界面。在这种情况下,需要在 HTML 文件中引用框架或库,并在 JavaScript 文件中编写代码。例如:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="myscripts.js"></script>
</head>
<body>
<h1>My Website</h1>
<button id="myButton">Click me</button>
<p id="demo"></p>
</body>
</html>
```
然后在 `myscripts.js` 文件中编写 jQuery 代码:
```
$("#myButton").click(function() {
$("#demo").text("Hello World!");
});
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)