javascript实训指导书.pdf

1、 JavaScript程序设计 实 训 指 导 书 编写： 杨忠义 二八年四月 编写说明 本课程的基本内容包括 JavaScrip语言的基本语法， JavaScrip语言嵌入 HTML语言 的方法， JavaScrip语言的各种对象和引用的方法及使用 JavaScrip语言设计网页中的动态效 果。 通过学习学生需要掌握以下基本知识和技能： (1)掌握 JavaScript的基本数据类型、循环控制、函数、数组、内置对象 和浏览器对象的基本操作及应用。 (2)掌握文档对象模型和事件驱动的编程技术 (3)掌握 JavaScript的动态网页特效制作技术 在使学生更好地理解和深刻地把握这些知识的基础上

2、，训练和 培养 JavaScript动态网页制作技能和 阅读 JavaScript源代码 的能 力 ，设置 四个具体实 训 项 目 ，以 阅读代码为主 ， 培养 学生 阅读 JavaScript源代码 的能 力 ， 为 今后继续 WEB编程 的学习 奠定 基础。 实 训 1为 动态 标题栏 和 状 态 栏 特效：通过本 实 训，使学生掌握 常 用浏览器对 象， 培养 学生设计动态 标题栏 和 状 态 栏 网页特效的技能。 实 训 2为 动态 定位 特效：通过本 实 训，使学生 熟悉 CSS定位属性 ，训练 其 编 写网页 元素定位 特效技能， 培养 学生设计动态 定位 特效的技能。 实 训 3

3、为 动态 显示 特效：通过本 实 训，使学生掌握 Javascript动态 显示 特效 的 实现 ， 培养 学生设计动态 显示 特效的技能。 实 训 4为 动态过 滤 特效：通过本 实 训，使学生掌握 Javascript实现静 态过 滤 特效和动态过 滤 特效， 培养 学生设计 CSS过 滤 特效的技能。 本 实 训 指导书适 用计 算机 应用 专业 、 信息管 理 专业 和网 络 技术 专业 。 目 录 实训 1 动态 标题栏 和 状 态 栏 特效 _1 实 训 2 动态 定位 特效 _4 实 训 3 动态 显示 特效 _8 实 训 4 动态过 滤 特效 _14 1 实训 1 动态标题栏和

4、状态栏特效 实训目的： 通过本 实 训，使学生掌握 常 用浏览器对象， 培养 学生设计动态 标题栏 和 状 态 栏 网页特效的技能， 为今后继续 WEB编程的学习 奠定 基础。 实训内容： window对象、 document对象、 String对象和 Array对象的使用。 实训方法和手段： 教师演示讲 解，学生 阅读源码并 上 机调试 。 实训条件： Windows XP， IE5.5或 IE6.0。 实训学时： 4学 时 实训步骤： 一、动态标题栏：设计页面，实现窗口标题栏中文字的跑马灯效果。 （一）知识点回顾 1、 document.title 通过动态的 改变 document.ti

5、tle属性值实现 。 2、 window.setTimeout()或 window.setInterval() 通过 window对象的 定时 器函数 实现定期 更 改 document.title属性 。 window.setTimeout(exp,milliSeconds)： 经 过 指定毫秒值后 计 算一个表达式 。 window.setInterval(exp,milliSeconds)： 每经 过 指定毫秒值后 计 算一个表达式 。 3、 String length属性 ： 返回 String 对象的 长度 。 charAt(index)： 返回指定索 引 位 置 处 的 字符 。

6、substring(start, end)： 返回位于 String 对象中 指定位 置的 子字符串 。 start指 明 子字符串 的 起始位 置， 该索 引 从 0 开始起算； end指 明 子字符串 的 结 束位 置， 该索 引 从 0 开始起算 。 4、 onload事件 onload事件：在浏览器 完成 对象的 装载 后 立即触发 ，这 里 用 于调 用 跑马灯 效 果函数 代码 。 （二）源代码分析 动态显示标题栏 var msg = “遗忘，或者过得更好！ “; var speed = 300; var msgud = “ “ + msg; function titleScrol

