《JavaScirpt程序设计II》-单元设计

常州信息职业技术学院单元设计课程课程：内容：模块1jQuery学时：

设计摘要教学 课题模块1jQuery课程学时安排48学时年级高职二年级所选教材刘斌等编著《\o"JavaScript+jQuery程序设计开发实战慕课版刘斌,权小红编人民邮电出版社"JavaScript+jQuery程序设计开发实战》，人民邮电出版社，2024年4月一、教学背景创作思路：针对传统教学无法解决的教学难题进行设计，在工学结合模式下，采用案例教学法，依托信息化教学环境，整合数字化教学资源，优化教学过程。以学生为中心，教师为主导，在项目教学的各环节充分运用开发工具、职教云课堂、动画、在线教学平台等信息化手段解决教学重点难点问题。设计特色 ：1．教学过程项目化：依据“工学结合、职业情境、项目主导”人才培养模式，通过创设情境、针对实际问题精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学”，“学中做”，降低了学生学习难度，提高学习兴趣和课堂参与度；2．教学资源数字化：丰富的课件、经典作品、视频等资源可供学生在线平台学习；3．网络平台融合化：紧紧围绕开发工具，融入职教云课堂、动画、在线教学平台等信息化手段进行教学完成教学目标，突破重点、难点；4．学习评价多元化：结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评价平台等多种手段形成动态化、多元化的评价体系。二、学习目标与内容1.学习目标 1.知识目标(1)理解jQuery库的基本概念和结构，包括选择器、事件处理、DOM操作和Ajax。(2)掌握jQuery常用方法的语法和使用场景，能够有效应用于前端开发中。(3)了解jQuery的插件机制，学习如何使用和创建插件以扩展功能。2.能力目标(1)能够使用jQuery进行高效的DOM操作，实现动态网页效果，提升用户体验。(2)能够运用jQuery处理事件，提高页面交互性，通过事件委托优化性能。(3)能够使用jQuery的Ajax功能与服务器进行数据交互，掌握异步编程的基本原理。3.素质目标(1)培养学生的自主学习能力，鼓励探索和掌握新技术与工具，增强适应能力。(2)提升学生的团队合作精神，通过小组项目合作，培养有效的沟通与协作能力。(3)强调对用户体验的重视，培养服务意识与社会责任感，使学生在开发中关注用户需求和反馈。思政育人目标：（1）鼓励学生反思科技发展的伦理问题，倡导在技术实现中坚持用户隐私保护和数据安全的原则，培养社会责任感和职业道德。（2）引导学生认识到，优秀的网页设计可以提升用户的参与感和满意度，进而影响社会信息的传播和交流。（3）讨论如何通过事件处理提升用户的参与感，确保每位用户的声音都被听见。同时，鼓励学生关注技术的普及与教育公平，推动技术在社会中的广泛应用，培养学生的服务意识和团队合作精神。（4）引导学生认识到，通过创新技术可以提升用户体验，使信息更加生动、易懂。讨论如何运用Ajax技术实现信息的实时更新，增强用户与网页的互动，促进信息的快速传播。2.学习主要内容 任务1：jQuery选择器任务2：jQuery操作DOM任务3:jQuery事件处理机制任务4:jQuery动画和Ajax操作3.学习重点及难点任务1：jQuery选择器学习重点：熟悉各种类型的选择器及其用法。优化选择器以提高代码效率。学习难点：理解复杂选择器的组合使用及性能影响。任务2：jQuery操作DOM学习重点：掌握DOM元素的增、删、改、查操作。理解DOM结构及其在网页中的作用。学习难点：处理频繁DOM操作时的性能优化。任务3：jQuery事件处理机制学习重点：理解事件的基本概念及绑定方法。学习事件委托技术的应用。学习难点：处理复杂用户交互时的事件管理与性能问题。任务4：jQuery动画和Ajax操作学习重点：掌握动画效果的实现与优化。学习Ajax请求的使用与数据处理。学习难点：处理低带宽环境下的用户体验优化。三、学情分析学生对JavaScript的基础知识掌握良好，大部分能够理解基本概念及其语法，但在具体应用中存在一定的困难。学生的编程经验普遍较少，特别是在DOM操作和事件处理机制方面，实践经验不足。四、学习环境选择与学习资源设计1.学习环境（1）教学硬件：多媒体教室；（2）教学软件：极域电子教室、在线教学平台等。2.学习资源类型（1）课程在线教学平台（2）新形态一体化教材（3）职教云课堂3.学习资源内容简要说明智慧职教平台《JavaScript程序设计》在线开放课程有多媒体课件、微视频、试题库等多种数字化资源；高等职业教育新形态一体化规划教材《JavaScript+jQuery交互式Web前端开发》中二维码标注微课、课件，实现移动终端随扫随学。五、学习情境创设学生将运用jQuery实现动态效果与用户交互，具体包括使用选择器来选择DOM元素、动态添加和删除信息、为按钮和链接绑定事件，以及通过Ajax获取额外信息。学生在项目过程中进行小组讨论、任务分配和代码实践，老师提供实时指导和反馈。最终，各小组展示自己的项目，通过互评分享经验。这一情境创设旨在提升学生的实际编程能力与团队合作意识，同时激发他们对前端开发的兴趣。六、教法学法设计（1）引导启发法：运用信息技术营造学习情境，设疑导入，激发兴趣；（2）案例驱动法：设置创设情境、知识探究、应用案例分析、实践训练、总结评价四个教学环节，学生根据掌握的知识和具备的技能来完成任务，并以此推动下一任务的操作；（3）协作讨论法：在设计过程中学生小组协作，互相探讨，直至任务设计的实现。

