第二章

第二章 函数和事件

课程目标 • 熟悉JavaScript的默认函数，包括eval()函数、isNaN()函数、parseInt()函数、parseFloat()函数 • 掌握JavaScript自定义函数的结构、参数及调用 • 熟悉定时器的相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数的使用 • 理解JavaScript的函数及常用事件的使用

体验项目——<时间显示器、文字循环滚动显示> 你想在自己的网页上放一个比较符合中国人习惯的时间显示器吗？一个随时变化的时钟，显示效果如图所示：我们可以用JavaScript实现文字循环滚动显示的功能，显示效果如下图所示

默认函数 JavaScript提供了一些默认的函数 • 编码函数escape()：将非字母、数字字符转换成ASCII码 • 译码函数unescape()：将ASCII码转换成字母、数字字符 • 求值函数eval() • 数值判断函数isNaN()：判断一个值是否为非数值类型 • 整数转换函数parseInt()：将不同进制（二、八、十六进制）的数值转换成十进制整数 • 浮点数转换函数parseFloat()：将数值字串转换成浮点数本节只介绍后四种函数

提交 eval()函数求值函数eval()的格式为：eval(<表达式>) 下面的例子将用eval函数得到一个文本框的值，然后通过点击按钮弹出一个对话框将其输出。 <script> function show(obj) { var str=eval("document.Form."+obj+".value"); alert(“你输入的姓名是:”+str); } </script> <form name="Form" id="Form"> 姓名： <input name="name" type="text" value="韦小宝"> <input name="button" type="button" value="提交" onClick=show("name")> </form>

isNaN()函数 数值判断函数isNaN()的格式：isNaN(<量>) 下例中isNaN函数将判断变量是否不是数值，并输出判断结果。 <script> var x=15; var y="黄雅玲"; document.write("<LI>x不是数值吗？",isNaN(x)); document.write("<LI>y不是数值吗？",isNaN(y)); </script>

parseInt()函数 整数转换函数parseInt()的功能是将不同进制（二、八、十六）的数值转换成十进制整数。格式：parseInt(数值字串[，底数]) 下面演示了将一个二进制数和一个十六进制数转换成十进制数。 <script> document.write("1101<sub>2</sub>=",parseInt("1101",2),"<sub>10</sub><br>"); document.write("BFFF<sub>16</sub>=",parseInt("BFFF",16),"<sub>10</sub><br>"); </script>

parseFloat()函数 parseFloat()是浮点数转换函数，它将数值字串转换成浮点数。格式：parseFloat(数值字串) <script> document.write(parseInt("3.1234A56"),"<br>"); document.write(parseFloat("3.1234A56"),"<br>"); </script>

自定义函数 函数是独立于主程序的、具有特定功能的一段程序代码块。 JavaScript函数定义 function 函数名（参数表，变元） { 函数体; return 表达式; }

说明： • 当调用函数时，所用变量或字面量均可作为变元传递。 • 函数由关键字function定义。 • 函数名：定义自己函数的名字。 • 参数表，是传递给函数使用或操作的值，其值可以是常量、变量或其它表达式。 • 通过指定函数名（实参）来调用一个函数。 • 函数的返回值是可选项，如果需要返回值，就必须使用return语句将值返回。 • 函数名对大小写是敏感的。约定： • 函数名：易于识别（同变量命名规则）。 • 程序代码：模块化设计。 • 函数位置：按逻辑顺序，集中置顶。

函数中的形式参数 在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.length来检查参数的个数。 function function_Name(exp1,exp2,exp3,exp4) Number =function_Name.arguments.length; if(Number>1) document.wrile(exp2); if(Number>2) document.write(exp3); if(Number>3) document.write(exp4); 获取形参的个数

函数的调用 格式：函数名([参数[，参数...]]) 下面的例子演示了没有返回值的函数的定义及调用。 <script> function showName(name) { document.write("我是"+name); } showName("玲玲"); //函数调用 </script>

上例中的function showName(name)为函数定义，其中括号内的name是函数的形式参数，这一点与C语言是完全相同的，而showName(“玲玲”)则是对函数的调用，用于实现需要的功能。下面的例子演示了带返回值的函数的定义及调用。 <script> function showName(name) { str="我是" +name; return str; } document.write(showName("周伯通")); </script>

函数与事件 事件驱动及事件处理的基本概念 JavaScript是基于对象（Object-Based）的语言，这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动（Event Driven）。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（Event Driver）。而对事件进行处理的程序或函数，我们称之为事件处理程序（Event Handler）。

事件处理程序 浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。 HTML标签属性：格式：<tag on事件=“<语句组>|<函数名>”>

由于在JavaScript中对象事件的处理通常由函数（function）来完成，且其基本格式与函数一样，所以可以将前面所介绍的所有函数作为事件处理程序。 格式如下： function 事件处理名（参数表） { 事件处理语句集； …… }