7、l() if (msgud.length msg.length) msgud+=“-“+msg; msgud=msgud.substring(1, msgud.length); 2 document.title=msgud.substring(0, msg.length); window.setTimeout(“titleScroll()“, speed); / 请注意窗口标题栏的信息。 （三）编写 (录入 )程序并调试，记录实 验结 果 二、动态状态栏：设计页面，实现窗口状态栏中文字的 压缩 效果。 （一）知识点回顾 1、 window.status 设置 或 获取 位于 窗口底部 状 态

8、栏 的 信息 。 2、 window.setInterval() 通过 window对象的 定时 器函数 实现定期 更 改 window.status属性 。 window.setInterval(exp,milliSeconds)： 每经 过 指定毫秒值后 计 算一个表达式 。 3、 String length属性 ： 返回 String 对象的 长度 。 charAt(index)： 返回指定索 引 位 置 处 的 字符 。 substring(start, end)： 返回位于 String 对象中 指定位 置的 子字符串 。 start指 明 子字符串 的 起始位 置， 该索 引 从

9、0 开始起算； end指 明 子字符串 的 结 束位 置， 该索 引 从 0 开始起算 。 4、 Array 利 用数组对象 处 理 字符串 。 （二）源代码分析 动态显示状态栏 function makeArray(n) /创建 一 个长度为 n， 每个元素都为空 字 符串 的 数组 。 this.length = n; for (i=0; in; i+) thisi=“; stcnt = 16; msg = “创新就是创造性 的 破坏 ！ “; wmsg = new makeArray(32); wmsg0=msg; 3 blnk =“ “; /注意 要保留 blnk中的 32个空格 ，

10、否则就不会出 现 所要 的效果。 for (i=1; i -1) str = wmsgstcnt; else str = wmsg0; if (stcnt- 请注意窗口状态栏的信息。 （三）编写 (录入 )程序并调试，记录实 验结 果 思考 题： 1、 定时 器 setInterval()与 setTimeout()有什么异同 ， 如何取消它们？ 2、 怎么获取 字符串 的 长度 ？查 阅 相关手册 ， 比较 字符串 对象的 substr()与 substring()有何异 同？ 4 实训 2 动态 定位 特效 实训目的： 通过本 实 训，使学生 熟悉 CSS定位属性 ，训练 其 编写网页 元

11、素定位 特 效技能， 培养 学生 阅读源码 的能 力 ， 为今后 WEB编程的学习 奠定 基础。 实训内容：页 面 元素 的 访问 ， CSS定位属性 。 实训方法和手段： 教师演示讲 解，学生 阅读源码并 上 机调试 。 实训条件： Windows XP， IE5.5或 IE6.0。 实训学时： 6学 时 实训步骤： 一、页面 元素 动态 定位 :设计页面， 图像不随 文字的 滚 动 而滚 动，显示 在 页面 固 定区域 。 （一）知识点回顾 1、 document.body.scrollTop 属性 scroll 设置 或 获取滚 动 是否关闭 。 scrollHeight 获取 对象的

12、滚 动 高 度 。 scrollLeft 设置 或 获取 位于 对象 左边界 和 窗口 中 目 前可见 内容的 最左端之间 的 距离 。 scrollTop 设置 或 获取 位于 对象 最顶端 和 窗口 中 可见 内容的 最顶端之间 的 距 离 。 scrollWidth 获取 对象的 滚 动 宽 度 。 2、 object.style.top 样式 left 设置 或 获取 对象 相 对 于 文档 层次 中下 个定位 对象的 左边界 的 位 置。 top 设置 或 获取 对象 相 对 于 文档 层次 中下 个定位 对象的上 边界 的 位 置。 height 设置 或 获取 对象的 高 度 。

13、 width 设置 或 获取 对象的 宽 度 。 3、 window.setInterval() window.setInterval(exp,milliSeconds)： 每经 过 指定毫秒值后 计 算一个表 达式 。 （二）源代码分析 动态 定位 一 5 佛像 function FM_ShowItIn(theName,theWantTop,theWantLeft) /把参数 theName 所 指 定 的页面 元素 显示 在 窗口 可视区 的 位置document.alltheName.style.top = theWantTop + document.body.scrollTop; do

14、cument.alltheName.style.left = theWantLeft + document.body.scrollLeft; self.setInterval(“FM_ShowItIn(ad_zsu,20,50)“,1); /通 过 定 时 器 方 式将 页面 元素 显示 在 窗口 可视区 的特 定位置 行 “+i+“); / （三）编写 (录入 )程序并调试，记录实 验结 果 二、页面 元素 动态 定位 :设计页面， 让 一段文字 跟随鼠 标 移 动。 （一）知识点回顾 1、 split(separator) stringObj.split(separator)： 将 一个字

