JavaScript动态网页设计课标教学设计

《Javascript程序设计》课程标准课程编码：课程类型：理论+实践课程性质：必修课适用专业：学时：64学时学分：3.5学分课程负责人：参编人员：一、课程定位（一）课程性质《Javascript程序设计》是一门需要综合应用所学网页制作知识(HTML、CSS、JavaScript)的课程而打造的面向网页制作方向就业技能的一门重要课程。该课程深入浅出，结合实际案例系统地讲解了使用JavaScript和jQuery设计动态网页的知识和技巧，它定位于WEB技术开发，是WEB前端技术开发的必备课程，在学习了html+css网页设计基础、编程基础、网页美工的基础下，为HTML5移动web开发技术、php框架开发技术、javaweb开发技术等课程的学习打下基础，在整个课程体系中具有承前启后的重要作用。（二）课程作用《Javascript程序设计》课程任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才，通过本课程的学习，学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现HTML5移动web开发技术、php框架开发技术、javaweb开发技术等任务。（三）前导、后续课程它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。本课程的前导课程：html+css网页设计基础、编程基础、网页美工。后续课程：网页美工、PHP动态网页设计、C#程序设计与应用等。二、课程设计思路通过本课程的学习，使学生对HTML脚本、CSS代码和JavaScript特效代码等网页基本组成元素有全面和充分的认识，能熟练地使用以上代码开发出漂亮的静态网页，制作出炫酷的网页效果，并为后继的动态网页课程的学习打好基础。使得学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。主要包括JavaScript的基础语法，常用开发工具和调试工具，简单的CSS知识，DOM模型及事件机制和常见事件处理等内容。针对学生的层次和高职学生的特点，在本课程的日常教学中努力做到理论教学以应用为目的，以必需、够用为度，专业教学加强针对性和应用性。以职业能力培养为主线，使教学内容按照能力培养目标进行重组、整合与优化，教学方法体现能力培养，广泛采用“案例”、“参与式”、“讨论式”、“启发式”等生动活泼的教学形式，有效利用现代教育技术组织教学，并加强课程的组织管理、运行管理和质量管理以及课程的过程评价与目标评价。具体措施体现在以下几个方面：⦁基于典型工作过程分析，构建课程体系；⦁职业能力培养为核心，设计教学内容；⦁以提高学生职业能力和职业素养为目标，重视实践教学；⦁融合职业资格标准，推行双证书制；⦁校企合作，共建新型实践教学基地；⦁校企合作，形成实践技能课主要由企业兼职教师讲授的机制。三、课程目标通过本课程的学习，使学生形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。最终成为具备较全面的软件开发与信息服务的技术人才。根据高职教育的特点，按照学院“小学校、大课堂”的办学思路和“校企融合、同兴共赢”的办学模式，积极探索“校企合作、工学结合”的人才培养模式，积极探索以实践能力考核为主的课程评价方法，切实提高学生的职业能力和就业竞争力。

