HTML - JavaScript

脚本是一小段程序，可以为您的网站添加交互性。例如，脚本可以生成弹出警报框消息，或提供下拉菜单。该脚本可以使用 JavaScript 或 VBScript 编写。

您可以使用任何脚本语言编写各种称为事件处理程序的小函数，然后可以使用 HTML 属性触发这些函数。

如今，大多数 Web 开发人员只使用JavaScript和相关框架，VBScript 甚至不受各种主流浏览器的支持。

您可以将 JavaScript 代码保存在单独的文件中，然后将其包含在需要的地方，或者您可以在 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>

这将产生以下结果，您可以尝试单击给定的按钮 -

内部脚本

您可以将脚本代码直接写入 HTML 文档中。通常我们使用 <script> 标签将脚本代码保留在文档的标题中，否则没有限制，您可以将源代码放在文档中的任何位置，但在 <script> 标签内。

例子

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

这将产生以下结果，您可以尝试单击给定的按钮 -

事件处理程序

事件处理程序只不过是简单定义的函数，可以针对任何鼠标或键盘事件调用它们。您可以在事件处理程序中定义业务逻辑，该逻辑可以从单行代码到数千行代码不等。

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

现场演示

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <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 Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

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

<noscript> 元素

您还可以向浏览器不支持脚本的用户以及禁用了浏览器脚本选项的用户提供替代信息。您可以使用<noscript>标记来执行此操作。

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

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<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" />

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