如何在网页中嵌入原生 JavaScript 代码

在网页中嵌入原生 JavaScript 代码，简单来说通常有两种方式：通过<script>标签直接在HTML文档中编写JavaScript代码、或者通过链接外部JavaScript文件。其中，直接编写方式适合较少的代码或者快速测试，而链接外部文件则方便管理和维护，适用于较大规模的项目。在实际操作中，开发者可以将<script>标签放置在HTML的<head>或<body>中，但为了网页性能优化，通常推荐将脚本放在文档的底部，即<body>标签闭合之前，这样可以防止阻塞页面的渲染。

一、直接在HTML中编写JavaScript

当需要执行的JavaScript脚本较短时，可以直接在HTML文档中的<script>标签内部编写。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <!-- 页面内容 -->
    <script>
        // JavaScript代码
        function sayHello() {
            alert('Hello, World!');
        }
        sayHello();
    </script>
</body>
</html>

这种方式的优点是快速并容易进行小范围的测试。然而，当脚本较长时，将其直接嵌入HTML文档会使HTML代码显得臃肿且难以维护。

二、链接外部JavaScript文件

对于更复杂的项目或更长的脚本，将JavaScript代码放置在外部文件中是更加推荐的做法。这样不仅可以保持HTML文档的清晰，还可以利用浏览器的缓存机制提高页面加载效率。外部JavaScript文件通常使用.js扩展名，并通过如下方式链接：

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript</title>
    <!-- 外部JavaScript文件链接 -->
    <script src="path/to/your-script.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

在这种做法中，必须保证文件路径正确，否则脚本将无法执行。

三、使用 async 和 defer 属性

当脚本被放置在HTML文档中时，有两个重要的属性可以用来控制外部脚本的加载和执行方式：async和defer。

使用 async：

<script async src="path/to/your-script.js"></script>

此属性表示浏览器将在脚本下载的过程中同时进行页面的渲染。下载完成后会立即暂停渲染，执行脚本。适用于那些不要求与页面DOM互动或顺序执行的独立脚本。

使用 defer：

<script defer src="path/to/your-script.js"></script>

defer属性则让浏览器按照脚本标签出现的顺序，延迟到整个页面解析完毕后才去执行脚本，适合需要在文档解析完毕后运行的脚本。

四、处理脚本加载异常

当引入外部脚本时，可能会遇到网络问题或者文件不存在的情况，这时可以通过错误处理机制确保网页的用户体验不受影响。例如，可以监听script标签的error事件进行相应处理。

<script src="path/to/your-script.js" onerror="handleError()"></script>
<script>
    function handleError() {
        console.log('Error loading script.');
    }
</script>