HTML JavaScript


2022年1月19日, 学习电子教程
1564

在本 HTML 教程中,您将学习如何在 HTML 中使用 JavaScript。我们还将讨论将 JavaScript 包含在 HTML 中的各种方法。

JavaScript 在 HTML 中有什么用?

客户端脚本是一种描述由用户网络浏览器运行的计算机程序的术语。互联网上最广泛使用的客户端脚本语言是 JavaScript (JS)。<script> 元素用于在 HTML 文档中嵌入或引用 JavaScript,以通过向网页添加交互性来改善用户体验。表单验证、生成警报消息、构建图片库、显示隐藏内容、DOM 操作等是 JavaScript 最常见的用途。

如何将 JavaScript 添加到 HTML 页面?

JavaScript 可以直接包含在 HTML 页面中,也可以存储在外部脚本文件中并从 HTML 页面内部引用。这两种方法都使用 <script> 元素。

将 JavaScript 包含在 HTML 文档中

只需将代码添加为 <script> 元素的内容即可将 JavaScript 嵌入 HTML 文档中。
 


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script>
        document.getElementById("welcome")[removed] = "Hello World!";
    </script>
</body>
</html>
 

输出


Hello World

引用外部 JavaScript 文件

您也可以将 JavaScript 代码放在一个不同的文件(带有 .js 后缀)中,并使用 <script> 元素的 src 属性在 HTML 文档中调用该文件。如果您希望同一个脚本出现在多个 HTML 文档中,这是一个不错的选择。它省去了您一遍又一遍地做同样事情的麻烦,并且使您的网站维护起来容易得多。

当给定 src 属性时,<script> 元素必须为空。简而言之,您不能在同一个 <script> 元素中嵌入 JavaScript 并链接到外部 JavaScript 文件。


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script src="welcome.js">
    </script>
</body>
</html>
 

输出


Hello World

HTML 中的 NoScript 元素有什么用?

<noscript> 元素用于为在浏览器中禁用 JavaScript 的用户或使用不支持客户端脚本的浏览器的用户提供替代内容。除了 <script> 之外,此元素可以包含在标准 HTML 页面的 <body> 元素中找到的任何 HTML 组件。


<!DOCTYPE html>
<html>
<head>
    <title>Embedding JavaScript</title>
</head>
<body>
    <div id="welcome"></div>
    <script>
        document.getElementById("welcome")[removed] = "Hello World!";
    </script>
     <noscript>
        <p>Oops! This website requires a JavaScript-enabled browser.</p>
    </noscript>
</body>
</html>
 

在上面的示例中,如果浏览器不支持 JavaScript,它将显示 noscript 元素中的内容