共计 1749 个字符,预计需要花费 5 分钟才能阅读完成。
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
只有当用户的浏览器不支持脚本,或者浏览器中禁用了脚本时,才会显示元素内的内容。