HTML+CSS+JS 学习笔记(三)———Javascript(下)

news/2024/4/20 1:27:33/文章来源:https://blog.csdn.net/weixin_61885496/article/details/130295548

🌱博客主页:大寄一场.
🌱系列专栏:前端

🌱往期回顾:HTML+CSS+JS 学习笔记(三)———Javascript(上)

😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注
75486fdc2eee4efba3dfc46f574e64ef.gif#pic_center

 

目录

 

 JavaScript 中的对象

 对象的属性和方法

1.对象的属性

2. 对象的方法

JavaScript 对象的种类

自定义对象的创建

 直接创建自定义对象

通过自定义构造函数创建自定义对象

通过 Obiect 对象创建自定义对象

 对象访问语句

for...in 语句

 with 语句

常用内部对象

Math 对象

 Date 对象


 JavaScript 中的对象

        由于JavaScript是一种基于对象的语言,所以对象在 JavaScript 中是很重要的概念本章对对象的基本概念、自定义对象,以及两种常用内部对象等知识进行简单的介绍。

对象简介
        对象是JavaScript 中的数据类型之一,是一种复合的数据类型,它将多种数据类型集中在一个数据单元中,并允许通过对象来存取这些数据的值。

什么是对象?
对象的概念首先来自对客观世界的认识,用于描述客观世界存在的特定实体。例如,“人”就是一个典型的对象,“人”包含身高、体重等特性,同时又包含吃饭、睡觉等动作。


在计算机的世界里,不仅存在来自客观世界的对象,还包含为解决问题而引入的比较抽象的对象。例如,一位用户可以被看作一个对象,包含用户名、用户密码等特性,也包含注册、登录等动作。其中,用户名和用户密码等特性可以用变量来描述:注册、登录等动作可以用函数来定义。因此,对象实际上就是一些变量和函数的集合。

 对象的属性和方法

 在JavaScript 中,对象包含两个要素: 属性和方法。通过访问或设置对象的属性,并调用对象的方法,可以对对象进行各种操作,从而实现需要的功能。

1.对象的属性

包含在对象内部的变量称为对象的属性,是用来描述对象特性的一组数据在程序中使用对象的一个属性类似于使用一个变量,就是在属性名前面加上对象名和一个句点“.”。获取或设置对象的属性值的语法格式如下:

对象名.属性名

以“用户”对象为例,该对象有用户名和用户密码两个属性,以下代码可以分别获取该对象的这两个属性值:

var name =用户.用户名;
var pwd = 用户.用户密码;

也可以通过以下代码来设置“用户”对象的这两个属性值:

用户.用户名 ="mr";
用户.用户密码="mrsoft";

2. 对象的方法

包含在对象内部的函数称为对象的方法,可以用来实现某种功能。在程序中调用对象的一个方法类似于调用一个函数,就是在方法名前面加上对象名和一个句点“.”,其语法格式如下:

对象名.方法名(参数)

与函数一样,在对象的方法中可以使用一个或多个参数,也可以不使用参数。同样以“用户”对象为例,该对象有注册和登录两个方法,以下代码可以分别调用该对象的这两个方法:
用户.注册();
用户.登录();

JavaScript 对象的种类

        在JvaScript中可以使用3种对象,即内置对象、浏览器对象和自定义对象。内置对象和浏览器对象又被称为预定义对象。
        JavaScript 将一些常用的功能预先定义为对象,用户可以直接使用这些对象,这种对象就是内置对象。内置对象可以帮助用户在编写程序时实现一些最常用、最基本的功能,如 Math、Date、String、Array、Number、 Boolean、Global、 Object 和 RegExp 等对象。
浏览器对象是浏览器根据系统当前的配置和所装载的网页为 JavaScript 提供的一些对象,如 document、window 等对象。
        自定义对象就是用户根据需要自己定义的新对象.

自定义对象的创建

创建自定义对象主要有 3 种方法:

  • 直接创建自定义对象;
  • 通过自定义构造函数创建自定义对象;
  • 通过 Object 对象创建自定义对象。

 直接创建自定义对象

        直接创建自定义对象的语法格式如下:
        var 对象名 = (属性名 1: 属性值 1,属性名 2:属性值 2,属性名 3:属性值 3,.}

由语法格式可以看出,在直接创建自定义对象时,所有属性都放在大括号中,属性之间用逗号分隔,每个属性都由属性名和属性值两部分组成,属性名和属性值之间用冒号隔开.