七、教学过程设计-（1）jQuery概述（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生本节课将学习jQuery的基本概念。1、下载jQuery库，并对基本概念进行了解。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery简介的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。《JavaScript程序设计》课程在线教学平台新形态一体化教材职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：引例描述时间：10分钟教学内容师生活动教学方法教学手段教师学生1、展示一个使用jQuery实现的动态网页效果，例如一个简单的动画或交互功能。2、提出问题：如何利用jQuery实现这些效果？。演示网页效果，提出问题，引导学生思考实现过程。观察演示效果，积极思考并参与小组讨论，提出自己的见解和疑问。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：思政小课堂时间：5分钟教学内容师生活动教学方法教学手段教师学生鼓励学生反思科技发展的伦理问题，倡导在技术实现中坚持用户隐私保护和数据安全的原则，培养社会责任感和职业道德。1、引导学生反思，设问并提出思考，组织学生进行讨论和分享；2、通过课件进行归纳小结。1、思政小课堂讨论、分享；2、对于教师的归纳，仔细听讲、思考、记录笔记。1、知识迁移；2、问题引导；3、分组讨论；4、分析归纳。1、视频2、课件设计意图将思政内容融入到课程学习中，以“知识传授与价值引领相结合”为宗旨，使思想政治理论教育与专业教育协调同步、相得益彰，真正实现在课堂教学主渠道中全方位、全过程、全员立体化育人。步骤4：知识探究时间：40分钟教学内容师生活动教学方法教学手段教师学生1.jQuery概述2.jQuery的功能和优势3.其他JavaScript库4.下载并使用jQuery1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图通过引例引入本节课所需要学习的知识点，为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：动手实践时间：10分钟教学内容师生活动教学方法教学手段教师学生引用jQuery库，并编写第一个jQuery程序。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、独立完成。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：评价总结时间：15分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。

八、教学过程设计-（2）jQuery选择器（4学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：jQuery选择器的分类jQuery选择器的应用通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：5分钟教学内容师生活动教学方法教学手段教师学生通过一个简单的网页示例，展示如何使用jQuery选择器操作DOM元素。提出问题：如何使用不同类型的选择器来选择特定的元素？展示网页示例，提出问题，引导学生思考选择器的应用。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：25分钟教学内容师生活动教学方法教学手段教师学生jQuery基本选择器的概念jQuery基本选择器的应用1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：讲练结合（一）时间：40分钟教学内容师生活动教学方法教学手段教师学生1.层级选择器2.筛选选择器1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：讲练结合（二）时间：80分钟教学内容师生活动教学方法教学手段教师学生1.获取同级元素选择器2.筛选元素选择器3.属性选择器4.子元素选择器5.表单选择器1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生教材：拓展练习6.11、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

