javascriptWord格式文档下载.docx
《javascriptWord格式文档下载.docx》由会员分享，可在线阅读，更多相关《javascriptWord格式文档下载.docx（20页珍藏版）》请在冰豆网上搜索。
>
html>
<
title>
在事件响应中调用函数<
/title>
metahttp-equiv="
keywords"
content="
keyword1,keyword2,keyword3"
description"
thisismypage"
content-type"
text/html;
charset=UTF-8"
--<
linkrel="
stylesheet"
type="
text/css"
href="
./styles.css"
-->
scripttype="
text/javascript"
functiontest（）{
alert（"
调用test（）函数成功!
"
）;
}
body>
ahref="
javascript:
test（）;
测试调用test（）方法<
/a>
/body>
/html>
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：
内置函数的应用
Content-Type"
/>
内置函数的应用<
scripttype="
varnum1="
123abc"
;
varnum2="
abc123"
document.write（"
（1）使用parseInt（）函数：
br>
123abc转换结果为：
+parseInt（num1）+"
abc123转换结果为：
+parseInt（num2）+"
varnum3="
123.456789abc"
（2）使用parseFloat（）函数：
123.456789abc转换结果为：
+parseFloat（num3）+"
（3）使用isNaN（）函数：
123.456789abc转换结果是否为NaN：
+isNaN（parseFloat（num3））+"
abc123转换结果是否为NaN：
+isNaN（parseInt（num2））+"
（4）使用encodeURI（）函数：
转化为网络资源地址为：
+encodeURI（"
http:
//127.0.0.1/save.html?
name=测试"
）+"
（5）使用decodeURI（）函数：
+decodeURI（encodeURI（"
））+"
（6）使用eval（）函数：
vartest="
1+1"
不使用了eval函数：
+"
使用了eval函数：
+eval（test）+"
br/>
/*
escape（）函数
*/
（7）使用escape（）函数和unescape（）：
JamesBlunt被编码后：
+escape（"
JamesBlunt"
document.write（escape（"
被解码后：
+unescape（escape（"
）））;
/br>
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脚本中执行按钮的单击事件，而不需要在按钮的<
input>
标签中调用单击事件。
例9-7：
在JavaScript脚本中指定事件
9.2.4鼠标键盘事件
鼠标和键盘事件是在页面操作中使用最频繁的操作，可以利用鼠标事件在页面中实现鼠标移动和单击时的特殊效果，也可以利用键盘时间来制作页面的快捷键等。
鼠标和键盘的常用事件如下表：
鼠标和键盘的常用事件
事件名称
onclick
鼠标单击时触发此事件
ondblclick
鼠标双击时触发此事件
onmousedown
按下鼠标时触发此事件
onmouseup
鼠标按下后松开鼠标时触发此事件
onmouseover
当鼠标移动到某个对象范围的上方时触发此事件
onmousemove
鼠标移动时触发此事件
onmouseout
当鼠标离开某对象范围时触发此事件
onkeypress
当键盘上某个键被按下并且释放时触发此事件
onkeydown
当键盘上某个键被按下时触发此事件
onkeyup
当键盘上某个键被按下后松开时触发此事件
鼠标的移入和移出事件分别是onmouseover和onmouseout事件。
其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmouseout事件在鼠标移出对象上方时触发事件处理程序。
可以利用这两个事件在指定的对象上移动鼠标时，实现对象的动态效果。
下面的示例演示了鼠标移入移出表格时，改变该行的背景颜色，即实现“光棒效果”。
主要是利用onmouseover和onmouseout事件来完成鼠标的移入和移出动作。
例9-8：
实现表格的“光棒效果”
实现表格的“光棒效果”<
styletype="
table{
border-collapse:
collapse;
/style>
functionmouseover（tr）{//鼠标移上触发的函数
tr.style.background="
#D5AAFB"
//改变该行背景颜色
tr.style.cursor="
pointer"
//改变鼠标的样式
}
functionmouseout（tr）{//鼠标移出触发的函数
#fff"
functionmyClick（）{//鼠标单击触发的函数
alert（"
我被单击了"
functiondblclick（）{//鼠标双击触发的函数
我被双击了"
<
tableid="
myTable"
width="
100%"
border="
1"
cellpadding="
0"
cellspacing="
trstyle="
background:
#6699FF;
th>
图书标号<
/th>
图书名称<
作者<
出版社名称<
定价<
/tr>
tronmouseover="
mouseover（this）"
onmouseout="
mouseout（this）"
onclick="
myClick（）"
td>
703010501<
/td>
Java设计模式<
张跃平<
清华大学出版社<
￥29.00<
ondblclick="
dblclick（）"
703010502<
JavaWeb开发技术大全<
李宁<
￥79.80<
/table>
9.2.5页面相关事件
页面事件时在页面加载或改变浏览器大小、位置以及对页面中的滚动条进行操作时，所触发的事件处理程序。
页面的相关事件见下表：
页面的相关事件
onload
关闭内容加载完成时触发此事件
onunload
关闭当前页触发此事件
onresize
当浏览器窗口的大小被改变时触发此事件
onerror
出现错误时触发此事件
onscroll
当滚动条移动时触发此事件
页面大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，主要用于固定浏览器的大小。
例9-9：
固定浏览器的大小
9.2.6表单相关事件
表单事件实际上就是对元素获得或失去焦点的动作进行控制。
可以利用表单事件来改变获得或失去焦点的元素样式，这里所指的元素可以是同一类型，也可以是多个不同类型的元素。
表单的相关事件见下表：
表单的相关事件
onblur
当前元素失去焦点时触发此事件
onchange
当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus
当某个元素获得焦点时触发此时间
onreset
当表单中RESET的属性被激活时触发此事件
onsubmit
一个表单被提交时触发此事件
获得焦点事件<
onfocus>
是当某个元素获得焦点时触发事件处理程序。
失去焦点时间（onblur）是当前元素失去焦点时触发事件处理程序。
一般情况下，这两个事件同时使用。
例9-10：
文本框事件
charset=gb2312"
文本框相关事件应用<
styletype="
divinput{width:
130px;
}
functiontxtfocus（obj）{
obj.style.background="
#ff6"
functiontxtblur（obj）{
fff"
functionchksubmit（）{
if（document.getElementById（"
name"
）.value=="
）{
姓名不能为空"
returnfalse;
if（document.getElementById（"
pwd"
alert（"
密码不能为空"
sex"
请选择性别"
returntrue;
bodystyle="
font-size:
13px;
formname="
MyForm"
onsubmit="
returnchksubmit（）"
div>
tablewidth="
cellpadding="
3"
tr>
姓名:
inputtype="
text"
id="
onfocus="
txtfocus（this）"
onblur="
txtblur（this）"
/>
密码：
性别：
selectid="
optionvalue="
---请选择性别--<
/option>
男"
男<
女"
女<
/select>
邮箱：
email"
/div>
table>
submit"
value="
提交"
reset"
重置"
/form>
9.3event对象
表示当前鼠标或键盘的一种状态或点击的对象。
9.3.1怎样引用event对象
在IE浏览器中，event对象作为window对象属性访问。
由于window对象引用部分是可选的，因此在脚本中可以像全局引用一样引用event对象。
这样，一个事件处理程序的任何语句在不进行特殊预处理和初始化的情况下，都可以访问event对象。
其中propertyName为event对象的属性。
9.3.2event对象的属性
event对象作为参数传递给事件处理程序，所以事件处理程序可直接访问event对象。
event代表事件的状态，例如触发事件的元素和按下的键等。
而且event对象只在事件发生的过程中才有效，这是不可忽略的。
Event的某些属性只对特定的事件有意义。
比如，fromElement和toElement属性只对onmouseover和onmouseout事件才有意思。
不同浏览器对event对象模型定义不同，属性有区别，IE的event对象属性见下表。
event对象的常见属性
属性名称
altkey、ctrlkey、shiftkey
布尔值，判断事件发生时是否按下Alt、Ctrl、Shift键
button
发生事件时鼠标所按下的键（0表示无，1表示左键，2表示右键，4表示中键）
cancelBubble
检测是否接受上层元素的事件的控制
clientX、clienty
返回鼠标在窗口区域中的X坐标和Y坐标
fromElement、toElement
检测onmouseover和onmouseout事件发生时，鼠标所离开和滑过的元素
offsetX、offsetY
光标相对于事件所在容器的水平和垂直位置（像素）
keyCode
检测键盘事件所对应的Unicode字符代码。
这个属性用于onkeydown、onkeyup和onkeypress事件。
本属性可读写，可为任何一个Unicode键盘内码。
如果没有触发键盘事件，则属性为0
returnValue
布尔值，设置或检查从事件中返回的值是否成功
srcElement
返回触发事件的对象。
只读属性
screenX、screenY
光标相对于屏幕的水平和垂直位置（像素）
type
返回事件的名称
x、y
光标相对于事件所在文档的水平和垂直位置（像素）
理解了事件与其处理器之间交互时event对象携带的信息，以及其全局特性，很容易通过调用对象属性的方式根据需要获取事件发生的诸多信息。
我们可以应用event对象中的keyCode、returnValue和altKey等属性，实现对键盘中的F5键和其他一些组合键进行屏蔽操作。
当程
升级会员 