JavaScript动态网页编程
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.2 编写JavaScript代码

在HTML文档中，JavaScript代码可以直接包含在<script>与</script>标记之间，也可以作为某个HTML元素的事件处理程序属性值，还可以把JavaScript代码存储在一个单独的文件（文件扩展名为.js）中并在网页的适当位置引用该文件。

1.2.1 设置脚本语言

编写HTML网页时，可以使用script标记提供一个容器，用于包含使用任何可由浏览器解释的脚本语言编写的代码行，以创建一个脚本代码块，语法如下：

其中language属性指定script标记内代码行所使用的脚本语言，常用的值有javascript、jscript和vbscript。对于javascript，还可以指定脚本语言的版本如javascript1.1、javascript1.2、javascript1.3、javascript1.4、javascript1.5。language属性不再是HTML 4规范的一部分，如果编写JavaScript代码时需要进行W3C验证，则在HTML 4.01或XHTML 1.0中不验证此属性。

<script language="javascript"type="text/javascript>
  一个或多个脚本语句
</script>

type指定脚本语句的内容类型，以通知浏览器使用哪个脚本引擎来解释脚本语句。type属性值为不区分大小写的MIME类型，常用值有text/javascript、text/jscript、text/vbscript。当定义编写脚本语句所使用的脚本语言时，type属性最终将代替language属性。由于早期浏览器忽略type属性，为了向前和向后兼容，建议同时包含language属性和type属性。

使用script标记时应注意以下几点。

（1）如果脚本语句未包含在一个函数定义内部，则这些脚本语句将在加载页面时执行。

（2）在脚本块中定义的函数在加载页面时将被加载，但其执行被延迟，直到用户或系统行为（事件）显式地调用该函数。

（3）在一个文档中可以有多个script标记，而且这些元素中的代码可以相互访问。

（4）根据需要，可以把script标记放在HTML文档中的任何位置，既可以放在head元素内部，也可以放在body元素内部。

（5）在同一个文档中可以包含用不同脚本语言编写的script标记。

【例1.1】 本例说明如何在HTML网页中创建一个JavaScript脚本块，用于显示“Hello, World!”问候语，网页运行结果如图1.1所示。

图1.1 在网页中编写JavaScript脚本块

【代码清单】

<!--F:\js\chapter01\page1-01.html-->
<html>
<head>
<title>在网页中编写JavaScript脚本</title>
</head>
<body>
<script language="javascript"type="text/javascript">
  document.write("Hello,World!");
</script>
</body>
</html>

在浏览器中查看该网页的运行结果。

1.2.2 绑定对象事件

使用Internet Explorer浏览器的事件模型时，允许通过script标记的event、for属性把某个对象与指定事件绑定起来，语法如下：

<script language="javascript"type="text/javascript"
   for="elementID"event="eventName">
事件处理程序代码
   </script>

其中for属性的值为某个页面元素的ID，event属性的值则是该元素的事件名称，该元素必须支持event属性指定的事件。

当加载页面时，浏览器注册每个script标记并将其event属性指定的事件与for属性指定的页面元素绑定起来。当页面元素产生该事件时，将执行script标记中的脚本语句，不必对该对象编写事件处理程序，或者把脚本语句包括在函数定义中。

注意：

只能在Internet Explorer浏览器中使用这种类型的脚本事件。Navigator浏览器在加载页面时将试图执行脚本语句。

【例1.2】 本例说明如何通过for属性和event属性把对象事件绑定到script标记。在文本框中输入用户名，当单击“确定”按钮时将对该用户显示问候信息，如图1.2所示。

图1.2 在网页中编写JavaScript脚本

【代码清单】

<!--F:\js\chapter01\page1-02.html-->
<html>
<head>
<title>绑定对象事件示例</title>
<script language="javascript"type="text/javascript"for="btnOK"event="onclick">
  //获取文本框的值
  var username=document.getElementById("txtUsername").value;
  // 获取段落的ID
  var p1=document.getElementById("p1");
  // 通过设置段落的innerHTML属性显示问候信息
  p1.innerHTML=username+"用户,您好!";
</script>
</head>
<body>
<p>用户名:
  <input type="text"name="txtUsername"id="txtUsername"/>
  <input name="btnOK"type="button"id="btnOK"value="确定"/>
</p>
<p id="p1">&nbsp;</p>
</body>
</html>

1.2.3 调用外部脚本库

通过把script标记的src属性设置为一个扩展名为.js的外部脚本文件（称为脚本库）的路径，可以从外部文件中导入脚本语句。语法如下：

<script language="javascript"type="text/javascript"src="URL">
</script>

其中src属性指定外部JavaScript脚本文件的URL。一旦加载外部语句，浏览器便对这些语句进行处理，就像把它们嵌入到HTML文档中一样。

在实际开发中，常常把一些通用功能编写为JavaScript函数，并且保存为扩展名为.js的脚本库，然后在各个HTML文档顶部的head元素中导入该脚本库。当需要修改所有HTML文档中的函数定义时，对脚本库进行修改即可，十分便于实现网站的模块化设计。