总体设计思路是：以高职高专的教育规律为基础，结合本校的教学要求，跟踪当前网页设计发展的趋势，做到教学与实践结合。通过若干项目任务的分解学习，达到课程学习的要求。（一）能力目标形成一定的学习能力、沟通与团队的协作能力；形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养；遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。（二）知识目标掌握JavaScript语言的基本语法；掌握BOM对象的常用属性和方法；掌握文档对象的常用属性和方法；掌握DOM的概念以及利用DOM操作文档节点的方法；掌握简单的CSS知识；掌握常用开发工具和调试工具。（三）素质目标形成一定的学习能力、沟通与团队的协作能力；能用心尊重他人、不断激励自己；乐于团队合作、善于整合资源；善于表达沟通、用于企业实践、注重学以致用；及时适应环境变化、不断开拓创新。四、课程内容与安排根据专业课程目标和涵盖的工作任务要求，确定课程内容和要求，说明学生应获得的知识、技能与态度。本课程的主要任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才。学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。本课程主要讲解的相关知识有：掌握JavaScript语言的基本语法，BOM对象的常用属性和方法，文档对象的常用属性和方法，DOM的概念以及利用DOM操作文档节点的方法，简单的CSS知识，掌握常用开发工具和调试工具。最后以一个综合的实例将这些技术集成在一起，实现了一个完整的简单的，具有人机交互功能的动态网页的设计。具体安排见下表所示：周次学习情境/项目/单元（选其一）子情境/子项目/子单元（选其一）学习内容（支撑知识）教学方法及手段成果形式参考学时第1周JavaScript概述1.JavaScript的起源2.浏览器之争3.Javascript的实现4．Javascript小体验JavaScript的起源及实现案例教学法、项目教学法、任务驱动教学法、讲授法JavaScript环境搭建2JavaScript案例演示搭建JavaScript开发环境第1-4周JavaScript基础1.JavaScript语法2.变量、数据类型、关键字、保留字、条件语句、循环语句、函数、对象、bom基础JavaScript类型案例教学法、项目教学法、任务驱动教学法、讲授法输入数字判断程序网页12JavaScript变量与关键字条件语句打印三角形循环语句函数注册判断函数网页对象BOM基础第4-5周JavaScript开发1.JavaScript应用环境2.常用开发工具3.常用调试工具常用开发工具介绍案例教学法、项目教学法、任务驱动教学法、讲授法简易计算器4常用调试工具介绍第5-7周CSS基础1.css的概念2.网页设计中的css3.使用css控制页面4.css选择器5.css设置文字效果CSS的使用样式案例教学法、项目教学法、任务驱动教学法、讲授法文字环绕图片效果8CSS选择器链接文字样式设定网页CSS文字与图片效果第7-9周CSS进阶1.DIV和SPAN标记布局网页2.CSS布局定位3.盒子浮动和定位DIV和SPAN标记布局网页案例教学法、项目教学法、任务驱动教学法、讲授法盒模型的应用8第9-11周DOM模型1.DOM及DOM技术简介2.网页中的DOM模型框架3、DOM模型中的节点4.使用非标准DOMinnerHTML属性DOM技术简介案例教学法、项目教学法、任务驱动教学法、讲授法动态修改页面图片8网页中的DOM模型框架元素节点、文本节点、属性节点检查浏览器支持的DOM标准级别DOM与CSS第11-12周JavaScript高级篇1.事件机制简介2.常用事件函数事件机制简介案例教学法、项目教学法、任务驱动教学法、讲授法屏蔽鼠标右键网页伸缩的两级菜单网页4常用事件函数第12-14周表格与表单1.cs控制表格样式2.DOM动态控制表格3.控制表单以及表单元素的使用使用CSS控制表格样式案例教学法、项目教学法、任务驱动教学法、讲授法自动提示的文本框8使用DOM动态控制表格用JavaScript控制多次提交网页控制表单第14-15周JavaScript设计与优化1．常见错误和异常2.错误处理3.使用调试器4.JavaScript优化常见错误和异常案例教学法、项目教学法、任务驱动教学法、讲授法通过try…catch逐渐缩小范围查找错误其他设计常用注意事项6错误处理使用调试器JavaScript优化Ajax异步交互3.Aja框架2.jQuery的$3.jQuery与CSS34.jQuery开发和调试工具2.直接获取、编辑内容3.处理表单元素的值4.处理页面事件2.元素显隐的渐入渐出效果3.幻灯片效果第16周复习4总结64五、课程考核评价 （一）教学方法和教学手段结合软件与信息服务专业学生特点，基于行动导向，根据每个任务的内容特点，以真实项目进行引导开展教学。整个课程以项目任务实训为主线，以技能培养为核心来组织教学。学生在完成项目分解的任务中学习相关知识，并利用这些知识解决项目中的问题。（1）项目教学法课程将WEB前端开发中的某个应用作为一个项目，并分解为多个小的任务。每个任务的学习过程以工作过程为导向，最终形成学生的职业行动能力。（2）小组教学法以6人为一个单位，成立教学小组。单人完成的项目，组内可以互相学习，督促和评价。大型复杂的项目，小组成员共同完成。（3）视频展示法教师对讲授内容充分提炼，将复杂的操作录制下来，方便学生反复观看和模仿，形象生动的动态展示和讲解。使抽象、难懂的教学内容变得直观、易懂和容易掌握；提高了教学效率；便于学生自主学习。（二）教学手段（1）充分利用多媒体实训室和多媒体课件本课程的课堂讲授全部在实训室进行，便于使用投影设备，采用多媒体教学手段。开发和使用的多媒体课件制作精美并含有动态演示，其有效地增强了学生的学习兴趣。（2）鼓励自主学习制作网络课件，并将教学大纲、教案、习题等同时上网开放，激发学生学习兴趣，鼓励学生自主学习，同时可以缓解课程信息量增加与压缩授课学时之间的矛盾。（3）严格考评制度设计了内容丰富、形式多样的习题作业，以利于学生理解和掌握所学知识。严格检查平时作业完成情况，及时反馈作业中反映的问题。采用定期模拟考试的方法及时检验学生阶段性学习成果。建立科学合理的考核评价制度，以促进学生的学习积极性和自我学习的动力。（4）充分利用网络环境和资源充分利用互联网资源、本课程网站资源，在网上开展教学活动，包括网络课程学习、自主学习、课后复习、课件下载、作业提交、专题讨论、网上答疑等，使学生可以不受时间、地点的限制，方便地进行学习。（二）教学评价本课程实施综合考评，注重考核学生掌握技能的水平，同时注重学习态度和最终成绩的关联，以全面综合地评定学生的能力。（1）平时技能考核：布置课堂作业以及拓展实训项目，使学生能独立完成大部分的技能训练，小项目及活动的技能，均以个人为考核单位，在平时考核和记录。成绩包括学习态度及项目技能完成情况。（2）期末考试采取开卷方式，试卷根据本课程的教学要求，并结合教学实际进行设计。（3）按平时成绩占40%、期末成绩占60%的标准给出总评成绩。六、课程资源开发与利用（一）选用教材： 校本教材《Javascript程序设计》主编：孙永林电子科技大学出版社2019年8月（二）教学参考书：[1]陈承欢.JavaScript+jQuery网页特效设计实例教程[M].人民邮电出版社,2013[2]刘增杰.精通HTML5+CSS3+JavaScript网页设计[M].清华大学出版社,2012[3]WesleyHales.HTML5和JavaScriptWeb应用开发[M].人民邮电出版社,2013（三）其它资源 1．/2．设计师的网上家园/3．开源中国

