JavaScript网页特效案列的教程.ppt

JavaScript网页特效案例教程 主编：王莹 副主编：印梅 齐燕 第二章 实现按钮点击事件 教学导航 2.1定义和调用无参函数 任务分析 本案例涉及到的知识点： 无参函数的定义 无参函数的调用 按钮点击调用函数 获得文本框的值 相关知识 知识点1：什么是函数 函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。 知识点2：函数的定义 语法： script language=javascript function functionName(parameters){ some statements; } /script functionName：函数名称。 parameters：参数名称。无参函数的参数为空。 例1完整代码如下： script language=javascript function print(){ alert(“hello”);//弹出对话框 } /script 知识点3：函数调用 例2完整代码如下： html head title函数的简单应用/title script language=javascript function print(){ alert(“hello”); } /script /head body script language=javascript print(); /script /body /html 知识点3：按钮事件 例3：点击按钮弹出Hello！效果如图2.3所示。 例3完整代码如下： html xmlns=/1999/xhtml head script language=javascript function function1() { alert(hello!); } /script body input type=button name=Submit value=请点击我 onclick=function1()/ /body /html 图2.3例3运行效果 知识点4：获得文本框的值 一种是不添加表单，使用document.all.item(name)获得控件。但这种方法有兼容性问题存在。 input name=text1 type=text value=hello / input type=button name=Submit value=显示文本框的值 onclick=alert(document.all.item(text1).value)/ 另一种是添加表单，在表单内添加控件，然后用DOM方法来获得控件。类似于一层层的获得控件。DOM结构将在以后的章节具体介绍。 form name=form1 method=post action= input name=text1 type=text value=hello / input type=button name=Submit value=显示文本框的值 onClick=alert(document.form1.text1.value)/ /form 练习 实现如下特效，当按“”和“”实现中间文本框中广告的轮换。效果如图2.5所示。 2.2定义和调用有参函数 任务分析 本案例涉及到的知识点： 有参函数的定义 有参函数的调用 点击单选按钮调用函数 2 相关知识 知识点1：有参函数的定义和调用 此处的加号表示字符串的相连 html head title函数的简单应用/title script language=javascript function Print(parameter1,parameter2,parameter3){ alert(parameter1+parameter2+parameter3); } /script /head body script language=javascript Print(“JavaScript网页特效案例教程”,”学习好帮手”,”专业工具书”); /script /body /html 此处的加号表示字符串的相连 知识点2：单选按钮点击事件 选择单选按钮的事件也是onclick事件。调用函数的方法同按钮的onclick事件。 3 操作步骤 4 操作练习 2.3超链接当按钮使用 做一个改变背景颜色的效果，如图2.10所示： 本案例涉及到的知识点： 超链接的使用 点击超链接调用函数 document.bgcolor的使用 2相关知识 知识点1：超链接当按钮使用 知识点2：document.bgcolor 3.操作步骤 4.操作练习 2.4 JavaScript内置函数 完成购物车的计算功能，运行效果如图2.13所示。 图2.13购物车计算功能 本案例涉