项目 5 网页脚本的使用

/ 51 1

项目项目 5 5 网页脚本的使用网页脚本的使用

知识技能目标

掌握 JavaScript 语言基础知识

在网页中应用 JavaScript 效果

本单元理论授课 4 学时，上机操作 4 学时。

/ 51 2

课次 18 课时 2 教具投影仪备注课题任务 1 JavaScript 在网页中的应用 ( 一 )目的掌握 JavaScript 的基本应用重点 JavaScript 应用

难点无

任务任务 JavaScriptJavaScript 在网页中的应用在网页中的应用

一、任务分析

到现在为止，张先生的网站首页已经相当美观，但他还想为页面增加一些效果

和功能，比如首页打开时首先弹出一个公告窗口；再为页面增加一个友情链接导

航列表等等。实际上网页脚本（ VBScript 和 JavaScript ）能很好地完成这些

任务。

/ 51 3

二、相关知识 ( 一 ) JavaScript 语言简介脚本 (Script) 是完成某些特殊功能的程序。在网页中使用的脚本语言主要有JavaScript 和 VBScript 。脚本既可以在服务器端运行（如 ASP 、 PHP 等），也可以在客户端运行。客户端脚本常用来检测浏览器的功能、响应用户的动作、验证表单数据及显示对话框等。客户端脚本驻留在客户机上（随网页下载），因此在对网页进行验证或响应用户动作时无须与 Web 服务器通信，减少了网络传输量和服务器负荷，改善了系统的速度性能。 ( 但服务器脚本安全性较高 ) 通常有三种方式将脚本添加到 HTML 页面：　　 1. 使用 script 标记符；如 <script>…</script>　　 2. 直接在 html 标记符内添加；如 <a href=”javascript:alert(‘XXX’)” >…</a>　　 3. 调用包含脚本的外部文件。如 <script src=“XXX.js”>…</script>

/ 51 4

( 二 ) JavaScript 的特点 1．简单性像 VBScript 一样， JavaScript 也是解释性语言，它的基本结构与 C、 C＋＋、 VB 、 Delphi十分相似，但它不像这些语言需要先编译。 JavaScript 和 HTML 标记结合在一起，大大方便了用户的使用。 2．动态性 JavaScript 是动态的，它可以直接对客户输入做出响应，无须经过Web 服务器。它对用户的响应是采用事件驱动的方式进行的。所谓事件驱动，就是指在页面中执行了某种操作后产生的相应动作，比如按下鼠标、移动窗口、选择菜单等都可以视作事件。当事件发生后，即会触发相应的事件响应。 3．跨平台性 JavaScript 具有跨平台性，只要浏览器支持 JavaScript ，它就能正确执行。目前常用的浏览器 IE和网景都支持 JavaScript 。 4．基于对象 JavaScript 是一种基于对象的语言，支持面向对象的编程方法。 JavaScript本身还内置了一些基本对象，可以直接使用这些对象来完成相应的功能，而不需要再由设计者来创建这些类。 5．良好的安全性 JavaScript只能通过浏览器来实现信息的浏览和动态交互，而不允许直接向客户端硬盘写入数据，也就是说， JavaScript不能直接对浏览者的硬盘目录和文件进行写入操作，用户可以放心使用。

/ 51 5

基于以上特点， JavaScript 在网页设计中得到了广泛的应用。下面是一个简

单的 JavaScript 程序，运行结果如右。

<html><head><title>JavaScript Demo1</title>

<script language="JavaScript">

document.writeln('<H1>欢迎使用 JavaScript！！！ </H1>');

document.writeln('<br>');

document.writeln('<H3>悄悄的我走了，正如我悄悄的来； </H3>');

document.writeln('<H3>我挥一挥衣袖，不带走一片云彩 </H3>');

</script>

</head></html>

/ 51 6

( 三 ) JavaScript 语言基础

1. 变量

（ 1 ）变量的命名规则

　　 a ）变量名必须以字母或下划线开始，其余字符可以是字母、数字、下

划线等。

　　 b ）变量名中除下划线作为连字符外，不能有空格、“ +” 、“ -” 、

“ ,” 或其他符号。

　　 c ）不能使用 JavaScript 中的关键字作变量名。

注意 : JavaScript区分字母大小写。

/ 51 7

（ 2 ） JavaScript保留字

在 JavaScript 中定义了 40多个关键字 (保留字 ) 。这些保留字是 JavaScri

