应用动态html之JavaScript的应用.doc

应用动态html之JavaScript的应用教学目标 进一步理解动态 Html，以简单的 JavaScript 特效为例，学生对动态 Htm的，能够JavaScript特效网页；要求学生了解动态 Html 的设计原则。 JavaScript的应用格式，学会JS脚本调用。 能力目标：通过实践让学生掌握在网页中应用JavaScript，适当的修改JavaScript的方法，培养学生实践探究的能力。 情感目标：利用视觉冲击让学生主动意识到动态html的设计原则，培养学生尊重知识版权的意识，提高学生的审美素养。 二 教学内容分析 本节主要是对前面所学的内容的。重点是利用 JavaScript修饰自己的主题网站。主要讲授几种 JavaScript 特效，了动态 Html的设计原则，并要求学生能够进行客观的评价。 教学建议及策略 本节没有概念，教学内容比较灵活，教师的方式可以多种多样，可以边学边练，也可以教师先演示学生分小组进行实践。目的在于使学生熟练应用JavaScript，修饰主题网站。要求教师课前做好充分的准备，提供较多的典型的有特色的JavaScript 源代码供学生参考，培养学生的创新能力与探索精神，动态网页制作原则合理地修饰网站。 自主学习：学生根据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特效文件夹，让学生自主研究性学习。 引导学生自主研究性学习，培养学生思考问题，解决问题的能力。 学生总结：完成自评表表，向自己提出要求。 强调