九、教学过程设计-（3）元素内容（2课时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：jQuery中的操作元素内容的方法。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：5分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery修改DOM元素的内容。2、提出问题：如何用jQuery实现对网页文本和HTML内容的修改？展示网页示例，并提出问题，引导学生思考如何实现。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：20分钟教学内容师生活动教学方法教学手段教师学生1、使用jQuery操作元素内容操作1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：动手实践时间：25分钟教学内容师生活动教学方法教学手段教师学生1、使用jQuery操作元素内容操作；2、对比不用操作元素内容方法的区别。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、独立完成。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：讲练结合时间：20分钟教学内容师生活动教学方法教学手段教师学生1、对比原生JS与jQuery代码的区别1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生【课外实践2】请使用jQuery编写登录页面，用户名和密码输入错误时进行提示。1、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十、教学过程设计-（4）元素样式（2课时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、jQuery中的操作元素样式的方法。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：5分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery修改DOM元素的样式。2、提出问题：如何用jQuery实现对元素样式的动态修改？展示网页示例，并提出问题，引导学生思考如何实现。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：30分钟教学内容师生活动教学方法教学手段教师学生1、使用css()方法操作元素样式操作2、使用类方法操作元素样式操作1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：动手实践时间：25分钟教学内容师生活动教学方法教学手段教师学生1、css()方法设置多个样式；2、使用toggleClass()切换类。1、布置任务；2、巡视督促，答疑解惑，指导实践。1、通过平台提供的教程学习；2、独立完成。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，让学生自主地完成实战任务。所以，老师应尽量少指导，而是引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：讲练结合时间：10分钟教学内容师生活动教学方法教学手段教师学生1、对比两种修改元素样式的区别1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生【课堂实践3】修改购物车页面，修改元素样式，分别表示购物车商品被选中和为选中的不同状态。1、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

十一、教学过程设计-（5）元素属性（2学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery操作DOM元素的属性。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery属性操作的视频和课件）通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题引入时间：5分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery获取和设置DOM元素的属性。2、提出问题：如何用jQuery实现对元素属性的动态修改？1、教师设疑；2、引导思考。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：30分钟教学内容师生活动教学方法教学手段教师学生1、prop()方法；2、attr()方法；3、data()方法。1、引导学生借助在线课程平台获取知识进行自主探究；2、知识讲解；3、操作演示。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：实践训练时间：35分钟教学内容师生活动教学方法教学手段教师学生实训训练：1、prop()方法的应用；2、attr()方法的应用；3、data()方法的应用。1、任务分析；2、巡视督促，答疑解惑，指导引例实现。1、分组讨论；2、引例实现。1、讲练结合；2、分组讨论；3、利用信息化手段寻求帮助，化解难点；4、动手实践。1、课程在线教学平台2、职教云课堂设计意图通过分析与实现单元引例，进一步深化巩固本次课所授知识，引导学生进行分组讨论，让学生在自主探究中体验成功的乐趣，增强对知识的内化。步骤5：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生在线测验课堂总结1、组织交流；2、教师点评；3、课堂总结。1、分享交流；2、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：课后巩固教学内容师生活动教学方法教学手段教师学生【课堂实践4】将下面的数据保存到页面div元素data属性｛"name":"张三","classname":"rj206","No":"10001"｝1、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。

