HTML JavaScript

时间:2019-06-08 23:19:24  来源:igfitidea点击:

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

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

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

我们可以将JavaScript代码保存在一个单独的文件中,然后在需要的地方包含它,或者可以在HTML文档本身内部定义功能。

使用外部JavaScript

如果要定义将在各种HTML文档中使用的功能,那么最好将该功能保存在单独的JavaScript文件中,然后将该文件包含在HTML文档中。一个JavaScript文件的扩展名为.js,它将使用<script>标记包含在HTML文件中。

使用外部JavaScript示例

使用JavaScript定义了一个函数:

script.js :

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

在HTML文档中使用上面的外部JavaScript文件:

<!DOCTYPE html>
<html>

   <head>
      <title>使用外部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>标记将脚本代码保存在文档头中,不过位置没有任何限制,我们可以将源代码放在文档中的任何位置,只要放在<script>标记内。

使用内部脚本示例

<!DOCTYPE html>
<html>

   <head>
      <title>使用内部JavaScript脚本示例</title>
      <base href = "https://www.theitroad.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.theitroad.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("调用事件处理程序!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">将鼠标移动到这里将会触发mouseover事件,并调用事件处理程序</p>
   </body>

</html>

在旧浏览器中隐藏脚本

虽然现在大多数(如果不是所有的)浏览器都支持JavaScript,但是仍然有一些老的浏览器不支持JavaScript。
如果浏览器不支持JavaScript,而不是运行脚本,它会将代码显示给用户。为了防止这种情况发生,我们可以简单地在脚本周围放置HTML注释,如下所示。

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

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

这种代码只有在老的教程书本和旧网站源代码中才能看到。 现在不需要这样写。

<noscript>元素

我们还可以为浏览器不支持脚本的用户和禁用脚本选项的用户提供可选信息。我们可以使用<noscript>标记来执行此操作。

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

<noscript>你的浏览器不支持JavaScript</noscript>

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

<noscript>你的浏览器不支持 VBScript!</noscript>

设置默认脚本语言

可能会出现这样的情况:我们将包含多个脚本文件并最终使用多个<script>标记。
可以为所有脚本标记指定默认脚本语言。
这样可以避免每次在页面中使用脚本标记时指定语言。

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

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