应用动态html之JavaScript的应用

085信息技术网应用动态html之JavaScript的应用一教学目标进一步理解动态Html，以简单的JavaScript特效为例，加深学生对动态Html的认识，能够利用JavaScript特效美化网页；要求学生了解并遵循动态Html的设计原则。知识目标：通过实例对比让学生更深刻的理解动态html的含义，掌握客户端脚本JavaScript的应用格式，学会JS脚本调用。能力目标：通过实践让学生掌握在网页中应用JavaScript，适当的修改JavaScript的方法，培养学生实践探究的能力。情感目标：利用视觉冲击让学生主动意识到动态html的设计原则，培养学生尊重知识版权的意识，提高学生的审美素养。二教学内容分析本节内容是书本上第五章《动态网页制作》5.3节《应用动态html》中的知识点，主要是对前面所学的内容的深化和拓展。重点是利用JavaScript修饰自己的主题网站。主要讲授几种JavaScript特效在网页中的应用，融入了动态Html的设计原则，并要求学生能够进行客观的评价。教学重点：学会JS脚本调用，利用JavaScript特效美化网页。教学难点：适当的修改JavaScript语言,完善网页效果。三学生分析从软件角度看：FrontPage菜单操作功能有限，要完成某些动态网页技术必须要从网页代码入手。这给第一次接触代码的高一同学带来了很大的困难，主要表现在难以适应，难以理解，难以着手。在学本节内容之前，学生已经学习了网页的基本html结构、网页中的客户端脚本和层叠样式表，学生初步具备看代码的粗浅经验。从心智能力来看：高中生的智商已经接近成人状态，思维活跃，经常会提出问题并理智地思考问题，但缺乏经验和感性认识。从兴趣角度来看：高一学生上网经历比较丰富，在网上冲浪时能较多的接触到富含动态网页技术的网站，有一定的视觉记忆。在此基础上探究这些网站的实现方式是一件非常有意义的活动，能充分调动学生的积极性。四教学建议及策略本节没有太多的新概念，教学内容比较灵活，教师授课的方式可以多种多样，可以边学边练，也可以教师先演示学生分小组进行实践探究。目的在于使学生熟练应用JavaScript，修饰主题网站。要求教师课前做好充分的准备，提供较多的典型的有特色的JavaScript源代码供学生参考，培养学生的创新能力与探索精神，遵循动态网页制作的原则合理地修饰网站。五教学方法：自主、探究性合作学习六教学媒体：多媒体网络教室，ppt，小网站素材，学生资源等七教学过程学生活动教师服务于学生的活动设计意图自主学习：学生根据PPT上的提问，思考答案。问题：客户端脚本语言的概念，列举最常用的客户端脚本语言。Javascript脚本语言嵌入html网页中时，必须使用<_?_>标记语言，一般格式是如何书写？参照“html语言的基本结构”，指出JS脚本应该放在<_?_>标记语言之间温故知新，巩固上节课的理论知识，同时为实践做准备。实验探究：分别打开两张网页single.html,double.html,比较两张网页的不同。（提醒学生注意IE拦截，显示脚本）见附录学生总结single.html吸引人的地方；过渡到问题：你知道它采用了哪种动态html技术吗？从什么地方可以佐证你的答案？（学生打开了single.html的源文件，在代码中找到证据。）从外观上认识动态网页，引出课题，让学生从感性认识上升到理性的技术层面，学会用知识说话！深入探究：所有同学都打开single.html，查看――源文件，锁定22行。见附录揭示本质：学生总结该网页采用了什么技术？它嵌入html页面时必须使用什么标记语言？放在哪个区？（呼应一开始的复习题）从理论上认识JS技术，并呼应上节课的内容。自主探究：编辑网页double.html,实现JS特效。提供学生若干个免费的特效，应用到double.html中，并回答是什么特殊效果？巩固上节课的内容，为更深层次的教学做准备。小组合作性探究学习：由小组代表演示结果。修改鼠标特效中围绕的文字为：欢迎来到高一3班，我勤劳，我快乐！让学生阅读代码，学习如何修改关键代码，实现要求的效果，锻炼学生的应变能力和知识迁徙能力。引入软件复用技术。实验探究学习：学生分小组完成指定任务。现在要把该鼠标特效应用到网站内其他所有网页，如何操作？如何修改围绕文字？教师提供的小网站是一个非常简单的网站，通过教师抛出的问题，学生分组实验。对比学生的操作过程和结果，让学生从实践中认识到：如何减少代码冗余，如何快速实现全网站JS特效？从而引入JS调用的概念，铺垫动态html的设计原则。学生归纳方法一：（逐个打开各网页－html－插入/修改－保存）与数学学科整合，引导学生自动想到提取公因子（共同JavaScript代码）作为外部文件，不但缩减html主文件的代码空间，而且修改方便。学生归纳方法二：打开鼠标.txt，另存JS文件与被编辑网页文件在同一级目录下；编辑网站内的网页文件，调用该JS文件指导学生生成JS文件，并在各个网页文件中调用JS文件，强调解决了代码重复和日常维护的难题。教师设计了微课“JS脚本的调用”辅助课堂教学。小组合作探究拓展性学习：阅读task.html，小组合作完成任务一或者任务二，自我体会动态html制作的原则，和知识产权的重要性。提供任务一和任务二，学生自主选择，实践探究，教师巡视，指导,协作学生完成任务。考虑到部分学困生，教师设计了微课“JS习题”帮助学生。结合因特网，让学生在网络上体验JS特效的复杂多变，提高自己的应变能力，完成自身的飞跃。这是拓展性学习，同时让学生感性的体会动态html制作的原则，呼吁学生尊重知识版权，避免侵权。展示：学生展示任务成果。学生点评，老师点评教育不仅仅是让学生在知识和技术上提高，更要培养学生的审美眼光，信息素养。研究性学习：代码阅读和编写。提供JS特效文件夹，让学生自主研究性学习。引导学生自主研究性学习，培养学生思考问题，解决问题的能力。学生总结：完成自评表表，向自己提出要求。强调学习目标和要求，布置作业。利用一些特效网站，让学生直观的回顾这节课的内容，同时调动学生继续深入学习的兴趣和积极性。八学生自我评价 填写下表，让学生了解自己的真实状况，让教师及时掌握学生的学习进度。教学情况调查表（实践评价）掌握情况教学内容熟练一般不懂客户端脚本的概念JavaScript格式及应用方法认识动画和动态html的区别JavaScript的应用和修改JavaScript调用的方法拓展任务的完成展示情况微课对你有帮助吗新课程改革要求学生建立知识与技能、过程与方法、情感态度与价值观的三维课程目标，对照课程标准中的三维目标，美国著名发展心理学家、哈佛大学教授霍华德·加德纳博士提出了空间智能、语言智能、音乐智能、运动智能、内省智能、人际关系智能、逻辑智能等，学生对照以下表格，进行自我认知评价。某一学生的自评表（认知评价）教学过程（任务驱动）教学方法（任务设计）多元智能的发展目标空间智能语言智能运动智能内省智能人际关系智能数学逻辑智能创设情景观察★★★比较★回答★提出任务提问★★讨论★★★自主探究合作学习分组合作★★★★探究性学习★★★解决问题观察★★★展示★★★调查★★★★评价★★巩固练习总结★★引入下一课题★九教师反思1.情境创设自然：通过对比的方式吸引学生的视线，调动学生的兴趣和积极性。启发学生思考问题，探究问题，解决问题。PPT用于辅助教学。2.合作性学习：有些内容部分学生完成的不是很好，而另外一些同学就完成的比较出色。这样的差异性又体现了学生间互帮互助的团结友爱精神。让困难的学生感觉到同学关爱，同时也让完成的比较出色的学生在指点同学的过程中得到新的锻炼。3．实验探究教学方法的应用：这堂课的流程是这样的“概念自主复习――创设情境让学生印证概念――给学生提供资源，完成练习――引入概念，教师和学生共同解决JS的调用，解决代码冗余，日后维护的问题――学生小组合作，做拓展练习。”考虑到学生的个体的差异性，这堂课设计了“演示教学和实验探究教学两种模式”，为一些喜欢编程的同学，打开了代码编辑的大门。在信息技术课堂中，对于操作技能课程，通常也是让学生自主探究，有利于培养学生独立发现问题、自主发展的能力。4．微课的有效使用：微课是微型视频课程的简称，它非常适合课堂点拨教学，课后复习自学。学生的个体差异性，决定了学生会在探究性学习中碰到跨不过去的坎，教师的个别辅导虽然能解决一部分困难学生，却无法兼顾其他的学生，而集体广播会中断学生的思路，很不受欢迎。于是在备课的时候我把调用JS脚本的知识点做成了微课，既可以提示学困生，也可以作为将来学生自主复习的资料，让一筹莫展的学生边看