Javascript（Javascript）

优质

小牛编辑

129浏览

2023-12-01

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

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

现在，大多数Web开发人员只JavaScript和相关框架，甚至各种主流浏览器都不支持VBScript。

您可以将JavaScript代码保存在单独的文件中，然后将其包含在任何需要的位置，或者您可以在HTML文档本身内定义功能。让我们通过合适的例子逐一看到这两个案例。

外部JavaScript

如果要定义将在各种HTML文档中使用的功能，则最好将该功能保存在单独的JavaScript文件中，然后将该文件包含在HTML文档中。 JavaScript文件的扩展名为.js ，它将使用“script”标记包含在HTML文件中。

例子 (Example)

考虑我们在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文档中。通常我们使用标记将脚本代码保存在文档的标题中，否则没有限制，您可以将源代码放在文档中的任何位置，但放在标记内。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.xnip.cn/" />
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>
   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>
</html>

事件处理程序

事件处理程序只是简单定义的函数，可以针对任何鼠标或键盘事件进行调用。您可以在事件处理程序中定义业务逻辑，该逻辑可以从单行代码变为1000行。

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

<!DOCTYPE html>
<html>
   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.xnip.cn/" />
      <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注释，如下所示。

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

元素

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

<b>JavaScript Example:</b>
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<b>VBScript Example:</b>
<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" />

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