JavaScript网页特效案例教程教案(普通班)

新课1.6.3逻辑控制语句1）条件语句if语句是最基本、最常用的条件控制语句，语法：if(expression){statement}2）switch语句switch是典型的多路分支语句语法：switch (expression){case judgement1:statement1;break;…default:defaultstatement;break;}4）for语句5）while语句while语句是基本的循环语句，也是条件判断语句。

语法：while (expression){statement}现场教学20知识扩展：无练习或训练用while循环语句将指定的字符串进行输出利用脚本实现宝石图形。

40课后小结15布置作业课后实战题3.4 5新课2.1函数基础工作任务1编写函数function sum(number1,number2) 求两数之和，弹出结果。

并调用之。

2.2什么是函数函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。

在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。

2.2.1函数的定义函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。

函数与其他的JavaScript代码一样，必须位于<SCRIPT></SCRIPT>标记之间，函数的基本语法。

2.2.2函数调用函数调用的语法2.3简易购物车实现现场教学20知识扩展：无练习或训练40课后小结20布置作业课后实战题1新课制作四则运算计算器。

本题需要使用函数参数传递。

在JavaScript中定义函数的完整格式如下：语法function 自定义函数名(形参1,形参2,……){ 函数体}在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）。

指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。

我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。

如果定义的函数有参数，那么对这种函数的调用形式就是：函数名（实参1，实参2，……）通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号“,”分隔。

）function compute(op){…….}这里op代表进行何种运算。

所以调用的时候，也相应的给予参数onClick="compute('+')现场教学20知识扩展：无练习或训练实现特效40课后小结15布置作业课后实战题2 5新课点击超链接实现按钮功能，改变html的页面背景色。

函数除了可以在响应事件中被调用之外，还可以在链接中被调用。

在<a>标签中的href标记中使用javascript:关键字调用函数，当用户单击这个链接时，相关函数将被执行。

<a href = "javascript:change('b') ">function change(color){if(color=="r"){document.bgColor="red";}else if(color=="b"){document.bgColor="blue";}else if(color=="g"){document.bgColor="green"}}现场教学40知识扩展：无练习或训练把建议购物车的“计算金额”按钮变成超链接看能否实现相同的效果？20课后小结15布置作业P80 一二 5新课工作任务5编写个人所得税计算器。

月收入所得税计算的方式：(月收入-起征额)*所得税率。

收入多出起征额1000以内，税率为0.05，1000到3000为0.1，以上为0.5。

如果输入非数字，弹出错误提示。

否则给出结果。

1）parseInt()函数该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。

语法：parseInt(StringNum,[n])StringNum：需要转换为整型的字符串。

n：提供在2～36之间的数字表示所保存数字的进制数。

这个参数在函数中不是必须的。

2）parseFloat()函数该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。

语法：parseFloat(StringNum)StringNum：需要转换为浮点型的字符串。

3）isNaN()函数该函数主要用于检验某个值是否为NaN。

语法：isNaN(Num)Num：需要验证的数字。

如果参数Num为NaN，函数返回值为true；如果参数Num不是NaN，函数返回值为false。

4）isFinite()函数该函数主要用于检验某个表达式是否为无穷大。

语法：isFinite(Num)Num：需要验证的数字。

如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。

现场教学20知识扩展：无练习或训练实现闰年的判断40课后小结20布置作业课后是实战题3 0新课String对象工作任务3验证用户信息。

如图4.1所示。

String对象的常用属性和方法表4.3String对象常用方法属性名称说明属性length 获取字符串字符的个数方法indexOf(“子字符串”，起始位置)查找子字符串的位置charAt(index) 获取位于指定索引位置的字符substring(index1,index2 ) 求子串toLowerCase( ) 将字符串转换成小写toUpperCase( ) 将字符串转换成大写现场教学40知识扩展：无练习或训练制作电子邮件简单验证特效20课后小结String对象的属性方法如何验证字符串中是否存在@字符？15布置作业5新 课Math 对象工作任务4随机出现四位验证码，如图4.2所示。

