JavaScript 内容总结 对象与事件
6JavaScript的对象与事件
学习目标:
- JavaScript对象概念(了解)
- 如何定义对象(理解)
- JavaScript内置对象(理解)
- 浏览器对象(了解)
- DOM对象(重点)
- JavaScript事件(重点)
6.1 JavaScript对象
6.1.1 概念
客观世界中真实存在的事物叫做对象。
例如:学生“张三”,学生“李四”,他们都是学生对象。
对象由属性和方法组成。
属性用来描述对象的静态特征,用变量表示。
例如:每个学生都有姓名,那么姓名就是学生对象的一个属性。
方法用来描述对象的动态行为,通常用函数表示。
例如:每个学生都有学习的方法。
对象由属性(特征)和方法(行为)组成
属性可以使用变量定义(名词),方法使用function函数定义(动词)
对象的方法
6.1.2 对象的定义
案例:使用定义函数的方式来定义对象。Student是一个学生对象,它由两个属性(学生姓名和年龄)。
<script type="text/javascript">
// 自定义对象
function Student(stuName,stuAge) {
// 将参数赋值给对象的属性,this表示当前对象(此时当前对象是Student)
this.stuName = stuName;
this.stuAge = stuAge;
this.study = function() {
alert(this.stuName +"正在学习");
}
}
</script>
6.1.3 对象的创建
JavaScript使用new关键字来创建对象,“关键字”是具有特殊意义的单词。new是JavaScript的运算符,表示创建一个新的对象。对象创建之后可以调用对象的属性和方法。
注意: 使用new创建对象,对象创建成功之后才可以调用对象的属性和方法。
调用对象属性语法如下:对象名.属性名。 . dot 的
调用对象方法语法如下:对象名.方法名。
案例:使用new关键字创建“学生”对象,然后调用对象的属性和方法。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// 自定义对象
function Student(stuName,stuAge) {
this.stuName = stuName;
this.stuAge = stuAge;
this.study = function() {
alert(this.stuName +"正在学习");
}
}
// 创建学生对象张三
let zhangSan = new Student("张三",20);
// 调用stuName属性
alert(zhangSan.stuName);
// 调用study方法(函数)
zhangSan.study();
</script>
</body>
</html>
6.1.4 JavaScript的对象分类
6.1.4.1 内置对象
JavaScript语言提供的对象称为内置对象。
例如:String、Array、Math、Date、function等。
其中String表示字符串对象、Array表示数组对象、Math对象提供了一系列的数学函数、Date表示日期时间对象、function表示函数对象,这些对象都是引用类型。
6.1.4.2 浏览器对象
浏览器对象根据系统配置和所装载的页面,提供了访问、控制、修改浏览器的方法。
例如:Window对象、Navigator对象、Screen对象、Location对象。
- Window对象表示浏览器中打开的窗口
- Navigator对象包含有关浏览器的信息
- Screen对象包含有关客户端显示屏幕的信息
- Location对象表示窗口当前显示的文档的 Web 地址栏
6.1.4.3 DOM对象
DOM全称:Document Object Model文档对象模型。什么是DOM?磁盘的HTML文件加载到浏览器的缓存就会生成一个DOM树,DOM提供了一种或者多种方式对HTML文档的结构进行访问。
6.1.4.4 自定义对象
自定义对象指程序员根据需要而定义的对象,例如我们之前定义的
Student
对象就是自定义对象。
summary
文章由本人结合学习笔记和相关资料整理得出,若有遗漏和错误,欢迎大家及时指出,我会及时更正修改。以上就是关于JavaScript对象的一些基础知识,后续文章将进行具体展开整理!