[5.2.2用JavaScript制作动态网页许云玲.docVIP

课题：5.2.2 用 JavaScript 制作动态网页 教案编号 039 备课人 使用时间 三 维 目 标 1．知识和技能目标： ⑴了解构成动态 HTML 的三大核心技术； ⑵掌握 JavaScript 的编写原则，能够调用 JavaScript 文件； 2．过程和方法目标： 培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习信息技术的兴趣，培养学生发现美、创造美的能力，提高学生的综合素质。 3．情感态度和价值观目标 通过使用 JavaScript 制作动态网页，让学生进一步感受网页制作的美，并合理使用技术来表现美。 教学重点 在静态网页中嵌入或调 JavaScript 文件制作动态网页。 教学难点 掌握 JavaScript 的编写原则，并用来生成动态网页。 教学方法 任务驱动、讲授法 教 学 过 程 一）导入课题 展示“网页电子时钟”动态效果，创设教学情境，引起学生学习兴趣。这样的动态网页是怎么制作的呢？ 显示网页电子时钟如图 5-3 所示，不显示网页电子时钟如图 5-4 所示。 图 5-3 显示时间 图 5-4 关闭时间显示 （二）分小组自学 学生分小组自学教材第 109 ～ 110 页内容，了解动态网页的三大技术：客户端的脚本语言、文件目标模块 (Document Object Model) 、 CSS 样式表。 小组汇报交流，教师总结。 （三）学习网页中嵌入 JavaScript 制作动态网页 教师先展示，然后由学生由校内 FTP 下载 JavaScript 代码，体验动态网页。 1．网页电子时钟 在网页做一个小小电子时钟，给你的网页增加一点新意。电子时钟是可由用户控制的，若你喜欢它，就把它打开，若不喜欢它，可随时将它关闭。将以下这段代码放到网页的 body 和 /body 之间，观察一下效果。 script language=JavaScript !-- var ctroltime ; function showtime(){ now=new Date(); timestr=now.toLocaleString(); document．all[witch]．value=timestr ； str．split( )[3]; window.ctroltime=setTimeout(showtime(),500); } function closetime(){ document．all[witch]．value; clearTimeout(window.ctroltime) } -- /script /head firm id=formlname=forml input type=text name=with size=28 value= 电子表 input type=radio name=radiobutton value= “ radiobutton ” on Click=showtime() 显示时间 input type=radio name=radiobutton value=radiodutton onClick=closetime() 关于时间显示 /form 思路：用一个时间函数不断地刷新单行文本框中的时间，然后用一个单选框来调用显示时间的程序，再用一个单选框来取消时间函数。 2．用 JavaScript 制作跳动的文字 一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼的小精灵。若是在网页上放上具有这样效果的一段文字，会使整个页面充满生气。 （1）先插入一个 1*n 表格，这里的 n 就是要跳动的文字数，把表格的高度定义为 70px，实际上表格高度的设定原则是要大于最大的跳动文字，否则在文字跳动时，整个页面都在抖动。然后把文字写入表格中，每个单元格写一个字，由于要在程序中对每个字的属性进行操作，所以还要用 span 标记把字括起来，并给它取一个名字（在本例中是 a1 、 a2 、 a3．．．a6 ），没有名字，程序无法操作。 table width=90% height=60 border=0 tr tdspan id=a1 动 /span/td tdspan id=a2 态 /span/td tdspan id=a3 网 /span/td tdspan id=a4 页 /span/td tdspan id=a5 技学 /span/td tdspan id=a6 术 /span/td /tr /table （2）在 head 与 /head 之间插入下面代码。程序思路：用 JavaScript