javascript.docx
《javascript.docx》由会员分享，可在线阅读，更多相关《javascript.docx（20页珍藏版）》请在冰豆网上搜索。
javascript
第9章JavaScript的函数与事件处理
本章将学习Javascript脚本中的函数、事件处理的概念和方法。
9.1函数
在计算机程序中通常包含由多条语句组成的逻辑单元，在一些语言中这样的单元被称作过程或者方法，然而在JavaScript程序设计中这样的单元被称为函数。
函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。
在JavaScript语句。
在JavaScript程序中使用函数可以使代码更为简洁且有重用性能。
本节将对JavaScript中的函数做详细介绍。
9.1.1函数的定义
函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句组成。
函数与其他的JavaScript代码一样，必须位于标签之间。
函数的基本语法如下：
其中functionName为函数的名称，parametersN为函数的参数名称。
9.1.2函数的调用
函数定义后并不会自动执行，要执行一个函数，必须先调用这个函数。
如果在函数定义之前使用函数，则程序会报错。
要调用这个函数，必须指定函数名及其后面的参数列表（在有参数的情况下）。
1、在事件响应中调用函数
函数的定义语法通常被放在HTML文件的
标签体之间。
函数的调用一般和表单元素的事件一起使用，调用格式如下：
比如当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对时间做出反应的行为称为响应时间。
在JavaScript语言中，将函数与事件相关联就完成了响应事件的过程。
例9-1：
在事件中响应调用函数
2、通过链接调用函数
函数除了可以在响应事件中被调用之外，还可以在链接中被调用。
在标签中的href标记中使用了“javascript：
”调用函数，当用户单击这个链接时，相关函数将被执行。
例9-2：
通过链接调用函数
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
在事件响应中调用函数
---->
functiontest（）{
alert（"调用test（）函数成功!
"）;
}
test（）;">
测试调用test（）方法
9.1.3变量的作用域和返回值
变量的作用域指明变量在程序中的作用范围，在函数外定义的变量可以成为全局变量，它在页面声明此变量后的任何程序段位置都可以使用。
使用全局变量，可以实现不同程序段之间的数据传递。
如果将变量定义在函数的内部，那么这个变量称为局部变量，它的作用范围为函数体（就是函数的{}之间），在函数的外部这个变量是没有任何意思的。
例9-3：
变量的作用域
在上面的例子中，在test（）函数外部声明一个名称为name的变量，同时在函数内部同样声明一个名称为name的变量，然后分别在函数内部与外部进行调用。
但输出的结果不同，函数外部调用name变量的值与全局变量的值相同，而函数内部调用name变量的值则与局部变量相同。
有时需要在函数中返回一个数值在其他函数中使用，可以使用return语句。
该语句将终止函数的执行，并返回指定的值。
可以将需要返回的值赋予给变量，最后将此变量返回。
return语句的语法如下：
其中results是函数中的局部变量。
return是函数中返回变量的关键字。
下面的例子运用自定义函数计算3个参数的平均值。
例9-4：
函数返回值的应用
9.1.4常用内置函数
在使用JavaScript语言时，除了可以自定义函数外，还可以使用JavaScript的内置函数，这些内置函数是由JavaScript语言自身提供的函数。
函数
说明
eval（）
计算JavaScript字符串，并把它作为脚本代码来执行
isNaN（）
检查某个值是否是数字
parseFloat（）
解析一个字符串并返回一个浮点数
parseInt（）
解析一个字符串并返回一个整数
escape（）
对字符串进行编码
unescape（）
对由escape（）编码的字符串进行解码
decodeURI（）
解码某个编码的URI
encodeURI（）
把字符串编码为URI
例9-5：
内置函数的应用
内置函数的应用
varnum1="123abc";
varnum2="abc123";
document.write（"
（1）使用parseInt（）函数：
"）;
document.write（"123abc转换结果为：
"+parseInt（num1）+"
"）;
document.write（"abc123转换结果为：
"+parseInt（num2）+"
"）;
varnum3="123.456789abc";
document.write（"
（2）使用parseFloat（）函数：
"）;
document.write（"123.456789abc转换结果为：
"+parseFloat（num3）+"
"）;
document.write（"（3）使用isNaN（）函数：
"）;
document.write（"123.456789abc转换结果是否为NaN：
"+isNaN（parseFloat（num3））+"
"）;
document.write（"abc123转换结果是否为NaN：
"+isNaN（parseInt（num2））+"
"）;
document.write（"（4）使用encodeURI（）函数：
"）;
document.write（"转化为网络资源地址为：
"+encodeURI（"http:
//127.0.0.1/save.html?
name=测试"）+"
"）;
document.write（"（5）使用decodeURI（）函数：
"）;
document.write（"转化为网络资源地址为：
"+decodeURI（encodeURI（"http:
//127.0.0.1/save.html?
name=测试"））+"
"）;
document.write（"（6）使用eval（）函数：
"）;
vartest="1+1";
document.write（"不使用了eval函数：
"+"
"）;
document.write（"使用了eval函数：
"+eval（test）+"
"）;
/*
escape（）函数
*/
document.write（"（7）使用escape（）函数和unescape（）：
"）;
document.write（"JamesBlunt被编码后：
"+escape（"JamesBlunt"）+"
"）;
document.write（escape（"JamesBlunt"）+"被解码后：
"+unescape（escape（"JamesBlunt"）））;
9.2事件处理
9.2.1什么是事件
Javascript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。
9.2.2事件处理的概念
处理由鼠标或热键引发的一连串程序动作。
9.2.3事件处理程序的调用
在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的时间来指定事件处理程序。
1、直接在HTML标签中指定
一般情况下，我们直接在HTML标签中指定事件处理程序，语法如下：
事件处理程序可以是JavaScript语句，也可以是自定义函数。
如果是JavaScript语句，可以在语句的后面以分号（；）作为分隔符，执行多条语句。
事件处理程序一般是调用自定义函数，函数是可以传递很多参数的，比较常用的方法是传递this参数，this代表HTML标签的相应对象。
其编写代码如下：
这里的this参数代表form对象，在myFun函数中可以更方便地引用form对象及内含的其他对象。
！
注意
编写事件处理程序要特别注意引号的使用，当外部使用双引号，内部要使用单引号，反之一样。
例9-6：
2、在JavaScript中声明
我们在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标签中指定要执行的事件。
语法如下：
！
注意
其中，“事件处理程序”是真正的代码，而不是字符串形式的代码，事件处理程序只能通过自定义函数来指定。
当函数无参数时，函数名后不用加“（）”，如果在后面加“（）”；函数会被触发，但它并不是被指派为一个事件处理器。
例如，直接在JavaScript脚本中执行按钮的单击事件，而不需要在按钮的标签中调用单击事件。
例9-7：
在JavaScript脚本中指定事件
9.2.4鼠标键盘事件
鼠标和键盘事件是在页面操作中使用最频繁的操作，可以利用鼠标事件在页面中实现鼠标移动和单击时的特殊效果，也可以利用键盘时间来制作页面的快捷键等。
鼠标和键盘的常用事件如下表：
鼠标和键盘的常用事件
事件名称
说明
onclick
鼠标单击时触发此事件
ondblclick
鼠标双击时触发此事件
onmousedown
按下鼠标时触发此事件
onmouseup
鼠标按下后松开鼠标时触发此事件
onmouseover
当鼠标移动到某个对象范围的上方时触发此事件
onmousemove
鼠标移动时触发此事件
onmouseout
当鼠标离开某对象范围时触发此事件
onkeypress
当键盘上某个键被按下并且释放时触发此事件
onkeydown
当键盘上某个键被按下时触发此事件
onkeyup
当键盘上某个键被按下后松开时触发此事件
鼠标的移入和移出事件分别是onmouseover和onmouseout事件。
其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmouseout事件在鼠标移出对象上方时触发事件处理程序。
可以利用这两个事件在指定的对象上移动鼠标时，实现对象的动态效果。
下面的示例演示了鼠标移入移出表格时，改变该行的背景颜色，即实现“光棒效果”。
主要是利用onmouseover和onmouseout事件来完成鼠标的移入和移出动作。
例9-8：
实现表格的“光棒效果”
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
实现表格的“光棒效果”
---->
table{
border-collapse:
collapse;
}
functionmouseover（tr）{//鼠标移上触发的函数
tr.style.background="#D5AAFB";//改变该行背景颜色
tr.style.cursor="pointer";//改变鼠标的样式
}
functionmouseout（tr）{//鼠标移出触发的函数
tr.style.background="#fff";
}
functionmyClick（）{//鼠标单击触发的函数
alert（"我被单击了"）;
}
functiondblclick（）{//鼠标双击触发的函数
alert（"我被双击了"）;
}
#6699FF;">
图书标号 |
图书名称 | 作者 | 出版社名称 | 定价 |
703010501 | Java设计模式 | 张跃平 | 清华大学出版社 | ￥29.00 |
703010502 | JavaWeb开发技术大全 | 李宁 | 清华大学出版社 | ￥79.80 |
9.2.5页面相关事件
页面事件时在页面加载或改变浏览器大小、位置以及对页面中的滚动条进行操作时，所触发的事件处理程序。
页面的相关事件见下表：
页面的相关事件
事件名称
说明
onload
关闭内容加载完成时触发此事件
onunload
关闭当前页触发此事件
onresize
当浏览器窗口的大小被改变时触发此事件
onerror
出现错误时触发此事件
onscroll
当滚动条移动时触发此事件
页面大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，主要用于固定浏览器的大小。
例9-9：
固定浏览器的大小
9.2.6表单相关事件
表单事件实际上就是对元素获得或失去焦点的动作进行控制。
可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。
表单的相关事件见下表：
表单的相关事件
事件名称
说明
onblur
当前元素失去焦点时触发此事件
onchange
当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus
当某个元素获得焦点时触发此时间
onreset
当表单中RESET的属性被激活时触发此事件
onsubmit
一个表单被提交时触发此事件
获得焦点事件是当某个元素获得焦点时触发事件处理程序。
失去焦点时间（onblur）是当前元素失去焦点时触发事件处理程序。
一般情况下，这两个事件同时使用。
例9-10：
文本框事件
文本框相关事件应用
divinput{width:
130px;}
functiontxtfocus（obj）{
obj.style.background="#ff6";
}
functiontxtblur（obj）{
obj.style.background="fff";
}
functionchksubmit（）{
if（document.getElementById（"name"）.value==""）{
alert（"姓名不能为空"）;
returnfalse;
}
if（document.getElementById（"pwd"）.value==""）{
alert（"密码不能为空"）;
returnfalse;
}
if（document.getElementById（"sex"）.value==""）{
alert（"请选择性别"）;
returnfalse;
}
returntrue;
}
13px;">