《客户端脚本语言》教学案例

教材分析

本节课内容取材于教育科学出版社《网络技术应用（选修）》第五章第二节《理解动态HTML》的第一部分。本节课主要介绍构成动态HTML的三大核心技术之一：客户端脚本语言（JavaScript），掌握其基本结构，能够根据制作的实际需要调用JavaScript文件，实现动态效果。教师可根据学生实际情况，有所侧重地选择讲解，并引导学生有效运用代码。对代码具体语句只需“观其大概”，不必深究。学生恰当地选择和应用这些技术，不仅可以使网站充满生机和活力，还能让学生加深理解和掌握前面所学的网页制作知识，提高学生的网站设计和动手实践能力。

学情分析

本课教学对象为江苏省太湖高级中学高二年级学生。通过两个多月的网页制作学习，学生已经比较扎实地掌握了网页制作基础知识和操作技能，并具备了设计制作简单个人网站的能力。随着制作经验的积累和对HTML语言的逐步理解，学生不再仅仅满足于简单的静态网页，更希望能制作出人性化的、互动性更强的网页。

教学目标

知识与技能目标：①了解客户端脚本语言的基本知识。②掌握JavaScript的基本结构及其调用方法。③能够用JavaScript优化自己的网站。

过程与方法目标：先让学生通过自主探究实践获得感性认识，再经过和教师一起梳理知识获得理性认识，最后由学生再次实践，提高其操作能力。

情感态度与价值观目标：①培养学生在研究中学习，在学习中探索的意识。②树立使用网络资源的正确认识，培养网页道德。

教学重点、难点

重点：①掌握代码的基本结构，有效运用现有代码。②读懂部分代码含义，并能按要求修改代码，使网页产生预期的动态效果。

难点：能根据需求选择合适的代码调用方式，并修改代码“为我所用”。

整体思路

本课内容形象生动，富有趣味性，因此在讲解时我力求突破以往纯语言的讲授，而采用范例教学的方法，提供了一些动态效果代码，目的是让学生更容易理解并接受一些新的概念和思想。事实上互联网上有很多JavaScript的源代码，对大多数人来说，只要掌握了使用方法，就能给自己的网页添加各种动态效果。在做教学设计时，为了控制课堂节奏，引导学生学习，我制作了一个教学网站和一个练习网站，并选取了少量JavaScript特效代码，防止学生过度好奇，把注意力全放在看有趣的动态效果上。在教学中，我首先展示一个精美的网站，主页上的动态效果激发学生的学习兴趣，然后让学生打开练习网站，自主探究JavaScript的基本结构和调用方式。在经历了实践体验后帮助学生梳理相关理论知识，提升认知度，接着通过两个挑战任务巩固和提高JavaScript的调用技巧，在操作中发现问题、分析问题、解决问题，感受动态技术应用的乐趣，提高逻辑思维能力和实践操作能力，增强自主学习探究的积极性。最后总结本课重点，传递“正确处理技术与人的关系”这一信息，并让学有余力的学生挑战拓展任务，进一步探索客户端脚本语言的奥秘。

教学过程

1.激趣导入，引出主题

教师展示具有动态效果的网页，供学生欣赏。

教师提出问题：通过网页从外到内欣赏完无锡大剧院这座精巧而又别致的建筑，同学们有没有注意到主页和另外两个网页有什么不同？学生欣赏、思考、回答。这些动态效果好像是普通网页上的“调味品”，使网页变得生动、有趣起来，那么，它是怎么制作出来的呢？我们一起来揭开其中的奥秘吧。

设计意图：教师通过欣赏具有多个动态效果的网页，激发学生探究其奥秘的渴望，引起学生的学习兴趣。

2.小试身手，初识代码

师：请同学们观看教学网站“小试身手”栏目。如果你能完成这些任务，就能找到对话框的奥秘。

教师指导学生打开stu站点，三个任务边讲边请学生回答。

①基本任务：浏览stu网站的主页文件“index.htm”， 在html视图下试着找出其中实现“对话框”动态效果的代码。

教师引导：可以根据什么找出这段代码？

学生反馈：根据对话框上的文字。

②进阶任务：分析“对话框”是怎么嵌入到网页中去的，用了什么标记，分析代码语法结构。

教师引导：这段代码在区还是区？

学生反馈：在区。

教师引导：开始标记和结束标记分别是什么？

学生学习JavaScript标记使用的一般形式。

③挑战任务：给站点中另一个网页outside.htm也添加一个“对话框”，并让它说出你想说的话。

