HTML入门教程23：HTML脚本

一、嵌入JavaScript的方式

在HTML中嵌入JavaScript脚本有三种主要方式：

内联脚本：直接在HTML文档的<script>标签中编写JavaScript代码。
外部脚本：将JavaScript代码保存在独立的.js文件中，并在HTML文档中通过<script>标签的src属性引用它。
行内事件处理：在HTML元素的属性中直接嵌入JavaScript代码，通常用于处理事件（如点击、悬停等）。

二、内联脚本

内联脚本是将JavaScript代码直接嵌入到HTML文档的<script>标签中。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p id="demo"></p>

    <script>
        // 这是一个简单的JavaScript代码，它会在页面加载时向<p>元素中添加文本
        document.getElementById("demo").innerHTML = "Hello, World!";
    </script>
</body>
</html>

三、外部脚本

外部脚本是将JavaScript代码保存在独立的.js文件中，并在HTML文档中引用它。这样做的好处是可以将JavaScript代码与HTML结构分离，使代码更加清晰和易于维护。

首先，创建一个名为script.js的文件，并在其中编写JavaScript代码：

// script.js
document.getElementById("demo").innerHTML = "Hello from an external script!";

然后，在HTML文档中通过<script>标签的src属性引用这个外部脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p id="demo"></p>

    <script src="script.js"></script>
</body>
</html>

四、行内事件处理

行内事件处理是在HTML元素的属性中直接嵌入JavaScript代码。这种方法通常用于处理简单的事件，如按钮点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内事件处理示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <button onclick="alert('Button clicked!')">点击我</button>
</body>
</html>

在这个例子中，当按钮被点击时，会触发onclick事件，并执行嵌入在其中的JavaScript代码，弹出一个警告框。

五、注意事项

脚本位置：通常将<script>标签放在HTML文档的<body>标签的底部，这样可以确保在脚本执行之前页面的HTML元素已经完全加载。
脚本加载顺序：如果多个脚本之间存在依赖关系，需要确保它们按照正确的顺序加载。
缓存：浏览器可能会缓存外部脚本文件。如果你希望确保用户获取到最新的脚本版本，可以在src属性中添加一个查询字符串（如script.js?v=1.0）。
错误处理：在开发过程中，应该关注JavaScript控制台中的错误和警告，以便及时发现和修复问题。