通过自定义构造函数创建自定义对象

        虽然直接创建自定义对象很方便、直观,但是如果要创建多个相同的对象,那么使这种方法就会很烦琐。在JavaScript 中可以自定义构造函数,可以通过调用自定义的构函数来创建并初始化一个新的对象。与普通函数不同,调用构造函数必须使用 new运算符构造函数也可以和普通函数一样使用参数,其参数通常用于初始化新对象。在构造函数的函数体内,通过 this 关键字初始化对象的属性与方法。

通过 Obiect 对象创建自定义对象

        Object 对象是 JavaScript 中的内部对象,提供了对象的最基本功能,这些功能构成了所有其他对象的基础。Object 对象提供了创建自定义对象的简单方式,使用这种方式不需要再定义构造函数,可以在程序运行时为 JavaScript 对象随意添加属性,因此使用 Object对象可以很容易地创建自定义对象。

创建 Object 对象的语法格式如下:

obj = new Object([value])

该语法中的参数说明如下:

(1) obj: 必选项,要赋值为 Object 对象的变量名。
(2) value: 可选项,任意一种基本数据类型(Number、Boolean 或 String)。如果value 是一个对象,则返回不进行改动的 value 对象。如果 value 为 nul、undefned,或者
没有给出,则会产生没有内容的对象。
使用 Object 对象可以创建一个没有任何属性的空对象。如果要设置对象的属性,则只需将一个值赋给对象的新属性即可。

只要通过给属性赋值创建了该属性,就可以在任何时候修改这个属性的值,只需
给它赋新值即可。

 对象访问语句

        在 JavaScript 中,for··.in 语句和 with 语句都是专门应用于对象的语句。下面对这两个语句进行介绍。

for...in 语句

for...in语句和 for 语句十分相似,for ...in 语用来遍历对象的每个属性,且每次都将属性名作为字符串保存在变量里。forin 语句的语法格式如下

for (变量 in 对象){
语句
}

该语法中的参数说明如下
(1)变量:用于存储某个对象的所有属性名。
(2)对象:用于指定要遍历属性的对象
(3)语句:用于指定循环体。
for...in 语句用于对某个对象的所有属性进行循环操作,将某个对象的所有属性名依次赋值给同一个变量,而无须事先知道对象属性的个数。

当应用 for···in 语句遍历对象的属性并输出属性值时,一定要使用数组的形式(对象名[属性名])进行输出,而不能使用“对象名属性名”这种形式进行输出。

 with 语句

        with 语句用于在访问一个对象的属性或方法时避免重复引用指定对象名。使用 with语句可以简化对象属性调用的层次。with 语句的语法格式如下:

with(对象名称){
语句
}

该语法中的参数说明如下
(1) 对象名称:用于指定要操作的对象名称。
(2)语句:要执行的语句,可直接引用对象的属性名或方法名。
在一个连续的程序代码中,如果多次使用某个对象的多个属性或方法,那么只要在with 关键字后的括号中写出该对象实例的名称,就可以在随后的大括号中的程序语句中直接引用该对象的属性或方法,而不必在每个属性名或方法名前都加上对象实例名和“ .”

常用内部对象

        JavaScript 的内部对象也称内置对象,它将一些常用功能预先定义为对象,用户可以直接使用,这些内部对象可以帮助用户实现一些最常用、最基本的功能。JavaScript 中的内部对象按照使用方式分为动态对象和静态对象两种。在引用动态对象的属性和方法时,必须使用new关键字创建一个对象实例,然后才能使用“对象实例名.成员”的方式来访问其属性和方法,如 Date 对象;在引用静态对象的属性和方法时,不需要用new关键字创建对象实例,可以直接使用“对象名.成员”的方式来访问其属性和方法.如Math 对象。下面对JavaScript 中的 Math 对象和 Date 对象进行详细介绍。

Math 对象

        Math 对象提供了大量的数学常量和数学函数。当使用 Math 对象时,不能使用 new关键字来创建对象实例,而应直接使用“对象名。成员”的方式来访问其属性或方法。下面对Math 对象的属性和方法进行介绍。

Math 对象的属性
Mah 对象的属性是数学中常用的常量

属性描述
E自然对数的底数(2.718281828459045)
LN22的自然对数(0.6931471805599453)
LN1010的自然对数(2.302585092994046)
SQRT22的平方根(1.4142135623730951)
LOG2E以2为底数的e的对数(1.4426950408889633)
LOG10E以10为底数的c的对数(0342944819032518)
PI圆周率常数元(3.141592653589793)
SQRT1 _20.5 的平方根 (0.7071067811865476)

Math 对象的方法

方 法描 述示 例
abs(x)返回x的绝对值

