当装入HTML文档时调用,JSP上机实验六-Javascript内置对象和函数的应用

实验内容：

1． 学习Javascript事件处理

2． 掌握Javascript内置对象和函数的应用

实验步骤：

1.JavaScript函数

函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：

function 函数名称(参数表)

– {

– 语句块;

– }

函数由关键字Function定义。

函数名：定义自己函数的名字。

参数表，是传递给函数使用或操作的值，其值可以是常量

，变量或其它表达式。

通过指定函数名(实参)来调用一个函数。必须使用Return将值返回。函数名对大小写是敏感的。

2.事件的概念

JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。

界面事件包括：

– Click(单击)

– MouseOut(鼠标– 移出)

– MouseOver(鼠标– 移过)

– MouseDown(鼠标– 按下)等。

通常鼠标或热键的动作我们称之为事件(Event)，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event

Driver)。而对事件进行处理程序或函数，我们称之为事件处理程序(Event

Handler)。在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。

格式如下：

Function 事件处理名(参数表){

事件处理语句集；

……

}

(1)单击事件onClick

当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：

button(按钮对象)

checkbox(复选框)或(检查列表框)

radio (单选钮)

reset buttons(重要按钮)

submit buttons(提交按钮)

单击事件

VALUE="单击" ONCLICK="alert('鼠标单击')">

在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。

(2)onChange改变事件

当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。

onChange="check('this.test)">

(3)选中事件onSelect

当Text或Textarea对象中的文字被加亮后，引发该事件。

(4)获得焦点事件onFocus

当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。

(5)失去焦点onBlur

当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。

(6)载入文件onLoad

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

(7)卸载文件onUnload

当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

3．对象的基础知识

(1)对象的基本结构

JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。

(2)引用对象的途径

一个对象要真正地被使用，可采用以下几种方式获得：

引用JavaScript内部对象；

由浏览器环境中提供；

创建新对象。

(3)有关对象操作语句

For...in语句

格式如下：

For(对象属性名 in 已知对象名)

说明：该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。

var arr = new Array(3);

arr[0] = "Jack";

arr[1] = "Mike";

arr[2] = "Rose";

for(i in arr)

{

document.write("
第" +

i + "个为：" + arr[i]);

}

with语句

使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。

with object{

...}

所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。

with(document)

