个性化阅读
专注于IT技术分析

html JavaScript脚本 – HTML教程

上一章HTML教程请查看:html CSS层叠样式表

一个脚本是一个小程序,可以添加互动到你的网站。例如,脚本可以生成弹出警告框消息,或提供下拉菜单,这个脚本可以使用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外部脚本</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.srcmini02.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

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

</html>

事件处理程序

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

下面的示例解释了如何编写事件处理程序,让我们在文档的标题中编写一个简单的函数EventHandler(),当任何用户将鼠标移到一个段落上时,我们将调用这个函数。

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript事件处理示例</title>
      <base href = "https://www.srcmini02.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("这是事件处理!");
         }
      </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>标记。可以为所有脚本标记指定默认的脚本语言,这避免了每次在页面中使用脚本标记时都要指定语言。下面是例子:

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

注意,你仍然可以通过在脚本标记中指定一种语言来覆盖默认设置。

赞(0)
未经允许不得转载:srcmini » html JavaScript脚本 – HTML教程

评论 抢沙发

评论前必须登录!