//返回值为10

Math.abs(-10);

acos(x)返回x弧度的反余弦值//返回值为浜袄明0
Math.acos(1);
asin(x)返回x弧度的反正弦值// 返回值为 1.5707963267948965
Math.asin(1);
atan(x)返回x弧度的反正切值//返回值为0.7853981633974483
Math.atan(1);
atan2(x,y)返回从x 轴到点(x,y)的角度,其值在 -PI与PI之间

//返回值为1.1071487177940904

Math.atan2(10,5);

ceil(x)返回大于或等于 x 的最小整数// 返回值为2
返回大于或等于 x 的最小整数
Math.ceil(1.05);
//返回值为-1
Math.ceil(-1.05);
cos(x)返回x 的余弦值// 返回值为1
Math.cos(0);
cxp(x)返回e的x乘方// 返回值为54.598150033144236
Math.exp(4);
floor(x)返回小于或等于 x的最大整数//返回值为1
floor(x)
返回小于或等于 x的最大整数
Math.floor(1.05):
//返回值为-2
Math.foor(-1.05);
log(x)返回x的自然对数//返回值为0
Math.log(1);
max(nl,n2,...)返回参数列表中的最大值//返回值为4
Math.m圯ax(2,4);
min(nl,n2,...)返回参数列表中的最小值//返回值为2
Math.min(2,4);
pow(x,y)返回x的y次幂//返回值为 16
Math.pow(2,4);
random()返回0和1之间的随机数//返回值为类似0.8867056997839715 的随机数
Math.random();
round(x)返回最接近x的整数,即四舍五入函数//返回值为1
Math.round(1.05);
// 返回值为-1
Math.round(-1.05);
sin(x)返回X的正弦值//返回值为0
Mathsin(0);
sqrt(x)返回x的平方限//返回值为1.4142135623730951
Math.sqrt(2);
tan(x)返回x的正切值/返回值为-1995200412208242
Math.tan(90):

 Date 对象

        在 Web 开发过程中,可以使用 JavaScript 的 Date 对象(日期对象) 来实现对日期时间的控制。如果想在网页中显示计时时钟,就需要重复生成新的 Date 对象来获取当”计算机的时间。用户可以使用 Date 对象执行各种使用日期和时间的过程。

.创建 Date 对象
Date 对象是对一个对象数据类型进行求值,该对象主要负责处理与日期和时间有关的数据信息。在使用 Date 对象前,首先要创建该对象,其语法格式如下:

dateObj = new Date()
dateObj= new Date(dateVal)
dateObj = new Date(yeax, month, datel, hours[, minutes[, seconds[,ms]]]])
参数说明
dateObj必选项。要赋值为 Date 对象的变量名
dateVal必选项。如果是数字值,那么 dateVal 表示指定日期与 1970 年 1月 1 日午间全球标准时间的毫数如果是字符串,则常用的格式为“月 日,年 小时:分钟:秒”,其中,月用英文表示,其余用数字表示时间部分可以省略:另外,还可以使用“年/月/日小时:分钟:秒”的格式
year必选项。完整的年份,如1976(而不是 76)
month必选项。表示月份,是从0到11 的整数(1月——12月)
date必选项。表示日期,是从1到31的整数
hours可选项。如果提供了minutes,则颈给出。表示小时,是从0到23 的整数(午夜到11pm)
minutes可选项。如果提供了 seconds,剩必续给出。表示分钟,是从0到59 的整数
seconds可选项。如果提供了ms,则必须给出。表示秒钟,是从0到59 的整数
ms可选项。表示毫秒,是从0到999的整数

Date 对象的属性


        Date 对象的属性有 constructor 属性和 prototype 属性。下面介绍这两个属性的用法

1>constructor 属性
constructor属性可以判断一个对象的类型,该属性引用的是对象的构造函数,其语法格式如下:

object.constructor

其中,必选项 object 是对象实例的名称

2) prototype 属性
prototype 属性可以为 Date 对象添加自定义的属性或方法,其语法格式如下Date.prototype.name=value

该语法中的参数说明如下。
(1)name:要添加的属性名或方法名。
(2) value:添加属性的值或执行方法的函数。

Date 对象的方法
        Date对象是JavaScript的一种内部对象,它没有可以直接读/写的属性,所有对日期时间的操作都是通过方法来完成的.