{

write("你好世界
");

write("你好中国
");

write("再见");

}

this关键字

this是对当前的引用，JavaScript提供了一个用于将对象指定当前对象的语句this。

function imgclick(oimg)

{

alert("图片名称是：" +

oimg.name+"\r\n图片地址是：" + oimg.src );

}

ONCLICK="imgclick(this)">

New运算符

使用New运算符可以创建一个新的对象。其创建对象使用如下格式：

Newobject=NEW Object(Parameters table);

其中Newobject创建的新对象：object是已经存在的对象； parameters

table参数表；new是JavaScript中的命令语句。

如创建一个日期新对象

newData=New Date()

birthday=New Date (December 12.1998)

之后就可使NewData、birthday作为一个新的日期对象了。

4．对象属性的引用

对象属性的引用可由下列三种方式之一实现：

使用点(.)运算符

university.Name=“云南省”

university.city=“昆明市”

university.Date="1999"

其中university是一个已经存在的对象，Name、City、Date是它的三个属性，并通过操作对其赋值。

通过对象的下标实现引用

university[0]=“云南”

university[1]=“昆明市”

university[2]="1999"

通过数组形式的访问属性，可以使用循环操作获取其值。

(3)通过字符串的形式实现

university["Name"]=“云南”

university["City"]=“昆明市”

university["Date"]="1999"

5.对象的方法的引用

在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods()

实际上methods()=FunctionName方法实质上是一个函数。

如引用university对象中的showmy()方法，则可使用：document.write

(university.showmy())或：document.write(university)

6. 常用对象的属性和方法

(1) 常用内部对象

JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。在JavaScript提供了string(字符串)、math(数值计算)和Date(日期)三种对象和其它一些相关的方法。

(2) 日期及时间对象

功能：提供一个有关日期和时间的对象。

var curr=new Date();

document.write("今天是");

switch(curr.getDay()){

case

0:document.write("周日,休息了！");break;

case

1:document.write("周一,需要工作！");break;

case

2:document.write("周二,需要工作！");break;

case

3:document.write("周三,需要工作！");break;

case

4:document.write("周四,需要工作！");break;

case

5:document.write("周五,需要工作！");break;

case

6:document.write("周六,休息了！");break;

}

Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。

日期起始值:１７７０年１月１日００:００:００。

获取日期的时间方法

getYear(): 返回年数

getMonth():返回当月号数

getDate(): 返回当日号数

getDay():返回星期几

getHours():返回小时数

getMintes(:返回分钟数

getSeconds():返回秒数

getTime() : 返回毫秒数

设置日期和时间：

setYear();设置年

setDate():设置当月号数

setMonth():设置当月份数

setHours():设置小时数

setMintes():设置分钟数

setSeconds():设置秒数

setTime ():设置毫秒数

(3)Math对象

功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等

。

主要属性：math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数LN10、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

主要方法：绝对值：abs()，弦余弦值：sin(),cos()，反正弦反余弦

:asin(), acos()

，正切反正切：tan(),atan()，四舍五入：round()，平方根：sqrt()，基于几方次的值：Pow(base,exponent)

var a = Math.sin(1);

document.write(a)

(4)String对象

一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。

charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。

indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回–1。

lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回–1。

toLowerCase()：将字符串中的字符全部转化成小写。

toUpperCase()：将字符串中的字符全部转化成大写。

var str = "I am a boy, I like

programming!";

a = str.charAt(7);

b = str.indexOf("a");

c = str.lastIndexOf("a");

d = str.toUpperCase();

document.write(a +

"
");

document.write(b +

"
")

document.write(c +

"
")

document.write(d +

"
")

7.JavaScript的常用函数

JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数，使用这些函数不需创建任何实例,可直接用。

(1)eval_r()函数

返回字符串表达式中的值：

var str = "1+2+3";

document.write(eval_r(str));

(2) unEscape (string)

返回字符串ASCI码

(3) escape(character)

返回字符的编码

(4)parseInt()

从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止转换，返回已有的结果。

(5)ParseFloat()

可以提取小数

var a =

parseInt("123China");

var b =

parseFloat("123.12China");

document.write (a +

"
");

document.write (b);

上机思考题:

JavaScript函数和其他函数区别的地方在哪里?

函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不一样的地方。

------童优素

2. 怎样才能确定JavaScript中函数的参数变量的个数？

在JavaScript中可通过arguments .Length来检查参数的个数。

Function function_Name(exp1,exp2,exp3,exp4)

3.如何引用onClick事件?举个例子?

当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。

举例：

单击事件

ONCLICK="alert('鼠标单击')">

在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：

οnclick=alert("这是一个例子");

------李庆云

4．为什么说JavaScript是基于对象而不是面向对象的语言？

Javascript不是一个支持面向对象的语言，更加算不上一个开发平台，但是Javascript提供了一个非常强大的基于prototype的面向对象调用功能，你可以在你自己需要的地方使用他们

Jscript中内置了一些类，例如String、Array、Math等，用户可以直接从这些类实例化出对象，并使用其中的属性和方法。单凭这一点，不能说js符合面向对象语言的特征。一种面向对象的语言，应当具有封装，继承，多态等基本特性。Jscript并没有直接提供实现这些特性的方法，但是，也并非完全无法实现。

Js中的封装

一种面向对象的语言应当允许用户创建自定义类型，这一点js做到了，只是它的自定义类型不是用class限定，而是作为function，这个function的作用相当于其他语言中的构造函数。在自定义类型中，用户可以添加属性、方法。但是，js中并未显式提供public、private、protected等访问限定，也没有提供static之类的作用域限定。

Js中的继承

继承是面向对象语言中扩展已有类型的一种有效途径，js没有提供用于实现继承的extends关键字或者“:”操作符，但是，由于它是一种动态语言，可以在需要的时候添加属性和方法。

Js中的多态

多态能够让对象在运行时决定实际调用的方法体。由于js是一种动态语言，支持运行时绑定，讨论它的多态实际上并没有太大意义。Js不支持virtual关键字，而virtual关键字在现在的js里面也不会有明显用处。

JavaScript语言是基于对象的(Object-Based)，而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文档。JavaScript不是一纯面向对象的语言，它设有提供面向对象语言的许多功能，因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言，在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。

------童优素

5．JavaScript可否引用原先不存在的对象？

不可以

引用对象的途径,一个对象要真正地被使用，可采用以下几种方式获得：

1.引用JavaScript内部对象；

2.由浏览器环境中提供；

3.创建新对象。

这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。

------童优素

6.For…in

语句的优点是什么？可否用其他方法来实现该语句功能？例如下面一个例子显示数组中的内容：

Function showData(object)

for(var prop in object)

document.write(object[prop])；请考虑用其他方法来实现其功能输出。

该语句的优点就是无需知道对象中属性的个数即可进行操作。

For(对象属性名 in 已知对象名)

说明：该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。

举例：

var arr = new Array(3);

arr[0] = "Jack";

arr[1] = "Mike";

arr[2] = "Rose";

for(i in arr)

{

document.write("
第" + i + "个为：" + arr[i]);

}

可以用while()语句来实现该语句功能

实现如下：

Function showData(object)

x=0;

while (X<30)

{

document.write(object[i])；

x++;

}

该函数是通过数组下标顺序值，来访问每个对象的属性，使用这种方式首先必须知道数组的下标值，否则若超出范围，则就会发生错误。

------李庆云

7.为什么要用this关键字？

this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。

this是对当前的引用，JavaScript提供了一个用于将对象指定当前对象的语句this。这个等同于c＋＋中的this功能一样。

举例：

function imgclick(oimg)

{

alert("图片名称是：" + oimg.name+"\r\n图片地址是：" + oimg.src

);

}

ONCLICK="imgclick(this)">

------李庆云

8．将下列语句引用math内部对象中cos()的方法改写成with语句，体会其用法和优势？

document.write(Math.cos(35))；

document.write(math.sin(80))

则：with(math)

document.write(cos(35));

document.write(cos(80));

------李庆云

9.

在JavaScript里面什么是静态对象和动态对象？分别怎么引用他们？如String,

Math和日期时间对象分别属于静态还是动态对象？

在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个实例，即该对象是动态对象。

string对象：内部静态性。

访问properties和methods时，可使用(.)运算符实现。

基本使用格式：objectName.prop/methods

串对象的属性

该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。

math对象

功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等

。

静动性：静态对象

日期及时间对象

功能：提供一个有关日期和时间的对象。

静动性：动态性，即必须使用New运算符创建一个实例。

------童优素

上机练习题：

使用onLoad和onUnload函数编写一段代码实现：

当装入HTML文档时调用loadform()函数,弹出“这是一个自动装载例子!”的对话框，而退出该文档进入另一HTML文档时则首先调用unloadform()函数，弹出"这是一个卸载例子!"的对话框，确认后方可进入。

href="test.htm">调用

动态按钮：当鼠标移动到按钮上的时候，按钮就会凸起来。编写一段代码通过JavaScript的事件实现动态按纽。(提示：首先必须准备两张图片，当鼠标移上去的时候，自动切换成另一张图片就可以了)

function DoOver(oimg)

{

var

imgSRC;

imgSRC = 'Edit_' + oimg.name + '_Over.gif';

oimg.src =

'images/' + imgSRC;

}

function DoOut(oimg)

{

var

imgSRC;

imgSRC = 'Edit_' + oimg.name + '.gif';

oimg.src =

'images/' + imgSRC;

}

编写代码在屏幕上显示当前时间和当前日期

在字符串“I am a girl, I like

dancing!”的每个字符之间加上一个字符“#”，输出字符为：“I# #a#m#

#a# #girl#,# #I# #like#

#d#a#n#c#i#n#g#!”，并统计“#”的个数。

var str = "I am a boy, I like dog"

var iCount = 0;

for( i = 0; i < str.length; i++)

{

if(str.charAt(i) == "i")

{

iCount++;

}

}

document.write(iCount);

编写一段代码在文本框中输入姓名XXX后弹出欢迎XXX的字样！

Please enter your name:

onBlur="getname(this.value)" value="">