pt 内部使用的，不能作为变量名、函数名、方法名和对象名。

常用保留字如下表所示。另外，内部的函数名和对象名也是保留字。

/ 51 8

（ 3 ）变量的类型

在 JavaScript 中，变量的类型由其值的类型来决定。

a ）在 JavaScript 中，变量可以用命令 var 作声明，例如：

　　 var mytest;

　　 var mytest=”This is a book”;

b ）在 JavaScript 中，变量可以不作声明，而在使用时再根据数据的类型来

确定其变量的类型。例如：

x=100;

y=”125”;

xy=true;

cost=19.5;

这里， X 为整数， Y为字符串， XY为布尔型， COST 为实型。

/ 51 9

（ 4 ）变量的声明及其作用域

对于一个用 var声明的变量，可以在声明时赋给它一个特殊的常量 null 。若

声明了一个变量，但不给它任何值（包括null ），那么这个变量确实存在，但

是却处于未定义状态，其类型为 undefined，这时如直接引用，会产生一个错

误。例如，下面的代码中 abc没有数值而直接引用，是错误的：

var abc;

　 var def=5*abc;

变量的另一个重要属性就是变量的作用域。 JavaScript 中有全局变量和局部

变量。全局变量定义在所有函数之外，其作用范围是所有函数；而局部变量定义

在函数内，只在该函数内有效。

/ 51 10

2．常量（ 1 ）整型常量可以用十六进制（如 0x25 ）、八进制（如 025) 、十进制等表示。（ 2 ）实型常量可用科学计数形式（如 5E7）和标准计数形式表示。（ 3 ）布尔型常量有 true 和 false两个值。（ 4 ）字符串常量用单引号或双引号括起的一串字符。（ 5 ）空值null null 表示什么也没有，但它可以和任何数据类型进行安全的转换，例如： var x=null; var y=3*x; 结果 y的值为 0。

/ 51 11

（ 6）特殊字符

同C语言一样， JavaScript 也有转义字符 (控制字符 ) 。常用控制字符如下：

　 \b 　退格　　　 \f 　换页　　 \n　换行　　　　 \r 　回车

　 \t 　 Tab 　　　　 \’ 单引号本身　　 \” 　双引号本身

3．运算符

（ 1 ）赋值符号

= ：将右边表达式的值赋给左边的变量。

+= ：将左右操作数相加的结果赋给左边的变量。

-= ：将左边变量的值减去右边表达式的值赋给左边的变量。

*= ：将左右操作数相乘的结果赋给左边的变量。

/= ：将左边变量的值除以右边表达式的值赋给左边的变量。

%= ：将左边变量的值除以右边表达式的结果的余数赋给左边的变量。

/ 51 12

（ 2 ）单目运算符

- ：改变操作数的符号（取反）。

~ ：操作数各位对应取补码值。

+ + ：用于操作数之前或之后（自加 1 ）。

- - ：用于操作数之前或之后（自减 1 ）。

（ 3 ）双单目运算符：

+（加）、 -（减）、 *（乘）、 / （除）、%（模）

（ 4 ）位操作符：

|（位或）、 ^（位异或）、 &（位与）、 << （左移）、 >> （右移）

（ 5 ）比较运算符： == 、 != 、 >= 、 <= 、 > 、 <

（ 6）逻辑运算符： &&（与）、 ||（或）、 !（非）

（ 7）字串运算符： +（首尾连接）

/ 51 13

4．运算符的优先级（从高到低）

括号→单目运算→算术运算→比较运算→位运算→逻辑运算→条件运算 (?:)→赋值运算

5. 数据类型

有数值型、逻辑型（布尔型）、字符串、 undefined型、对象型等。

注意：可以把对象看成是一个命名好的容器，可以容纳数据（如该容器的某个

属性值）以及提供特定的方法（对数据进行的操作）。

在 JavaScript 中，运算符 typeof 可以测试一个表达式的类型。例如：

typeof( 表达式 )

它的返回值可以是 number （数值型）、 string（字符型）、 boolen（逻

辑型）、 object （对象型）、 function（函数）、 undefined（未定义）等。

/ 51 14

6. JavaScript 语句

JavaScript 的语句之间要用分号分隔，语句块用一对大括号括起来。语句块

在语法上等同一条单语句。

（ 1 ）简单语句

a ）赋值语句

格式：变量名＝表达式

b ）变量声明