方法说明
getDate()从 Date 对象返回一个月中的某一天(1~31)
getDay()从 Date 对象返回一周中的某一天(0~6)
getMonth()从Date 对象返回月份 (0~11)
getFullYear()从 Date 对象以 4 位数字返回年份
getYear()从 Date 对象以2 位或4 位数字返回年份
getHours()返回 Date 对象的小时 (0~23)
getMinutes()返回 Date 对象的分钟(0~59)
getSeconds()返回 Date 对象的秒 (0~59)
getMilliseconds()返回 Date 对象的毫秒 (0~999)
getTime()返回 1970年1月 1日至今的毫秒数
setDate()设置 Date 对象中某月的某一天 (1~31)
setMonth()设置 Date 对象中的月份 (0~11)
setFullYear()设置 Date 对象中的年份 (4 位数字)
setYear()设置 Date 对象中的年份(2 位或4 位数字)
setHours()设置 Date 对象中的小时 (0~23)
setMinutes()设置 Date 对象中的分钟(0~59)
setSeconds()设置 Date 对象中的秒(0~59)
setMilliseconds()设置 Date 对象中的毫秒 (0~999)
setTime()通过从 1970 年 1月 1日午夜添加或减去指定数目的毫秒来计算日期和时间
toString()把 Date 对象转换为字符串
toTimeString()把 Date 对象的时间部分转换为字符串
toDateString()把 Date 对象的日期部分转换为字符串
toGMTString()根据格林尼治时,把 Date 对象转换为字符串
toUTCString()根据协调世界时,把 Date对象转换为字符串
toLocaleString()根据本地时间格式,把Date 对象转换为字符串
toLocaleTimeString()根据本地时间格式,把Date 对象的时间部分转换为字符串
toLocaleDateString()根据本地时间格式,把Date 对象的日期部分转换为字符串

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_103229.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6 新特性的let--const 解构赋值--模板字符串--对象相关新特性--箭头函数--综合代码示例

目录 ES6 新特性 ES6 基本介绍 ES6 是什么? let 声明变量 演示 let 的基本使用 注意事项和使用细节 代码演示 : const 声明常量/只读变量 应用实例 注意事项和使用细节 解构赋值 基本介绍 应用实例-数组解构 应用实例-对象解构 模板字符串 基本介绍 应用实例…

一文带你学会如何写一份糟糕透顶的简历

我们每个人几乎都会面对找工作这件事,而找工作或者说求职首先就是要写一份简历。今天狗哥将以一个不同的视角带你写一份无与伦比,糟糕透顶的求职简历,说实话,其实几年前,我就是这么写的。 目录 1. 文件名 2. 基本信…

OpenAI ChatGPT 能取代多少程序员的工作?导致失业吗?

阅读原文:https://bysocket.com/openai-chatgpt-vs-developer/ ChatGPT 能取代多少程序员的工作?导致我们程序员失业吗?这是一个很好的话题,我这里分享下: 一、ChatGPT 是什么?有什么作用 ChatGPT是一种…

关于 OpenShift(OKD) 网络 Service、Routes的一些笔记

写在前面 参加考试,分享一些学习 OpenShift 的笔记博文内容为 OpenShift 网络相关组件 Service、Routes 很浅的一些认识学习环境为 openshift v3 的版本,有些旧这里如果专门学习 openshift ,建议学习 v4 版本理解不足小伙伴帮忙指正 傍晚时分…

开源 AI 辅助编程工具 AutoDev 现已上架 Jetbrains 插件市场

我们非常高兴地宣布 AutoDev v0.2.0 的发布!AutoDev 是一款强大的 AI 辅助编程工具,可以与 Jetbrains 系列 IDE 无缝集成(VS Code 支持正在开发中)。通过与需求管理系统(如 Github Issue 等)直接对接&#…

Vue收集表单数据学习笔记

收集表单数据 v-model双向数据绑定,收集的是input框的value,单选按钮不存在value,就像代码中的男女选项,即使绑定性别v-model“sex”,控制台依然不能接收性别的值,因为没有value值,&#xff0c…

欧几里得算法、扩展欧几里得算法(特解、应用、通解)

