CH10在网页中使用脚本语言

会计学1CH10在网页中使用脚本语言（1）脚本编写语言（2）基于对象（3）简单性（4）安全性（5）动态性（6）跨平台

10.1.1JavaScript的特点

第1页/共44页

10.1.2JavaScript的运行和编辑环境

运行环境：InternetExplorer4.0或NetscapeNavigator3.0以上。编辑环境：任何可以编辑HTML文档的文本编辑器或专门的网页编辑器（FrontPage、Dreamweaver等）。

第2页/共44页

（1）使用SCRIPT标记符插入脚本在网页中最常用的一种插入脚本的方式是使用SCRIPT标记符，方法是：把脚本标记符<SCRIPT></SCRIPT>置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。尽管可以在网页上的多个位置使用SCRIPT标记符，但最好还是将脚本代码放在HEAD部分，以确保容易维护。

10.1.3在网页中使用JavaScript

第3页/共44页①书写JavaScript时应注意大小写.②在JavaScript中，行尾用换行符作为一行完整代码的终止字符.③若需要将几行代码放在一行中，应使用分号将它们分开.④在JavaScript中，/*和*/也是注释标记。用户在编写JavaScript时应注意以下几点：第4页/共44页

（2）直接添加脚本

HTML可以直接在表单的输入元素标记符内添加脚本，以响应输入元素的事件。

（3）链接脚本文件如果同一段脚本要在若干个Web页中使用，则没有必要在多处维护相同的冗余代码，此时可以将脚本放在单独的一个文件里，然后再在任何需要该文件的Web页中调用该文件。要引用外部脚本文件，应使用SCRIPT标记符的src属性来指定外部脚本文件的URL。第5页/共44页

所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。

JavaScript支持的数据类型如下：Number（数字）、Boolean（布尔）、String（字符串）、Null（空）、Undefined（未定义）、Object（对象）。10.2JavaScript编程基础

10.2.1JavaScript变量第6页/共44页在JavaScript中定义变量应遵循以下规则：必须以字母或下划线（_）开头。在所说明的范围内必须是唯一的。用var来定义变量，也可以用赋值语句声明变量，但不能既不用var声明变量，又不给它赋值。第7页/共44页

10.2.2JavaScript运算符

在JavaScript中包括以下8类运算符：（1）算术运算符

：+、-、*、/、%、++、--（2）逻辑运算符：&&、||、！（3）比较运算符：

<、<=、>、>=、==、！=（4）字符串运算符

：+（字符串接合操作）

（5）位操作运算符：&、|、^、-、~、<<、>>、>>>第8页/共44页

（6）赋值运算符：=、+=、-=、*=、／=、％=、&=、

（7）条件运算符：：？：（8）其他运算符：．、[]、（）、delete、new、void第9页/共44页

10.2.3JavaScript表达式

表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。有些运算符将数值赋予一个变量，而另一些运算符则可以用在其他表达式中。由于表达式是以运算符为基础的，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及逻辑表达式等等。

第10页/共44页

10.2.4JavaScript语句

（1）数据声明语句声明变量的语法如下：

var变量名[=初始值]

（2）赋值语句赋值语句是由赋值表达式组成的语句。

1．一般语句第11页/共44页（3）注释语句

//：表示单行注释，从“//”开始到本行结束都为注释。

/*……*/：表示多行注释，从“/*”开始到“*/”结束为注释。第12页/共44页

在JavaScript中提供了if语句、ifelse语句以及switch语句等三种条件语句。

（1）if语句

if（条件）语句段；

（2）ifelse语句

if（条件）语句段1；

else

语句段2；

2．条件语句第13页/共44页

（3）switch语句如果需要对同一个表达式进行多次判断，那么就可以使用switch语句，格式如下：

switch（条件）

{casevalue1:

语句段1;casevalue2：语句段2;casevalue3：语句段3;

…default：语句段4；}第14页/共44页（1）for语句