/七、课程实施建议（一）师资条件建议 担任本课程的主讲教师需要熟练掌握网页设计相关专业知识，具有敏锐的网站设计发展趋势眼光，同时应具备较丰富的教学经验。在教学组织能力方面，本课程的主讲教师应具备基本的设计能力，即根据本课程标准制定详细的授课计划，对每一堂课的教学过程精心设计；还应具备较强的施教能力、课堂掌控能力和应变能力。（二）校内外实训环境建议 承担本课程教学的兼职教师应具备中、高级职称，主要承担动态网页开发技术JavaScript应用模块、网络服务器管理技术模块的教学，另外，本门课程的实训条件要求有教学做一体化的综合实训室，融教学与实训为一体，以及与课程相应的软件作支持。校外要求有与学校长期合作的企业做实训基地，满足学生顶岗实习的需要。

课程名称:Javascript程序设计课程编码:开课单位:制定人:审核人:制定时间:2021年8月20日二○二一——二○二二学年度第一学期课程名称：Javascript程序设计 学时：64周次学习情境/项目/单元（选其一）子情境/子项目/子单元（选其一）学习内容（支撑知识）教学方法及手段成果形式参考学时第1周JavaScript概述1.JavaScript的起源2.浏览器之争3.Javascript的实现4．Javascript小体验JavaScript的起源及实现案例教学法、项目教学法、任务驱动教学法、讲授法JavaScript环境搭建2JavaScript案例演示搭建JavaScript开发环境第1-4周JavaScript基础1.JavaScript语法2.变量、数据类型、关键字、保留字、条件语句、循环语句、函数、对象、bom基础JavaScript类型案例教学法、项目教学法、任务驱动教学法、讲授法输入数字判断程序网页12JavaScript变量与关键字条件语句打印三角形循环语句函数注册判断函数网页对象BOM基础第4-5周JavaScript开发1.JavaScript应用环境2.常用开发工具3.常用调试工具常用开发工具介绍案例教学法、项目教学法、任务驱动教学法、讲授法简易计算器4常用调试工具介绍第5-7周CSS基础1.css的概念2.网页设计中的css3.使用css控制页面4.css选择器5.css设置文字效果CSS的使用样式案例教学法、项目教学法、任务驱动教学法、讲授法文字环绕图片效果8CSS选择器链接文字样式设定网页CSS文字与图片效果第7-9周CSS进阶1.DIV和SPAN标记布局网页2.CSS布局定位3.盒子浮动和定位DIV和SPAN标记布局网页案例教学法、项目教学法、任务驱动教学法、讲授法盒模型的应用8第9-11周DOM模型1.DOM及DOM技术简介2.网页中的DOM模型框架3、DOM模型中的节点4.使用非标准DOMinnerHTML属性DOM技术简介案例教学法、项目教学法、任务驱动教学法、讲授法动态修改页面图片8网页中的DOM模型框架元素节点、文本节点、属性节点检查浏览器支持的DOM标准级别DOM与CSS第11-12周JavaScript高级篇1.事件机制简介2.常用事件函数事件机制简介案例教学法、项目教学法、任务驱动教学法、讲授法屏蔽鼠标右键网页伸缩的两级菜单网页4常用事件函数第12-14周表格与表单1.cs控制表格样式2.DOM动态控制表格3.控制表单以及表单元素的使用使用CSS控制表格样式案例教学法、项目教学法、任务驱动教学法、讲授法自动提示的文本框8使用DOM动态控制表格用JavaScript控制多次提交网页控制表单第14-15周JavaScript设计与优化1．常见错误和异常2.错误处理3.使用调试器4.JavaScript优化常见错误和异常案例教学法、项目教学法、任务驱动教学法、讲授法通过try…catch逐渐缩小范围查找错误其他设计常用注意事项6错误处理使用调试器JavaScript优化Ajax异步交互3.Aja框架2.jQuery的$3.jQuery与CSS34.jQuery开发和调试工具2.直接获取、编辑内容3.处理表单元素的值4.处理页面事件2.元素显隐的渐入渐出效果3.幻灯片效果第16周复习4总结64授课班级：20软件技术1,2，3班 学分：3.5分

