HTML 和 Javascript

JavaScript,也称为 JS,是一种用于 Web 开发的编程语言。它用于使 HTML 页面更具交互性和动态性。例如,

<html>
    <head>
        <script>
            function speak() {
                alert('Hello')
            }
        </script>
    </head>
    <body>
        <button onclick="speak()">Click Me</button>
    </body>
</html>

浏览器输出(点击前)

Image of an alert shown by using internal JS before click

浏览器输出(点击后)

Image of an alert shown by using internal JS after button click

在上面的示例中,我们通过使按钮在被点击时触发警报对话框来为按钮添加了功能。


如何添加 Javascript

有两种方法可以将 Javascript 添加到您的 HTML 文件中。

  • 添加内部脚本
  • 添加外部脚本

添加内部脚本

我们可以通过将 Javascript 写入 <script> 标签内来将其添加到 HTML 文档中。例如,

<head>
    <title> </title>
    <script>
        function showHiddenText() {
        document.getElementById("demo").innerHTML = "Hello World";
      }
    </script>
</head>
<body>
    <button onclick="showHiddenText()">Click me</button>
    <p id="demo"></p>

</body>

浏览器输出(点击前)

Image of button

浏览器输出(点击后)

Image of a button and text shown by using internal JS

在上面的示例中,点击按钮后显示了 Hello World 文本。

注意: 通常,script 标签放在文档的 <head> 部分,但放置标签的位置没有限制。


添加外部脚本

我们也可以在 HTML 文档中使用外部 Javascript 文件。要添加外部脚本,我们将 JS 文件的位置提供给 <script> 标签的 src 属性。例如,

<script src="scripts/code.js"></script>

在这里,我们在 HTML 文件中使用了 scripts 文件夹中的 code.js 文件。

这对于 Javascript 代码量较大的情况很有帮助,因为它通过避免混乱来帮助我们保持 HTML 文件的小巧。此外,HTML 文档也可以使用它。这也有助于我们通过避免混乱来保持 HTML 文件的小巧和语义化。


HTML <noscript> 标签

HTML <noscript> 标签用于向禁用 Javascript 的用户或不支持 Javascript 的浏览器提供信息。例如,

<noscript>Please enable Javascript to view this page!</noscript>

只有当浏览器无法运行 Javascript 时,<noscript> 标签的内容才会显示。

浏览器输出

Text inside noscript tag being displayed because of disabled JS

我们的高级学习平台,凭借十多年的经验和数千条反馈创建。

以前所未有的方式学习和提高您的编程技能。

试用 Programiz PRO
  • 交互式课程
  • 证书
  • AI 帮助
  • 2000+ 挑战