for（初始化；条件；增量）

{

语句段；

}（2）while语句

while（条件）

{

语句段；

}

3．循环语句第15页/共44页

（3）dowhile语句

do{

语句段；

}while（条件）（4）break语句

break语句提供无条件跳出循环结构或switch语句的功能。（5）continue语句

continue语句的作用是终止当次循环，跳转到循环的开始处继续下一轮循环。第16页/共44页

4．其他语句

除了以上条件语句和循环语句以外，JavaScript中还包括以下语句：函数调用语句函数调用语句用于调用函数。return语句用于返回函数调用的值。with语句用于表示默认对象。forin语句用于对一个对象的所有属性进行循环，直到每个属性都访问到。第17页/共44页10.2.5JavaScript函数

函数是已命名的代码块，代码块中的语句被作为一个整体引用和执行。定义函数的格式如下：

function函数名（参数1，参数2，．．．）

{

语句段；

…return表达式；

}第18页/共44页

通常鼠标或热键的动作称为事件（Event），而由鼠标或热键引发的一连串程序的动作称为事件驱动（EventDriver）。比如，当单击鼠标按钮时就产生一个单击（onClick）事件，当打开一个网页时就产生一个网页的载入（onLoad）事件。

10.3JavaScript的事件驱动

10.3.1什么是事件

第19页/共44页

当用户单击鼠标按钮时，产生onClick事件，同时onClick指定的事件处理程序或代码被调用执行。OnClick事件通常在下列基本对象中产生：（1）button（按钮）（2）checkbox（复选框）（3）radio（单选按钮）（4）resetbutton（重置按钮）（5）submitbutton（提交按钮）10.3.2事件类型

1．单击事件onClick

第20页/共44页

当用户改变表单元素的原有状态后，将产生该表单元素的onChange事件。

2．改变事件onChange

当用户选中一段表单文本时，引发该事件。

3．选中事件onSelect第21页/共44页

当用户单击鼠标或用Tab键激活某一个表单元素时，产生该表单元素的聚焦事件，此时对象被选中。

4．聚焦事件onFocus

与onFocus事件相反，当前激活表单元素从激活状态变为非激活状态，即不再拥有焦点、而退到后台时，引发该事件。

5．失去焦点事件onBlur

第22页/共44页

当鼠标指针位于超链接上时，产生onMouseOver事件。

6．鼠标移动事件onMouseOver

当文档载入时引发该事件。OnLoad事件的作用是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使其可以被源代码调用。

7．载入文件onLoad

当Web页面退出时引发onUnload事件。

8．卸载文在件onUnload第23页/共44页

对象就是客观世界中存在的特定实体。

10.4JavaScript的对象

10.4.1JavaScript的内部对象JavaScript提供了一些内部对象，下面介绍三种常用的对象，即String对象、Date对象和Math对象。第24页/共44页String对象用来存放字符串，是静态对象。（1）String对象的属性

String对象只有一个属性，即length，它表示字符串中的所有的字符个数，包括所有符号。（2）String对象的方法

String对象的方法主要用于有关字符串在Web中的显示、字体大小、颜色、大小写转换等。String对象有19个方法。

1．String对象第25页/共44页

创建日期对象可以使用以下4种构造函数中的一种：varvariable=newDate（）varvariable=newDate（milliseconds）varvariable=newDate（string）varvariable=newDate（year，month，day，hours，minutes，seconds，milliseconds）

2．Date对象第26页/共44页（1）获取Date对象的常用方法

