html如何添加javascript

在HTML页面中添加JavaScript代码，可以让页面具有丰富交互性，提高用户体验，如何才能在HTML页面中添加JavaScript呢？下面就来详细介绍几种添加JavaScript的方法。

方法一：内部引用

在HTML文档中，可以通过<script>标签来添加JavaScript代码，具体操作如下：

1、在HTML文件的<head>部分或<body>部分添加<script>

2、在<script>标签内部编写JavaScript代码。

示例代码如下：

Markup

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script>
        // 这里编写JavaScript代码
        function showHello() {
            alert('Hello, world!');
        }
    </script>
</head>
<body onload="showHello()">
    <h1>这是一个示例页面</h1>
</body>
</html>

在这个例子中，当页面加载完成后，会调用showHello()函数，显示一个警告框。

`方法二：外部引用`

如果JavaScript代码较多，或者需要在多个页面中复用，可以将JavaScript代码保存为一个单独的.js文件，然后在HTML页面中通过<script>标签引用。

1、创建一个.js文件，例如script.js，并在其中编写JavaScript代码。

2、在HTML页面中，通过<script>标签的src属性引用.js文件。

示例代码如下：

Markup

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>这是一个示例页面</h1>
</body>
</html>

在script.js文件中，可以编写如下代码：

// script.js
function showHello() {
    alert('Hello, world!');
}
// 页面加载完成后调用
window.onload = showHello;

`方法三：行内引用`

在某些情况下，可能需要在HTML标签内部直接添加JavaScript代码，这时，可以使用行内事件处理来实现。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <h1>这是一个示例页面</h1>
    <button onclick="alert('点击按钮啦！')">点击我</button>
</body>
</html>

在这个例子中，当用户点击按钮时，会执行alert('点击按钮啦！')，显示一个警告框。