15、符串 分割 为子字符串 ， 然 后 将 结 果作 为字符串 数组 返回 。 separator为 可选 项 。 字符串或 正则表达式 对象， 它 标 识 了分隔 字符串时 使用的 是 一个 还是多 个字符 。 如 果 忽略 该 选 项 ， 返回 包 含整 个字符串 的 单 一元素 数组。 2、 eval(codeString) eval(codeString)： codestring 参 数 是 包 含有 效 JScript 代码 的 字符串值 。 这 个字符串 将由 JScript 分析 器 进行分析 和 执行 。 eval 函数 允许 JScript 源代码 的 动态 执行 。 3、 ev

16、ent对象 的 常用属性 altKey 设置 或 获取 Alt 键 的 状 态。 altLeft 设置 或 获取左 Alt 键 的 状 态。 button 设置 或 获取 用 户所按 的 鼠 标 按钮 。 clientX 设置 或 获取鼠 标指 针 位 置 相 对 于 窗口客户区域 的 x 坐 标 ， 其 中 客 户区域不 包括 窗口自 身 的控件和 滚 动 条 。 6 clientY 设置 或 获取鼠 标指 针 位 置 相 对 于 窗口客户区域 的 y 坐 标 ， 其 中 客 户区域不 包括 窗口自 身 的控件和 滚 动 条 。 ctrlKey 设置 或 获取 Ctrl 键 的 状 态。 c

17、trlLeft 设置 或 获取左 Ctrl 键 的 状 态。 fromElement 设置 或 获取 事件 发 生 时 激活 或 鼠 标 将 要 离 开 的对象。 keyCode 设置 或 获取与 导 致 事件的 按键关 联 的 Unicode 按键 代码 。 offsetX 设置 或 获取鼠 标指 针 位 置 相 对 于 触发 事件的对象的 x 坐 标 。 offsetY 设置 或 获取鼠 标指 针 位 置 相 对 于 触发 事件的对象的 y 坐 标 。 returnValue 设置 或 获取 事件的 返回值 。 screenX 设置 或 获取获取鼠 标指 针 位 置 相 对 于 用 户 屏

18、幕 的 x 坐 标 。 screenY 设置 或 获取鼠 标指 针 位 置 相 对 于 用 户 屏幕 的 y 坐 标 。 shiftKey 设置 或 获取 Shift 键 的 状 态。 shiftLeft 设置 或 获取左 Shift 键 的 状 态。 srcElement 设置 或 获取触发 事件的对象。 toElement 设置 或 获取 用 户 要 将鼠 标指 针 移 动 指 向 的对象的引用。 type 从 event 对象中 获取 事件 名称 。 x 设置 或 获取鼠 标指 针 位 置 相 对 于 父 文档的 x 像 素 坐 标 。 y 设置 或 获取鼠 标指 针 位 置 相 对 于

19、 父 文档的 y 像 素 坐 标 。 （二）源代码分析 动态 定位 二 .spanstyle position:absolute; top:-50px; font-size:9pt; font-weight:bold; color:red; 7 y=document.body.scrollTop+event.clientY; function makesnake() for (i=message.length-1; i=1; i-) /在位置数组 中指 定每个 字 母 的 位置 xposi=xposi-1+step yposi=yposi-1 xpos0=x+step ypos0=y for

