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

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

目录

 

JavaScript 中的对象

对象的属性和方法

1.对象的属性

2. 对象的方法

JavaScript 对象的种类

自定义对象的创建

直接创建自定义对象

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

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

对象访问语句

for...in 语句

with 语句

常用内部对象

Math 对象

Date 对象


JavaScript 中的对象

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

对象简介

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

什么是对象?

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

image.gif编辑

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

image.gif编辑

对象的属性和方法

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

1.对象的属性

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

对象名.属性名

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

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

image.gif

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

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

image.gif

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])

    image.gif

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

    (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 对象){
    语句
    }

    image.gif

    该语法中的参数说明如下

    (1)变量:用于存储某个对象的所有属性名。

    (2)对象:用于指定要遍历属性的对象

    (3)语句:用于指定循环体。

    for...in 语句用于对某个对象的所有属性进行循环操作,将某个对象的所有属性名依次赋值给同一个变量,而无须事先知道对象属性的个数。

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

    with 语句

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

    with(对象名称){
    语句
    }

    image.gif

    该语法中的参数说明如下

    (1) 对象名称:用于指定要操作的对象名称。

    (2)语句:要执行的语句,可直接引用对象的属性名或方法名。

    在一个连续的程序代码中,如果多次使用某个对象的多个属性或方法,那么只要在with 关键字后的括号中写出该对象实例的名称,就可以在随后的大括号中的程序语句中直接引用该对象的属性或方法,而不必在每个属性名或方法名前都加上对象实例名和“ .”

    常用内部对象

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

    Math 对象

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

    Math 对象的属性

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

    属性 描述
    E 自然对数的底数(2.718281828459045)
    LN2 2的自然对数(0.6931471805599453)
    LN10 10的自然对数(2.302585092994046)
    SQRT2 2的平方根(1.4142135623730951)
    LOG2E 以2为底数的e的对数(1.4426950408889633)
    LOG10E 以10为底数的c的对数(0342944819032518)
    PI 圆周率常数元(3.141592653589793)
    SQRT1 _2 0.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]]]])

    image.gif

    参数 说明
    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 对象的日期部分转换为字符串
    相关文章
    |
    15天前
    |
    Web App开发 移动开发 HTML5
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
    51 2
    |
    25天前
    |
    前端开发 测试技术 定位技术
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
    本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
    51 7
    |
    25天前
    |
    前端开发 JavaScript 搜索推荐
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
    本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
    32 6
    |
    25天前
    |
    存储 移动开发 前端开发
    高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
    本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
    37 5
    |
    25天前
    |
    前端开发 JavaScript UED
    在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
    在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
    28 5
    |
    1月前
    |
    JavaScript 前端开发
    CSS3 动画和 JavaScript 动画的性能比较
    具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
    |
    1月前
    |
    缓存 前端开发 JavaScript
    优化CSS和JavaScript加载
    优化CSS和JavaScript加载
    |
    1月前
    |
    缓存 前端开发 JavaScript
    优化CSS和JavaScript加载
    Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
    |
    1月前
    |
    前端开发 JavaScript
    用HTML CSS JS打造企业级官网 —— 源码直接可用
    必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
    130 1