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

第7章 JavaScript基础应用 7.1 JavaScript基础语法 7.2 DOM基础操作 7.3 实现定时器 7.4 使用数组 熟悉JavaScript基础语法 了解定时器的使用 掌握DOM基本操作 掌握JavaScript的基础应用 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 引言 JavaScript在网页开发中的应用是十分广泛的，网页中的许多动态功能都可以通过JavaScript来实现，为用户呈现出简洁美观的网页效果，极大地提升了用户的浏览体验感。 初心至善 匠心育人 7.1 JavaScript基础语法 创建对象 案例—选取图书列表 DOM获取元素节点 JavaScript函数 流程控制 目录 Contents 初心至善 匠心育人 7.1 JavaScript基础语法 JavaScript是一个无序集合，所有事物都是对象，比如字符串、数值、数组、函数等。每个对象带有属性和方法。对象的属性反映事物的特征，比如年龄、身高等。对象的方法反映事物的行为，比如吃饭、睡觉等。 对象有4种创建方式，分别为字面量方式创建对象、new Object()创建对象、工厂函数创建对象和自定义构造函数创建对象。 7.1.1 创建对象 初心至善 匠心育人 7.1 JavaScript基础语法 7.1.1 创建对象 字面量创建对象是一种简便的方式，具体用法如下所示。 var student = { name: '张三', age: 15, play: function(){ console.log('篮球，排球，足球'); } } 值得注意的是，以字面量的方式创建对象，属性名和属性值（键值对）之间用冒号（:）进行分隔，而属性与属性之间用逗号（,）进行分隔，最后一个属性末尾不需要逗号。 初心至善 匠心育人 7.1 JavaScript基础语法 7.1.1 创建对象 new Object()方式创建对象，先通过object构造器new一个对象，再往里丰富成员信息，具体用法如下所示。 var student = new Object(); student.name = '张三'; student.age = 15; student.play = function(){ console.log('篮球，排球，足球'); } 字面量和new Object()这2种方式创建的的对象本质上没有任何区别，都是在内存中创建出一个对象，并能够绑定属性和方法。它们的不足之处是，每创建一个对象，属性和方法都需要重新绑定一份，会产生大量重复的代码。 初心至善 匠心育人 7.1 JavaScript基础语法 7.1.1 创建对象 工厂函数方式创建对象是使用函数来创建对象，类似于一个“工厂模式”，可以大批量地创建同种类型的对象，具体用法如下所示。 function createStudent(name, age) { var student = new Object(); student.name = nane; student.age = age; student.play = function(){ console.log('篮球，排球，足球'); 工厂函数方式虽然解决了重复实例化多个对象的问题，同时减少重复代码率，但没有解决对象识别的问题，导致对象类型不明确。 } return student; } var stu1 = createStudent('张三', 15); var stu2 = createStudent('李四', 16); stu1.play(); 初心至善 匠心育人 7.1 JavaScript基础语法 7.1.1 创建对象 自定义构造函数方式是通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象，具体用法如下所示。 function Student(name,age){ this.name = name; this.age = age; 任何函数，只要通过new操作符来调用，它就可以作为构造函数；如果不用new操作符来调用，它就是一个普通函数的调用。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，构造函数要和new操作符一同使用才有意义。构造函数是用于创建一类对象，与普通函数进行区分，首字母需要大写。 this.play = function(){ console.log('篮球，排球，足球'); } } var stu1 = createStudent('张三', 15); 初心至善 匠心育人 7.1 JavaScript基础语法 7.1.1 创建对象 new