getDate（）返回一个整数，表示一月中的某一天（1~31）。getDay（）返回一个整数，表示星期中的某一天（0~6，0表示星期日，6表示星期六）。getHours（）返回表示当前时间中的小时部分的整数（0~23）。getMinutes（）返回表示当前时间中的分钟部分的整数（0~59）。getMonth（）返回表示当前日期中月的整数（0-11）。第27页/共44页getSeconds（）返回表示当前时间中的秒部分的整数（0~59）。getTime（）返回从GMT时间1970年1月1日凌晨到当前Date对象指定的时间之间的毫秒数。getYear（）返回日期对象中的年份，用2位或4位数字表示。toGMTString（）返回表示日期对象的世界时间的字符串，日期在转换成字符串之前转换到GMT零时区。toLocalString（）返回一个表示日期对象所表示的当地时间的字符串。toString（）返回一个表示日期对象的字符串。第28页/共44页（2）设置Date对象的常用方法setDate（）设置当月号数；setDay（）设置星期几。setHours（）设置小时数。setMinutes（）设置分钟数。setMonth（）设置当月的月份数。setSeconds（）设置秒数。setTime（）设置毫秒数。setYear（）设置年。第29页/共44页

Math对象包含用来进行数学计算的属性和方法。（1）Math对象的主要属性

Math中提供了6个属性，即：常数E、以10为底的自然对数ln10、以2为底的自然对数ln2、圆周率PI（3.14159）、1/2的平方根SQRT1-2、2的平方根SQRT2。

3．Math对象第30页/共44页Math对象的主要方法有：求绝对值：abs（）。求正弦、余弦值：sin（），cos（）。求反正弦、反余弦值：asin（），acos（）。求正切、反正切值：tan（），atan（）。四舍五入：round（）。求平方根：sqrt（）。

（2）Math对象的主要方法第31页/共44页

常用的浏览器有document对象和Windows对象。

1．document对象

document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象（例如图像、表单等），因此该对象是实现各种文档功能的最基本对象。

10.4.2浏览器对象第32页/共44页（1）document对象的常用属性

document对象最常用的属性如下：

all表示文档中所有HTML标记符的数组。

bgcolor表示文档的背景颜色。

forms表示文档中所有表单的数组。

title表示文档的标题。第33页/共44页

（2）document对象的常用事件在客户端脚本中，JavaScript通过对事件进行响应来获得与用户的交互。

document对象的常用事件有：onclick事件，表示鼠标单击时产生的事件；onload事件，表示在文档装载完毕时产生的事件；onunload事件，表示在文档卸载完毕时产生的事件。另外还有onmouseover和onmouseout事件，分别表示鼠标移上去和移开时发生的事件。第34页/共44页（3）document对象的常用方法

document对象的常用方法有clear、write和writen方法。①clear方法

clear方法一经调用将清除当前窗口中的内容。注意，它既不改变由HTML定义的文档的实际内容，也不清除变量值等其它内容，而只是将显示区清空。第35页/共44页②write和writen方法这两个方法用于向当前窗口输出代码，其参数是要在窗口中输出的HTML代码字符串。

write与writen的区别在于writen方法在输出串后自动添加一个文本换行符（不是HTML的换行符<BR>）。此换行符只有在输出文本在<PRE></PRE>标记块中才起作用，其它情况都被忽略。因此，在大多数情况下，这两种方法没有什么区别。第36页/共44页Window对象拥有12个属性、8种方法和2种事件。

（1）Window对象的属性

Window对象拥有以下属性：

name属性：当前窗口的名字。

parent属性：该属性是一个窗口对象，它是当前窗口的父窗口，它拥有与生俱来的窗口的所有方法和事件。

self属性：该属性是当前窗口的Window对象。

2．Window对象第37页/共44页

top属性：该属性是一个Window对象，它是窗口集合中最顶层的窗口。

history：该属性是一个对象，它包含三种方法和一个属性。

location：该属性是窗口定位对象。它拥有href、Protocol、host、Port等属性。

length：该属性反映在Parent窗口中框架（帧）的个数。

defaultstatus：该属性是左下角状态栏显示的缺省文本。

status：该属性改变左下角状态栏的显示文本。第38页/共44页

status：该属性改变左下角状态栏的显示文本。

frame：该属性是当前窗口所包含下标从零开始的框架