注意：

在JavaScript脚本文件中，可以直接编写JavaScript语句，不需要把这些语句包含在script标记中。此外，当script标记包含src属性时，不要把其他脚本语句放在首尾标记之间。

【例1.3】 本例说明如何通过src属性导入外部脚本文件。编写一个JavaScript脚本文件，然后在HTML网页中导入此脚本文件，网页运行结果如图1.3所示。

图1.3 在网页中编写JavaScript脚本的运行结果

【代码清单】

//F:\js\chapter01\script1-03.js
function welcome(){         // 定义一个名为welcome的函数
  document.write("Now is"+new Date().toLocaleString()+".<br/>");
  document.write("Welcome to JavaScript!");
}
<!--F:\js\chapter01\page1-03.html-->
<html>
<head><title>导入外部脚本文件示例</title>
<script src="script1-01.js"language="javascript"type="text/javascript">
</script>
</head>
<body>
<p align="center">
<script language="javascript"type="text/javascript">
  welcome();               // 调用外部脚本文件中的函数
</script>
</p>
</body>
</html>

1.2.4 通过属性调用脚本

JavaScript对标准HTML进行了扩展，为HTML标记增加了各种事件属性，通过设置这些事件属性可以调用JavaScript脚本。例如，对于<input type="button">表单元素，可以将其onclick属性设置为一段JavaScript代码如一个函数调用或一些JavaScript语句。当用户单击该按钮时，浏览器将解释执行由onclick属性指定的JavaScript代码。

若要通过a标记的href属性调用JavaScript代码，则必须在用做URL的JavaScript代码之前添加“javascript:”。也可以将href属性设置为“#”，而在事件属性onclick中设置要执行的JavaScript代码，此时不需要在代码之前添加“javascript:”，通过在JavaScript代码中添加一个“return false;”语句，则可以取消这个超链接的跳转作用。

【例1.4】 本例说明如何通过HTML属性设置要执行的JavaScript代码，网页运行结果如图1.4和图1.5所示。

图1.4 通过href属性调用脚本

图1.5 通过onclick属性调用脚本

【代码清单】

<!--F:\js\chapter01\page1-04.html-->
<html>
<head>
<title>通过HTML属性调用脚本</title>
</head>
<body>
<!-- 单击“单击这里”链接时将弹出一个对话框，用于显示欢迎信息 -->
<p><a href="javascript:alert('欢迎您访问本网站！？');">单击这里</a></p>
<!-- 单击“关闭窗口”链接时将弹出一个对话框，提示关闭当前浏览器窗口 -->
<p><a href="#"onclick="window.close();return false;">关闭窗口</a></p>
</body>
</html>

1.2.5 处理不支持脚本的情况

某些浏览器不能很好地支持JavaScript，会把JavaScript代码与网页中的其他HTML内容一起显示在浏览器窗口中。在这种场合，可以使用HTML注释标记（<!--和//-->）把脚本块中的JavaScript语句括起来，以避免显示这些脚本代码，语法如下：

<script language="javascript"type="text/javascript">
<!--
  被屏蔽的JavaScript语句
//-->
</script>

支持script标记的浏览器将忽略包含<script>与</script>之间的HTML注释标记，而不会影响脚本语句的解释执行。

对于不支持或禁止运行JavaScript脚本的浏览器，可以使用noscript标记指定要显示的HTML内容，语法如下：

<noscript>
  要显示的HTML内容
</noscript>

如果一个网页中同时包含script标记和noscript标记，则在支持JavaScript的浏览器中加载该网页时，将执行script标记中的脚本代码并显示其运行结果；在不支持或阻止脚本的浏览器中加载该网页时，会把noscript标记指定的内容显示出来，但script标记和noscript标记指定的内容不会同时出现。

【例1.5】 本例说明浏览器如何处理不支持脚本的情况。当在浏览器中加载网页时，在地址栏下方出现了一个提示条，并在浏览器窗口中显示由noscript标记指定的内容，如图1.6 所示；如果单击该提示条并从弹出菜单选择“允许阻止的内容”命令，然后在“安全警告”对话框中单击“是”按钮，如图1.7 所示，则由noscript标记指定的内容被隐藏起来，取而代之的是执行JavaScript脚本所生成的内容，如图1.8所示。

图1.6 JavaScript脚本被阻止的情形

图1.7 允许浏览器运行脚本

图1.8 执行脚本的结果

【代码清单】

<!--F:\js\chapter01\page1-04.html-->
<html>
<head><title>代码屏蔽示例</title></head>
<body>
<script language="javascript"type="text/javascript">
  document.write("这是执行JavaScript代码的结果");
</script>
<noscript>
  本网页包含JavaScript代码，但您的浏览器不支持或禁止JavaScript代码运行
</noscript>
</body>
</html>
上一章目录下一章