课程整体设计课程名称：Javascript程序设计适用专业：软件技术所属院系：编制人：制定时间：2021年08月20日二○二一年八月PAGEPAGE3一、课程基本情况课程名称：javascript程序设计课程编码：学时：64适用专业：软件技术课程类型：□“纯理论课”（A类）þ“实践+理论课”（B类）□“纯实践课”（C类）课程性质：□公共基础课程□专业基础课程þ专业核心课程□专业拓展课程前导课程：后续课程：二、课程设置1.课程性质（一）课程定位《Javascript程序设计》是软件技术专业的专业核心课，符合WEB前端工程师和Javascript开发工程师岗位中对于使用javascript设计网站特效能力的需要。本课程培养学生具备JavaScript等脚本设计网站特效能力该课程深入浅出，结合实际案例系统地讲解了使用css、JavaScript和jQuery设计动态网页的知识和技巧，它定位于WEB技术开发，是WEB前端技术开发的必备课程，在学习了html+css网页设计基础、编程基础、网页美工的基础下，为HTML5移动web开发技术、php框架开发技术、javaweb开发技术等课程的学习打下基础，在整个课程体系中具有承前启后的重要作用。（二）课程作用《Javascript程序设计》课程任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才，通过本课程的学习，学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，拥有设计网站特效的能力，实现WEB前端的验证、动态展示等任务。课程目标课程的整体目标是培养学生能够使用javascript开发网站特效的实际工作技能，通过本课程的学习，使学生形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。最终成为具备较全面的网站开发与信息服务的技术人才。根据高职教育的特点，按照学院“小学校、大课堂”的办学思路和“校企融合、同兴共赢”的办学模式，积极探索“校企合作、工学结合”的人才培养模式，积极探索以实践能力考核为主的课程评价方法，切实提高学生的职业能力和就业竞争力。

2.课程设计思路通过本课程的学习，使学生对HTML脚本、CSS代码和JavaScript特效代码等网页基本组成元素有全面和充分的认识，能熟练地使用以上代码开发出漂亮的静态网页，制作出炫酷的网页效果，并为后继的动态网站课程的学习打好基础。为了学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务本课程通过设计包括JavaScript的基础语法，常用开发工具和调试工具，简单的CSS知识，DOM模型及事件机制和常见事件处理等内容。针对学生的学情、层次和高职学生的特点，在本课程的日常教学中努力做到理论教学以应用为目的，以必需、够用为度，专业教学加强针对性和应用性。以职业能力培养为主线，使教学内容按照能力培养目标进行重组、整合与优化，教学方法体现能力培养，广泛采用“案例”、“参与式”、“讨论式”、“启发式”等生动活泼的教学形式，有效利用现代教育技术组织教学，并加强课程的组织管理、运行管理和质量管理以及课程的过程评价与目标评价。具体措施体现在以下几个方面：⦁基于典型工作过程分析，构建课程体系；⦁职业能力培养为核心，设计教学内容；⦁以提高学生职业能力和职业素养为目标，重视实践教学；⦁融合职业资格标准，推行双证书制；⦁校企合作，共建新型实践教学基地；⦁校企合作，形成实践技能课主要由企业兼职教师讲授的机制。3.课程目标3.1知识目标熟练掌握静态网页设计所需要的HTML、CSS和JavaScript等知识掌握JavaScript、CSS、DOM、Ajax等技术能够熟练地利用Javascript和Jquery等技术进行网站特效的设计。3.2能力目标能使用HTML、CSS和JavaScript设计静态网站；能使用JavaScript等脚本文件设计网站特效。3.3素质目标学生具备对程序设计的兴趣，充分发挥学生的自主学习能力；学生具备与人交流、与人合作及信息处理的能力；学生具备分析问题、解决问题及创造思维能力；4.预期学习成果在完成课程后，学生将会：编号具体内容1掌握Javascript基础内容2制作js幻灯片网站首页3制作浮动的图片广告4设计Javascript仿Flash图片轮翻5使用CSS完成神奇创意的相框6制作班级相册网站7仿淘宝网站首页设计8仿淘宝网站登陆页面设计三、课程内容与安排周次学习情境/项目/单元（选其一）子情境/子项目/子单元（选其一）学习内容（支撑知识）教学方法及手段成果形式参考学时第1周JavaScript概述1.JavaScript的起源2.浏览器之争3.Javascript的实现4．Javascript小体验JavaScript的起源及实现案例教学法、项目教学法、任务驱动教学法、讲授法JavaScript环境搭建2JavaScript案例演示搭建JavaScript开发环境第1-4周JavaScript基础1.JavaScript语法2.变量、数据类型、关键字、保留字、条件语句、循环语句、函数、对象、bom基础JavaScript类型案例教学法、项目教学法、任务驱动教学法、讲授法输入数字判断程序网页12JavaScript变量与关键字条件语句打印三角形循环语句函数注册判断函数网页对象BOM基础第4-5周JavaScript开发1.JavaScript应用环境2.常用开发工具3.常用调试工具常用开发工具介绍案例教学法、项目教学法、任务驱动教学法、讲授法简易计算器4常用调试工具介绍第5-7周CSS基础1.css的概念2.网页设计中的css3.使用css控制页面4.css选择器5.css设置文字效果CSS的使用样式案例教学法、项目教学法、任务驱动教学法、讲授法文字环绕图片效果8CSS选择器链接文字样式设定网页CSS文字与图片效果第7-9周CSS进阶1.DIV和SPAN标记布局网页2.CSS布局定位3.盒子浮动和定位DIV和SPAN标记布局网页案例教学法、项目教学法、任务驱动教学法、讲授法盒模型的应用8第9-11周DOM模型1.DOM及DOM技术简介2.网页中的DOM模型框架3、DOM模型中的节点4.使用非标准DOMinnerHTML属性DOM技术简介案例教学法、项目教学法、任务驱动教学法、讲授法动态修改页面图片8网页中的DOM模型框架元素节点、文本节点、属性节点检查浏览器支持的DOM标准级别DOM与CSS第11-12周JavaScript高级篇1.事件机制简介2.常用事件函数事件机制简介案例教学法、项目教学法、任务驱动教学法、讲授法屏蔽鼠标右键网页伸缩的两级菜单网页4常用事件函数第12-14周表格与表单1.cs控制表格样式2.DOM动态控制表格3.控制表单以及表单元素的使用使用CSS控制表格样式案例教学法、项目教学法、任务驱动教学法、讲授法自动提示的文本框8使用DOM动态控制表格用JavaScript控制多次提交网页控制表单第14-15周JavaScript设计与优化1．常见错误和异常2.错误处理3.使用调试器4.JavaScript优化常见错误和异常案例教学法、项目教学法、任务驱动教学法、讲授法通过try…catch逐渐缩小范围查找错误其他设计常用注意事项6错误处理使用调试器JavaScript优化Ajax异步交互3.Aja框架2.jQuery的$3.jQuery与CSS34.jQuery开发和调试工具2.直接获取、编辑内容3.处理表单元素的值4.处理页面事件2.元素显隐的渐入渐出效果3.幻灯片效果第16周复习4总结64四、教学方法与手段1.教学模式的设计与创新为了使学生更容易掌握新知识点，在授课时先将网页特效运行效果演示，引导学生进行思考：如何实现这些效果，需要学习哪些知识；然后再纠正学生的思路，讲解相应知识点，学生根据自己的思路和教师所讲思路知识点的对比，找到更好的方法进行实现特效，避免灌输式教学，以达到快速掌握知识点的目的。1演示过程，讲练结合。