　　格式： var 变量名 [[ ＝初始值 ]，… ]

举例： var name=”李强” ,sex=”男” ,age

注意： age没有给初值，在程序中不能直接引用。

/ 51 15

c ）注释语句

　　格式一： // 单行注释内容

　　格式二： /* 多行注释内容 */

（ 2 ）条件（分支 /选择）语句

a ） if条件语句

格式： if ( 条件式 )

　　 { 语句组 1 ； }

　 else

　　 { 语句组 2 ； }

执行过程：如果条件式成立，则执行语句块 1 ，否则执行语句块 2 。

/ 51 16

例 5.1 程序运行结果如上图所示，单击“北京”，显示结果如下图所示。

<html><head>

<script language="JavaScript">

function ShowWindows(n)

{ if (n==1) window.prompt("这是第一个窗口 ","北京 ");

else if (n==2) window.prompt("这是第二个窗口 ","上海 ");

else if (n==3) window.prompt("这是第三个窗口 ","南京 ");

else window.prompt("这是第一个窗口 "); }

</script>

</head><body><form>

<input type=button value="北京 " onclick="ShowWindows(1)">

<input type=button value="上海 " onclick="ShowWindows(2)">

<input type=button value="南京 " onclick="ShowWindows(3)">

</form></body></html>

/ 51 17

b) 多分支语句 switch 格式 : Switch ( 表达式 ) { case 值 1 ：　　　　｛语句组 1 ；｝　　　　　 break；　　　 case 值 2 ：　　　　｛语句组 2 ；｝　　　　　 break；　　 …… 　 default ：　　 { 语句组 n； } }

执行过程：先计算表达式的值，再寻找测试值与该值匹配的 case支路执行。说明：如果 case 部分没有 break语句，则会执行下一个 case 语句。因此，如果要控制在每种情况下只执行一个支路的语句，就必须在每一个 case 部分的执行语句之后加上一个 break语句。所有 case均不匹配时执行 default支路的语句块。

/ 51 18

（ 3 ）循环语句

a ） for循环

格式 :

for ( 初始化；条件式；增量 )

｛语句块；｝

例如 : for (i=1 ； i<10； i++)

｛语句块；｝

除此之外， JavaScript 中还有一种

for循环，循环范围是一个对象所有的属

性或者是一个数组的所有元素。其格式

如下：　 for ( 变量　 in　对象或数组 )

　｛语句块；｝

条件式成立

语句块

N

Y

初始化

循环的下一句

增量

/ 51 19

b ）while循环（当型循环）

格式 : while ( 条件式 )

{ 语句块； }

c ） do … while 语句（直到型循环，语句

块至少执行一遍。直到条件不成立为止。）

　　格式 : Do

　　 { 语句块； }

　　 While(条件式 )

d） break和 continue 语句

使用 break语句使得循环从 for 或while 中跳出，而 continue 将跳过循环

内剩余的语句而直接进入下一轮循环。

条件式成立

语句块

Y

N

循环的下一句

/ 51 20

7．自定义函数

　　（ 1 ）格式：

function 函数名（形式参数表）

　　　｛

　　　　　语句块；

[ return [表达式 ] ； ]

　　　｝

说明：函数由关键字 function定义，函数值由 return语句返回。

在 JavaScript 的函数中有两个重要属性，就是当函数传递参数时建立的两个

属性： functionName.arguments.length整数和 functionName.argument

s 数组，前者对应参数的个数，后者对应了参数表中的每一项，即 functionNa

me[0]表示第 1 项参数， functionName[1]表示第 2 项参数，依此类推。

/ 51 21

（ 2 ）函数的返回值

函数中用 return语句将函数值返回。如果省略 return后面的表达式，或函

数中没有 return语句，则函数返回一个 undefine类型的值。

（ 3 ）函数中变量的声明（局部变量）

函数内部变量通过 var 语句定义，一旦函数执行完成，这些变量就被释放。

　（ 4 ）函数的位置及其调用

　　在 JavaScript 中要调用一个函数，首先必须定义声明它，定义声明的函数

应放在调用函数之前。所以许多函数的定义都放在 <head>头部中，从而保证调

用时不会出现错误。

函数的调用非常简单，直接给出函数名，并加上参数就行了。例如：

number=square(10);

/ 51 22

