第 5章 脚本语言的应用本章训练目标:
(1) 通过示例掌握脚本语言的功能 。
(2) 通过案例掌握 Window对象的基本使用方法 。
(3) 通过案例学会应用 JavaScript丰富网页 。
(4) 通过案例学会应用 VBScript丰富网页 。
(5) VBScript脚本语言应用实训 。 通过实训综合运用所学内容,完成计算器的制作 。
(6) JavaScript脚本语言应用实训 。 通过实训综合运用所学内容,完成银行网站利率查询栏目的制作 。
脚本语言的应用
5.1 脚本语言的功能
5.2 window对象应用
5.3 JavaScript(JScript)的应用
5.4 VBScript的应用
5.5 VBScript应用实训 ——计算器的制作
5.6 JavaScript应用实训 ——银行利息查询
练 习
上机练习
实训课题
5.1 脚本语言的功能
5.1.1 脚本语言概述脚本是一种能够完成某些功能的小程序段 。 这些程序段在程序运行过程中被逐行解释执行 。 在脚本中使用的命令和语句集被称为脚本语言 。 脚本语言可嵌入 HTML页面,并被浏览器解释执行 。
脚本分服务器端脚本和客户端脚本两种,服务器端脚本是在服务器上运行的脚本程序,客户端脚本是在客户机上运行的脚本程序 。
5.1.2 JavaScript脚本语言应用示例 ——动画效果的应用
(1) 任务要求:要求页面上有一幅图像,在图像上有文字
“请击我” (请注意文字颜色的选择 ),当用户点击图像时,
图像有所动作。
(2) 完成以上任务的代码清单图 5.1 JavaScript脚本语言示例 图 5.2 VBScript脚本语言示
(3) 页面代码说明
5.1.3 VBScript脚本语言应用示例 ——图像互换位置
(1) 任务要求:要求页面上有两幅图像及有关图像说明的文字,当用户用鼠标左键单击页面时,图像交换位置。界面如图 5.2所示。
(2) 完成以上任务的代码清单
(3) 代码说明
5.2 window对象应用
5.2.1 对象的概念对象 (Object):对象是组成软件的基本模块,每个对象是一个封装起来的独立模块,完成某个特定的任务 。 对象有属性 (property),方法 (method)和事件 (even)。
(1) 属性:指对象表现出来的状态或特征。
(2) 方法 (Method):指与特定对象相关联的某些操作。
(3) 事件:指对象所碰到的事情,例如用户用鼠标左键单击一个按钮等。
5.2.2 window对象的构成
window对象和它的最主要一个下层对象的结构见图 5.3。
5.2.3 window对象应用案例 1——状态栏内容的更新图 5.3 window对象图 5.4 window对象应用案例 1
(1) 任务要求:页面上有一个按钮,当用户把鼠标移动到按钮上时,状态栏输出,朋友们好 !,,3000 ms(毫秒 )
后状态栏输出,欢迎 !,。
(2) 完成该任务的页面代码 ex05-003.html清单
(3) 代码说明
5.2.4 window对象应用案例 2——触发事件对象的信息获取
(1) 任务要求:页面如图 5.5所示,当用户用鼠标在页面不同位置上单击时,弹出对话框,显示该位置触发 onClick
事件的对象的标记名和它的 ID。
(2) 实现以上任务的页面代码 ex05-004.html清单
(3) 页面代码的说明
5.2.5 window对象的属性,方法和事件简介
1,?window对象的属性表 5.1 window对象的属性
2,?window对象的方法属性名称 说 明 范 例
name 当前窗口的名字 window.name
parent 当前窗口的父窗口 parent.name
self 当前打开的窗口 self.status=“你好,
top 窗口集合中的最顶层窗口 top.name
status 设置当前打开窗口状态栏的显示数据
self.status=“欢迎,
defaultStatus 当前窗口状态栏的缺省数据 self.defaultStatus=“欢迎,
表 5.2 window对象的方法方法名称 说 明 范 例
alert() 创建一个带,确定,按钮的对话框 window.alert(?输入错误 ! ’ )
confirm() 创建一个带,确定,和,取消,按钮的对话框 window.confirm(?是否继续 ’ )
close() 关闭当前打开的浏览器窗口 window.close()
open() 打开一个新的浏览器窗口 window.open(URL,,新 窗 口名,,新窗口设置 )
prompt() 创建一个带,确定,,,取消,,按钮及输入字符串字段的对话框 window.prompt(?请 输入 电话号码 ’ )
setTimeOut() 设置一个时间控制器 window.setTimeOut(?clearTimeOut()?,3000)
clearTimeOut() 清除原来时间控制器内的时间设置 window.clearTimeOut()
3.?window对象的事件表 5.3 window对象的事件
5.2.6 document对象的属性,方法和事件简介
window对象的下层又有 location,history,even和 document
等对象,其中使用最多的是 document对象 。
1,?document对象的属性事 件 使 用 说 明
onLoad 网页载入浏览器时发生
onUnLoad 网页从浏览器窗口中删除时发生
onBeforeUnLoad 网页被关闭前发生
OnResize 用户调整窗口大小时发生
OnScroll 用户滚动窗口时发生
OnError 载入的网页产生错误时发生表 5.4 document对象的属性
2,document对象的方法表 5.5列举了 document对象的主要方法和它们的使用说明 。
3,document对象的事件表 5.6列举了 document对象的鼠标事件和它们的使用说明 。
属性名称 说 明 范 例
alinkColor 页面中活动超级链接的颜色 document.alinkColor=“red”
bgColor 页面背景颜色 document.bgColor=“FF0000”
fgColor 页面前景颜色 document.fgColor=“FF000F”
linkColor 页面中未曾访问过的超级链接颜色 document.linkColor=“red”
vlinkColor 页面中曾经访问过的超级链接的颜色 document.vlinkColor=“green”
lastModified 最后一次修改页面的时间 date= lastModified
location 页面的 URL地址 url_info=document.location
title 页面的标题 tit_info=document.title
表 5.5 document对象的方法表 5.6 document对象的鼠标事件方法名称 说 明 范 例
clear() 清除文件窗口内的数据 document.clear()
close() 关闭文档 document.close()
open() 打开文档 document.open()
write() 向当前文档写入数据 document.write(“你好 !,)
writeln() 向当前文档写入数据,并换行 document.writeln(“你好 !,)
鼠 标 事 件 使 用 说 明
onClick 在页面上单击鼠标左键时发生
ondblClick 在页面上双击鼠标左键时发生
onMouuseDown 在页面上按下鼠标左键时发生
onMouseMove 在页面上移动鼠标时发生
onMouseOut 鼠标离开对象时发生
onMouseOver 鼠标移到对象上时发生
onMouseUp 用户放开鼠标左键时发生
onSelectStart 用户开始选取对象内容时发生
onDragStart 用户以拖曳方式选取对象时发生表 5.7列举了 document对象的按键事件和它们的使用说明 。
表 5.7 document对象的按键事件按键事件 使 用 说 明
onKeyDown 用户按下按键时发生
onKeyPress 用户按下按键时发生 onKeyDown事件,然后产生 onKeyPress事件,如果用户按住按键不放,则产生一系列 onKeyPress事件
onKeyUp 用户放开按键时发生
onHelp 用户按下系统定义的帮助键时发生
5.3 JavaScript(JScript)的应用
5.3.1 JavaScript应用案例 1——客户端输入信息验证
(1)任务要求:在客户端验证用户输入数据
(2)实现上述任务的代码 ex05-005.html清单
(3)代码说明
5.3.2 JavaScript语法简介
1.变量变量名必须以字母或下划线,_”开始,后面的字符可以是字母、数字或下划线。 JavaScript内部定义的保留字不能用作变量名。
2.表达式表达式是由变量、常量和运算符按一定规则组成的集合,
表达式的值可以是数字、字符串或布尔量。
3,运算符
JavaScript的运算符有:赋值运算符、算术运算符、逻辑运算符、比较运算符、字符串运算符和位运算符。
表 5.8 赋值运算符的使用表 5.9列出算术运算符的使用说明 。
表 5.10列出了逻辑运算符的使用说明运算 符 范 例 使 用 说 明
= z=x+y 把=号右边表达式的值赋给左边的变量
+= x+=y x+=y与 x=x+y等同
-= x-=y x-=y与 x=x-y等同
*= x*=y x*=y与 x=x*y等同
/= x/=y x/=y与 x=x/y等同
%= x%=y x%=y与 x=x%y等同 (x除以 y,把余数赋给 x)
表 5.9 算术运算符的使用表 5.10 逻辑运算符的使用运 算 符 范 例 使 用 说 明
+ 1+2,-23.6+678 加
- 654-234,345.6-56.8 减
* 34*56,45.6*56.7 乘
/ 64/8,456.9/34.5 除
% 5%3 求模 (求除法的余数 )
++ x++ 加加,x++相当于 x=x+1
-- x-- 减减,x--相当于 x=x-1
运 算符 范例 使 用 说 明
&& A&&B 逻辑与,当操作符两边表达式的值均为 true时,结果为 true,否则结果为false
|| A||B 逻辑或,A和 B中有一个的值为 true时,结果为 true; A和 B都是 false,结果为 false
! !A 求反,若 A的值为 true,结果为 false; A的值为 false,结果是 true
表 5.11 比较运算符的使用表 5.12 位运算符的使用运算符 范例 使 用 说 明
== A==B 相等比较,如果变量 A和 B相等,结果为 true;如果不等,结果为 false
!= A!=B 不相等比较,如果变量 A和 B不相等,结果为 true;如果相等,结果为 false
> A>B 大于比较,如果变量 A大于 B,结果为 true;反之,结果为 false
< A<B 小于比较,如果变量 A小于 B,结果为 true;反之,结果为 false
>= A>=B 大于等于比较,如果变量 A大于等于 B,结果为 true; A小于 B,结果为false
<= A<=B 小于等于比较,如果变量 A小于等于 B,结果为 true; A大于 B,结果为false
运 算 符 范 例 使 用 说 明
& A&B 按位与运算
| A|B 按位或运算
^ A^B 按位异或运算
~ A 按位取反运算
<< A<<B 左移运算
>> A>>B 右移运算
4,运算符的优先级
5,JavaScript的程序控制结构
6,函数在 JavaScript中可以使用函数,函数用来封装在程序中需要多次使用的模块 。 函数必须先定义,后使用 。 由于浏览器先执行 HTML文档中的 <HEAD>模块,所以 JavaScript
中常把自定义函数放在 <HEAD>模块中,然后在 HTML文档的主体 <BODY>模块中调用函数 。
5.3.3 JavaScript应用案例 2——状态栏文字滚动显示
(1) 任务要求,当用户点击页面上的文字时,状态栏的文字滚动显示 。
(2) 完成如上任务的页面代码 ex05-006.html清单
5.3.4 JavaScript应用案例 3——启动数字钟统计页面持续时间图 5.9 启动数字钟统计网页持续时间
(2) 实现以上任务的页面代码 ex05-007.html清单
(3) 代码说明
5.3.5 JavaScript对象简介
JavaScript不是纯面向对象的语言,它不具备面向对象语言应具有的特性,如类的封装、继承和重载等。
1,创建对象
JavaScript中创建对象的方法与创建函数的方法相似。
2,对象的方法和属性
3,JavaScript的 Date内置对象表 5.13 Date对象的主要方法方 法 名 称 说 明 范 例
getDate() 返回 Date对象中的日期 MyDate.getDate()
getDay() 返回 Date对象一周中的第几天数,0表示星期日 MyDate.getDay()
getHours() 返回 Date对象中的小时数,其值从 0~ 23 MyDate.getHours()
getMinutes() 返回 Date对象中的分钟数,其值从 0~ 59 MyDate.getMinutes()
getMonth() 返回 Date对象中的月份数,其值从 0~ 11,0代表 1月 MyDate.getMonth()
getSeconds() 返回 Date对象中的秒数,其值从 0~ 59 MyDate.getSeconds()
getTime() 返回 Date对象中表示时间的整数,该时间从 1970年1月 1日午夜开始以毫秒为单位进行计算 MyDate.getTime()
getYear() 返回 Date对象中的年号 MyDate.getYear()
setDate(timevalue) 设置 Date对象中的日期,timevalue的值从 1~ 31 MyDate.setDate(20)
setHours(timevalue) 设置 Date对象中的小时数,timevalue的值从 0~ 23 MyDate.setHours(12)
setMinutes(timevalue) 设置 Date对象中的分钟数,timevalue的值从 0~ 59 MyDate.setMinutes(30)
setMonth(timevalue) 设置 Date对象中的月份数,timevalue的值从 0~ 11,0代表 1月 MyDate.setMonth(5)
setSeconds(timevalue) 设置 Date对象中的秒数,timevalue的值从 0~ 59 MyDate.setSeconds(30)
setYear(timevalue) 设置 Date对象中的年份,timevalue为大于 1900的整数 MyDate.setYear(1999)
5.4 VBScript的应用
5.4.1 VBScript应用案例 1——与用户交互界面的制作
(1) 任务要求:页面上有一个按钮,欢迎用户链接到某个网站。
图 5.10 VBScript应用案例 1的界面
(2) 实现上述任务的代码 ex05-008.html清单
(3) 代码说明
5.4.2 VBScript语法简介
1,VBScript的书写格式
(1)VBScript不区分大小写,声明变量的关键字,Dim”与
,dim”的作用是一样的 。
(2) VBScript没有可见的结束标志,它以换行符为行终止符 。
(3) 如果需要把几行代码写在一行中,使用冒号 (,)把他们分开。
(4) 可以用两种方法进行注释,rem或 (?)号 。
2,变量
(1) 变量名。 (2) 变量的声明。 (3) 变量的初始化。
3,数据类型
VBScript中只有一种数据类型,被称为变体型 (Variant)。变体型包含所有的基本数据类型,所以 VBScript中基本数据类型被称为子类型 (subtype)。变体型是一种特殊的数据类型,
系统可以根据不同的数据子类型来分配内存空间,并以最合适的方式来体现数据类型的特征和行为。
表 5.14 VBScript数据子类型数据子类型 说 明
Empty (空类型 ) 表示刚被声明,还没有被初始化的变量 。 对于数字类型变量,数值为零 。 对于字符串变量,它是 0长度的字符串 (“”)
Null (无值类型 ) 变量不包含任何有效数据
Boolean(布尔类型 ) 变量的值是,True(- 1)或 False(0)
Byte(字节型 ) 长度为一个字节,表示从 0到 255之间的整数
Integer(整型 ) 长度为两个字节,表示从- 32,768到 32,767之间的整数
Long(长整型 ) 长度为四个字节,表示从- 2,147,483,648 到 +2,147,483,647之间的整数
Currency(货币型 ) 表示从- 922,337,203,685,477.5808到 922,337,203,685,477.5807之间的整数
Single(单精度型 ) 长度为四个字节,可以表示浮点数运算中的小数,负数的范围从- 3.402823E38 到 - 1.401298E- 45,正数范围从 1.401298E- 45 到 3.402823E38
Double(双精度型 )
长度为八个字节,可以表示的负数范围从- 1.79769313486232E308 到
- 4.94065645841247E- 324,正数范围从 4.94065645841247E- 324到
1.79769313486232E308
Date(日期类型 ) 它的数值表示日期和时间,范围为 100年 1月 1日到 9999年 12月 31日 。
String(字符串型 ) 它是可变长度字符串,最大字符串长度可达 2兆个字符
Object(对象 ) 是一种特殊的数据类型,可以用来表示对对象的引用
Error(错误 ) 保存 VBScript生成的错误编号
4,运算符
VBScript的运算符有:赋值运算符,算术运算符,逻辑运算符,比较运算符和字符串运算符 。
(1) 赋值运算符 。 赋值运算符用来给变量赋值,VBScript赋值方法比较简单,例如 MyNum=3。
(2) 算术运算符 。 算术运算符用来建立算术表达式,表 5.15列出算术运算符的使用说明 。
表 5.15 算术运算符的使用运 算 符 范 例 使 用 说 明
+ 1+2,-23.6+678 加
- 654-234,345.6-56.8 减
* 34*56,45.6*56.7 乘
/ 64/8,456.9/34.5 除
mod 5mod3 求模 (求除法的余数 )
^ 2^3,5.6^2 求幂
\ 33\8,34.6\4 整除运算符
- -2,-3.14 求负运算符
(3) 逻辑运算符 。 逻辑运算符对两个布尔表达式的值进行逻辑运算,它的返回值是 true或 false,表 5.16列出了逻辑运算符的使用说明 。
表 5.16 逻辑运算符的使用
(4) 比较运算符 。 比较运算符用来比较它的操作数大小,然后返回一个布尔值 (true或 false),表 5.17列出了比较运算符的使用说明 。
运算符 范例 使 用 说 明
and AandB 逻辑与,当操作符两边表达式的值均为 true时,结果为 true,否则结果为false
or AorB 逻辑或,A和 B中有一个的值为 true时,结果为 true; A和 B都是 false,结果为false
not notA 求反,若 A的值为 true,结果为 false; A的值为 false,结果是 true
xor AxorB 异或,A和 B均为 true,或均为 false,结果为 false;反之,A和 B中一为 true一为 false,则结果为 true
(5) 字符串运算符 。 VBScript只有一个字符串运算符,即连接符,&”,使用字符串运算符可以把几个串连接在一起 。 例如,
,字符串 1”&“字符串 2”的返回值是:,字符串 1字符串 2”。
(6) 运算符的优先级。
表 5.17 比较运算符的使用运算符 范例 使 用 说 明
= A=B 相等比较,如果变量 A和 B相等,结果为 true;如果不等,结果为 false
<> A<>B 不相等比较,如果变量 A和 B不相等,结果为 true;如果相等,结果为 false
> A>B 大于比较,如果变量 A大于 B,结果为 true;反之,结果为 false
< A<B 小于比较,如果变量 A小于 B,结果为 true;反之,结果为 false
>= A>=B 大于等于比较,如果变量 A大于等于 B,结果为 true; A小于 B,结果为 false
<= A<=B 小于等于比较,如果变量 A小于等于 B,结果为 true; A大于 B,结果为 false
5,VBScript的程序控制结构
VBScript中对程序流程进行控制的语句可分为两类:
·条件判断:实现条件判断的语句有 if… then… else和 select case语句 。
·循 环 执 行,实 现 循 环 执 行 的 语 句 有 do… loop,for… next 和
while… wend语句 。
(1) 条件语句 if… then… else。
(2) 条件语句 select…case 。 select…case 语句常用来处理多重选择。
(3) 循环语句 do…loop 。
(4) 循环语句 for… next语句
(5) while… wend语句
6,子程序与函数使用 VBScript编写较为复杂的程序需要使用过程 。 一个过程是一段程序,可以供程序的其他部分调用,常用的过程有子程序和函数 。
(1) 子程序。子程序是一段完整、独立的程序,可以从脚本程序的其他地方调用子程序。
(2) 函数。函数是一个独立的程序单元。函数必须先定义后使用。函数可以有返回值。
7,VBScript的内置函数
VBScript的日期 /时间函数主要用于对系统的日期和时间的操作 。
5.4.3 VBScript应用案例 2——客户端验证用户名和密码
(1) 任务要求:在客户端验证用户名和密码,如果用户输入错误则弹出,输入错误,的提示框,请用户再次输入;
如果输入正确,则将信息发送到服务器端,由服务器端应用程序,Response.asp”处理用户信息 。
(2) 实现上述任务的代码 ex05-009.html清单
5.4.4 VBScript应用案例 3——赛跑游戏
(1) 任务要求:制作一个赛跑游戏,页面上有个 boy在跑,
用户用鼠标去追,追上后用鼠标点击,弹出信息框输出
,哇 ! 我被抓到了 !,,同时在状态栏中显示,看谁跑得快 !,,界面如图 5.13所示 。
图 5.14 页面标题动态显示 图 5.13 赛跑游戏
(2) 完成如上要求的代码 ex05-010.html清单
(3) 代码说明
5.4.5 VBScript应用案例 4——页面标题动态显示
(1) 任务要求:使用 DHTML技术,使页面字体动态显示,页面上一行文字的背景及样式不断变化,另一行文字由小变大 。 显示如图 5.14所示 。
(2) 实现如上任务的代码 ex05-011.html清单
(3) 代码说明
5.5 VBScript应用实训 —— 计算器的制作
5.5.1 任务要求
1,任务要求要求制作一个计算器,可以对整数和小数进行加,减,乘,
除运算,计算器的界面如图 5.15所示 。
图 5.15 计算器界面
2,界面中控件的名称及其功能
5.5.2 制作界面
(1) 启动 Frontpage2000,在菜单栏中选择,文件 → 新建 → 网页,,创建一个新页面 。
(2) 设置计算器背景颜色。
(3) 插入文本框 。 在菜单栏中选择,插入 → 表单 → 单行文本框,,在页面中插入一个文本框 。 根据已定义的文本框名及其属性,修改文本框的属性值 。
(4) 插入按钮 。 在菜单栏中选择,插入 → 表单 → 按钮,,插入一个按钮 。 以同样方法插入其他 19个按钮 。 根据已定义的按钮名称及其属性,修改按钮属性值,使之合乎要求 。
图 5.16 设置页面背景颜色
5.5.3 添加 VBScript代码
1,代码中的变量及其作用
2.代码中的子程序及其功能
5.5.4 计算器源代码
5.5.5 在浏览器中测试计算器的功能制作完成后,在浏览器中测试计算器的功能,符合任务要求,完成制作 。
5.6 JavaScript应用实训 —— 银行利息查询
5.6.1 任务要求万通银行网站希望增加一个栏目,用户在界面中输入本金,存款方式和存款时间后,即可得到到期后的本金和利息之和共有多少,以利于客户选择存款方式 。
5.6.2 用户需求分析
5.6.3 用户界面设计图 5.17 银行利率查询界面当客户点击某一项时,在弹出的界面中输入本金和存款时间即可得到所得的本金和利息之和 。 例如,人民币活期储蓄利率查询界面如图 5.18所示 。
图 5.18 人民币活期利率查询界面
5.6.4 用户界面制作 ——框架的应用框架也称为帧 (frame),便于用户在不同内容的网页之间进行跳转,本案例适合使用框架来实现。框架的主要功能是把浏览器窗口划分成几个大小不同块,每个块称为一帧,每个帧是独立的,所有帧的总称为帧集 (frameset)。
1,制作图 5.17所示的银行利率查询界面
(1) 制作左帧。 (2) 制作右帧。 (3) 制作框架。
图 5.19,新建”对话框 图 5.20 新创建的框架网页
Frontpage 2000自动为用户创建了一个框架页面,如图 5.20所示 。
2,制作人民币活期利率查询界面
(1) 界面中控件的名称及其功能 。
(2) 创建一个新网页 。 (3) 插入文本框 。 (4) 插入按钮 。
(5) 根据图 5.18的用户需求,调整页面布局,使之符合用户需求 。
(6) 创建超链接。
(7) 添加 JavaScript代码。
(8) 制作完成,以,rmbH.htm”文件名保存文件,其源代码清单
3,制作其他利率查询界面其他利率查询界面,如人民币定期利率查询界面,人民币零存整取利率查询界面,美元利率查询等界面的制作,与人民币活期利率查询界面的制作大同小异,此处不再一一赘述 。
5.6.5 网页的测试与发布在个人 Web服务器或 Frontpage 2000的,预览,标签中测试页面,
如果没有问题,且满足用户需求,即可在网站发布 。
练 习
1,什么是脚本语言,它的功能是什么?
2,常用的脚本语言有哪几种,它们各有什么特点?
3,如何将脚本嵌入 HTML页面?
4,请举例说明什么是对象,对象的构成是什么?
5,请举例说明对象的属性,方法和事件 。
6,window对象的组成结构是怎样的?
7,window对象的主要属性和方法是什么? 举例说明它们的应用方法 。
8,window下层最主要的对象是什么?
9,document对象的主要属性,方法和事件是什么? 请举例说明它们的使用方法?
10,JavaScript中的函数如何定义,如何调用?
11,JavaScript如何创建对象,如何访问所创建对象的方法和属性?
12,VBScript的数据类型是什么? 它的特点是什么?
13,VBScript中子程序和函数的区别是什么?
14,如何定义和调用 VBScript中的函数和子程序?
上机练习上机练习 1:使用 <SCRIPT>标记把一小段脚本程序嵌入 HTML页面,并在浏览器中显示它的结果 。
上机练习 2:使用脚本语言制作一个具有动画效应的页面 。
上机练习 3:使用 JavaScript编制一段代码,完成以下功能:
(1) 要求用户输入一个电话号码 。
(2) 用确认框检查输入是否正确 (是否为合法输入字符,位长是否合理等 )。
(3) 根据输入给出相应的提示 。
上机练习 4:制作一个页面,页面上有五幅图像,图像等分在一个圆上,当用户点击页面时,图像逆时钟转动 。
上机练习 5:页面上有一幅图像,在状态栏显示有关图像的说明 。 当用户点击图像时,换成另一幅图像,同时状态栏的内容也做相应的变更 。
上机练习 6:制作一个页面,页面上有四个独立的块,每个块显示不同的内容,或图像加文字说明,或表格加文字说明,或表格加图像等等,当用户用鼠标在页面上点击时,将显示该鼠标所在位置对象的标记名和 ID。
上机练习 7:在客户端验证用户输入信息,如果输入正确,允许链接到网站;如果不正确,禁止链接,要求用户界面友好 。
上机练习 8:制作一个页面,状态栏将根据页面内容滚动显示 。
上机练习 9:制作一个数字钟,根据网页下载持续时间进行收费 。
上机练习 10:制作一个打猎游戏,页面上有几个猎物,或在飞或在跑,
用户用鼠标追赶猎物,追上后用鼠标单击猎物,弹出信息框说明猎物被击中,同时猎物消失 。
上机练习 11:为某单位的主页制作标题,使标题具有动态效果 。
实训课题实训课题 1:完善 5.5节计算器的制作,增加累加计算,三角函数计算,对数计算,开方计算等功能 。 请读者完成计算器的界面设计与制作,并使用 VBScript脚本语言完成控件之间的事件响应任务和计算任务 。
实训课题 2:为某企业网站设计并制作一个业务查询栏目 。 当用户输入正确的用户名及口令后,允许用户进行查询 。 请读者完成用户需求分析,确定查询的项目,设计并规划栏目的界面,并使用
JavaScript脚本语言完成控件之间的响应任务和计算任务 (如果存在计算任务 )。
(1) 通过示例掌握脚本语言的功能 。
(2) 通过案例掌握 Window对象的基本使用方法 。
(3) 通过案例学会应用 JavaScript丰富网页 。
(4) 通过案例学会应用 VBScript丰富网页 。
(5) VBScript脚本语言应用实训 。 通过实训综合运用所学内容,完成计算器的制作 。
(6) JavaScript脚本语言应用实训 。 通过实训综合运用所学内容,完成银行网站利率查询栏目的制作 。
脚本语言的应用
5.1 脚本语言的功能
5.2 window对象应用
5.3 JavaScript(JScript)的应用
5.4 VBScript的应用
5.5 VBScript应用实训 ——计算器的制作
5.6 JavaScript应用实训 ——银行利息查询
练 习
上机练习
实训课题
5.1 脚本语言的功能
5.1.1 脚本语言概述脚本是一种能够完成某些功能的小程序段 。 这些程序段在程序运行过程中被逐行解释执行 。 在脚本中使用的命令和语句集被称为脚本语言 。 脚本语言可嵌入 HTML页面,并被浏览器解释执行 。
脚本分服务器端脚本和客户端脚本两种,服务器端脚本是在服务器上运行的脚本程序,客户端脚本是在客户机上运行的脚本程序 。
5.1.2 JavaScript脚本语言应用示例 ——动画效果的应用
(1) 任务要求:要求页面上有一幅图像,在图像上有文字
“请击我” (请注意文字颜色的选择 ),当用户点击图像时,
图像有所动作。
(2) 完成以上任务的代码清单图 5.1 JavaScript脚本语言示例 图 5.2 VBScript脚本语言示
(3) 页面代码说明
5.1.3 VBScript脚本语言应用示例 ——图像互换位置
(1) 任务要求:要求页面上有两幅图像及有关图像说明的文字,当用户用鼠标左键单击页面时,图像交换位置。界面如图 5.2所示。
(2) 完成以上任务的代码清单
(3) 代码说明
5.2 window对象应用
5.2.1 对象的概念对象 (Object):对象是组成软件的基本模块,每个对象是一个封装起来的独立模块,完成某个特定的任务 。 对象有属性 (property),方法 (method)和事件 (even)。
(1) 属性:指对象表现出来的状态或特征。
(2) 方法 (Method):指与特定对象相关联的某些操作。
(3) 事件:指对象所碰到的事情,例如用户用鼠标左键单击一个按钮等。
5.2.2 window对象的构成
window对象和它的最主要一个下层对象的结构见图 5.3。
5.2.3 window对象应用案例 1——状态栏内容的更新图 5.3 window对象图 5.4 window对象应用案例 1
(1) 任务要求:页面上有一个按钮,当用户把鼠标移动到按钮上时,状态栏输出,朋友们好 !,,3000 ms(毫秒 )
后状态栏输出,欢迎 !,。
(2) 完成该任务的页面代码 ex05-003.html清单
(3) 代码说明
5.2.4 window对象应用案例 2——触发事件对象的信息获取
(1) 任务要求:页面如图 5.5所示,当用户用鼠标在页面不同位置上单击时,弹出对话框,显示该位置触发 onClick
事件的对象的标记名和它的 ID。
(2) 实现以上任务的页面代码 ex05-004.html清单
(3) 页面代码的说明
5.2.5 window对象的属性,方法和事件简介
1,?window对象的属性表 5.1 window对象的属性
2,?window对象的方法属性名称 说 明 范 例
name 当前窗口的名字 window.name
parent 当前窗口的父窗口 parent.name
self 当前打开的窗口 self.status=“你好,
top 窗口集合中的最顶层窗口 top.name
status 设置当前打开窗口状态栏的显示数据
self.status=“欢迎,
defaultStatus 当前窗口状态栏的缺省数据 self.defaultStatus=“欢迎,
表 5.2 window对象的方法方法名称 说 明 范 例
alert() 创建一个带,确定,按钮的对话框 window.alert(?输入错误 ! ’ )
confirm() 创建一个带,确定,和,取消,按钮的对话框 window.confirm(?是否继续 ’ )
close() 关闭当前打开的浏览器窗口 window.close()
open() 打开一个新的浏览器窗口 window.open(URL,,新 窗 口名,,新窗口设置 )
prompt() 创建一个带,确定,,,取消,,按钮及输入字符串字段的对话框 window.prompt(?请 输入 电话号码 ’ )
setTimeOut() 设置一个时间控制器 window.setTimeOut(?clearTimeOut()?,3000)
clearTimeOut() 清除原来时间控制器内的时间设置 window.clearTimeOut()
3.?window对象的事件表 5.3 window对象的事件
5.2.6 document对象的属性,方法和事件简介
window对象的下层又有 location,history,even和 document
等对象,其中使用最多的是 document对象 。
1,?document对象的属性事 件 使 用 说 明
onLoad 网页载入浏览器时发生
onUnLoad 网页从浏览器窗口中删除时发生
onBeforeUnLoad 网页被关闭前发生
OnResize 用户调整窗口大小时发生
OnScroll 用户滚动窗口时发生
OnError 载入的网页产生错误时发生表 5.4 document对象的属性
2,document对象的方法表 5.5列举了 document对象的主要方法和它们的使用说明 。
3,document对象的事件表 5.6列举了 document对象的鼠标事件和它们的使用说明 。
属性名称 说 明 范 例
alinkColor 页面中活动超级链接的颜色 document.alinkColor=“red”
bgColor 页面背景颜色 document.bgColor=“FF0000”
fgColor 页面前景颜色 document.fgColor=“FF000F”
linkColor 页面中未曾访问过的超级链接颜色 document.linkColor=“red”
vlinkColor 页面中曾经访问过的超级链接的颜色 document.vlinkColor=“green”
lastModified 最后一次修改页面的时间 date= lastModified
location 页面的 URL地址 url_info=document.location
title 页面的标题 tit_info=document.title
表 5.5 document对象的方法表 5.6 document对象的鼠标事件方法名称 说 明 范 例
clear() 清除文件窗口内的数据 document.clear()
close() 关闭文档 document.close()
open() 打开文档 document.open()
write() 向当前文档写入数据 document.write(“你好 !,)
writeln() 向当前文档写入数据,并换行 document.writeln(“你好 !,)
鼠 标 事 件 使 用 说 明
onClick 在页面上单击鼠标左键时发生
ondblClick 在页面上双击鼠标左键时发生
onMouuseDown 在页面上按下鼠标左键时发生
onMouseMove 在页面上移动鼠标时发生
onMouseOut 鼠标离开对象时发生
onMouseOver 鼠标移到对象上时发生
onMouseUp 用户放开鼠标左键时发生
onSelectStart 用户开始选取对象内容时发生
onDragStart 用户以拖曳方式选取对象时发生表 5.7列举了 document对象的按键事件和它们的使用说明 。
表 5.7 document对象的按键事件按键事件 使 用 说 明
onKeyDown 用户按下按键时发生
onKeyPress 用户按下按键时发生 onKeyDown事件,然后产生 onKeyPress事件,如果用户按住按键不放,则产生一系列 onKeyPress事件
onKeyUp 用户放开按键时发生
onHelp 用户按下系统定义的帮助键时发生
5.3 JavaScript(JScript)的应用
5.3.1 JavaScript应用案例 1——客户端输入信息验证
(1)任务要求:在客户端验证用户输入数据
(2)实现上述任务的代码 ex05-005.html清单
(3)代码说明
5.3.2 JavaScript语法简介
1.变量变量名必须以字母或下划线,_”开始,后面的字符可以是字母、数字或下划线。 JavaScript内部定义的保留字不能用作变量名。
2.表达式表达式是由变量、常量和运算符按一定规则组成的集合,
表达式的值可以是数字、字符串或布尔量。
3,运算符
JavaScript的运算符有:赋值运算符、算术运算符、逻辑运算符、比较运算符、字符串运算符和位运算符。
表 5.8 赋值运算符的使用表 5.9列出算术运算符的使用说明 。
表 5.10列出了逻辑运算符的使用说明运算 符 范 例 使 用 说 明
= z=x+y 把=号右边表达式的值赋给左边的变量
+= x+=y x+=y与 x=x+y等同
-= x-=y x-=y与 x=x-y等同
*= x*=y x*=y与 x=x*y等同
/= x/=y x/=y与 x=x/y等同
%= x%=y x%=y与 x=x%y等同 (x除以 y,把余数赋给 x)
表 5.9 算术运算符的使用表 5.10 逻辑运算符的使用运 算 符 范 例 使 用 说 明
+ 1+2,-23.6+678 加
- 654-234,345.6-56.8 减
* 34*56,45.6*56.7 乘
/ 64/8,456.9/34.5 除
% 5%3 求模 (求除法的余数 )
++ x++ 加加,x++相当于 x=x+1
-- x-- 减减,x--相当于 x=x-1
运 算符 范例 使 用 说 明
&& A&&B 逻辑与,当操作符两边表达式的值均为 true时,结果为 true,否则结果为false
|| A||B 逻辑或,A和 B中有一个的值为 true时,结果为 true; A和 B都是 false,结果为 false
! !A 求反,若 A的值为 true,结果为 false; A的值为 false,结果是 true
表 5.11 比较运算符的使用表 5.12 位运算符的使用运算符 范例 使 用 说 明
== A==B 相等比较,如果变量 A和 B相等,结果为 true;如果不等,结果为 false
!= A!=B 不相等比较,如果变量 A和 B不相等,结果为 true;如果相等,结果为 false
> A>B 大于比较,如果变量 A大于 B,结果为 true;反之,结果为 false
< A<B 小于比较,如果变量 A小于 B,结果为 true;反之,结果为 false
>= A>=B 大于等于比较,如果变量 A大于等于 B,结果为 true; A小于 B,结果为false
<= A<=B 小于等于比较,如果变量 A小于等于 B,结果为 true; A大于 B,结果为false
运 算 符 范 例 使 用 说 明
& A&B 按位与运算
| A|B 按位或运算
^ A^B 按位异或运算
~ A 按位取反运算
<< A<<B 左移运算
>> A>>B 右移运算
4,运算符的优先级
5,JavaScript的程序控制结构
6,函数在 JavaScript中可以使用函数,函数用来封装在程序中需要多次使用的模块 。 函数必须先定义,后使用 。 由于浏览器先执行 HTML文档中的 <HEAD>模块,所以 JavaScript
中常把自定义函数放在 <HEAD>模块中,然后在 HTML文档的主体 <BODY>模块中调用函数 。
5.3.3 JavaScript应用案例 2——状态栏文字滚动显示
(1) 任务要求,当用户点击页面上的文字时,状态栏的文字滚动显示 。
(2) 完成如上任务的页面代码 ex05-006.html清单
5.3.4 JavaScript应用案例 3——启动数字钟统计页面持续时间图 5.9 启动数字钟统计网页持续时间
(2) 实现以上任务的页面代码 ex05-007.html清单
(3) 代码说明
5.3.5 JavaScript对象简介
JavaScript不是纯面向对象的语言,它不具备面向对象语言应具有的特性,如类的封装、继承和重载等。
1,创建对象
JavaScript中创建对象的方法与创建函数的方法相似。
2,对象的方法和属性
3,JavaScript的 Date内置对象表 5.13 Date对象的主要方法方 法 名 称 说 明 范 例
getDate() 返回 Date对象中的日期 MyDate.getDate()
getDay() 返回 Date对象一周中的第几天数,0表示星期日 MyDate.getDay()
getHours() 返回 Date对象中的小时数,其值从 0~ 23 MyDate.getHours()
getMinutes() 返回 Date对象中的分钟数,其值从 0~ 59 MyDate.getMinutes()
getMonth() 返回 Date对象中的月份数,其值从 0~ 11,0代表 1月 MyDate.getMonth()
getSeconds() 返回 Date对象中的秒数,其值从 0~ 59 MyDate.getSeconds()
getTime() 返回 Date对象中表示时间的整数,该时间从 1970年1月 1日午夜开始以毫秒为单位进行计算 MyDate.getTime()
getYear() 返回 Date对象中的年号 MyDate.getYear()
setDate(timevalue) 设置 Date对象中的日期,timevalue的值从 1~ 31 MyDate.setDate(20)
setHours(timevalue) 设置 Date对象中的小时数,timevalue的值从 0~ 23 MyDate.setHours(12)
setMinutes(timevalue) 设置 Date对象中的分钟数,timevalue的值从 0~ 59 MyDate.setMinutes(30)
setMonth(timevalue) 设置 Date对象中的月份数,timevalue的值从 0~ 11,0代表 1月 MyDate.setMonth(5)
setSeconds(timevalue) 设置 Date对象中的秒数,timevalue的值从 0~ 59 MyDate.setSeconds(30)
setYear(timevalue) 设置 Date对象中的年份,timevalue为大于 1900的整数 MyDate.setYear(1999)
5.4 VBScript的应用
5.4.1 VBScript应用案例 1——与用户交互界面的制作
(1) 任务要求:页面上有一个按钮,欢迎用户链接到某个网站。
图 5.10 VBScript应用案例 1的界面
(2) 实现上述任务的代码 ex05-008.html清单
(3) 代码说明
5.4.2 VBScript语法简介
1,VBScript的书写格式
(1)VBScript不区分大小写,声明变量的关键字,Dim”与
,dim”的作用是一样的 。
(2) VBScript没有可见的结束标志,它以换行符为行终止符 。
(3) 如果需要把几行代码写在一行中,使用冒号 (,)把他们分开。
(4) 可以用两种方法进行注释,rem或 (?)号 。
2,变量
(1) 变量名。 (2) 变量的声明。 (3) 变量的初始化。
3,数据类型
VBScript中只有一种数据类型,被称为变体型 (Variant)。变体型包含所有的基本数据类型,所以 VBScript中基本数据类型被称为子类型 (subtype)。变体型是一种特殊的数据类型,
系统可以根据不同的数据子类型来分配内存空间,并以最合适的方式来体现数据类型的特征和行为。
表 5.14 VBScript数据子类型数据子类型 说 明
Empty (空类型 ) 表示刚被声明,还没有被初始化的变量 。 对于数字类型变量,数值为零 。 对于字符串变量,它是 0长度的字符串 (“”)
Null (无值类型 ) 变量不包含任何有效数据
Boolean(布尔类型 ) 变量的值是,True(- 1)或 False(0)
Byte(字节型 ) 长度为一个字节,表示从 0到 255之间的整数
Integer(整型 ) 长度为两个字节,表示从- 32,768到 32,767之间的整数
Long(长整型 ) 长度为四个字节,表示从- 2,147,483,648 到 +2,147,483,647之间的整数
Currency(货币型 ) 表示从- 922,337,203,685,477.5808到 922,337,203,685,477.5807之间的整数
Single(单精度型 ) 长度为四个字节,可以表示浮点数运算中的小数,负数的范围从- 3.402823E38 到 - 1.401298E- 45,正数范围从 1.401298E- 45 到 3.402823E38
Double(双精度型 )
长度为八个字节,可以表示的负数范围从- 1.79769313486232E308 到
- 4.94065645841247E- 324,正数范围从 4.94065645841247E- 324到
1.79769313486232E308
Date(日期类型 ) 它的数值表示日期和时间,范围为 100年 1月 1日到 9999年 12月 31日 。
String(字符串型 ) 它是可变长度字符串,最大字符串长度可达 2兆个字符
Object(对象 ) 是一种特殊的数据类型,可以用来表示对对象的引用
Error(错误 ) 保存 VBScript生成的错误编号
4,运算符
VBScript的运算符有:赋值运算符,算术运算符,逻辑运算符,比较运算符和字符串运算符 。
(1) 赋值运算符 。 赋值运算符用来给变量赋值,VBScript赋值方法比较简单,例如 MyNum=3。
(2) 算术运算符 。 算术运算符用来建立算术表达式,表 5.15列出算术运算符的使用说明 。
表 5.15 算术运算符的使用运 算 符 范 例 使 用 说 明
+ 1+2,-23.6+678 加
- 654-234,345.6-56.8 减
* 34*56,45.6*56.7 乘
/ 64/8,456.9/34.5 除
mod 5mod3 求模 (求除法的余数 )
^ 2^3,5.6^2 求幂
\ 33\8,34.6\4 整除运算符
- -2,-3.14 求负运算符
(3) 逻辑运算符 。 逻辑运算符对两个布尔表达式的值进行逻辑运算,它的返回值是 true或 false,表 5.16列出了逻辑运算符的使用说明 。
表 5.16 逻辑运算符的使用
(4) 比较运算符 。 比较运算符用来比较它的操作数大小,然后返回一个布尔值 (true或 false),表 5.17列出了比较运算符的使用说明 。
运算符 范例 使 用 说 明
and AandB 逻辑与,当操作符两边表达式的值均为 true时,结果为 true,否则结果为false
or AorB 逻辑或,A和 B中有一个的值为 true时,结果为 true; A和 B都是 false,结果为false
not notA 求反,若 A的值为 true,结果为 false; A的值为 false,结果是 true
xor AxorB 异或,A和 B均为 true,或均为 false,结果为 false;反之,A和 B中一为 true一为 false,则结果为 true
(5) 字符串运算符 。 VBScript只有一个字符串运算符,即连接符,&”,使用字符串运算符可以把几个串连接在一起 。 例如,
,字符串 1”&“字符串 2”的返回值是:,字符串 1字符串 2”。
(6) 运算符的优先级。
表 5.17 比较运算符的使用运算符 范例 使 用 说 明
= A=B 相等比较,如果变量 A和 B相等,结果为 true;如果不等,结果为 false
<> A<>B 不相等比较,如果变量 A和 B不相等,结果为 true;如果相等,结果为 false
> A>B 大于比较,如果变量 A大于 B,结果为 true;反之,结果为 false
< A<B 小于比较,如果变量 A小于 B,结果为 true;反之,结果为 false
>= A>=B 大于等于比较,如果变量 A大于等于 B,结果为 true; A小于 B,结果为 false
<= A<=B 小于等于比较,如果变量 A小于等于 B,结果为 true; A大于 B,结果为 false
5,VBScript的程序控制结构
VBScript中对程序流程进行控制的语句可分为两类:
·条件判断:实现条件判断的语句有 if… then… else和 select case语句 。
·循 环 执 行,实 现 循 环 执 行 的 语 句 有 do… loop,for… next 和
while… wend语句 。
(1) 条件语句 if… then… else。
(2) 条件语句 select…case 。 select…case 语句常用来处理多重选择。
(3) 循环语句 do…loop 。
(4) 循环语句 for… next语句
(5) while… wend语句
6,子程序与函数使用 VBScript编写较为复杂的程序需要使用过程 。 一个过程是一段程序,可以供程序的其他部分调用,常用的过程有子程序和函数 。
(1) 子程序。子程序是一段完整、独立的程序,可以从脚本程序的其他地方调用子程序。
(2) 函数。函数是一个独立的程序单元。函数必须先定义后使用。函数可以有返回值。
7,VBScript的内置函数
VBScript的日期 /时间函数主要用于对系统的日期和时间的操作 。
5.4.3 VBScript应用案例 2——客户端验证用户名和密码
(1) 任务要求:在客户端验证用户名和密码,如果用户输入错误则弹出,输入错误,的提示框,请用户再次输入;
如果输入正确,则将信息发送到服务器端,由服务器端应用程序,Response.asp”处理用户信息 。
(2) 实现上述任务的代码 ex05-009.html清单
5.4.4 VBScript应用案例 3——赛跑游戏
(1) 任务要求:制作一个赛跑游戏,页面上有个 boy在跑,
用户用鼠标去追,追上后用鼠标点击,弹出信息框输出
,哇 ! 我被抓到了 !,,同时在状态栏中显示,看谁跑得快 !,,界面如图 5.13所示 。
图 5.14 页面标题动态显示 图 5.13 赛跑游戏
(2) 完成如上要求的代码 ex05-010.html清单
(3) 代码说明
5.4.5 VBScript应用案例 4——页面标题动态显示
(1) 任务要求:使用 DHTML技术,使页面字体动态显示,页面上一行文字的背景及样式不断变化,另一行文字由小变大 。 显示如图 5.14所示 。
(2) 实现如上任务的代码 ex05-011.html清单
(3) 代码说明
5.5 VBScript应用实训 —— 计算器的制作
5.5.1 任务要求
1,任务要求要求制作一个计算器,可以对整数和小数进行加,减,乘,
除运算,计算器的界面如图 5.15所示 。
图 5.15 计算器界面
2,界面中控件的名称及其功能
5.5.2 制作界面
(1) 启动 Frontpage2000,在菜单栏中选择,文件 → 新建 → 网页,,创建一个新页面 。
(2) 设置计算器背景颜色。
(3) 插入文本框 。 在菜单栏中选择,插入 → 表单 → 单行文本框,,在页面中插入一个文本框 。 根据已定义的文本框名及其属性,修改文本框的属性值 。
(4) 插入按钮 。 在菜单栏中选择,插入 → 表单 → 按钮,,插入一个按钮 。 以同样方法插入其他 19个按钮 。 根据已定义的按钮名称及其属性,修改按钮属性值,使之合乎要求 。
图 5.16 设置页面背景颜色
5.5.3 添加 VBScript代码
1,代码中的变量及其作用
2.代码中的子程序及其功能
5.5.4 计算器源代码
5.5.5 在浏览器中测试计算器的功能制作完成后,在浏览器中测试计算器的功能,符合任务要求,完成制作 。
5.6 JavaScript应用实训 —— 银行利息查询
5.6.1 任务要求万通银行网站希望增加一个栏目,用户在界面中输入本金,存款方式和存款时间后,即可得到到期后的本金和利息之和共有多少,以利于客户选择存款方式 。
5.6.2 用户需求分析
5.6.3 用户界面设计图 5.17 银行利率查询界面当客户点击某一项时,在弹出的界面中输入本金和存款时间即可得到所得的本金和利息之和 。 例如,人民币活期储蓄利率查询界面如图 5.18所示 。
图 5.18 人民币活期利率查询界面
5.6.4 用户界面制作 ——框架的应用框架也称为帧 (frame),便于用户在不同内容的网页之间进行跳转,本案例适合使用框架来实现。框架的主要功能是把浏览器窗口划分成几个大小不同块,每个块称为一帧,每个帧是独立的,所有帧的总称为帧集 (frameset)。
1,制作图 5.17所示的银行利率查询界面
(1) 制作左帧。 (2) 制作右帧。 (3) 制作框架。
图 5.19,新建”对话框 图 5.20 新创建的框架网页
Frontpage 2000自动为用户创建了一个框架页面,如图 5.20所示 。
2,制作人民币活期利率查询界面
(1) 界面中控件的名称及其功能 。
(2) 创建一个新网页 。 (3) 插入文本框 。 (4) 插入按钮 。
(5) 根据图 5.18的用户需求,调整页面布局,使之符合用户需求 。
(6) 创建超链接。
(7) 添加 JavaScript代码。
(8) 制作完成,以,rmbH.htm”文件名保存文件,其源代码清单
3,制作其他利率查询界面其他利率查询界面,如人民币定期利率查询界面,人民币零存整取利率查询界面,美元利率查询等界面的制作,与人民币活期利率查询界面的制作大同小异,此处不再一一赘述 。
5.6.5 网页的测试与发布在个人 Web服务器或 Frontpage 2000的,预览,标签中测试页面,
如果没有问题,且满足用户需求,即可在网站发布 。
练 习
1,什么是脚本语言,它的功能是什么?
2,常用的脚本语言有哪几种,它们各有什么特点?
3,如何将脚本嵌入 HTML页面?
4,请举例说明什么是对象,对象的构成是什么?
5,请举例说明对象的属性,方法和事件 。
6,window对象的组成结构是怎样的?
7,window对象的主要属性和方法是什么? 举例说明它们的应用方法 。
8,window下层最主要的对象是什么?
9,document对象的主要属性,方法和事件是什么? 请举例说明它们的使用方法?
10,JavaScript中的函数如何定义,如何调用?
11,JavaScript如何创建对象,如何访问所创建对象的方法和属性?
12,VBScript的数据类型是什么? 它的特点是什么?
13,VBScript中子程序和函数的区别是什么?
14,如何定义和调用 VBScript中的函数和子程序?
上机练习上机练习 1:使用 <SCRIPT>标记把一小段脚本程序嵌入 HTML页面,并在浏览器中显示它的结果 。
上机练习 2:使用脚本语言制作一个具有动画效应的页面 。
上机练习 3:使用 JavaScript编制一段代码,完成以下功能:
(1) 要求用户输入一个电话号码 。
(2) 用确认框检查输入是否正确 (是否为合法输入字符,位长是否合理等 )。
(3) 根据输入给出相应的提示 。
上机练习 4:制作一个页面,页面上有五幅图像,图像等分在一个圆上,当用户点击页面时,图像逆时钟转动 。
上机练习 5:页面上有一幅图像,在状态栏显示有关图像的说明 。 当用户点击图像时,换成另一幅图像,同时状态栏的内容也做相应的变更 。
上机练习 6:制作一个页面,页面上有四个独立的块,每个块显示不同的内容,或图像加文字说明,或表格加文字说明,或表格加图像等等,当用户用鼠标在页面上点击时,将显示该鼠标所在位置对象的标记名和 ID。
上机练习 7:在客户端验证用户输入信息,如果输入正确,允许链接到网站;如果不正确,禁止链接,要求用户界面友好 。
上机练习 8:制作一个页面,状态栏将根据页面内容滚动显示 。
上机练习 9:制作一个数字钟,根据网页下载持续时间进行收费 。
上机练习 10:制作一个打猎游戏,页面上有几个猎物,或在飞或在跑,
用户用鼠标追赶猎物,追上后用鼠标单击猎物,弹出信息框说明猎物被击中,同时猎物消失 。
上机练习 11:为某单位的主页制作标题,使标题具有动态效果 。
实训课题实训课题 1:完善 5.5节计算器的制作,增加累加计算,三角函数计算,对数计算,开方计算等功能 。 请读者完成计算器的界面设计与制作,并使用 VBScript脚本语言完成控件之间的事件响应任务和计算任务 。
实训课题 2:为某企业网站设计并制作一个业务查询栏目 。 当用户输入正确的用户名及口令后,允许用户进行查询 。 请读者完成用户需求分析,确定查询的项目,设计并规划栏目的界面,并使用
JavaScript脚本语言完成控件之间的响应任务和计算任务 (如果存在计算任务 )。