事件驱动 JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：单击事件onClick 改变事件onChange 选中事件onSelect 获得焦点事件onFocus 失去焦点onBlur 载入文件onLoad 鼠标指示事件onMouseOver 提交事件onSubmit

单击事件onClick 当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生单击事件： button（按钮对象） checkbox（复选框）或（检查列表框） radio（单选钮） reset buttons（重要按钮） submit buttons（提交按钮）

比如，可以通过下面的按钮激活change()函数，当然change()函数是需要另外提供的：比如，可以通过下面的按钮激活change()函数，当然change()函数是需要另外提供的： <form> <input type="button" value=“” onClick="change()"> </form> 　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript的内部函数，还可以直接使用JavaScript的代码等。

<body> <form> 请输入基本资料：<br> 姓名： <input type="text" name="usr" size="8"> <input type="button" value="请单击" onClick="alert('谢谢你的填写...')"> </form> </body> 点击“请单击”按钮后将引发onClick事件，即弹出“谢谢你的填写...”的对话框。

改变事件onChange 当一个text或textarea域失去焦点并更改值时触发onChange事件，当select下拉选项中的一个选项状态改变后也会引发该事件。事件适用对象fileUpload、select、text、textarea。下面的例子在文本框的内容改变后，将弹出一个显示“内容即将改变！”的对话框： <form> <input type="text" name="Test" value="Test" onChange="alert('内容即将改变!')"> </form>

页面运行后在文本框中输入内容，即内容发生改变，然后将鼠标拖走，就会引发onChange事件 将内容改成“Test1”后将鼠标拖走，即弹出对话框。

选中事件onSelect 当text或textarea对象中的文字被选中后（文字高亮显示），引发该事件。下面的例子中，当文本框的内容被选中后，将弹出一个显示“内容已被选中!”的对话框： <form> <input type="text" name="Test" value="Test" onSelect="alert('内容已被选中!')"> </form> 选中文本框中的内容后，就会弹出对话框

获得焦点事件onFocus 当用户单击text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。下面的例子中，当鼠标移到文本域的地方即获得焦点时，立刻弹出一个提示“已经获得焦点!”的对话框： <input type="textarea" value="" name="valueField" onFocus="alert('已经获得焦点!')">

失去焦点onBlur 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该事件，onBlur事件与onFocus事件是一个对应的关系。该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。下面的例子中，浏览器的起始背景色为“lightgrey”，当鼠标移到文本域的地方即获得焦点时，浏览器的背景色变为“red”，当鼠标焦点移动到浏览器的其他地方时，浏览器的背景色变为“white”。

<body bgColor="lightgrey"> <form> <input type="text" onFocus="document.bgColor='red'" onBlur="document.bgColor='white'" > </form> </body> 运行后，文本框获得焦点后的页面显示效果如图所示：

载入文件onLoad 当文件载入时，产生该事件。onLoad的作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。下面的代码在文档打开时，将弹出提示“建议浏览器的分辨率：800x600”的对话框。 <script> function show() { var str="建议浏览器的分辨率：800x600"; alert(str); } </script> <body onload="show();">

鼠标指示事件onMouseOver 当鼠标指到相应的位置时引发的事件。事件适用对象：layer，link。下面的例子中，用href给“Click me”加上一个超链接，当鼠标指到超链接“Click me”时，将在状态栏提示“Click this if you dare!”。 <a href="http://www.myhome.com/" onMouseOver="window.status='Click this if you dare!'; return true"> Click me </a> 当鼠标指到文字“Click me”上时，将在状态栏显示提示文字“Click this if you dare!”

提交事件onSubmit 它是在点击提交按钮时引发的事件。事件适用的对象：form 语法：onSubmit="handlerText" 下面的例子中，在点击“提交”按钮时，就会弹出一个“你确认提交吗?”的提示对话框。 <form onSubmit="alert('你确认提交吗?')"> <input type="text" name="txt" value="测试文本"> <input type="submit" value="提交"> </form> 在点击“提交”按钮后，将引发onSubmit事件，从而弹出提示对话框

定时器 定时器是用以指定在一段特定的时间后执行某段程序。常用的定时器函数有以下几个： setTimeout()：定时器 clearTimeout()：终止定时器 setInterval()：设置定时器 clearInterval()：取消使用setInterval()设置的定时器

本章总结 • 熟悉JavaScript的默认函数，包括eval()函数、isNaN()函数、parseInt()函数、parseFloat()函数 • 掌握JavaScript自定义函数的结构、参数及调用 • 熟悉定时器的相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数的使用 • 理解JavaScript的函数及常用事件的使用

第二章

第二章

Presentation Transcript