第7章 JavaScript基础应用-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第7章 JavaScript基础应用 计划学时 8学时 内容分析 本章介绍了JavaScript对象的创建、JavaScript函数、流程控制、continue语句与break语句的区别、DOM获取元素节点、DOM操作文本内容、DOM节点、DOM的增删改查、DOM操作属性、DOM操作样式、定时器、Date时间对象、数组的创建、数组操作方法、Math数学对象 教学目标 与 教学要求 【知识目标】 1. 了解JavaScript函数 2. 认识continue语句与break语句的区别 3. 了解DOM节点及其关系 【技能目标】 1. 掌握JavaScript对象的创建 2. 掌握JavaScript的流程控制 3. 熟练使用DOM获取元素节点 4. 掌握DOM的基本操作 5. 掌握2种定时器的使用 6. 掌握Date时间对象 7. 掌握数组的使用方法 8. 掌握Math数学对象的使用 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握JavaScript对象的创建、熟练使用DOM获取元素节点、掌握2种定时器的使用、掌握数组的使用方法 教学难点 实现本章节的4个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （JavaScript创建对象、JavaScript函数、DOM获取元素节点、流程控制） 一、提出需求，导入学习任务 （1）思考如何通过JavaScript语言操作页面。 · JavaScript在网页开发中的应用是十分广泛的，网页中的许多动态功能都可以通过JavaScript来实现，为用户呈现出简洁美观的网页效果，极大地提升了用户的浏览体验感。 （2）明确学习方向。 · 了解JavaScript函数 · 认识continue语句与break语句的区别 · 掌握JavaScript对象的创建 · 掌握JavaScript的流程控制 · 熟练使用DOM获取元素节点 二、知识讲解 （一）JavaScript创建对象 JavaScript是一个无序集合，所有事物都是对象，比如字符串、数值、数组、函数等。每个对象带有属性和方法。对象的属性反映事物的特征，比如年龄、身高等。对象的方法反映事物的行为，比如吃饭、睡觉等。 1.创建方式 对象有4种创建方式，分别为字面量方式创建对象、new Object()创建对象、工厂函数创建对象和自定义构造函数创建对象。 · 字面量方式创建对象 · new Object()创建对象 · 工厂函数创建对象 · 自定义构造函数创建对象 2.new操作符的作用 · （1）开辟内存空间，存储新创建的对象。 · （2）new操作符会让this指向这个新的对象 · （3）执行构造函数为新对象添加属性和方法 · （4）new操作符会返回新创建的对象。 3.this的特点 · （1）在定义函数的时候this是不确定的，只有在调用的时候才能明确其指向。 · （2）一般函数直接执行，内部this指向全局window对象。 · （3）函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象。 · （4）构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new操作符来调用，从而实现实例化对象的使用。 （二）JavaScript函数 1.定义 函数是指一组针对处理某一逻辑的代码集合，当被调用时可以重复执行，是计算机编程中非常重要的语法结构。 定义函数的基本语法格式如下所示。 function 函数名(参数1,参数2,...){ 函数体 } //定义函数 函数名(参数1,参数2,...) //调用函数 在上述语法中，function为固定语法格式，函数名为自定义字符，中间用空格隔开。小括号与大括号也为固定写法，小括号中的是参数，大括号中的是函数体，即一个代码集合，用于实现函数功能的语句。 （三）DOM获取元素节点 在JavaScript中，DOM获取元素节点的方法有6种。 · 通过ID获取元素（getElementById） · 通过name属性获取元素（getElementsByName） · 通过标签名获取元素（getElementsByTagName） · 通过类名获取元素（getElementsByClassName） · 通过选择器获取一个元素（querySelector） · 通过选择器获取一组元素（querySelectorAll） 除了上述获取元素的6种方法，DOM还有获取html和body的方法。 · DOM获取HTML元素（documentElement） · DOM获