20、(i=0; i “) document.write(messagei) document.write(“) / （三）编写 (录入 )程序并调试，记录实 验结 果 思考 题： 1、 如何 通过 event对象 获取鼠 标 的 坐 标位 置， 试 举例 说明。 8 实训 3 动态显示特效 实训目的： 通过本 实 训，使学生掌握 Javascript动态 显示 特效的 实现 ， 培养 学 生 阅读 Javascript代码 的能 力 ， 为今后 WEB编程的学习 奠定 基础。 实训内容： 页 面 元素 的 访问 ， CSS显示属性 实训方法和手段： 教师演示讲 解，学生 阅读源码并 上 机调试 。

21、 实训条件： Windows XP， IE5.5或 IE6.0。 实训学时： 8学 时 实训步骤： 一、 对象 的动态显示和 隐藏 （一）知识点回顾 1、 document.all 在 IE中， document.all是 一个 非 常 特 殊 的 集合 。通过 它 ， 可 以 访问 文档中的 所有 HTML 元素 对象。 使用 all集合 访问 HTML元素 的方法 有 三 种， 即 使用 索 引、 名称 (或 ID)和 HTML标 记 名 。 使用 索 引： document.all i 使用 name或 id属性 ： document.all(“clock“)或 document.all

22、.clock 使用 HTML标 记名 ： document.all.tags(“P“) 2、 display:none 与 visibility:hidden style=“display:none“表示信息 动态 隐藏 style=“visibility:hidden“表示信息 动态 隐藏 并 预留 显示位 置 （二）源代码分析 动态显示和 隐藏 显示和 隐藏 使用 display 属性 使用 visibility 属性 单击此 处可 以 动态 隐藏 或显示信息 此 信息动态 隐藏 或显示 ；此 信息动态 隐 藏 或显示 ；此 信息动态 隐藏 或显示 ； 9 已经 显示的 其他 信息 ；已经

23、 显示的 其他 信息 ；已经 显示的 其他 信息 ； 单击此 处可 以 动态 隐藏 或显示信息 此 信息动态 隐藏 或显示 ；此 信息动态 隐藏 或显示 ；此 信息动态 隐藏 或显示 已经 显示的 其他 信息 ；已经 显示的 其他 信息 ；已经 显示的 其他 信息 ； （三）编写 (录入 )程序并调试，记录实 验结 果 二、编写页面，实现 下拉菜单 特效 （一）知识点回顾 1、 event对象 的 常用属性 （ 见 P6） 2、 鼠 标事件 常 用 鼠 标 事件 说明 onclick 在用 户 用 鼠 标 左键单 击 对象 时 触发 。 oncontextmenu 在用 户 使用 鼠 标 右

24、键单 击 客户区 打 开 上下文 菜 单 时 触发 。 ondblclick 当 用 户 双击 对象 时 触发 。 onmousedown 当 用 户 用 任 何鼠 标 按钮单 击 对象 时 触发 。 onmouseenter 当 用 户将鼠 标指 针 移 动 到 对象内 时 触发 。 onmouseleave 当 用 户将鼠 标指 针 移出 对象 边界 时 触发 。 onmousemove 当 用 户将鼠 标 划 过对象 时 触发 。 onmouseout 当 用 户将鼠 标指 针 移出 对象 边界 时 触发 。 onmouseover 当 用 户将鼠 标指 针 移 动 到 对象内 时 触发

