脚本是一小段程序,可以为您的网站添加交互功能。例如,脚本可以生成弹出警报框消息,或提供下拉菜单。

脚本可以使用 JavaScript 或 VBScript 编写,我们一般使用JavaScript作为我们网站的脚本语言。

您可以使用任何脚本语言编写各种称为事件处理程序的小函数,然后可以使用 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 外部 JavaScript</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "点击我" />
   </body>

</html>

测试一下

您可以尝试单击给定按钮查看效果。

内部脚本

您可以将脚本代码直接写入 HTML 文档中。通常我们使用 <script> 标签将脚本代码保留在文档的<head>...</head>标签,不过也没有限制,您可以将源代码放在文档中的任何位置,只是这样做不太规范。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript 内部脚本</title>
      <base href = "https://www.yxjc123.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "点击我" />
   </body>

</html>

测试一下

您可以尝试单击给定的按钮 

事件处理程序

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

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

<!DOCTYPE html>
<html>

   <head>
      <title>事件处理程序</title>
      <base href = "https://www.yxjc123.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">将鼠标移至此处查看弹窗</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>

<noscript> 元素

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

JavaScript 例子:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>
<noscript>您的浏览器不支持JavaScript!</noscript>
VBScript 例子:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>
<noscript>您的浏览器不支持VBScript!</noscript> 

默认脚本语言

可能会出现这样的情况:您将包含多个脚本文件并最终使用多个 <script> 标记。您可以为所有 script 标记指定默认脚本语言。这样您就不必在每次在页面中使用脚本标记时指定语言。下面是示例 -

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

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