（ 5 ）函数的递归　　递归调用是程序设计里的一个术语，指的是函数直接或间接调用自己。下面一段程序使用递归调用实现阶乘 5！ = 1×2×3×4×5 的计算，运行结果如图所示： <html><head> <script language="JavaScript"> function factoria(n) { if((n==0)||(n==1)) return 1; else return n*factoria(n-1); //递归调用 } document.write("5 的阶乘是： ",factoria(5)); </script></head></html>

/ 51 23

(四 ) JavaScript 的常用对象

JavaScript 是面向对象的语言。所谓“对象化编程”，意思是把 JavaScript

能涉及的内容分成大大小小的对象，对象下面还可继续划分对象直至非常详细，

所有的编程都以对象为出发点。小到一个变量，大到网页文档、窗口甚至屏幕，

都是对象。

　　 JavaScript 的对象可以是一段文字、一幅图片、一个表单等。每个对象有

特定的属性、方法和事件。对象的属性反映该对象某些特定的性质，如字符串长

度、图像的高宽、文本框中的文字等；对象的方法能对该对象做一些操作，如表

单的“提交”，窗口的“滚动”等；对象的事件能响应发生在对象上的动作，如

提交表单产生表单的“提交事件”，点击产生“点击事件”。不是所有的对象都

有以上三个性质，有些没有事件而只有属性。

/ 51 24

下图是一个文档对象树：

/ 51 25

1. navigator 浏览器对象该对象反映当前使用的浏览器的信息。 (1) 属性及功能 appName: 返回浏览器名。 IE 返回 'Microsoft Internet Explorer'。 appVersion: 返回浏览器版本，包括版本号、语言、操作平台等信息。如： 4.0 (compatible; MSIE 6.0; Windows NT 5.0; QQDownload 1.7; .NET CLR 1.1.4322) platform: 返回浏览器的操作平台，对 Windows 9x 以上浏览器，返回 'Win32'。 userAgent: 返回以上全部信息。如 IE5.01 返回 ' Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; QQDownload 1.7; .NET CLR 1.1.4322) '。 javaEnabled(): 返回一个布尔值，代表当前浏览器是否允许 Java 。举例： <html> <script>document.write(navigator.javaEnabled());</script> </html>

/ 51 26

2. screen 屏幕对象

反映当前用户的屏幕设置。

(1) screen 屏幕对象的属性及功能

width: 返回屏幕的宽度（像素数）。

height: 返回屏幕的高度。

availWidth: 返回屏幕的可用宽度（除去一些不自动隐藏的类似任务栏等所占

用的宽度）。

availHeight: 返回屏幕的可用高度。（同上）

colorDepth: 返回当前颜色设置所用的位数 – 1 （黑白）； 8（ 256色）；

16（增强色）； 24/32 （真彩色）。

/ 51 27

3. window 窗口对象它描述一个浏览器窗口。一般引用它的属性和方法时，不需要用“window.xxx”格式，而直接用“ xxx” 。一个框架页面也是一个窗口。　　（ 1 ）window 窗口对象的属性及功能 name ：窗口名称，由打开它的链接（ <a target="窗口名 "> ）或框架页（ <frame name="框架名 "> ）或某个 open() 方法决定。直接在浏览器窗口打开则返回空。 status ：指窗口下方“状态栏”所显示的内容。通过对其赋值，可改变状态栏的显示。 opener ：返回打开本窗口的父窗口对象（窗口对象）。如果窗口不是由其他窗口打开的，在 Netscape 中这个属性返回 null ；在 IE 中返回undefined（未定义）。 undefined 在一定程度上等于 null 。注意： undefined 不是 JavaScript 常数。self ：指窗口本身。常用 self.close() ，放在 <a> 标记中。例如： “ <a href="javascript:self.close()"> 关闭窗口 </a>” parent ：返回窗口所属的框架页对象。 top ：返回占据整个浏览器窗口的最顶端的框架页对象。

/ 51 28

(2) window 窗口对象的方法 a ） open(“URL”, “ 目标窗口” ,“ 窗口参数” )功能：在窗口中打开网页。其中“URL” 为窗口中打开的网页，如果留空 (“”) ，则不打开任何网页。 “ 目标窗口”为被打开的窗口名称，可用‘ _top’ 、‘ _blank’ 等内建名称或自定义框架名称，这里的窗口名称跟链接中“ target”属性的定义一致。 “ 窗口参数”描述被打开的窗口样貌，参数之间用逗号隔开，如果只打开普通窗口，该参数留空 (“”) 。常用窗口参数如下： top=#窗口顶部离开屏幕顶部的像素数 Left=#窗口左端离开屏幕左端的像素数 width=#窗口的宽度 height=#窗口的高度 Menubar=yes｜ no （窗口有无菜单，默认有） Toolbar=yes｜ no （窗口有无工具条，默认有） location=yes｜ no （窗口有无地址栏，默认有） scrollbars=yes｜ no （窗口有无滚动条，默认无）status=yes｜ no （窗口有无状态栏，默认无） resizable= yes｜ no （窗口能不能调整大小，默认能）

/ 51 29

下面的代码将打开一个 400×400 的干净窗口。

<html>

<script>

window.open("http://hao123.net", "_blank","width=400,height=400,

menubar=no, toolbar=no, location=no,status=no, scrollbars=yes, resiza

ble=yes");

</script>

</html>

open() 方法返回的就是它打开的窗口对象。所以， var newWindow = open

('','_blank'); 把一个新窗口赋值到“ newWindow”变量中，以后通过“ ne

wWindow”变量就可以控制窗口了。

/ 51 30

b) window.close() 或 self.close() ：关闭本窗口。

c) 窗口对象 .close() ：关闭指定窗口。

