函数和事件专题知识讲座省公共课一等奖全国赛课获奖课件.pptx

第二章第二章函数和事件函数和事件第1页课程目标课程目标q熟悉熟悉JavaScript默认函数，包含默认函数，包含eval()函数、函数、isNaN()函函数、数、parseInt()函数、函数、parseFloat()函数函数q掌握掌握JavaScript自定义函数结构、参数及调用自定义函数结构、参数及调用q熟悉定时器相关操作，包含熟悉定时器相关操作，包含setTimeout()、clearTimeout()、setInterval()、clearInterval()等函数等函数使用使用q了解了解JavaScript函数及惯用事件使用函数及惯用事件使用第2页体验项目体验项目 你想在自己网页上放一个比较符合中国人习惯时间显示你想在自己网页上放一个比较符合中国人习惯时间显示器吗？一个随时改变时钟，显示效果如图所表示：器吗？一个随时改变时钟，显示效果如图所表示：我们能够用我们能够用JavaScript实现文字循环滚动显示功效，显示效果以下列图所表示实现文字循环滚动显示功效，显示效果以下列图所表示第3页默认函数默认函数 JavaScript提供了一些默认函数提供了一些默认函数 q编码函数编码函数escape()：将非字母、数字字符转换成：将非字母、数字字符转换成ASCII码码q译码函数译码函数unescape()：将：将ASCII码转换成字母、数字字符码转换成字母、数字字符q求值函数求值函数eval()q数值判断函数数值判断函数isNaN()：判断一个值是否为非数值类型：判断一个值是否为非数值类型q整数转换函数整数转换函数parseInt()：将不一样进制（二、八、十六进制）数值：将不一样进制（二、八、十六进制）数值转换成十进制整数转换成十进制整数q浮点数转换函数浮点数转换函数parseFloat()：将数值字串转换成浮点数：将数值字串转换成浮点数本节只介绍后四种函数本节只介绍后四种函数 第4页eval()函数函数 求值函数求值函数eval()格式为：格式为：eval()下面例子将用下面例子将用eval函数得到一个文本框值，函数得到一个文本框值，然后经过点击按钮弹出一个对话框将其输出。然后经过点击按钮弹出一个对话框将其输出。function show(obj)var str=eval(document.Form.+obj+.value);alert(“你输入姓名是你输入姓名是:”+str);姓名：姓名：提交提交第5页isNaN()函数函数 数值判断函数数值判断函数isNaN()格式：格式：isNaN()下例中下例中isNaN函数将判断变量是否不是数值，并输出判断函数将判断变量是否不是数值，并输出判断结果。结果。var x=15;var y=黄雅玲黄雅玲;document.write(x不是数值吗？不是数值吗？,isNaN(x);document.write(y不是数值吗？不是数值吗？,isNaN(y);第6页parseInt()函数函数 整数转换函数整数转换函数parseInt()功效是将不一样进制（二、八、十六）数值转功效是将不一样进制（二、八、十六）数值转换成十进制整数。换成十进制整数。格式：格式：parseInt(数值字串数值字串，底数，底数)下面演示了将一个二进制数和一个十六进制数转换成十进制数。下面演示了将一个二进制数和一个十六进制数转换成十进制数。document.write(11012=,parseInt(1101,2),10);document.write(BFFF16=,parseInt(BFFF,16),10);第7页parseFloat()函数函数 parseFloat()是浮点数转换函数，它将数值字串转换成浮点是浮点数转换函数，它将数值字串转换成浮点数。数。格式：格式：parseFloat(数值字串数值字串)document.write(parseInt(3.1234A56),);document.write(parseFloat(3.1234A56),);第8页自定义函数自定义函数 函数是独立于主程序、含有特定功效一段程序代码块。函数是独立于主程序、含有特定功效一段程序代码块。JavaScript函数定义函数定义function 函数名（参数表，变元）函数名（参数表，变元）函数体函数体;return 表示式表示式;第9页说明：说明：q当调用函数时，所用变量或字面量均可作为变元传递。当调用函数时，所用变量或字面量均可作为变元传递。q函数由关键字函数由关键字function定义。定义。q函数名：定义自己函数名字。函数名：定义自己函数名字。q参数表，是传递给函数使用或操作值，其值能够是常量、参数表，是传递给函数使用或操作值，其值能够是常量、变量或其它表示式。变量或其它表示式。q经过指定函数名（实参）来调用一个函数。经过指定函数名（实参）来调用一个函数。q函数返回值是可选项，假如需要返回值，就必须使用函数返回值是可选项，假如需要返回值，就必须使用return语句将值返回。语句将值返回。q函数名对大小写是敏感。函数名对大小写是敏感。约定：约定：q函数名：易于识别（同变量命名规则）。函数名：易于识别（同变量命名规则）。q程序代码：模块化设计。程序代码：模块化设计。q函数位置：按逻辑次序，集中置顶。函数位置：按逻辑次序，集中置顶。第10页函数中形式参数函数中形式参数 在函数定义中，我们看到函数名后有参数表，这些参数变在函数定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量个数呢量可能是一个或几个。那么怎样才能确定参数变量个数呢？在？在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页函数调用函数调用 格式：函数名格式：函数名(参数参数，参数，参数.)下面例子演示了没有返回值函数定义及调用。下面例子演示了没有返回值函数定义及调用。function showName(name)document.write(我是我是+name);showName(玲玲玲玲);/函数调用函数调用第12页上例中上例中function showName(name)为函数定义，其中括号为函数定义，其中括号内内name是函数形式参数，这一点与是函数形式参数，这一点与C语言是完全相同，而语言是完全相同，而showName(“玲玲玲玲”)则是对函数调用，用于实现需要功效。则是对函数调用，用于实现需要功效。下面例子演示了带返回值函数定义及调用。下面例子演示了带返回值函数定义及调用。function showName(name)str=我是我是+name;return str;document.write(showName(周伯通周伯通);第13页函数与事件函数与事件 事件驱动及事件处理基本概念事件驱动及事件处理基本概念 JavaScript是基于对象（是基于对象（Object-Based）语言，这与）语言，这与Java不一样，不一样，Java是面向对象语言。而基于对象基本特征，就是采取事件驱动是面向对象语言。而基于对象基本特征，就是采取事件驱动（Event Driven）。通常鼠标或热键动作我们称之为事件）。通常鼠标或热键动作我们称之为事件（Event），而由鼠标或热键引发一连串程序动作，称之为事件驱），而由鼠标或热键引发一连串程序动作，称之为事件驱动（动（Event Driver）。而对事件进行处理程序或函数，我们称之）。而对事件进行处理程序或函数，我们称之为事件处理程序（为事件处理程序（Event Handler）。）。第14页事件处理程序事件处理程序 浏览器响应某个事件，实现用户交互操作而进行处理（过浏览器响应某个事件，实现用户交互操作而进行处理（过程）。程）。事件处理程序调用：浏览器等候用户交互操作，并在事件事件处理程序调用：浏览器等候用户交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理发生时，自动调用事件处理程序（函数），完成事件处理过程。过程。HTML标签属性：标签属性：格式：格式：tag on事件事件=“|”第15页因为在因为在JavaScript中对象事件处理通常由函数中对象事件处理通常由函数（function）来完成，且其基本格式与函数一样，所以能）来完成，且其基本格式与函数一样，所以能够将前面所介绍全部函数作为事件处理程序。够将前面所介绍全部函数作为事件处理程序。格式以下：格式以下：function 事件处理名（参数表）事件处理名（参数表）事件处理语句集；事件处理语句集；第16页事件驱动事件驱动 JavaScript事件驱动中事件是经过鼠标或热键动作引发。事件驱动中事件是经过鼠标或热键动作引发。它主要有以下几个事件它主要有以下几个事件：单击事件单击事件onClick改变事件改变事件onChange选中事件选中事件onSelect取得焦点事件取得焦点事件onFocus失去焦点失去焦点onBlur载入文件载入文件onLoad鼠标指示事件鼠标指示事件onMouseOver提交事件提交事件onSubmit第17页单击事件单击事件onClick 当用户单击鼠标按钮时，产生当用户单击鼠标按钮时，产生onClick事件。同时事件。同时onClick指定事件处理程序或代码将被调用执行。通常在以下基本指定事件处理程序或代码将被调用执行。通常在以下基本对象中产生单击事件：对象中产生单击事件：button（按钮对象）（按钮对象）checkbox（复选框）或（检验列表框）（复选框）或（检验列表框）radio（单项选择钮）（单项选择钮）reset buttons（主要按钮）（主要按钮）submit buttons（提交按钮）（提交按钮）第18页比如，能够经过下面按钮激活比如，能够经过下面按钮激活change()函数，当然函数，当然change()函数是需要另外提供：函数是需要另外提供：在在onClick等号后，能够使用自己编写函数作为事件处理等号后，能够使用自己编写函数作为事件处理程序，也能够使用程序，也能够使用JavaScript内部函数，还能够直接使用内部函数，还能够直接使用JavaScript代码等。代码等。第19页请输入基本资料：请输入基本资料：姓名：姓名：点击点击“请单击请单击”按钮后将引发按钮后将引发onClick事件，即弹出事件，即弹出“谢谢你填谢谢你填写写.”对话框。对话框。第20页改变事件改变事件onChange 当一个当一个text或或textarea域失去焦点并更改值时触发域失去焦点并更改值时触发onChange事件，当事件，当select下拉选项中一个选项状态改变后下拉选项中一个选项状态改变后也会引发该事件。也会引发该事件。事件适用对象事件适用对象fileUpload、select、text、textarea。下面例子在文本框内容改变后，将弹出一个显示下面例子在文本框内容改变后，将弹出一个显示“内容即内容即将改变！将改变！”对话框：对话框：第21页页面运行后在文本框中输入内容，即内容发生改变，然后页面运行后在文本框中输入内容，即内容发生改变，然后将鼠标拖走，就会引发将鼠标拖走，就会引发onChange事件事件 将内容改成将内容改成“Test1”后将鼠标拖走，后将鼠标拖走，即弹出对话框。即弹出对话框。第22页选中事件选中事件onSelect 当当text或或textarea对象中文字被选中后（文字高亮显示），对象中文字被选中后（文字高亮显示），引发该事件。引发该事件。下面例子中，当文本框内容被选中后，将弹出一个显示下面例子中，当文本框内容被选中后，将弹出一个显示“内容已被选中内容已被选中!”对话框：对话框：选汉字本框中内容后，就会弹出对话框选汉字本框中内容后，就会弹出对话框 第23页取得焦点事件取得焦点事件onFocus 当用户单击当用户单击text或或textarea以及以及select对象时，产生该事件。对象时，产生该事件。此时该对象成为前台对象。此时该对象成为前台对象。该事件适用对象：该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。下面例子中，当鼠标移到文本域地方即取得焦点时，立刻下面例子中，当鼠标移到文本域地方即取得焦点时，立刻弹出一个提醒弹出一个提醒“已经取得焦点已经取得焦点!”对话框：对话框：第24页失去焦点失去焦点onBlur 当当text对象或对象或textarea对象以及对象以及select对象不再拥有焦点、对象不再拥有焦点、而退到后台时，引发该事件，而退到后台时，引发该事件，onBlur事件与事件与onFocus事件事件是一个对应关系。是一个对应关系。该事件适用对象：该事件适用对象：button，checkbox，fileUpload，layer，password，radio，reset，select，submit，text，textarea，window。下面例子中，浏览器起始背景色为下面例子中，浏览器起始背景色为“lightgrey”，当鼠，当鼠标移到文本域地方即取得焦点时，浏览器背景色变为标移到文本域地方即取得焦点时，浏览器背景色变为“red”，当鼠标焦点移动到浏览器其它地方时，浏览器，当鼠标焦点移动到浏览器其它地方时，浏览器背景色变为背景色变为“white”。第25页运行后，文本框取得焦点后页面显示效果如图所表示：运行后，文本框取得焦点后页面显示效果如图所表示：第26页载入文件载入文件onLoad 当文件载入时，产生该事件。当文件载入时，产生该事件。onLoad作用就是在首次载入作用就是在首次载入一个文档时检测一个文档时检测cookie值，并用一个变量为其赋值，使它值，并用一个变量为其赋值，使它能够被源代码使用。能够被源代码使用。下面代码在文档打开时，将弹出提醒下面代码在文档打开时，将弹出提醒“提议浏览器分辨率：提议浏览器分辨率：800 x600”对话框。对话框。function show()var str=提议浏览器分辨率：提议浏览器分辨率：800 x600;alert(str);第27页鼠标指示事件鼠标指示事件onMouseOver 当鼠标指到对应位置时引发事件。当鼠标指到对应位置时引发事件。事件适用对象：事件适用对象：layer，link。下面例子中，用下面例子中，用href给给“Click me”加上一个超链接，当加上一个超链接，当鼠标指到超链接鼠标指到超链接“Click me”时，将在状态栏提醒时，将在状态栏提醒“Click this if you dare!”。Click me 当鼠标指到文字当鼠标指到文字“Click me”上时，将在状上时，将在状态栏显示提醒文字态栏显示提醒文字“Click this if you dare!”第28页提交事件提交事件onSubmit 它是在点击提交按钮时引发事件。它是在点击提交按钮时引发事件。事件适用对象：事件适用对象：form语法：语法：onSubmit=handlerText下面例子中，在点击下面例子中，在点击“提交提交”按钮时，就会弹出一个按钮时，就会弹出一个“你你确认提交吗确认提交吗?”提醒对话框。提醒对话框。在点击在点击“提交提交”按钮后，按钮后，将引发将引发onSubmit事件，事件，从而弹出提醒对话框从而弹出提醒对话框 第29页定时器定时器 定时器是用以指定在一段特定时间后执行某段程序。惯用定时器是用以指定在一段特定时间后执行某段程序。惯用定时器函数有以下几个：定时器函数有以下几个：setTimeout()：定时器：定时器clearTimeout()：终止定时器：终止定时器setInterval()：设置定时器：设置定时器clearInterval()：取消使用：取消使用setInterval()设置定时器设置定时器 第30页本章总结本章总结q熟悉熟悉JavaScript默认函数，包含默认函数，包含eval()函数、函数、isNaN()函数、函数、parseInt()函数、函数、parseFloat()函数函数q掌握掌握JavaScript自定义函数结构、参数及调用自定义函数结构、参数及调用q熟悉定时器相关操作，包含熟悉定时器相关操作，包含setTimeout()、clearTimeout()、setInterval()、clearInterval()等函数使用等函数使用q了解了解JavaScript函数及惯用事件使用函数及惯用事件使用第31页