HTML - JavaScript

JavaScript 是一种高级编程语言，也是 Web 开发的核心技术。脚本是一个 HTML 元素，它与 JavaScript 协同工作，使我们的网页更具交互性。

例如，脚本可以生成弹出警报框消息，或者根据某些条件（例如用户单击按钮）提供下拉菜单。此脚本可以使用 JavaScript 或 VBScript 编写。如今，大多数 Web 开发人员只使用JavaScript 和相关的框架，VBScript 甚至不受主流浏览器支持。

有多种方法可以将脚本添加到 HTML 文档中。我们可以将 JavaScript 代码保存在单独的文件中，然后在需要的地方包含它，也可以在 HTML 文档本身内定义功能。让我们逐一查看这两种情况并给出合适的示例。

语法

<script>
   function Hello() {
      alert("Hello, World");
   }
</script>

JavaScript 在 HTML 中的示例

以下是一些示例，说明了在 HTML 页面中使用 JavaScript 的方法。这将探讨将 HTML 页面与 JavaScript 连接的方式。

HTML 文档内的脚本

我们可以直接将脚本代码写入 HTML 文档中。通常，我们将脚本代码保存在文档的头部，位于<script>标签内，但是没有限制。我们可以在文档中的任何位置放置脚本代码，但必须位于<script>标签内。

<!DOCTYPE html>
<html>

<head>
   <title>
      JavaScript Internal Script
   </title>
   <script type="text/JavaScript"> 
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

导入外部 JavaScript

如果开发人员要定义将在各种 HTML 文档中使用的功能，那么最好将该功能保存在单独的 JavaScript 文件中，然后将该文件包含在 HTML 文档中。

JavaScript 文件的扩展名为.js，它将使用<script>标签包含在 HTML 文件中。

假设我们在script.js中使用 JavaScript 定义了一个小函数，其中包含以下代码

function Hello() {
   alert("Hello, World");
}

现在，让我们在下面的 HTML 文档中使用上述外部 JavaScript 文件

<!DOCTYPE html>
<html>

<head>
   <title>JavaScript External Script</title>
   <script src="/html/script.js" type="text/JavaScript" />
   </script>
</head>

<body>
   <input type="button" 
          onclick="Hello();" 
          name="ok" 
          value="Click Me" />
</body>

</html>

JavaScript 中的事件处理程序

事件处理程序是简单的函数，可以针对任何鼠标或键盘事件调用。我们可以在事件处理程序中定义任何类型的逻辑，这可以从一行代码到数千行代码不等。

下面的示例说明了如何编写事件处理程序。我们将编写一个名为EventHandler()的简单函数，放在文档的头部。当任何用户将鼠标悬停在段落上时，我们将调用此函数。

<!DOCTYPE html>
<html>

<head>
   <title>Event Handlers Example</title>
   <script type="text/JavaScript"> 
      function EventHandler(){
      alert("I'm event handler!!");
      }
   </script>
</head>

<body>
   <p onmouseover="EventHandler();">
      Bring your mouse here to see an alert
   </p>
</body>

</html>

从旧版浏览器中隐藏脚本

尽管如今大多数浏览器都支持 JavaScript，但有些旧版浏览器不支持。如果浏览器不支持 JavaScript，它不会运行您的脚本，而是会将代码显示给用户。为了防止这种情况，我们可以简单地将 HTML 注释放在脚本周围，如下所示。

JavaScript 示例

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>

VBScript 示例

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>

HTML <noscript> 元素

对于浏览器不支持脚本的用户，或者在浏览器中禁用了脚本的用户，我们可以使用<noscript>标签将脚本嵌入网页中，如下例所示。

JavaScript 示例

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript 示例

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

默认脚本语言

我们可能需要包含多个脚本文件，最终使用多个<script>标签。我们可以一次为所有脚本标签指定默认脚本语言。这样可以避免每次在页面中使用脚本标签时都指定语言。以下是一个示例。

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

请注意，您仍然可以通过在脚本标签中指定语言来覆盖默认值。

打印页面