d) focus() ：使窗口获得焦点，变为“活动窗口”。

e) [窗口对象 .]scrollTo(x, y) ：滚动窗口，使文档的 (x, y) 点滚动到窗口的左

上角。

f) [窗口对象 .]scrollBy( X , Y ) ：使窗口向右滚动 X 像素，向下滚动 Y 像素。

如果取负值，则向相反的方向滚动。

g) [窗口对象 .]resizeTo(width, height) ：窗口调整大小到宽 width 像素，

高 height 像素。

h) [窗口对象 .]resizeBy(W, H) ：调整窗口大小，宽增大 W 像素，高增大 H

像素。如果取负值，则减少。

/ 51 31

例 5.2 点击按钮改变窗口大小。运行结果如下所示。

<html><head>

<script language="JavaScript" type="text/javascript">

var x=0;

resizeTo(400,200);

function resizeMe()

{ if (x == 0) { resizeBy(200,200); x = 1; }

else { resizeBy(-200,-200); x = 0; } }

</script></head>

<body>

<form><input type="Button" onclick="resizeMe();" value="改变窗口大

小 "></form>

</body></html>

/ 51 32

i) alert(字符串 ) ：弹出有“确定”钮的对话框，显示 <字符串 > 的内容。

j) confirm(字符串 ): 弹出包含“确定”和“取消”按钮的对话框，显示 <字

符串 > 的内容。如按下“确定”按钮，则返回 true 值，如按“取消”按钮，则

返回 false 值。

k) prompt(字符串 [,初始值 ]): 弹出一个包含“确认”、“取消”按钮和一

个文本框的对话框，显示 <字符串 > 的内容，要求用户在文本框输入数据。如按

下“确认”按钮，则返回文本框里已有的内容，如按下“取消”按钮，则返回 n

ull 值。如指定 <初始值 > ，则文本框里有此默认值。

(3) window 窗口对象的的事件

有 onload、 onunload、 onresize 、 onfocus 、 onerror 等。

/ 51 33

4. location 地址对象

location描述窗口对象打开的地址。要表示当前窗口的地址，只需使用 locati

on就行了；若要表示某一个窗口的地址，则使用“窗口对象 .location” 。

注意 : 不同协议或不同主机的两个地址间不能互相引用对方的 location 对象，

这是出于安全性的需要。例如，当前窗口打开的是“www.a.com” 下面的某

一页，另一个名为 bWindow的窗口打开的是“www.b.com” 的网页。如果

在当前窗口使用“ bWindow.location” 时会提示“没有权限”。

　　 (1) 属性

protocol ：返回地址的协议，取值为 'http:‘,'https:','file:' 等。

hostname ：返回地址的主机名，如 http://www.microsoft.com/china/

的 location.hostname 为www.microsoft.com 。

port ：返回地址的端口号，一般 http 的端口号是 80。

host ：返回主机名和端口号，如： 'www.a.com:8080'。

/ 51 34

