第七讲 JavaScript动态处理

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,CDL LBS Education, 2009 IBM Corporation,*,*,CDL LBS Education,第八讲,JavaScript,脚本语言,2024/9/13,内容,8.1JavaScript,简介,8.2,表单对象与事件,8.3,自定义函数,2024/9/13,2,8.1JavaScript,简介,Javascript,是一种解释性的，基于对象的脚本语言,(an interpreted, object-based scripting language),。,HTML,网页在互动性方面能力较弱，例如下拉菜单，就是用户点击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯,HTML,网页无法实现；又如验证,HTML,表单,(Form),提交信息的有效性，用户名不能为空，密码不能少于,4,位，邮政编码只能是数字之类，用纯,HTML,网页也无法实现。要实现这些功能，就需要用到,Javascript,。,2024/9/13,3,Javascript,是一种脚本语言，比,HTML,要复杂。不过即便你先前不懂编程，也不用担心，因为,Javascript,写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的,Javascript,代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。,正因为可以借鉴、参考优秀网页的代码，所以让,Javascript,本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考,Javascript,示例代码，也能很快上手。,2024/9/13,4,JavaScript,的语法很多和,Java,语言比较相似，比如语句的写法、运算符、,if,语句、循环语句等。但也有不一样的地方，如变量的定义、函数的定义，后面会讲到。,JavaScript,的标签是,:,，一般放在页面的,之间。,下面是一个简单的弹出提示框的,JavaScript,例子。,2024/9/13,5,例,4.1.1,JavaScript,例子,alert(,你好！,);,/,其中,alert,是,JavaScript,里弹出提示框的函数。,2024/9/13,6,运行结果,2024/9/13,7,在,JavaScript,里，变量都是用,var,来声明，不区分数据类型，为这个变量赋值什么类型的数据，就是什么类型。例如,：,var m = 1, n = 2;,var t = ,你好！,;,对于两个字符串变量，“,+”,运算符执行拼接操作；对于两个数值变量，“,+”,运算符执行加运算；对于一个字符串变量和一个数值变量，“,+”,把数值变量的值当作字符串执行拼接操作。,下面我们通过一个例子体会一下。,2024/9/13,8,例,8.1.2,var m = 1, n = 2;,alert(m + + + n + = + (m+n);,2024/9/13,9,运行结果,:,2024/9/13,10,8.2,表单对象与事件,在,JavaScript,编程中，表单对象是经常使用的对象。表单对象就是在页面中定义的表单，表单对象的名字在,form,标签中指定，如：,在,JavaScript,代码中就可以使用,teamForm,来指向这个表单对象。表单的元素（如输入框、密码框、,）作为表单对象的属性，其名字也是在标签中指定,.,8.2.1,表单对象,2024/9/13,11,例,8.2.1,组名：,口号：,组长：,2024/9/13,12,运行结果,:,2024/9/13,13,在,JavaScript,代码中可以使用,teamForm.name,、,teamForm.slogan,、,teamForm.leader,指向这几个文本框，文本框里面填写的内容对应文本框对象的,value,属性,.,如,teamForm.name.value,、,teamForm.slogan.value,、,teamForm.leader.value,分别对应用户填写的组名、口号、组长的值。,2024/9/13,14,8.2.2,事件,在,JavaScript,中，可以通过触发事件执行,JavaScript,语句，或调用,JavaScript,函数。,下面介绍几个与表单对象有关的事件。,2024/9/13,15,8.2.2.1,点击事件,onClick,当用鼠标点击表单元素时，触发,onClick,执行,JavaScript,语句，或调用,JavaScript,函数。,下面是一个例子，在表单中有一个文本框和一个按钮，点击按钮，会在文本显示相应的内容。,2024/9/13,16,例,8.2.2.1,点击事件,var n = 0;,点击事件,2024/9/13,17,运行结果,:,2024/9/13,18,8.2.2.2,失去焦点事件,onBlur,当光标焦点从一个表单元素离开时，触发,onBlur,。,下面的例子有两个文本框，填写完第一个文本框后进入第二个文本框时，触发了,onBlur,，调用,alert,函数，显示第一个文本框的内容。,2024/9/13,19,例,8.2.2.2,失去焦点事件,失去焦点事件,2024/9/13,20,运行结果,:,2024/9/13,21,8.2.2.3,内容改变事件,onChange,当表单元素的内容发生改变时，触发,onChange,。,下面的例子中，列表框有两个语言的选项，选择不同的选项，就会用提示框使用不同的语言问好。,2024/9/13,22,例,8.2.2.3,内容改变事件,内容改变事件,请选择语言,中文,English,2024/9/13,23,运行结果,2024/9/13,24,8.2.2.4,表单提交事件,onSubmit,当表单提交时触发,onSubmit,，,onSubmit,写在,form,标签里，一般调用的方式为,onSubmit=“return,函数,”,，这个函数的返回值如果是,true,，表单提交；如果是,false,，表单不提交。,下面的例子中，,onSubmit,调用了,JavaScript,的,confirm,函数，,confirm,函数弹出一个确认框，如果用户点击“确定”，返回值为,true,；如果用户点击“取消”，返回值为,false,。,2024/9/13,25,例,8.2.2.4,表单提交事件,表单提交事件,组名：,口号：,组长：,2024/9/13,26,运行结果,:,2024/9/13,27,8.3,自定义函数,在上节中我们看到，有的事件执行的,JavaScript,语句比较多，程序可读性差，不利于维护修改。,如果在,JavaScript,中使用函数，把这些语句写在一个函数里，事件调用函数，程序可读性就好多了。,8.3.1,自定义函数,2024/9/13,28,JavaScript,中函数定义的格式如下：,function,函数名,(,参数列表,) ,函数体,2024/9/13,29,下面我们在例,JavaScript,8,.,3,.,1,.html,里定义一个检查文本框是否填写的函数,checkForm,，如果有未填写的就提示并返回,false,，如果都填写了返回,true,。,通过,onSubmit,调用,checkForm,，如果有未填写的就不提交表单。,2024/9/13,30,例,8.3.1,增加小组,function checkForm() ,if(teamForm.name.value = ) ,alert(,请填写组名,);,return false;,if(teamForm.slogan.value = ) ,alert(,请填写口号,);,return false;,if(teamForm.leader.value = ) ,alert(,请填写组长,);,return false;,return true;,2024/9/13,31,增加小组,组名：,口号：,组长：,返回首页,2024/9/13,32,运行结果,:,2024/9/13,33,8.3.2JavaScript,文件,有些自定义函数可能不只在一个页面会用到，这样的函数我们就可以在一个,JavaScript,文件里定义，然后在用到的页面里引入这个,JavaScript,文件。,JavaScript,文件的后缀是,.js,。,下面我们创建一个,JavaScript,文件，并在里面定义一个函数,trim,，作用是去掉字符串两端的空格。,2024/9/13,34,在第五讲所建的项目,team,的“,WebRoot”,上点击鼠标右键，选择“,New”“Other”,，出现选择向导界面。,选择“,MyEclipse”“Web” “JavaScript Source File”,，点击“,Next”,。,2024/9/13,35,在“,:”,后的输入框内填写文件名：,myFunction,，点击“,Finish”,。,2024/9/13,36,这时我们就在左边的窗口里看到一个文件,myFunction.js,。在这个文件里我们定义一个函数：,function trim(str),for(var i=0;i0 ,if(ij) return ;,return str.substring(i,j);,2024/9/13,37,在增加小组的页面,addTeam.html,里引入这个,JavaScript,文件，调用函数,trim,。,function checkForm() ,if(trim(teamForm.name.value) = ) ,alert(,请填写组名,);,return false;,if(trim(teamForm.slogan.value) = ) ,alert(,请填写口号,);,return false;,if(trim(teamForm.leader.value) = ) ,alert(,请填写组长,);,return false;,return true;,其中,是引入,JavaScript,文件,myFunction.js,。,2024/9/13,38,Thank you!,2024/9/13,39,