第七次网页前端培训笔记（JS对象和事件）

最新推荐文章于 2024-08-06 18:49:35 发布

InfI1traTe.

最新推荐文章于 2024-08-06 18:49:35 发布

阅读量114

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_55313512/article/details/122884680

版权

本文深入解析JavaScript对象的创建、属性访问、方法定义，以及如何与HTML事件结合，实现动态交互。涵盖了对象实例化、属性添加、方法定义和for...in循环。同时介绍了HTML事件的种类和应用，如页面加载、表单验证等。

摘要由CSDN通过智能技术生成

一、JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数

JavaScript 允许自定义对象。

1.所有事物都是对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

布尔型可以是一个对象。

数字型可以是一个对象。

字符串也可以是一个对象

日期是一个对象

数学和正则表达式也是对象

数组是一个对象

甚至函数也可以是对象

2.JavaScript对象

对象只是一种特殊的数据。对象拥有属性和方法。

3.访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

4.访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法：

objectName.methodName()

5.创建直接的实例

这个例子创建了对象的一个新实例，并向其添加了四个属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yyds</title>
</head>
<body>

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

6.使用对象构造器

本例使用函数来构造对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yyds</title>
</head>
<body>

<script>
function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

7.创建JavaScript对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

8.把属性添加到JavaScript对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

 person.firstname="John";
 person.lastname="Doe";
 person.age=30;
 person.eyecolor="blue";

 x=person.firstname;

9.把方法添加到JavaScript对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yyds</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;
	function changeName(name){
		this.lastname=name;
	}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

</body>
</html>

10.JavaScript for...in循环

JavaScript for...in 语句循环遍历对象的属性。

 for (variable in object)
 {
   code to be executed
 }

二、JavaScript事件

事件是可以被 JavaScript 侦测到的行为。

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1.HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例：

HTML 页面完成加载

HTML input 字段改变时

HTML 按钮被点击

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

<some-HTML-element some-event='some JavaScript'>

双引号:

<some-HTML-element some-event="some JavaScript">

2.常见的HTML事件

下面是一些常见的HTML事件的列表:


事件	                描述
onchange	        HTML 元素改变
onclick	            用户点击 HTML 元素
onmouseover	        用户在一个HTML元素上移动鼠标
onmouseout	        用户从一个HTML元素上移开鼠标
onkeydown	        用户按下键盘按键
onload	            浏览器已完成页面的加载

3.JavaScript还可以做很多

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码

HTML 事件属性可以调用 JavaScript 函数

你可以为 HTML 元素指定自己的事件处理程序

你可以阻止事件的发生。