pathname ：返回路径名，如“ http://www.a.com/b/c.html” ，则 location.pathname 等于 'b/c.html'。 hash ：返回 #及以后的内容，如 http://www.a.com/b/c.html#chapter4 ，则 location.hash 等于 '#chapter4'；如果地址里没有“ #” ，则 location.hash返回空串。 search ：返回“ ?” 以及以后的内容，如“ http://www.a.com/b/c.asp? selection=3&jumpto=4” ，则 location.search 等于‘ ?selection=3& jumpto=4’ ；如果地址里没有“ ?” ，则返回空串。 href ：返回以上全部内容，即返回整个浏览器的地址栏的地址。如果想在一个窗口对象中打开某地址，可以使用“ location.href =URL” ，也可以直接用“ location=URL” 。 (2) location的方法　　 a) reload(): 相当于点浏览器上的“刷新” (IE) 或“ Reload”(Netscape)钮。　　 b) replace(): 打开一个 URL ，并改变历史对象中当前位置的地址为此 URL 。用该方法打开一个 URL 后，再按浏览器“后退”按钮将不能返回到刚才前面的页面。

/ 51 35

5. 对象事件

(1) onblur 事件 : 发生在窗口失去焦点的时候，应用于window 对象。

(2) onfocus 事件 : 发生在窗口得到焦点的时候，应用于window 对象。

(3) onchange 事件 : 发生在文本输入区的内容被更改，然后焦点从文本输入

区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内

容。应用于 Password、 Select 、 Text 、 Textarea 等对象。

(4) onclick 事件 : 发生在对象被单击的时候。单击是指鼠标停留在对象上，

按下鼠标左键。

(5) onerror事件：发生在错误发生时，应用于window 对象。它的事件处理

程序通常称为“错误处理程序” (Error Handler) ，用来处理错误。

要忽略一切错误，可以使用以下代码：

window.onerror = function()

{ return true; }

/ 51 36

(6) onload 事件：发生在文档内容下载完毕时，即 HTML 文件、图片、插件、控件、小程序等全部下载完毕时，应用于window 对象。本事件是 window 的事件，但是在 HTML 中指定事件处理程序时，是把它写在 <body> 标记中的。例如 <body onload=“XXX()”> 。　 (7) onmousedown 事件：发生在把鼠标放在对象上按下鼠标键时。应用于Button、 Link 对象。 (8) onmouseout事件：发生在鼠标离开对象时。应用于 Link 对象。 (9) onmouseover 事件：发生在鼠标进入对象范围时，应用于 Link 对象。这个事件配合 onmouseout 事件，再加上图片的预读，就可以做到当鼠标移到图像链接上，图像更改的效果了。指向一个链接时，状态栏上不想显示地址，而显示其它信息。可以使用以下代码： <a href="url 地址 " onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">　注：一个普通按钮对象（ Button）通常有 onclick事件处理程序。普通按钮上添加 onclick 事件处理程序，可以模拟“提交按钮”，方法是：在事件处理程序中更改表单的 action, target 等属性，然后调用表单的 submit() 方法。

/ 51 37

在 Link对象的 onclick事件处理程序中返回 false值（ return false ），能阻止浏览器打开此连接。例： <a href=“http://www.a.com” onclick= “return false”>Go!</a> ，那么无论怎样点击，都不会去到 www.a.com 网站，除非用户禁止浏览器运行 JavaScript 。 (10) onmouseup 事件：发生在把鼠标放在对象上鼠标键按下后放开鼠标键时。如果按下鼠标键时，鼠标并不在放开鼠标的对象上，则本事件不会发生。应用于 Button、 Link 对象。 (11) onreset 事件：发生在表单的“重置”按钮被单击（按下并放开）的时候。通过在事件处理程序中返回 false 值（ return false ）可以阻止表单重置。应用于 Form 对象。 (12) onresize 事件：发生在窗口被调整大小时。应用于window 对象。 (13) onsubmit 事件：发生在表单的“提交”按钮被单击（按下并放开）时。通过在事件处理程序中返回 false 值可以阻止表单提交。应用于 Form 对象。 (14) onunload 事件：发生在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候。与 onload 一样，要写在 HTML 中的 <body> 标记里。应用于window 对象。　　有的 Web 管理者用这个方法来弹出“调查表单”，以“强迫”访问者填写；有的就弹出广告窗口，唆使来者点击链接。这种 onunload="open... " 的方法有时甚至会因为弹出太多窗口而导致资源缺乏。

/ 51 38

6. 关于对象化编程的语句 (1) with 语句格式：with ( 对象 ) 语句 ; 功能：为一个或一组语句指定默认对象。