图4.2工作任务4运行结果Math 常用方法名称 说明abs 方法 计算指定参数的绝对值 acos 方法 返回指定参数的反余弦值 asin 方法 返回指定参数的反正弦值 atan 方法 返回指定参数的反正切值 atan2方法 根据指定的坐标返回一个弧度值 ceil 方法 返回大于或等于指定参数的最小整数 cos 方法 计算指定参数的余弦值 exp 方法 以e 为基数的指数函数floor 方法 返回小于或等于指定参数的最大整数 log 方法 以e 为基数的自然对数max 方法 返回两个或多个参数中的最大值 min 方法 返回两个或多个参数中的最小值 pow 方法 幂运算random 方法 产生0到1之间的随机数 round 方法 取整运算sin 方法 计算指定参数的正弦值 sqrt 方法 开平方运算tan 方法计算指定参数的正切值现场教学 40补充练习或训练产生四位随即码20课后小结Math 对象的常用方法5布置作业5新课Array对象工作任务5用列表菜单选择图书介绍。

如图4.3所示。

一维数组可以把数组看作一个单行表格，该表格的每一个单元格中都可以存储一个数据，而且各单元格中存储的数据类型可以不同，这些单元格被称为数组元素。

每个数组元素都有一个索引号，通过索引号可以方便地引用数组元素。

数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。

二维数组工作任务6图4.4 工作任务6运行结果现场教学2知识扩展：无练习或训练课程介绍和选课级联菜单40 课后小结掌握Array对象的常用方法一维数组和二维数组的初始化和遍历2布置作业无0新课页面相关事件：● 工作任务6● 实现图片的大小改变。

当鼠标没有关注此图片时为小图，鼠标进入图片区域变为大图。

● 工作任务7● 浏览览器的滚动条位置发生变化时，讨厌的广告图跟随飘动现场教学 20知识扩展：无练习或训练课堂练习1－3 40课后小结漂浮广告实现的步骤？ 20布置作业无 0新课表单事件●工作任务8●在登录网站时，在填写某个文本框的时候，该框会变色，等填写完了又变回原样，是如何实现的？现场教学40知识扩展：无练习或训练课堂练习8 20课后小结表单事件常用的有哪些？15布置作业5新课●动态修改文本的样式●工作任务9当列表菜单中的值发生改变时，文本域中的字体大小和字体颜色发生改变●工作任务10不允许复制。

有些成果是自己辛苦写出来，想与别人共享却不愿被窃取，怎么办呢？剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforecut事件是当页面中的一部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序，oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。

●工作任务11老师布置了一篇作业在网上完成，怎么样防止学生都是黏贴来的呢？现场教学20知识扩展：无练习或训练任务10,11 40课后小结编辑事件中比较常见的有哪些？如何实现防止拷贝和黏贴的网页？20布置作业无0新课层的显示隐藏效果参数值描述block 默认值。

按块显示，换行显示.用该值为对象之后添加新行none 不显示，隐藏对象。

与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。

inline 按行显示，和其他元素同一行显示。

显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏。

点击按钮隐藏/显示层工作任务4实现如下特效，按按钮打开层和关闭层。

工作任务5实现如下图的特效。

点击地点选择按钮，出现选择卡，点击“广州”，卡片消失，按钮值变成“广州”。

20分钟知识扩展：无练习或训练阶段练习4,5 40分钟课后小结对编程共性问题进行讲解层有哪几种常用的显示方式？15分钟布置作业5分钟新课工作任务6实现如下图的树形菜单：如图6.6所示。

display 适用于所有HTML 标签。

本题直接在table 中使用该属性，实现下级菜单的显示和隐藏。

现场教学20分钟知识扩展：无练习或训练阶段练习6 40分钟课后小结 编程共性问题讲解。

树形菜单适用什么实现的？为什么这里没有用到层呢？15分钟布置作业5分钟新课工作任务7实现如下图表示的选择卡。

如图6.7所示。

可以使用DIV 中插入图片来实现，但更简洁的办法是直接使用图片的display 属性访问图片Img 对象的方法：document.getElementById("图片ID")首先用表格布局如图6.8的这6张主要的图。

使4个小图按照“游戏点卡暗图”、“游戏点卡亮图”、“手机充值暗图”、“手机充值亮图”一行布局，两张大图一行布局。