这是计算机教学中使用最多的教学方法，可以在入门阶段使用此方法。多数学校机房都配置了电子教室一类的多媒体教学软件，这样教师在讲授新知识时可以锁定学生机，演示操作过程，学生练习时可以开放学生机。但是这种方法用多了，学生会觉得枯燥，也不易培养学生创造力。2项目教学法通过项目设计培养学生的职业素养。在项目设计过程中，加深对知识的理解，提高对编程工具使用的熟练程度，掌握软件项目开发的一般方法、步骤与流程，熟悉程序设计的基本工作规范，养成良好的编程习惯。同时，通过协作完成软件项目开发，培养学生的沟通交流能力、组织协调能力、团队合作能力和自主学习能力。项目开发过程中，每4-5人一组，在教师的指导下，制定项目开发计划、时间进度、工作流程等，项目组成员可以具体的分工协作。完成项目测试，项目文档制作等。如教师安排一个仿淘宝网页设计，学生进行分组，合作完成，并且展示作品。2.教学方法的应用预期学习成果教学方法方法1名称方法2名称方法3名称方法4名称成果1第一个JavaScript网页案例教学法项目教学法

任务驱动教学法讲授法成果2输入数字判断程序网页案例教学法任务驱动教学法项目教学法

讲授法成果3输出99乘法表程序网页任务驱动教学法讲授法案例教学法项目教学法成果4注册判断函数网页任务驱动教学法讲授法案例教学法项目教学法成果5打开工具的动作案例教学法任务驱动教学法项目教学法

讲授法成果6具有文字样式的网页讲授法项目教学法

任务驱动教学法案例教学法成果7菜单页面任务驱动教学法讲授法案例教学法项目教学法成果8布局特色的网页案例教学法项目教学法

任务驱动教学法讲授法成果9屏蔽鼠标右键网页、伸缩的两级菜单网页讲授法项目教学法

任务驱动教学法案例教学法成果10自动提示的文本框网页任务驱动教学法讲授法案例教学法项目教学法成果11用JavaScript控制多次提交网页任务驱动教学法讲授法案例教学法项目教学法成果12测试内容网页讲授法项目教学法

任务驱动教学法案例教学法成果13制作可自动校验的表单网页案例教学法任务驱动教学法项目教学法

讲授法成果14Jquery的网页讲授法项目教学法任务驱动教学法案例教学法成果15快餐配送页面案例教学法项目教学法

