函数和事件专题知识讲座市公开课获奖课件

1、第二章函数和事件第1页第1页课程目的熟悉JavaScript默认函数，包括eval()函数、isNaN()函数、parseInt()函数、parseFloat()函数掌握JavaScript自定义函数结构、参数及调用熟悉定期器相关操作，包括setTimeout()、clearTimeout() 、setInterval()、clearInterval()等函数使用理解JavaScript函数及惯用事件使用第2页第2页体验项目 你想在自己网页上放一个比较符合中国人习惯时间显示器吗？一个随时改变时钟，显示效果如图所表示： 我们能够用JavaScript实现文字循环滚动显示功效，显示效果以下图所表示

2、第3页第3页默认函数 JavaScript提供了一些默认函数 编码函数escape()：将非字母、数字字符转换成ASCII码译码函数unescape()：将ASCII码转换成字母、数字字符求值函数eval()数值判断函数isNaN()：判断一个值是否为非数值类型整数转换函数parseInt()：将不同进制（二、八、十六进制）数值转换成十进制整数浮点数转换函数parseFloat()：将数值字串转换成浮点数本节只简介后四种函数 第4页第4页eval()函数 求值函数eval()格式为：eval() 下面例子将用eval函数得到一个文本框值，然后通过点击按钮弹出一个对话框将其输出。 functio

