《移动Web前端开发》教学讲义 第23讲.docVIP

《移动WEB前端开发》 配套教学教案 第23讲 课时内容 函数与DOM模型 授课时间 90分钟 课时 2 教学目标 ? 掌握JavaScript中函数的书写和使用 ? 掌握JavaScript中DOM对象 ? 能够利用JavaScript语言完成WEB中简单的交互 教学重点 ? JavaScript中函数的书写和使用 ? JavaScript中DOM对象 教学难点 掌握JavaScript中DOM对象 教学设计 1. 教学思路：通过“西游路线图”小游戏，引出函数的概念和DOM模型，。 2. 教学手段：（1）演示法，通过演示“西游路线图”小游戏引导学生分析问题解决问题；（2）讲授法，通过知识讲解帮助学生掌握教学重点。 教学内容 演示案例引入新课： 本案例中，设计一款可以查看前世来历的整蛊小游戏，用户单击开始游戏按钮，系统会产生一个随机数，根据随机数，在西游路线图中展示身份。 案例效果 知识讲解：具体可结合本项目的PPT课件进行配合讲解。 1 函数 函数在任何一种语言中都有重要的地位，简单的说，函数就是封装在一起的可以重复调用执行的程序代码。在JavaScript中，函数即对象，程序可以随意操控它们，可以将函数赋值给变量，也可以将函数作为参数传递给其他函数，还可以在函数内部定义函数。 //直接定义函数 function funcname([arg1 [,arg2 [...,argn]]]){ statement; } //在函数表达式中定义函数将其赋值给变量f var f=function [funcname]([arg1 [,arg2 [...,argn]]]) { statement; } //构造函数创建匿名函数，不推荐使用 var functionName = new Function([arg1 [,arg2 [...,argn]]],statement;); 2 DOM模型 DOM文档对象模型，自从W3C建立了DOM标准，它的运用越来越广泛，这里只谈论HTML DOM，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。在HTML DOM中，所有事物都是节点，因此整个HTML构成一颗节点树。 1）getElementById()方法 2）getElementsByTagName()方法 3）Node对象 4）appendChild()、removeChild()、replaceChild()方法 小结 掌握JavaScript中函数的书写和使用 掌握JavaScript中DOM对象 能够利用JavaScript语言完成WEB中简单的交互 作业 剪刀石头布。 更换背景颜色。 购物网站上经常可以看到商品展示细节的JS效果。