任务驱动教学法讲授法成果16制作伸缩的导航条网页任务驱动教学法讲授法案例教学法项目教学法五、课程考核评价1.课程考核方式改革（一）教学方法和教学手段结合软件与信息服务专业学生特点，基于行动导向，根据每个任务的内容特点，以真实项目进行引导开展教学。整个课程以任务实训为主线，以技能培养为核心来组织教学。学生在完成项目分解的任务中学习相关知识，并利用这些知识解决项目中的问题。（1）项目教学法课程将WEB前端开发中的某个应用作为一个项目，并分解为多个小的任务。每个任务的学习过程以工作过程为导向，最终形成学生的职业行动能力。（2）小组教学法以6人为一个单位，成立教学小组。单人完成的项目，组内可以互相学习，督促和评价。大型复杂的项目，小组成员共同完成。（3）视频展示法教师对讲授内容充分提炼，将复杂的操作录制下来，方便学生反复观看和模仿，形象生动的动态展示和讲解。使抽象、难懂的教学内容变得直观、易懂和容易掌握；提高了教学效率；便于学生自主学习。（二）教学手段（1）充分利用多媒体实训室和多媒体课件本课程的课堂讲授全部在实训室进行，便于使用投影设备，采用多媒体教学手段。开发和使用的多媒体课件制作精美并含有动态演示，其有效地增强了学生的学习兴趣。（2）鼓励自主学习制作网络课件，并将教学大纲、教案、习题等同时上网开放，激发学生学习兴趣，鼓励学生自主学习，同时可以缓解课程信息量增加与压缩授课学时之间的矛盾。（3）严格考评制度设计了内容丰富、形式多样的习题作业，以利于学生理解和掌握所学知识。严格检查平时作业完成情况，及时反馈作业中反映的问题。采用定期模拟考试的方法及时检验学生阶段性学习成果。建立科学合理的考核评价制度，以促进学生的学习积极性和自我学习的动力。（4）充分利用网络环境和资源充分利用互联网资源、本课程网站资源，在网上开展教学活动，包括网络课程学习、自主学习、课后复习、课件下载、作业提交、专题讨论、网上答疑等，使学生可以不受时间、地点的限制，方便地进行学习。2.课程评价标准本课程实施综合考评，注重考核学生掌握技能的水平，同时注重学习态度和最终成绩的关联，以全面综合地评定学生的能力。（1）平时技能考核：布置课堂作业以及拓展实训项目，使学生能独立完成大部分的技能训练，小项目及活动的技能，均以个人为考核单位，在平时考核和记录。成绩包括学习态度及项目技能完成情况。（2）期末考试采取开卷方式，试卷根据本课程的教学要求，并结合教学实际进行设计。（3）按平时成绩占40%、期末成绩占60%的标准给出总评成绩。具体如下图所示。考勤课堂作业课后作业实训报告期末考试其他10%10%5%5%60%10%六、参考文献与资料（一）选用教材： 校本教材《Javascript程序设计》主编：孙永林电子科技大学出版社2019年8月（二）教学参考书：[1]陈承欢.JavaScript+jQuery网页特效设计实例教程[M].人民邮电出版社,2013[2]刘增杰.精通HTML5+CSS3+JavaScript网页设计[M].清华大学出版社,2012[3]WesleyHales.HTML5和JavaScriptWeb应用开发[M].人民邮电出版社,2013（三）其它资源1、49/computer/s.php/yx1/学校课程资源2、/jquery/-->w3school3、前端开发工程师视频教学网易云平台

课程单元设计课程名称：JavaScript程序设计适用专业：20级软件技术所属院系：信息工程学院编制人：制定时间：2021.8二○二一年至二○二二年第一学期

《JavaScript程序设计》教案设计一、教案头本单元标题：第1章 JavaScript概述授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1.理解Javascript的起源2.能安装代码编辑器EditPlus或者DreamViewer软件3.掌握编辑器的基本用法4.掌握编辑器EditPlus或者DreamViewer软件的基本用法1.Javascript的起源2.浏览器之争3.JavaScript的编辑环境4.JavaScript的实现与小体验能力训练任务及案例一、能力训练任务编写第一个JavaScript网页二、案例案例1：定时打开窗口案例2：日期选择器参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Javascript的起源课件、视频听讲教材网络资源多媒体10分钟讲授1.浏览器之间的冲突2.标准的制定3.Javascript的实现ECMAscript、DOM、BOM）4.编辑器EditPlus或DreamViewer的安装5编辑器EditPlus或DreamViewer的基本功能6编辑实现第一个js程序“HelloWorld”课件演示模拟演练听讲实际操作教材网络资源多媒体电脑60分钟操练器EditPlus或DreamViewer的安装使用EditPlus实现第一个js程序“Helloworld”演示实际操作教材网络资源多媒体电脑70分钟总结vascript概况实现js程序的流程讲解集体参与教材20分钟作业布置给网站首页加上自动问候的功能。网页将可以在不同的时段向访问者显示不同的问候语，例如在上午8:00—9:00就向用户显示“早上好”，如果在下午则显示“下午好”。我们将定义的时间段对应得问候语列在下面：0:00—06:00你不会是熬通宵吧，别太辛苦哦！06:00—08:00早上好08:00—11:00上午好11:00—13:00午饭吃过了吗13:00—17:00 下午好17:00—24:00晚上好2.完成个人网站中“欢迎光临”标语的显示讲解集体参与网络资源多媒体电脑20分钟学习成果完成第一个JavaScript网页编写2、完成定时打开窗口操作3、完成日期选择器操作教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、变量的声明及赋值1、语法2、变量能力训练任务及案例一、能力训练任务1、JavaScript语法学习2、变量命名规则二、案例案例1：变量定义实例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入Javascript的实现课件演示听讲教材网络资源多媒体10分钟讲授1.Javascript基本语法要求2.变量的声明及赋值课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练引入一个小例子实现对字符串、数值等变量的赋值操作演示讲解任务驱动实际操作教材网络资源多媒体电脑30分钟总结变量声明及赋值的方法讲解集体参与教材10分钟作业布置找出javascript变量声明及赋值方法与Java语言中的区别讲解集体参与网络资源多媒体电脑10分钟学习成果学会JavaScript基本语法懂得变量的声明及赋值教学后记

