JavaScript编程技术.ppt

4.1.4 JavaScript函数(重点) 定义函数，一般放在HTML文档的head/head之间，格式： function 函数名(参数名1,参数名2,… ){ 语句; } 调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝函数名(参数值1,参数值2,…); 例： function sum ( one, two){ var result = one + two; return result; } INPUT name=add type=button value=加法 onClick=sum(2,5) 将计算结果返回调用者 函数调用 JavaScript 事件概述 事件类型 事件名 说明 鼠标类 onClick 鼠标单击对象时 onMouseOver 鼠标悬停在对象区域时 onMouseOut 鼠标移出对象区域时 onMouseMove 鼠标在对象区域内移动时 onMouseDown 在对象区域内按下鼠标键时 onMouseUp 在对象区域内弹起鼠标按键时 编辑类 onChange 值发生改变时 onFocus 对象获得焦点时，如文本框获得鼠标光标。 onBlur 失去焦点时 表单类 onSubmit 单击submit按钮提交表单时 文档类 onLoad 网页文档加载时 键盘类 onKeyDown 按下键盘按键时 … 命令按钮与表单对象 命令按钮的onClick事件（命令有三种类型） button：需要编写事件处理程序 submit、reset：有默认的onClick事件处理程序 单击submit按钮时，触发表单的onSubmit事件 单击reset按钮，将表单元素恢复为默认值 为submit、reset按钮的onClick事件添加自定义事件处理程序 onClick=return 自定义函数() 首先调用自定义函数，然后根据返回值决定是否执行默认的事件处理程序，如果返回true，则执行，否则不执行。 表单的onSubmit事件 默认事件处理程序：向服务器提交表单数据 添加自定义事件处理程序： onSubmit=return 自定义函数() 首先调用自定义函数，根据返回值决定是否向服务器提交表单数据，如果返回true，则提交，否则不提交。 JavaScript的内置对象 浏览器对象模型BOM：window, history, location 文档对象模型DOM：document, String, date, math document对应一个html文件，可以访问页面中的所有元素，body,div,p,span,ainput,table等。 getElementById()返回拥有指定id 的第一个对象的引用 setElementByName() 返回带有指定名称的对象集合 getElementByTagName()返回带有指定标签名的对象数组 内置对象－String(重点) 名 称 说 明 属性 length 返回字符串的长度 方法 indexOf(子串[,起始位置] ) 查找子串的首位置，未找到时返回-1 lastIndexOf(子串[,截止位置]) 查找子串的尾位置，未找到时返回-1 split(分隔符) 将一个字串按分隔符分隔为字串数组 substr(起始位置[,长度]) 返回子串 toLowerCase( ) 将字符串转换成小写 toUpperCase( ) 将字符串转换成大写 常用方法和属性 * * * 强调JS的主要功能： 1）数据验证 2）网页特效 3）因为js是脚本语言，所以代码也称为js脚本 * 和C语言一样，变量的使用分为两步： 1）声明变量 2）给变量赋值 * 讲解要点： 1.因为学生初步接触函数、事件等概念。所以这部分一定要放慢节奏的讲解，随时关注学生的反映，一旦明白后，后续的例子讲解就非常顺利了。 2.学生对函数、事件等概念现在还不能理解，告诉他们步骤： 第一步：定义函数，象C语言的一样，在JavaScript中也是先定义函数，然后再调用执行，语法是： function 函数名(参数列表) { //JavaScript语句； } 其中，function是关键字。 第二步：在函数中编写JavaScript脚本代码 第三步：和C语言一样，函数定义好后，不能执行，需要去调用它。 添加按钮的单击事件，表示当用户单击按钮时将调用这个函数，执行函数中的脚本代码，从而完成计算功能。 * 提问： 前面我们学习过表单和表单元素，按钮分为哪三类？ 回答：提交按钮、重置按钮、普通按钮 * 讲解步骤： 1）先打开演示效果，让学员明白我们希望实现一个什么功能的页面。参考TG7-Source 文件夹中的“算