文章目录 1. 欧几里得算法(也叫辗转相除法)1.1 直接上模拟1.2 几何理解1.3 用代数方法证明 g c d ( a , b ) g c d ( b , a % b ) gcd(a, b) gcd(b, a \% b) gcd(a,b)gcd(b,a%b)1.3.1 左推右: g c d ( a , b ) g c d ( b , a % b ) gcd(a…

Handbook of MusicPsychology 音乐心理学手册 ( 多纳德·霍杰斯 Donald.A.Hodges) 笔记

由两个以上的音组成的结合音,除了该声波的波形,人耳会另外脑补出不存在的波形 频率相距较远的一些音与频率相距较近的一些音,前者累加的响度比后者要大 除了泛音部分,音的起声部分也是音色辨别的关键 音高、响度、音色、时值&a…

LINUX的系统管理与维护命令

文章目录 一、LINUX的系统管理与维护命令总结 一、LINUX的系统管理与维护命令 - Linux ls命令:显示指定工作目录下的内容 Linux pwd命令:显示当前工作目录 Linux cd命令:切换工作目录 Linux date命令:显示或设置系统时间 Linux su命令:切换用户 Linux clear命令:清除屏幕 Li…

Java编程设计语言-集合类

API(application programming interface)是JDK的重要组成部分,API提供了Java程序与运行它的系统软件(Java虚拟机)之间的接口,可以帮助开发者方便、快捷地开发Java程序 集合在程序设计中是一种重要的是数据结构,Java中提…

Semantic Kernel 知多少 | 开启面向 AI 编程新篇章

在 ChatGPT 火热的当下, 即使没有上手亲自体验,想必也对 ChatGPT 的强大略有耳闻。当一些人在对 ChatGPT 犹犹豫豫之时,一些敏锐的企业主和开发者们已经急不可耐地开展基于 ChatGPT 模型 AI 应用的落地探索。 因此,可以明确预见的是&#xf…

Java+Angular开发的医院信息管理系统源码,系统部署于云端,支持多租户

云HIS系统源码,采用云端SaaS服务的方式提供 基于云计算技术的B/S架构的云HIS系统源码,采用云端SaaS服务的方式提供,使用用户通过浏览器即能访问,无需关注系统的部署、维护、升级等问题,系统充分考虑了模板化、配置化、…

系统分析师之软件工程(十二)

目录 一、 软件开发生命周期 1.1 开发阶段工作细分 二、软件开发模型 2.1 瀑布模型 2.2 原型模型 2.3 增量模型与螺旋模型 2.4 V模型 2.5 喷泉模型 2.6 快速应用开发模型RAD 2.7 构件主装模型 2.8 统一过程 2.9 敏捷方法 三、逆向工程 四、净室软件工程 一、 软件…

斯坦福| ChatGPT用于生成式搜索引擎的可行性

文|智商掉了一地 随着 ChatGPT 在文本生成领域迈出了重要一步,Bing 浏览器也接入了聊天机器人功能,因此如何保证 Bing Chat 等搜索引擎结果的精确率和真实性也成为了搜索领域的热门话题之一。 当我们使用搜索引擎时,往往希望搜索结…

电子阅读器市场角力,AI成为关键变量

配图来自Canva可画 近年来,随着国家“书香型社会”建设政策的出台,公众的阅读需求正在逐年增加,各类读书产品和读书活动,也如同雨后春笋般涌现,人们的阅读体验日益得到丰富。比如,昨天世界读书日举行的“不…

更简单的存取Bean方式-@Bean方法注解

1.Bean方法存储 类注解是添加在某个类上的,那么方法注解是添加在某个方法前的 public class UserBeans {Beanpublic User user1(){User user new User();user.setUid(001);user.setUname("zhangsan");user.setAge(19);user.setPassword("123123");retur…

【分布式搜索引擎ES01】

分布式搜索引擎ES 分布式搜索引擎ES1.elasticsearch概念1.1.ES起源1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引 1.3.es的一些概念1.3.1.文档和字段1.3.2.索引和映射1.3.3.mysql与elasticsearch 1.4.1安装es、kibana、IK分词器1.4.2扩展词词典与停用词词典 2.索引库操作2.1.mappi…

Springcloud连接nacos集群,nacos地址配置为nginx,报错:requst nacos server failed

先说下版本: Spring cloud: Hoxton.SR12 spring.cloud.alibaba: 2.2.9.RELEASE spring.boot: 2.3.12.RELEASE Linux Centos7 nacos-server:2.1.0 nginx: 1.20.2 环境说明: nacos正常搭建三个集…

supervisor安装

说明 Supervisor翻译过来是监管人,在Linux中Supervisor是一个进程管理工具,当进程中断的时候Supervisor能自动重新启动它。可以运行在各种类Linux/unix的机器上,supervisor就是用Python开发的一套通用的进程管理程序,能将一个普通…

【虚幻引擎】UE4/UE5科大讯飞文字合成语音

一、链接地址 链接:https://pan.baidu.com/s/15Qoc48x3DLpw4eW1qHXInQ 提取码:jqpx B站视频链接:https://space.bilibili.com/449549424?spm_id_from333.1007.0.0 二、案例介绍 第一步:首先进入讯飞开放平台注册一个账号&…