《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能正确理解各种数据类型并使用相应的数据类型2、对关键字和保留字能正确理解并使用1、数据类型2、关键字和保留字能力训练任务及案例一、能力训练任务正确使用各种数据类型二、案例案例1：连接字符串案例2：字符串字母大小写传换案例3：获取字符串长度示例案例4：数值运算示例案例5：布尔型转换字符串参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习变量的声明及赋值课件演示听讲教材网络资源多媒体10分钟讲授1.6种主要数据类型介绍，并通过小例子加深学生对数据类型的理解2.关键字和保留字的注意事项课件演示模拟演练任务驱动听讲实际操作教材网络资源多媒体电脑80分钟操练引入一个小例子分别使用6种重要的数据类型演示讲解实际操作教材网络资源多媒体电脑70分钟总结6种数据类型数据使用的注意事项讲解集体参与教材10分钟作业布置设置个人网站中对不同数据的使用实现不同显示项目讲解集体参与网络资源多媒体电脑10分钟学习成果1、能够正确使用各种数据类型2、正确完成所有案例教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用条件逻辑控制语句1、条件语句能力训练任务及案例一、能力训练任务学会各种条件语句来进行流程上的判断二、案例案例1：if语句示例案例2：switch语句示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习变量的数据类型课件演示听讲教材网络资源多媒体10分钟讲授根据时间显示不同问候语的例子讲解：1.ifelse条件逻辑控制语句2.switchcase逻辑控制语句课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练用一个根据不同条件执行不同操作的实例让同学加深对这2种条件语句的理解演示讲解实际操作教材网络资源多媒体电脑30分钟总结Ifelse语句和switchcase的相同和不同点讲解集体参与教材10分钟作业布置实现根据价格高低来判断是否奢侈品的程序实现讲解集体参与网络资源多媒体电脑10分钟学习成果懂得利用各种条件语句来进行流程上的判断教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用循环逻辑控制语句1、循环语句能力训练任务及案例一、能力训练任务各种循环语句的运用二、案例案例1：break语句示例案例2：continue语句示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习条件语句课件演示听讲教材网络资源多媒体10分钟讲授实例：利用循环计算从1累加到100。通过实例的讲解来解释循环语句使用的规则课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：在网页中显示做1,000,000次加操作所耗费的时间演示讲解实际操作教材网络资源多媒体电脑30分钟总结循环语句的循环起始、条件及自加表达式的注意事项讲解集体参与教材10分钟作业布置计算从出生到现在的天数讲解集体参与网络资源多媒体电脑10分钟学习成果正确使用循环语句教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第2章JavaScript基础授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确理解并使用函数，理解对象和BOM基础1、函数、对象和BOM基础能力训练任务及案例一、能力训练任务正确使用函数来实现功能二、案例案例1：JavaScript函数调用示例案例2：argument示例案例3：date对象示例案例4：date对象示例案例5：confirm对话框演示示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习循环语句课件演示听讲教材网络资源多媒体10分钟讲授1.实例：对两个数进行加减乘除四则运算。通过事例的讲解加深学生对函数的理解2.Date对象的介绍及BOM中常用的对象介绍课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：使用有参函数的调用实现对两数的四则运算演示讲解实际操作教材网络资源多媒体电脑30分钟总结无参及有参函数使用的注意事项讲解集体参与教材10分钟作业布置通过函数实现计算在网页中显示做1,000,000次加操作所耗费的时间讲解集体参与网络资源多媒体电脑10分钟学习成果正确使用函数来实现功能教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第3章Javascript开发授课班级：20软件1,2，3课时：2上课地点：实训5教学目标能力目标知识目标1、能正确使用alert()函数及浏览器的开发人员工具来对程序进行调试。1、调试js程序的工具及手段能力训练任务及案例一、能力训练任务学会进行单步运行、单步跳过及怎样添加监视点二、案例案例1：九九乘法表参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习javascript基本语法课件演示听讲教材网络资源多媒体10分钟讲授实例：打印九九乘法表。通过对实例的调试讲解，让学生掌握使用alert()函数及浏览器的开发人员工具调试程序课件演示模拟演练听讲实际操作教材网络资源多媒体电脑30分钟操练实现：调试打印菱形程序演示讲解实际操作教材网络资源多媒体电脑30分钟总结使用浏览器的开发人员工具单步调试需要注意的事项讲解集体参与教材10分钟作业布置用JavaScript计算借贷支出讲解集体参与网络资源多媒体电脑10分钟学习成果学会进行单步运行、单步跳过及怎样添加监视点教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第4章CSS基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能正确使用三种方式来实现控制页面方法2、掌握三种CSS选择器的使用1、CSS的概念2、CSS控制页面的方法3、CSS选择器能力训练任务及案例一、能力训练任务正确使用三种方式来实现控制页面方法三种CSS选择器的使用二、案例案例1：行内样式表简单实用示例案例2：嵌入式样式表应用示例案例3：导入式样式表应用示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习js调试程序方法课件演示听讲教材网络资源多媒体10分钟讲授1.分别使用三种方法实现控制页面种文字及图片的风格样式2.对网页中不同标签分别使用标记选择器，类别选择器及ID选择器来控制页面不同元素的风格样式课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练对一个页面中不同的元素实现不同的风格样式演示讲解实际操作教材网络资源多媒体电脑60分钟总结三种选择器的不同适应环境讲解集体参与教材15分钟作业布置对个人网站实现不同的风格样式设计讲解集体参与网络资源多媒体电脑15分钟学习成果正确使用三种方式来实现控制页面方法懂得三种CSS选择器的使用教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第4章CSS基础授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能对文字设置各种效果2、能对图片设置双边框及图文混排效果3、能对页面背景进行设置1、CSS设置文字效果2、CSS设置图片效果3、CSS设置页面背景能力训练任务及案例一、能力训练任务掌握各种CSS文字效果的设置及页面背景的设置二、案例案例1：段落样式首行缩进案例2：字体间隔应用示例案例3：首字放大应用示例案例4：图文混排简单示例案例5：背景颜色、图片设置示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习三种CSS选择器课件演示听讲教材网络资源多媒体10分钟讲授1、对给定的一段文字设置首字放大，字体字号等效果。2、四张图片实现双边框效果。课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练设置页面的背景为一张具有双边框效果的图片演示讲解实际操作教材网络资源多媒体电脑60分钟总结文字效果的属性，图片及图文混排的不同属性设置讲解集体参与教材15分钟作业布置对个人网站种的文字图片及段落实现不同的风格样式设计讲解集体参与网络资源多媒体电脑15分钟学习成果学会页面背景的设置及各种文字样式的设计教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第5章CSS进阶授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能使用DIV与SPAN标记布局页面2、盒模型布局页面1、块级元素和行内级元素2、DIV与SPAN标记布局页面3、盒模型能力训练任务及案例一、能力训练任务学会DIV与SPAN标记布局页面及盒模型布局二、案例案例1：DIV标记示例案例2：<div>与<span>元素样式对比案例3：盒子模型结构示例案例4：边框示例案例5：padding使用示例案例6：margin示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习CSS基础内容课件演示听讲教材网络资源多媒体10分钟讲授1.通过盒子模型结构示例讲解块级和行内级元素的区别及适应范围。2.讲解盒模型种padding,margin,border的区别。课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练图文层叠示例的实现演示讲解实际操作教材网络资源多媒体电脑65分钟总结DIV及SPAN标记布局页面及盒模型概念在页面布局中的优势讲解集体参与教材15分钟作业布置设计一个页面，使访问者用鼠标指向页面上的不同文字时，鼠标的形状会有所不同。讲解集体参与网络资源多媒体电脑10分钟学习成果1、懂得div的运用2、完成border、padding、margin属性示例操作教学后记《JavaScript程序设计》教案设计一、教案头本单元标题：第5章CSS进阶授课班级：20软件1,2，3课时：4上课地点：实训5教学目标能力目标知识目标1、能使用三种CSS浮动定位2、能使用简单的position定位布局页面1、CSS浮动定位2、CSSposition定位能力训练任务及案例一、能力训练任务CSS布局定位二、案例案例1：浮动定位示例案例2：position定位示例参考资料Javascript技术教程二、（单元）教学设计教学环节教学内容教学方法及手段学生活动教学资源及工具时间分配导入复习盒模型课件演示听讲教材网络资源多媒体10分钟讲授1.通过一个图文混排的实例讲解浮动定位float属性的三个值。2.通过position定位示例讲解position定位的使用课件演示模拟演练听讲实际操作教材网络资源多媒体电脑80分钟操练歌曲编辑列表实例的实现演示讲解实际操作教材网络资源多媒体电脑65分钟总结浮动定位在图文混排中的使用及position定位在布局页面中的使用讲解集体参与教材15分钟作业布置水平菜单示例讲解集体参与网络资源多媒体电脑10分钟学习成果完成Position定位即float定位示例操作教学后记《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的启动和退出以及Visual