十二、教学过程设计-（6）DOM节点操作（6学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、如何使用jQuery操作DOM节点，包括增删改查。2、布置课前任务，通过职教云平台发布相关学习资源（如jQueryDOM节点操作的视频和课件）通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：案例引入时间：10分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery操作DOM节点。2、提出问题：如何用jQuery实现DOM节点的动态增删改查？1、教师设疑；2、问题引导。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过案例演示，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：讲练结合（一）时间：40分钟教学内容师生活动教学方法教学手段教师学生遍历元素（1）【案例6.2.11】each()方法遍历元素（2）【案例6.2.12】$.each()方法遍历数组和对象1、算法分析；2、算法实现、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对案例分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤4：讲练结合（二）时间：60分钟教学内容师生活动教学方法教学手段教师学生创建元素（1）【案例6.2.13】创建元素【课堂练习】根据需求在页面上创建学生信息。1、算法分析；2、算法实现、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对案例分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：讲练结合（三）时间：60分钟教学内容师生活动教学方法教学手段教师学生添加元素（1）【案例6.2.14】内部添加元素【课堂练习】根据需求在页面上添加用户爱好。1、算法分析；2、算法实现、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对案例分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：讲练结合（四）时间：60分钟教学内容师生活动教学方法教学手段教师学生删除元素（1）【案例6.2.16】删除元素【课堂练习】删除购物车中商品信息。1、算法分析；2、算法实现、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对案例分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤7：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生【课外实践5】页面上有一个ul水果列表，使用jQuery将此水果列表中所有的水果复制到另外一个空的ul列表中。【拓展练习】6.21、布置作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十三、教学过程设计-（7）常用事件（4学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery处理常用的事件。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery事件处理的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：10分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery绑定和处理事件。2、提出问题：如何用jQuery实现对用户交互事件的响应？展示网页示例，提出问题，引导学生思考事件响应的流程。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：60分钟教学内容师生活动教学方法教学手段教师学生1、讲解jQuery中用于事件处理的常用方法，如click()、dblclick()、mouseover()、mouseout()、keydown()、keyup()等。2、介绍事件绑定方法，如on()和off()，以及事件委托的概念。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：讲练结合（一）时间：40分钟教学内容师生活动教学方法教学手段教师学生1.通过jQuery事件方法绑定【案例6.3.1】change()事件方法【案例6.3.2】hover()事件方法2.通过on()方法绑定【案例6.3.3】on()方法绑定事件【案例6.3.4】on()方法实现多个事件绑定同一个事件处理程序1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：讲练结合（二）时间：40分钟教学内容师生活动教学方法教学手段教师学生【案例6.3.5】on()方法实现多个事件绑定不同事件处理程序【案例6.3.6】on()方法实现事件委托【案例6.3.7】one()绑定单次事件1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤6：评价总结时间：10分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤7：课后巩固教学内容师生活动教学方法教学手段教师学生实践：在【案例6.3.2】的基础上修改代码，实现鼠标进入顶部菜单时，都可以弹出对应子菜单1、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十四、教学过程设计-（8）事件解绑（4学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery解除事件绑定。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery事件解除的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：20分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery解除事件绑定。提出问题：在什么情况下需要解除事件绑定？如何实现？展示网页示例，提出问题，引导学生思考事件解绑的不同方法对比。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：60分钟教学内容师生活动教学方法教学手段教师学生1、Off()方法实现事件解绑。2、对比几种不同事件解绑方法。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：讲练结合时间：60分钟教学内容师生活动教学方法教学手段教师学生1.off()方法的参数说明【案例6.3.8】off()解绑单个事件【案例6.3.9】off()解绑事件委托1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：评价总结时间：20分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：课后巩固教学内容师生活动教学方法教学手段教师学生【课外实践】：请编写一段jQuery代码实现以下功能：1、创建一个按钮和一个文本区域。2、当用户点击按钮时，文本区域中显示“按钮被点击了！”。3、在文本区域显示文本后，解除按钮的点击事件，使得再次点击按钮不会再改变文本区域的内容。要求：1、使用jQuery实现事件绑定和解除。2、确保事件解除后，按钮的点击不再影响文本区域。1、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十五、教学过程设计-（9）事件触发（4学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery触发事件。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery事件触发的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：20分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery触发事件。2、提出问题：如何用jQuery模拟用户交互事件？展示网页示例，提出问题，引导学生思考事件解绑的不同方法对比。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究时间：60分钟教学内容师生活动教学方法教学手段教师学生1、事件方法。2、Trigger()方法。3、triggerHandler()方法。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：讲练结合时间：60分钟教学内容师生活动教学方法教学手段教师学生1、事件对象1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤5：评价总结时间：20分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤6：课后巩固教学内容师生活动教学方法教学手段教师学生【课外实践】：请编写一段jQuery代码实现以下功能：1、创建两个按钮和一个文本区域。2、第一个按钮用于在文本区域中显示“按钮1被点击了！”。第二个按钮用于触发第一个按钮的点击事件，而不直接修改文本区域的内容。要求：1、使用jQuery实现事件绑定和事件触发。2、确保通过第二个按钮触发第一个按钮的点击事件。【扩展练习】6.31、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十六、教学过程设计-（10）jQuery动画（6学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery创建和控制动画效果。2、布置课前任务，通过职教云平台发布相关学习资源（如jQuery动画的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：20分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery实现基本的动画效果。2、提出问题：如何用jQuery实现元素的动态效果？展示网页示例，提出问题，引导学生思考事件解绑的不同方法对比。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究（一）时间：60分钟教学内容师生活动教学方法教学手段教师学生1、显示与隐藏。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：知识探究（二）时间：40分钟教学内容师生活动教学方法教学手段教师学生1、淡入和淡出。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：知识探究（三）时间：60分钟教学内容师生活动教学方法教学手段教师学生1、上滑与下滑。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤6：讲练结合时间：60分钟教学内容师生活动教学方法教学手段教师学生1、自定义对象1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手段寻求帮助，使学生得到更多的启发，与此同时，让学生在自主探究中体验成功的乐趣，增强对新知识的索取能力。步骤7：评价总结时间：20分钟教学内容师生活动教学方法教学手段教师学生小组汇报在线测验课堂总结1、组织交流2、教师点评3、课堂总结，引导创新。1、分别演示；2、分享交流；3、相互评价。1、教师启发2、讨论归纳3、分数激励1、极域电子教室2、职教云课堂设计意图教师应充分发挥教学评价在教学中的导向作用，重视自评与互评，使评价成为学生反思自我，发现自我，发展自我的过程。为了使评价优化，评价时要指导方法、提出依据，这样才能有效地达到评价的效果。步骤8：课后巩固教学内容师生活动教学方法教学手段教师学生【课外实践】：在页面中创建3个色块（div背景色），要求：（1）默认设置所有颜色块为半透明效果。（2）当鼠标指针移入时，指定的颜色块显示正常效果；当鼠标指针移出时，指定的颜色块显示半透明效果。1、布置实践作业；2、学生作业提交后及时批改并给出指导建议。1、自主完成课后任务；2、课后任务完成后，按时提交至在线课程平台。1、教师讲解；2、学生提交作业，教师提出修改意见。1、班级QQ群2、课程在线教学平台设计意图让学生利用课后时间进一步地吸收消化课堂内容，在巩固知识的同时，不断提高自身信息素养。十七、教学过程设计-（11）jQuery的Ajax操作（6学时）步骤1：课前准备教学内容师生活动教学方法教学手段教师学生提前告知学生课程学习内容及布置课前任务：1、学习如何使用jQuery进行Ajax操作。2、布置课前任务，通过职教云平台发布相关学习资源（如jQueryAjax操作的视频和课件）。通过智慧职教云平台发布通知及布置课前任务，告知学生即将学习的课程内容，并在平台发布与课程内容相关的授课录像、课件等资源，让学生提前预习。查看在线学习平台公告，提前通过平台或者扫描新形态一体化教材上的对应知识点的二维码观看微课程视频预习相关课程内容。通过信息化手段和技术发布告知学生学习内容。1、《JavaScript程序设计》课程在线教学平台2、新形态一体化教材3、职教云课堂设计意图教师通过信息化手段向学生提前发布即将学习的课程内容，意在让学生养成良好地运用信息技术手段进行知识获取及自主探究的习惯，培养自身信息素养，也为课程教学做好准备。步骤2：问题设疑时间：20分钟教学内容师生活动教学方法教学手段教师学生1、通过一个简单的网页示例，展示如何使用jQuery进行基本的Ajax请求。2、提出问题：如何用jQuery实现与服务器的数据交互？展示网页示例，提出问题，引导学生思考事件解绑的不同方法对比。1、思考老师提出的问题，踊跃回答；2、分组讨论。1、教师讲解；2、头脑风暴；3、分组讨论。1、多媒体2、课件设计意图通过问题，引发学生思考，激发了学生的兴趣，学生一下子就投入到课堂中，这激发了学生强烈的学习愿望和高涨的学习热情。为接下来让学生积极主动地参与到学习活动中来做好了情感上的准备。步骤3：知识探究（一）时间：60分钟教学内容师生活动教学方法教学手段教师学生1、HTTP简介。2、XMLHttpRequest对象1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤4：知识探究（二）时间：40分钟教学内容师生活动教学方法教学手段教师学生1、原生JavaScript实现AJAX。2、jQuery操作AJAX1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤5：知识探究（三）时间：60分钟教学内容师生活动教学方法教学手段教师学生综合案例：请编写一段jQuery代码，实现一个简单的网页应用，该应用能够从一个公共API获取数据并显示在页面上。具体要求：1、创建一个按钮，点击按钮时，通过Ajax请求获取数据。2、使用公共API，例如JSONPlaceholder的用户数据（URL:/users）。3、将获取到的用户数据以列表的形式显示在页面上。在请求过程中，显示一个“加载中”的提示，数据加载完成后隐藏该提示。1、引导学生借助在线课程平台获取知识进行自主探究；2、示例讲解；3、通过课件进行归纳小结。1、学生登录网络课程平台获取知识进行自主探究；2、认真观察教师讲解演示，对于教师的归纳，仔细听讲、思考、记录笔记。1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件设计意图为了让学生能够直观感性地理解知识点，由教师首先进行讲解演示，结合知识点讲解案例，为接下来的学生实践训练提前做好铺垫。步骤6：讲练结合时间：60分钟教学内容师生活动教学方法教学手段教师学生1、自定义对象1、任务分析；2、实操演示；3、巡视督促，答疑解惑，指导实践。1、分析讨论；2、观看演示；3、独立动手实践。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、职教云课堂设计意图为了巩固本次课所授知识，提高学生利用所学知识进行实践训练的能力，教师对任务分析后进行实操演示，学生自主地完成实战任务。老师尽量少指导，引导学生学会利用各种不同的信息化手