如何在 HTML 文档中包含 JavaScript

JavaScript 使 HTML 页面具有更强的动态和交互性。在本教程中,您将学习如何在 HTML 文档中包含 JavaScript。

使用客户端脚本

客户端脚本是指由用户的网络浏览器执行的计算机程序类型。JavaScript (JS) 是网络上最流行的客户端脚本语言。

<script>元素用于在 HTML 文档中嵌入或引用 JavaScript,以向网页添加交互性并提供显着更好的用户体验。

JavaScript 的一些最常见用途是表单验证、生成警报消息、创建图片库、显示隐藏内容、DOM 操作等等。

 

将 JavaScript 添加到 HTML 页面

JavaScript 可以直接嵌入到 HTML 页面中,也可以放置在外部脚本文件中并在 HTML 页面中引用。两种方法都将使用<script>元素。

 

嵌入 JavaScript

要将 JavaScript 嵌入 HTML 文件,只需将代码添加为<script>元素的内容。

以下示例中的 JavaScript 将文本字符串写入网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="greet"></div>
    <script>
        document.getElementById("greet").innerHTML = "Hello World!";
    </script>
</body>
</html>

提示:理想情况下,脚本<script>元素应放置在页面底部,在body 标记结束 之前,即  </body>之前,因为当浏览器遇到脚本时,它会暂停渲染页面的其余部分,直到它解析完脚本为止,这会影响html页面的加载速度。

 

调用外部 JavaScript 文件

您还可以将 JavaScript 代码放入单独的文件(带有.js扩展名)中,并通过<script>标签的属性src在 HTML 文档中调用该文件。

如果您希望同一脚本可用于多个文档,这很有用。它使您不必一遍又一遍地重复相同的任务,并使您的网站更易于维护。

以下示例演示了如何在 HTML 中链接外部 JS 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Linking External JavaScript</title>
</head>
<body>
    <div id="greet"></div>
    <script src="hello.js"></script>
</body>
</html>

注意:src指定属性时,<script>元素必须为空。这意味着您不能使用相同的<script>元素同时嵌入 JavaScript 和链接到 HTML 文档中的外部 JavaScript 文件。

提示: JavaScript 文件是带有.js扩展名的普通文本文件,例如“hello.js”。此外,外部 JavaScript 文件仅包含 JavaScript 语句;它不包含<script>...</script>像嵌入式 JavaScript 这样的元素。

 

HTML noscript 元素

<noscript>元素用于在浏览器中禁用 JavaScript 或浏览器不支持客户端脚本的用户提供替代内容。

此元素可以包含除<script>元素之外的任何 HTML 元素,这些元素可以包含在普通 HTML 页面的<body>元素中。让我们看一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Noscript Demo</title>        
</head>
<body>
    <div id="greet"></div>
    <script>
        document.getElementById("greet").innerHTML = "Hello World!";
    </script>
    <noscript>
        <p>Oops! This website requires a JavaScript-enabled browser.</p>
    </noscript>
</body>
</html>

注意:noscript只有当用户的浏览器不支持脚本,或者浏览器中禁用了脚本时,才会显示元素内的内容。