25、 。 onmouseup 当 用 户 在 鼠 标位于 对象 之 上 时 释放 鼠 标 按钮 时 触发 。 onmousewheel 当 鼠 标 滚 轮 按钮 旋转 时 触发 。 （二）源代码分析 目录 样式 的 下拉菜单 function out() /判断 鼠 标 是否移 动 到 当前菜单 或 菜单 中的 项 -第 一 个 菜单 的 判断 10 if(window.event.toElement.id!=“menuOne“ /如 果 不是 ， 则 隐藏菜单 function out1() /判断 鼠 标 是否移 动 到 当前菜单 或 菜单 中的 项 -第 二 个 菜单 的 判断 if(win

26、dow.event.toElement.id!=“menuTwo“ /如 果 不是 ， 则 隐藏菜单 本站 导 航 软 件 下载 工具下载 书 籍介绍 代码题 库 先进技术 技术人物 服务 导 航 网站风 格 帐号管理 短 信 管理 贴 文 管理 书 签管理 11 （三）编写 (录入 )程序并调试，记录实 验结 果 三、编写页面，实现 折叠菜单 特效 （一）知识点回顾 1、 event对象 （ 见 P6） 2、 document.all（ 见 P8） 3、 鼠 标事件（ 见 P10） 4、 this this： 指 当 前 对象 （二）源代码分析 动态 折叠菜单 function menuCh

27、ange() var src; var subId; src = window.event.srcElement; if (src.className = “menu“) /判断 是否 单击了某菜单项 。 subId = “sub“ + src.id; if (document.all(subId).style.display = “none“) /* 如 果 没 有 显示 子菜单 ， 则 显示。 */ document.all(subId).style.display = “; else 12 /如 果 已经 显示 子菜单 ， 则 折叠 。 document.all(subId).style

28、.display = “none“; / 单击 一 个 菜单项 则可 以打开 或 折叠菜单 + 菜单项 1 子菜单项 1 子菜单项 2 子菜单项 3 子菜单项 4 + 菜单项 2 子菜单项 1 子菜单项 2 子菜单项 3 子菜单项 4 子菜单项 5 + 菜单项 3 a href=“#“ onmouseover = “this.className = red“ 13 onmouseout = “this.className = ;“子菜单项 1 子菜单项 2 子菜单项 3 子菜单项 4 子菜单项 5 （三）编写 (录入 )程序并调试，记录实 验结 果 思考 题： 1、 简述 下 拉菜 单 的 实

29、现 方法。 2、 简述折叠菜 单 的 实现 方法。 3、 弹出菜 单 又 该 如何 实现 ？ 14 实训 4 动态过 滤 特效 实训目的： 通过本 实 训，使学生掌握 Javascript实现 动态过 滤 特效， 培养 学生 阅读 Javascript代码 的能 力 ， 为今后 WEB编程的学习 奠定 基础。 实训内容： 页 面 元素 的 访问 ， CSS过 滤 器 属性 。 实训方法和手段： 教师演示讲 解，学生 阅读源码并 上 机调试 。 实训条件： Windows XP， IE5.5或 IE6.0。 实训学时： 6学 时 实训步骤： 一、 静 态过 滤 器 效果 （一）知识点回顾 1、

30、CSS静 态 滤 镜样 式 （ filter）（只 有 IE4.0以上 支持） HTML filter : sFilter Script object.style.filter = sFilter sFilter :要使用的 滤 镜 效果。 多 个滤 镜 之间 用 空格 隔 开 。 Filter样式 简 要 说明 支持 参数 alpha 设置 图片 或 文 字 的 不 透 明 度 opacity、 finishOpacity、 style、 startX、 startY、 finishX、 finishY、 add、 direction、 strength blur 在 指定 的方 向 和 位

31、 置上 产 生动 感 模 糊 效果 add、 direction、 strength chroma 对 所选 择 的 颜色 进行 透 明 处 理 color dropShadow 在 指定 的方 向 和 位 置上 产 生 阴影 color、 offX、 offY、 positive flipH 沿水平 方 向翻转 对象 flipV 沿垂直 方 向翻转 对象 glow 在对象 周围 上 发 光 color、 strength gray 将 对象以 灰 度处 理 invert 逆转 对象 颜色 light 对对象 进行 模 拟光照 mask 对对象生 成 掩膜 color shadow 沿 对象

32、边 缘产 生 阴影 color、 direction wave 在 垂直 方 向产 生 正弦波形 add、 freq、 lightStrength、 phase、 strength xray 改变 对象 颜色 深 度 ， 并 绘 制 黑白图 象 2 CSS动态 滤镜 动态 滤 镜 可 以 为 页 面 添加 动 人 的 淡 入 淡出 、 图 象 转化 效果， 它可 以 分 为 两 种 blend（ 混 合） 和 reveal（ 显示 ）， 前 者 可 以使对象 渐渐 消 失 或 出 现 ， 后 者提供 了 24种 图 象 转化 的效 15 果。对 于 动态 滤 镜 的 调 用 除去 象在 静 态

33、 滤 镜 中要 定 义 的 滤 镜 类型， 参 数 等等 ， 还 用 到 脚 本 语言控制 它 的 状 态。 首先 ，在 开始一个 动态效果 之前 ， 先 需要 进行装 备 （ Apply）， 然 后 播 放（ Play） 动态 效果，在动态效果 进行 中 还可 以中 断 动态效果 （ Stop），以上 可 以用下 面 的方法 实现 ： 对象 名 .filters(滤 镜 数 值 ).apply() 对象 名 .filters(滤 镜 数 值 ).play() 对象 名 .filters(滤 镜 数 值 ).stop() 对 于滤 镜 状 态的 判断 可 以通过 “对象 名 .filters(

34、滤 镜 数 值 ).status”判断 ， 该值为 0时 ， 表 示滤 镜 未 执行 ， 为 1时 ， 表示滤 镜 已 经完成 ， 为 2时表示滤 镜 在 执行 中。 在 定 义 filter时 ， 如 上 面所 提 到 的， 可 以 有 混 合（ “ filter:blendTrans(duration=时 间 数 值 )”， duration表示滤 镜 执行 需要的 时 间 ， 单 位为秒 ） 和 显示 （ “ filter:revealTrans(duration=时 间 数 值 ,transition=过 渡 类型 )”，过 渡 类型 为从 0 23的数 值 ） 两 种。 滤 镜 目

35、前还 未被 W3C 正 式 承认 。 滤 镜只 是 微软 IE 浏览器的组 成 部分 ， 不 能用 于 Netscape浏览器。 （二）源代码分析 静 态过 滤 器 效果 img.alphafilter:alpha(Opacity=“80“,Style=“1“); img.chromafilter:chroma(color=“black“); img.flipHfilter:flipH; img.flipVfilter:flipV; .blurfilter:blur(strength=“6“,direction=“135“);width=“800“ .dropShadowfilter:drop

36、Shadow(color=“gray“,offX=“3“,offY=“3“);width=“800“ 原 图 16 alpha效果 chroma效果 flipH效果 flipV效果 此 段文 本未 使用 效果 此 段文 本 使用 了 blur 效果 此 段文 本 使用 了 dropshadow 效果 （三）编写 (录入 )程序并调试，记录实 验结 果 二、动态 图像 过 滤 器 （一）知识点回顾 1、 setInterval 2、 filters的 引用 filters.alpha.opacity filters.滤 镜名 .属性 （二）源代码分析 动态 图像 过 滤 器 function h

37、igh(which2) theobject=which2; highlighting=setInterval(“highlightit(theobject)“,50); function low(which2) clearInterval(highlighting); which2.filters.alpha.opacity=40; function highlightit(cur2) if (cur2.filters.alpha.opacity 17 （三）编写 (录入 )程序并调试，记录实 验结 果 三、动态文 本 过 滤 器 （一）知识点回顾 1、 Array对象 的 使用 2、 .in

38、nerHTML与 .innerText innerHTML设置 /获取 标 签 内的 HTML； innerTEXT设置 /获取 标 签 内的文本。 3、 滤镜 filter的 使用 （二）源代码分析 动态文 本 过 滤 器 18 var i_messages = 0 var timer function dotransition() content.filters0.apply() content.innerHTML = “+messagesi_messages +“ content.filters0.play() if (i_messages = messages.length-1) i_

39、messages = 0 else i_messages+ setTimeout(“dotransition()“,5000) / （三）编写 (录入 )程序并调试，记录实 验结 果 思考 题： 1. 试 举例 说明用 脚 本控制 CSS静 态 滤 镜样 式 的方法。 2. 动态 滤 镜 可 以 分 为 两 种 blend（ 混 合） 和 reveal（ 显示 ） ， 试结 合 上 面 动态文本过 滤 器 实 例 说明以下 几 个 方法的作用 : 对象 名 .filters(滤 镜 数 值 ).apply() 对象 名 .filters(滤 镜 数 值 ).play() 对象 名 .filters(滤 镜 数 值 ).stop()