3、n show(obj)var str=eval(document.Form.+obj+.value);alert(“你输入姓名是:”+str); 姓名： 提交第5页第5页isNaN()函数 数值判断函数isNaN()格式：isNaN() 下例中isNaN函数将判断变量是否不是数值，并输出判断结果。var x=15;var y=黄雅玲;document.write(x不是数值吗？,isNaN(x);document.write(y不是数值吗？,isNaN(y);第6页第6页parseInt()函数 整数转换函数parseInt()功效是将不同进制（二、八、十六）数值转换成十进制整数。格式：par

4、seInt(数值字串，底数)下面演示了将一个二进制数和一个十六进制数转换成十进制数。document.write(11012=,parseInt(1101,2),10);document.write(BFFF16=,parseInt(BFFF,16),10);第7页第7页parseFloat()函数 parseFloat()是浮点数转换函数，它将数值字串转换成浮点数。格式：parseFloat(数值字串) document.write(parseInt(3.1234A56),);document.write(parseFloat(3.1234A56),);第8页第8页自定义函数 函数是独立于主

5、程序、含有特定功效一段程序代码块。 JavaScript函数定义function 函数名（参数表，变元）函数体;return 表示式;第9页第9页阐明：当调用函数时，所用变量或字面量均可作为变元传递。函数由关键字function定义。函数名：定义自己函数名字。参数表，是传递给函数使用或操作值，其值能够是常量、变量或其它表示式。通过指定函数名（实参）来调用一个函数。函数返回值是可选项，假如需要返回值，就必须使用return语句将值返回。函数名对大小写是敏感。 商定：函数名：易于辨认（同变量命名规则）。程序代码：模块化设计。函数位置：按逻辑顺序，集中置顶。第10页第10页函数中形式参数 在函数定义

6、中，我们看到函数名后有参数表，这些参数变量也许是一个或几种。那么如何才干拟定参数变量个数呢？在JavaScript中可通过arguments.length来检查参数个数。function function_Name(exp1,exp2,exp3,exp4)Number =function_Name.arguments.length;if(Number1)document.wrile(exp2);if(Number2)document.write(exp3);if(Number3)document.write(exp4); 获取形参个数第11页第11页函数调用 格式：函数名(参数，参数.)下面例

7、子演示了没有返回值函数定义及调用。 function showName(name)document.write(我是+name);showName(玲玲); /函数调用第12页第12页上例中function showName(name)为函数定义，其中括号内name是函数形式参数，这一点与C语言是完全相同，而showName(“玲玲”)则是对函数调用，用于实现需要功效。下面例子演示了带返回值函数定义及调用。function showName(name)str=我是 +name;return str;document.write(showName(周伯通);第13页第13页函数与事件 事件驱动及

8、事件处理基本概念 JavaScript是基于对象（Object-Based）语言，这与Java不同，Java是面向对象语言。而基于对象基本特性，就是采取事件驱动（Event Driven）。通常鼠标或热键动作我们称之为事件（Event），而由鼠标或热键引发一连串程序动作，称之为事件驱动（Event Driver）。而对事件进行处理程序或函数，我们称之为事件处理程序（Event Handler）。第14页第14页事件处理程序 浏览器响应某个事件，实现用户交互操作而进行处理（过程）。事件处理程序调用：浏览器等待用户交互操作，并在事件发生时，自动调用事件处理程序（函数），完毕事件处理过程。HTML标

9、签属性：格式：tag on事件=“|”第15页第15页由于在JavaScript中对象事件处理通常由函数（function）来完毕，且其基本格式与函数同样，因此能够将前面所简介所有函数作为事件处理程序。 格式下列：function 事件处理名（参数表）事件处理语句集；第16页第16页事件驱动 JavaScript事件驱动中事件是通过鼠标或热键动作引起。它主要有下列几种事件 ：单击事件onClick改变事件onChange选中事件onSelect取得焦点事件onFocus失去焦点onBlur载入文献onLoad鼠标批示事件onMouseOver提交事件onSubmit第17页第17页单击事件on

10、Click 当用户单击鼠标按钮时，产生onClick事件。同时onClick指定事件处理程序或代码将被调用执行。通常在下列基本对象中产生单击事件： button（按钮对象）checkbox（复选框）或（检查列表框）radio（单选钮）reset buttons（主要按钮）submit buttons（提交按钮）第18页第18页比如，能够通过下面按钮激活change()函数，当然change()函数是需要另外提供：在onClick等号后，能够使用自己编写函数作为事件处理程序，也能够使用JavaScript内部函数，还能够直接使用JavaScript代码等。 第19页第19页请输入基本资料：姓名：

11、点击“请单击”按钮后将引起onClick事件，即弹出“谢谢你填写.”对话框。第20页第20页改变事件onChange 当一个text或textarea域失去焦点并更改值时触发onChange事件，当select下拉选项中一个选项状态改变后也会引起该事件。事件合用对象、select、text、textarea。下面例子在文本框内容改变后，将弹出一个显示“内容即将改变！”对话框：第21页第21页页面运营后在文本框中输入内容，即内容发生改变，然后将鼠标拖走，就会引起onChange事件 将内容改成“Test1”后将鼠标拖走，即弹出对话框。第22页第22页选中事件onSelect 当text或text

12、area对象中文字被选中后（文字高亮显示），引起该事件。下面例子中，当文本框内容被选中后，将弹出一个显示“内容已被选中!”对话框： 选中文本框中内容后，就会弹出对话框 第23页第23页取得焦点事件onFocus 当用户单击text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。该事件合用对象：button，checkbox，layer，password，radio，reset，select，submit，text，textarea，window。下面例子中，当鼠标移到文本域地方即取得焦点时，立刻弹出一个提醒“已经取得焦点!”对话框： 第24页第24页失去焦点onB

13、lur 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引起该事件，onBlur事件与onFocus事件是一个相应关系。该事件合用对象：button，checkbox，layer，password，radio，reset，select，submit，text，textarea，window。 下面例子中，浏览器起始背景色为“lightgrey”，当鼠标移到文本域地方即取得焦点时，浏览器背景色变为“red”，当鼠标焦点移动到浏览器其它地方时，浏览器背景色变为“white”。第25页第25页运营后，文本框取得焦点后页面显示效果如图所表示： 第26页第26页载入文

14、献onLoad 当文献载入时，产生该事件。onLoad作用就是在初次载入一个文档时检测cookie值，并用一个变量为其赋值，使它能够被源代码使用。下面代码在文档打开时，将弹出提醒“提议浏览器分辨率：800 x600”对话框。function show()var str=提议浏览器分辨率：800 x600;alert(str); 第27页第27页鼠标批示事件onMouseOver 当鼠标指到相应位置时引起事件。事件合用对象：layer，link。下面例子中，用href给“Click me”加上一个超链接，当鼠标指到超链接“Click me”时，将在状态栏提醒“Click this if you

15、dare!”。Click me 当鼠标指到文字“Click me”上时，将在状态栏显示提醒文字“Click this if you dare!” 第28页第28页提交事件onSubmit 它是在点击提交按钮时引起事件。事件合用对象：form语法：onSubmit=handlerText下面例子中，在点击“提交”按钮时，就会弹出一个“你确认提交吗?”提醒对话框。 在点击“提交”按钮后，将引起onSubmit事件，从而弹出提醒对话框 第29页第29页定期器 定期器是用以指定在一段特定期间后执行某段程序。惯用定期器函数有下列几种：setTimeout()：定期器clearTimeout()：终止定期器setInterval()：设置定期器clearIn