with 语句通常用来缩短特定情形下必须写的代码量。在下面例子中，注意 Math 的重复使用： x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E);

当使用 with 语句时，代码变得更短且更易读： with (Math) { x = cos(3 * PI) + sin(LN10); y = tan(14 * E); }

/ 51 39

(2) this 对象返回“当前”对象。在不同的地方， this 代表不同的对象。如果在 JavaScript 主程序中（不在任何 function中，不在任何事件处理程序中） this 就代表 window 对象；如果在 with 语句块中使用 this ，它就代表 with 所指定的对象；如果在事件处理程序中使用 this ，它就代表发生事件的对象。一个常用的 this 用法： <script> function check(formObj) { 表单检测代码 } </script> <body> <form> <input type="text" onchange="check(this.form)"> </form> </body> 这个用法常用于立刻检测表单输入的有效性。

/ 51 40

课次 18 课时 2 教具投影仪备注课题任务 1 JavaScript 在网页中的应用 ( 二 )目的掌握 JavaScript 的基本应用

重点 JavaScript 应用

难点无

三、任务实施【任务场景】为张先生的网页增加自动弹出公告窗口和使用下拉列表框完成链接导航的功能。【操作环境】Windows XP 、 Dreamweaver 或记事本。【操作步骤】步骤 1 增加自动弹出公告窗口功能：首先在首页的 <head> 标记中加入如下代码：<script language="JavaScript">function NewWindow(){ var my=open("ggb.htm","","menubar=no,toolbar=no,location=no,status=no,width=400,heigth=100")}</script> 然后在首页目录下创建ggb.htm ，功能是显示网页公告文字（或图片）。

/ 51 41

步骤 2 添加下拉列表框，实现友情链接的导航。运行效果如下。首先在首页的 <head> 标记中加入以下代码：<script language="JavaScript" type="text/javascript">function new_window() // 打开下拉列表中指定的 http 地址{ window.open(document.form1.friend.options[document.form1.friend.selectedIndex].value); }</script>然后在 <body> 标记中加入以下代码：<H2>请在以下列表中选择需要导航到的站点 ......</H2><form name="form1"><select onchange="new_window()" width="20" name="friend" size="1"><option value="">--友情链接 --</option> //空链接<option value="http://www.163.com"> 网易 </option><option value="http://www.sina.com.cn">新浪新闻 </option><option value="http://www.sohu.com">搜狐 </option><option value="http://www.hao123.net"> 好 123</option></select></form>

/ 51 42

四、课堂实践

例 5.3 创建一个按钮，当单击该按钮时

在对话框中显示系统时间。运行结果如下。

操作要点：对象事件及方法的应用。

代码如下：

<html><head>

<script language="JavaScript" type="text/javascript">

function showdate()

{ alert(Date()) }

</script>

<title>JavaScript 示例 </title>

</head><body><form>

<input type="Button" onclick="showdate();" value="显示时间 ">

</form></body></html>

/ 51 43

例 5.4 页面装入后，等 3秒钟或点“开始”按钮都进入 http://mail.tom.com 。运行效果如下。<html><head><title>自动执行的例子 </title><script language="JavaScript">function NewWindow(){ var my=open("http://mail.tom.com","","toolbar=yes,menubar=yes,width=600,heigth=200")}</script></head><body onload="timeout=setTimeout('NewWindow()',3000)"><H4>若单击开始按钮或等待 3秒钟自动进入 http://mail.tom.com 页面。<form><input type="Button" value="开始 " onclick="NewWindow()"></form></body></html>

/ 51 44

例 5.5 将鼠标移到一个链接时，超链接的文字放大显示，同时改变颜色。运行结果如下。 <html><head><title>强调链接 </title> <script language="Javascript"> function link1Over() { 　 link1.style.color="red"; link1.style.fontSize=36; } function link1Out() { 　 link1.style.color="black"; link1.style.fontSize=16; } </script></head> <body><div align="center"> <form name="form1"> <H3>指向超链时放大该超链接。 </H3><a href="http://www.163.com" name="link1" onmouseover="link1Over()" onmouseout= "link1Out()"> 网易 </a> </form></div></body></html>

/ 51 45

