Javascript程序设计 教案- 单元设计 -张劲波 第6-14章 DOM模型-实训

PAGEPAGE2课程单元设计课程名称：JavaScript程序设计适用专业：所属院系：信息工程学院编制人：制定时间：年至年第一学期

《JavaScript程序设计》教案设计一、教案头本单元标题：第6章DOM模型授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、正确理解DOM树概念及DOM树中各个节点关系2、能动态查看和修改页面中节点元素1、DOM及DOM技术简介2、页面中的DOM模型框架能力训练任务及案例一、能力训练任务1、访问指定节点的方法2、查看/修改属性节点二、案例案例1：DOM技术应用简单示例案例2：DOM基本方法综合示例案例2：DOM常用方法综合示例案例2：网页中的DOM模型框架示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习浮动定位及position定位知识课件演示听讲教材网络资源多媒体10分钟讲授通过动态修改图片元素的实例来加深DOM树的理解及掌握访问指定节点的方法和查看/修改属性节点的方法课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练实现点击按钮修改图片节点对象及获取图片的安装路径等属性值演示讲解实际操作教材网络资源多媒体电脑65分钟总结DOM树中节点间关系及动态修改或获取节点属性值讲解集体参与教材15分钟作业布置编写一个Web页面：每0.2秒在浏览器窗口的状态栏中滚动显示一次当前浏览器的信息。在输出内容前加一个输出次数的计数。这样每次的显示效果有所不同。提示：浏览器信息可由window对象的子对象navigator获得，用indow.status设置状态栏的内容。讲解集体参与网络资源多媒体电脑10分钟学习成果完成本讲所有示例操作教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第6章DOM模型授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、正确理解DOM树不同节点及其属性2、使用HTMLDOM设置页面风格样式1、DOM模型中的节点2、非标准的innerHTML属性3、DOM与CSS能力训练任务及案例一、能力训练任务1、DOM模型中三种节点及其属性2、HTMLDOM设置页面风格样式二、案例案例1：元素节点示例案例2：本文节点示例案例3：属性节点示例案例4：DOM与CSS改变样式示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习DOM树结构课件演示听讲教材网络资源多媒体10分钟讲授1.通过实例讲解元素节点、文本节点及属性节点的属性值2.通过HTMLDOM动态修改HTML元素的CSS风格样式课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练练习：使用HTMLDOM对象的属性访问演示讲解实际操作教材网络资源多媒体电脑65分钟总结三种节点不同属性值HTMLDOM与CSS关系讲解集体参与教材15分钟作业布置使用HTMLDOM修改字体颜色，类型及字体大小讲解集体参与网络资源多媒体电脑10分钟学习成果完成本讲所有示例操作教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第7章事件机制授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、理解事件的驱动和响应2、能捕捉鼠标操作事件1、事件机制简介2、鼠标操作事件能力训练任务及案例一、能力训练任务JavaScript事件运用二、案例案例1：鼠标事件案例2：键盘事件参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习DOM节点的属性课件演示听讲教材网络资源多媒体10分钟讲授1.事件的产生2.事件的响应3.7种鼠标事件课件演示模拟演练听讲实际操作教材网络资源多媒体电脑20分钟操练练习捕捉各种鼠标操作事件演示讲解实际操作教材网络资源多媒体电脑40分钟总结事件机制一定是包含事件的产生和事件的响应7种鼠标事件发生及响应机制讲解集体参与教材10分钟作业布置屏蔽鼠标右键讲解集体参与网络资源多媒体电脑10分钟学习成果学会鼠标及键盘事件的运用教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第7章事件机制授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标理解并正确响应键盘操作事件1、键盘操作事件2、其他事件能力训练任务及案例一、能力训练任务JavaScript事件运用二、案例案例1：设置各级菜单的CSS样式风格案例2：为菜单添加伸缩效果参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习事件机制及鼠标操作事件课件演示听讲教材网络资源多媒体10分钟讲授1.三种基本的键盘操作事件2.页面加载，表单提交等其他事件课件演示模拟演练听讲实际操作教材网络资源多媒体电脑20分钟操练可伸缩的两级菜单建立HTML框架演示讲解实际操作教材网络资源多媒体电脑40分钟总结事件机制一定是包含事件的产生和事件的响应3种键盘操作事件发生及一些其他事件的理解和捕捉讲解集体参与教材10分钟作业布置可伸缩两级菜单的风格样式设置及菜单添加伸缩效果讲解集体参与网络资源多媒体电脑10分钟学习成果完成菜单伸缩效果的设置教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第8章表格与表单授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标css控制表格样式和DOM动态控制表格1、学会css控制表格样式2、DOM动态控制表格能力训练任务及案例一、能力训练任务表格样式的控制二、案例案例1：CSS及DOM控制表格参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Css样式的使用回顾课件演示听讲教材网络资源多媒体10分钟讲授1.表格的相关标记2.表格颜色的设置3.表格的边框课件演示模拟演练听讲实际操作教材网络资源多媒体电脑60分钟操练动态的添加表格及修改里面的内容，删除表格等演示讲解实际操作教材网络资源多媒体电脑90分钟总结CSS控制表格样式，DOM动态控制表格，实现表格的增删改操作。讲解集体参与教材10分钟作业布置CSS及DOM控制表格讲解集体参与网络资源多媒体电脑10分钟学习成果完成表格样式的控制，学会DOM动态控制表格教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第8章表格与表单授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标控制表单以及表单元素的使用1、控制表单2、表单元素的灵活运用3.文本框的设置能力训练任务及案例一、能力训练任务控制表单以及表单元素的使用二、案例案例1：自动提示的文本框参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入表单的制作课件演示听讲教材网络资源多媒体10分钟讲授表单的相关标记及表单元素表单元素的访问文本框的设置按钮等设置课件演示模拟演练听讲实际操作教材网络资源多媒体电脑20分钟操练控制表单及文本框、单选按钮、复选按钮和下拉菜单的设置演示讲解实际操作教材网络资源多媒体电脑30分钟总结控制表单及其表单元素的熟练使用讲解集体参与教材10分钟作业布置自动提示的文本框讲解集体参与网络资源多媒体电脑10分钟学习成果学会表单的制作及控制表单教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第9章JavaScript设计与优化授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标调试与优化javascript1．常见错误和异常2.错误处理3.使用调试器4.JavaScript优化能力训练任务及案例一、能力训练任务Javascript的调试与优化二、案例案例1：等号与赋值混淆案例2：括号不匹配案例3：访问不存在的变量参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入除数为0的情况，典型的计算问题课件演示听讲教材网络资源多媒体10分钟讲授1．常见错误和异常2.错误处理3.使用调试器4.JavaScript优化课件演示模拟演练听讲实际操作教材网络资源多媒体电脑60分钟操练错误与异常的查找和处理错误、异常的调试与优化演示讲解实际操作教材网络资源多媒体电脑90分钟总结JavaScript的调试与优化，通过熟悉的try……catch等方法。讲解集体参与教材10分钟作业布置自动提示的文本框讲解集体参与网络资源多媒体电脑10分钟学习成果学会JavaScript的优化。教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第10章 Ajax基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1．了解和掌握Ajax的主要特点。2．熟悉Ajax的程序开发环境，掌握Ajax语言的上机步骤。3．熟练掌握源程序的建立、编辑、编译、保存和运行的基本方法。4．会编写简单的Ajax应用程序。1．认识CSS，熟悉CSS的语法结构。2．掌握CSS语言中3种基本引用方式、样式表定义及使用。3．掌握不同引用方式下，样式表的引用规则。4．熟练掌握内联式、嵌入式和链接式。能力训练任务及案例一、能力训练任务1．熟悉Visualstudio的启动和退出以及Visualstudio的编辑、编译、连接和运行命令。2．了解Visualstudio开发环境的配置。二、案例案例1：认识Visualstudio的菜单栏、工具栏，工具箱，解决资源方案管理器，代码编辑窗口。参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Visualstudio开发环境与配置课件、视频听讲教材网络资源多媒体10分钟讲授1．熟悉各种样式表定义形式。2．各种属性的使用功能。3．各类引用样式表规则。课件演示模拟演练听讲实际操作教材网络资源多媒体电脑60分钟操练熟练使用Visualstudio2008演示实际操作教材网络资源多媒体电脑90分钟总结Javascript概况讲解集体参与教材10分钟作业布置设计一个内联式样式表引用方式的例题SetStyle.html设计一个嵌入式样式表的使用例题SetStyle_in.html讲解集体参与网络资源多媒体电脑10分钟学习成果教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第11章 jQuery基础授课班级：20软件1,2，3课时：6上课地点：实训5教学目标能力目标知识目标1.jQuery概述2.jQuery的“$”3.jQuery与CSS34.使用选择器5.管理选择结果6.采用jQuery链选择器 功能函数前缀解决window.onload函数的冲突创建DOM元素自定义添加“$”解决“$”的冲突能力训练任务及案例一、能力训练任务XMLHttpRequest的使用二、案例案例1：设计一个用户注册实例例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入CSS基础课件、视频听讲教材网络资源多媒体10分钟讲授jQuery概述jQuery的“$”jQuery与CSS3使用选择器管理选择结果采用jQuery链课件演示模拟演练听讲实际操作教材网络资源多媒体电脑110分钟操练属性选择器$(“a[href=10-9.html]”).addClass(“myClass”);包含选择器$(“li:has(a)”)位置选择器$(“p:first-child”)过滤选择器$(“input[name=cbx]:checked”)实现反向过滤$(“input:not(:radio)”)演示实际操作教材网络资源多媒体电脑130分钟总结主流的JavaScript框架YUIDojomooToolsPrototypejQueryMore..讲解集体参与教材10分钟作业布置1.jQuery下载当前版本1.7.2官方网站下载：/2.jQuery安装在页面头部head中，添加js<scripttype="text/javascript"src="./script/jquery.js"></script>3MyEclipse中可以实现jQuery的智能提示讲解集体参与网络资源多媒体电脑10分钟学习成果完成jQuery的下载教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第12章 jQuery控制页面授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标通过标记属性，元素的样式，页面的元素，jQuery处理事件完成jQuery控制标记属性元素样式页面的元素JQuery处理事件能力训练任务及案例一、能力训练任务比window.onload更快一些的载入二、案例案例1：制作双色表格案例2：巧妙的伪装链接参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入JQuery基础课件、视频听讲教材网络资源多媒体10分钟讲授1.标记属性2.元素样式3.页面的元素4.JQuery处理事件课件演示模拟演练听讲实际操作教材网络资源多媒体电脑20分钟操练使用编辑器EditPlus制作双色表格演示实际操作教材网络资源多媒体电脑130分钟总结标记属性元素样式页面的元素JQuery处理事件讲解集体参与教材10分钟作业布置安全邮件列表讲解集体参与网络资源多媒体电脑10分钟学习成果教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第13章 用jQuery制作动画与特效授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1.显示与隐藏元素2.元素显隐的渐入渐出效果3.幻灯片效果显示与隐藏元素元