学生分析在网页中嵌入JavaScript的方法，根据自己的实际需求略做修改，添加到outside网页中。

设计意图：该任务是本节课的必做题，目的在于使学生从特殊中获得一般，再从一般迁移到其他的“个别”上来。教师通过引导、启发，使学生积极观察分析，从而得出结论，增强学生解决问题的意识与能力。将任务分层是为了体现出任务从易到难的梯度，降低学生跨越台阶时的难度，从而更容易获得成功，将一开始激发出来的兴趣保持下去。

3.知识梳理，夯实基础

师：刚才网页上呈现的动态效果都是运用JavaScript客户端脚本语言编写的小程序，是一种动态html技术。那么什么是动态html，什么是客户端脚本语言呢？我们来梳理一下这些专业知识。

教师介绍动态html和客户端脚本语言。

师：目前我们还不用掌握代码的编写技术，因为互联网上有很多免费的JavaScript源代码，我们可以将它“移花接木”，运用到自己的网页上。而如果硬生生地把“花”直接绑到“树木”上，估计成活率不高。所以我们需要掌握一些使用技巧。嵌入HTML文档中的JavaScript代码有两种常见形式。

①内部脚本。

师：刚才同学们已经尝试使用这种内部脚本的方法，给网页添加了一个对话框。

语法形式为：

②外部脚本。

师：先将JavaScript语句独立存储成以.js为扩展名的文件（怎么把代码保存成js文件？用什么软件？），再利用（在使用这句调用语句是应注意什么？把*改成js文件主名。）

以上一个任务中的对话框脚本代码为例，学生演示外部脚本的使用方法，教师指导。

学生新建文本文件，将对话框脚本代码完整地复制进来，保存（新建文本文件.js）。到网页中调用。预览时发现出错。找出出错原因，去掉头尾语句，再次保存、预览、成功。

结论：js文件中只需保存脚本具体代码，不能有头尾标记语句。

设计意图：经过简单的实践再来了解理论知识，能提高学生的接受度，符合认知规律。在本环节中，教师首先说明刚才网页上呈现的动态效果就是由JavaScript客户端脚本语言实现的，是一种动态html技术。然后介绍动态html和客户端脚本语言的相关知识，以及在HTML文档中嵌入JavaScript代码的两种常见形式，并指出内部脚本的形式已经在上一环节中实践成功了。最后请学生来演示外部脚本的使用方法。通过学生的演示来发现操作过程中可能会出现的问题，分析问题，从而解决问题，帮助学生进一步理解外部脚本的使用方法。

4.接受挑战，实践体验

师：同学们了解了内部脚本和外部脚本这两种使用方式，那么什么情况下用内部脚本合适，什么情况下用外部脚本更方便呢？请同学们带着问题进入下面的挑战环节，希望同学们能在完成挑战任务的过程中总结出外部脚本和内部脚本在使用上各自的优点，敢接受挑战吗？

挑战题一：给主页文件“index.htm”添加一个动态效果（任选）。

教师提供三种动态效果代码供选择，难度有高有低，学生量力而行，任选其中一个。同桌的两个同学可以相互讨论，相互帮助。

挑战题二：给stu站点中的每一个页面都添加一个图片跟随鼠标的效果。

操作前先思考一下，使用哪一种调用脚本的方式更方便。

学生按要求逐个完成挑战任务，展示操作结果。

有学生鼠标上跟着的图片没显示，而是出现一个“×”，请同学一起帮忙找找原因。

结论：代码中图片的名称没有正确修改。

设疑：能不能很快换一张图片呢？为什么？

结论：可以实现。因为外部脚本共享代码。学生演示。

设计意图：第一个挑战题是对内部脚本的巩固练习，考虑到学生的个体差异，分了三种难度，可以使不同层次的学生都获得成功的体验。第二个挑战题是对外部脚本的操作练习，在操作过程中师生共同分析出现的问题，培养耐心、细心的学习态度。通过设疑，引起学生思考，让学生在操作过程中总结出不同调用方法的适用情况。

5.自我检测，拓展提升

（1）自我检测

请学生完成自我检测中的五个选择题，巩固客户端脚本语言基本知识。

（2）课堂小结

师生一起分析总结内部脚本和外部脚本在语法上的区别和各自的优点。内部脚本的语句内容直接编写在

公司地址: 北京市西城区德外大街83号德胜国际中心B-11

客服热线：400-656-5456  客服专线：010-56265043  电子邮箱：longyuankf@126.com

电信与信息服务业务经营许可证：京icp证060024号

Dragonsource.com Inc. All Rights Reserved