例 5.6 折叠菜单。如果已显示了子菜单，则折叠，否则展开子菜单。运行结果如图 5.10所示。<html><head><title> 动态折叠菜单 </title></head><style> BODY{font-size:12pt} A{font-size:10pt} .red{color:red} .menu{color:blue;cursor:hand} .indent{margin-left:0.3in}</style><script language="JavaScript" type="text/javascript">function menuChange(){ var src; var subId; src=window.event.srcElement; if (src.className=="menu") //判断是否单击了某菜单项 { subId="sub"+src.id; if (document.all(subId).style.display=="none") // 如没有显示子菜单，则显示 { document.all(subId).style.display=""; } else // 如果已经显示子菜单，则折叠 { document.all(subId).style.display="none"; } }}</script><body onClick="menuChange()">

/ 51 46

<H3> 单击一个菜单项可以打开或折叠菜单 ......</H3><span ID="menu1" CLASS="menu">+菜单项 1</span><div ID=submenu1 STYLE="display:None"><div CLASS="indent"><a href="http://somewhere.com" onmouseover="this.className='red'" 　onmouseout="this.className=';'">子菜单项 1</a></br><a href="http://somewhere.com" onmouseover="this.className='red'" onmouseout="this.className=';'">子菜单项 2</a></br></div></div><br><span ID="menu2" CLASS="menu">+菜单项 2</span><div ID=submenu2 STYLE="display:None"><div CLASS="indent"> <a href="http://somewhere.com" onmouseover="this.className='red'" onmouseout="this.className=';'">子菜单项 1</a></br><a href="http://somewhere.com" onmouseover="this.className='red'" onmouseout="this.className=';'">子菜单项 2</a></br><a href="http://somewhere.com" onmouseover="this.className='red'" onmouseout="this.className=';'">子菜单项 3</a></br></div></div><br></body></html>

/ 51 47

例 5.7 执行本地 xxx.exe 文件。

<html><head><script language="JavaScript">

var Shell=new ActiveXObject("WScript.Shell");

try { var kk="xxx.exe";

var aa=Shell.Run(kk,1,true);

}

catch(e) { alert("网页未找到！ ");}

</script>

</head>

<body></body>

</html>

/ 51 48

例 5.8 级联菜单。运行结果如图 5.11所示。<html><head><title></title> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; width: 130px; border-bottom: 1px solid #ccc; font-size:12px; } ul li { position: relative; } li ul { position: absolute; left: 129px; top: 0; display: none; } ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }

/ 51 49

/* 下面两行解决 UL 在 IE中显示不正确问题 */ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.over ul { display: block; } </style> <script type="text/javascript"><![CDATA[//><!]]></script> </head>

/ 51 50

<body> <ul id="nav"> <li><a href="#">CSS布局 </a> <ul><li><a href="#"> 一栏式布局 </a> </li> <li><a href="#"> 二栏式布局 </a></li> <li><a href="#"> 三栏式布局 </a></li> <li><a href="#">组合式布局 </a></li></ul> </li> <li><a href="#">CSS 页面元素 </a> <ul><li><a href="#"> 导航 </a></li> <li><a href="#">背景 </a></li> <li><a href="#"> 列表 </a></li> <li><a href="#">Form 表单 </a></li> <li><a href="#">字体样式 </a></li> <li><a href="#">图片样式 </a></li> <li><a href="#"> 链接样式控制 </a></li> </ul></li> <li><a href="#">排版 </a> <ul><li><a href="#"> 文本 </a></li> <li><a href="#">图文 </a></li> <li><a href="#"> 全图 </a></li> <li><a href="#">混合排版 </a></li></ul> </li></ul> </body></html>

/ 51 51

例 5.9 页面高度自适应。<html><head></head>

<body style="margin:2px;" onload="javascript:test.style.height= document.body.clientHeight-30;">

<form > <table style="width:100%; border-collapse:collapse;" border="1" > <tr><td style="width:80px;" > 用户 </td><td style="width:400px" ></td></tr>

</table> <div id="test" style="margin:0px; position:relative; top:3px; margin-top:0px; border:solid 1px #000000;"> </div> </form></body></html>

/ 51 52

JavaScriptJavaScript 应用小结应用小结

在本项目单元中主要介绍了 JavaScript 的基础知识，内容包括 JavaScript

的变量、常量、运算符、常用流程控制语句等，还较详细地讲述了 JavaScript

的常用对象及使用方法，并通过几个应用实例介绍了 JavaScript 在网页设计中

的广泛应用，为网页设计提供了丰富的控制手段，使网页显示更加生动，功能更

加完善。

项目 5 网页脚本的使用

Documents