前端JavaScript入门-day05

news2024/9/20 3:05:18

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

对象

1. 对象是什么

对象(object):JavaScript里的一种数据类型
可以理解为是一种无序的数据集合, 注意数组是有序的数据集合
用来描述某个事物,例如描述一个人
人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
如果用多个变量保存则比较散,用对象比较统一
比如描述 班主任 信息:
静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
动态行为 (点名, 唱, 跳, rap) => 使用函数表示

 let obj=
    {
        uname:'zxc',
        age:18,
        sex:'man'
    }

2. 对象使用 

1. 对象声明语法

例如:

实际开发中,我们多用花括号。 {} 是对象字面量

2. 对象有属性和方法组成

属性:信息或叫特征(名词)。 比如 手机尺寸、颜色、重量等…
方法:功能或叫行为(动词)。 比如 手机打电话、发短信、玩游戏…

3 . 属性 

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

 let obj=
    {
        uname:'zxc',
        age:18,
        sex:'man'
    }

属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量(外面是变量,对象内是属性)
属性名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

属性- 查

声明对象,并添加了若干属性后,可以使用 . 获得对象中属性对应的值,称之为属性访问。
语法:对象名.属性

简单理解就是获得对象里面的属性值。

        let obj=
        {
            uname:'zxc',
            age:18,
            sex:'man'
        }
        document.write(obj.age)
        document.write(`<br>`)
        document.write(obj.sex)

 网页显示为:                           

属性- 查的另外一种写法 

对于多词属性或则 - 等属性,点操作就不能用了。
我们可以采取: 对象[‘属性’] 方式, 单引号和双引号都阔以

总结:
没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [ ] 语法

         let obj=
        {
            "uname-123":'zxc',
            age:18,
            sex:'man'
        }
        document.write(`<br>`)
        document.write(obj["uname-123"])

 网页显示为:                              

属性- 改

 语法:对象名.属性 = 新值

        let obj=
        {
            uname:'zxc',
            age:18,
            sex:'man'
        }
        document.write(obj.age)
        document.write(`<br>`)
        obj.age=19
        document.write(obj.age)

网页显示为:                          

属性- 增 

语法:对象名.新属性 = 新值

        let obj=
        {
            uname:'zxc',
            age:18,
            sex:'man'
        }
        obj.live='happy'
        console.log(obj);

控制台显示为:                    

属性- 删 

语法:delete 对象名.属性

        let obj=
        {
            uname:'zxc',
            age:18,
            sex:'man'
        }
        delete obj.age
        console.log(obj);

控制台显示为:                         

5. 对象中的方法

数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。

1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

6.调用对象中的方法 

声明对象,并添加了若干方法后,可以使用 . 调用对象中函数,我称之为方法调用。


也可以添加形参和实参 

3. 遍历对象 

for 遍历对象的问题:
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标

一般不用这种方式遍历数组、主要是用来遍历对象
for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
由于 k 是变量, 所以必须使用 [ ] 语法解析
一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值

<!--  
    // 定义一个存储了若干学生信息的数组
      let students = [
      {name: '小明', age: 18, gender: '男', hometown: '河北省'},
      {name: '小红', age: 19, gender: '女', hometown: '河南省'},
      {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
      {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
    ]
        需求:根据以上数据渲染生成表格
        分析:
        1. 打印表格 头部和尾部
        2. 中间的行遍历数组,然后填充对象数据 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table 
        {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption 
        {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr 
        {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) 
        {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover 
        {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- script写到这里 -->
        <script>
            // 1. 数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
                { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
            ]
            // 2. 渲染页面
            for (let i = 0; i < students.length; i++) {
                document.write(`
                <tr>
                    <td>${i + 1}</td>
                    <td>${students[i].name}</td>
                    <td>${students[i].age}</td>
                    <td>${students[i].gender}</td>
                    <td>${students[i].hometown}</td>
                </tr>
                `)
            }
        </script>
    </table>
</body>
</html>

网页显示为:  

4. 内置对象 

内置对象是什么?

JavaScript内部提供的对象,包含各种属性和方法给开发者调用
document.write()
console.log()

内置对象-Math 

介绍:Math对象是JavaScript提供的一个“数学”对象
作用:提供了一系列做数学运算的方法
Math对象包含的方法有:
        random:生成0-1之间的随机数(包含0不包括1)
        ceil:向上取整
        floor:向下取整
        max:找最大数
        min:找最小数
        pow:幂运算
        abs:绝对值

生成任意范围随机数 

Math.random() 随机数函数, 返回一个0 - 1之间,并且包括0不包括1的随机小数 [0, 1)

如何生成0-10的随机数呢?

Math.floor(Math.random() * (10 + 1))
如何生成5-10的随机数?

Math.floor(Math.random() * (5 + 1)) + 5
如何生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N

<!-- 需求:程序随机生成 1~10 之间的一个数字,用户输入一个数字
分析:
①:利用随机数生成一个数字
②:需要一直猜,所以需要不断的循环
③:因为条件是结果猜对了,就是判断条件退出,用while循环合适
④:内部判断可以用多分支语句 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.生成随机数
        function getRandom(N,M)
        {
            return Math.floor(Math.random()*(M-N+1))+N
        }
        let random=getRandom(1,10)
        while(1)
        {
            //2.用户输入
            let num = +prompt('请输入数字')
            //3.判断输出
            if(num>random)
            {
                alert('猜大了')
            }
            else if(num<random)
            {
                alert('猜小了')
            }
            else
            {
                alert('猜对了')
                break
            }
        }
    </script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Elasticsearch和Kibana的安装

Elasticsearch和Lucene的关系 Elasticsearch是一个高度可扩展的、开源的、基于 Lucene 的全文搜索和分析引擎。它允许您快速&#xff0c;近实时地存储&#xff0c;搜索和分析大量数据&#xff0c;并支持多租户。 Elasticsearch也使用Java开发并使用 Lucene 作为其核心来实现所…

Docker Compose基础与实战

一、是什么 Compose 项目是 Docker 官方的开源项目&#xff0c;负责实现对 Docker 容器集群的快速编排。 二、能做什么 Compose允许用户通过一个单独的docker-compose.yml模板文件&#xff08;YAML 格式&#xff09;来定义一组相关联的应用容器为一个项目&#xff08;project&…

单链表的简介与实现(Java)

一、前言 线性结构的链式存储是用若干地址分散的存储单元存储数据元素&#xff0c;逻辑上相邻的两个数据元素在物理位置上并不一定相邻&#xff0c;必须采用附加信息来表示数据元素之间的顺序关系。因此存储一个数据元素的数据单元至少包含两部分------数据域和地址域 上述的结…

java简易计算器的设计

简易计算器的设计 1.1实训内容 模仿Windows自带的标准版计算器&#xff0c;设计并用Java语言实现简易的计算器&#xff08;根据自己的能力&#xff0c;可以适当地增加或删除部分功能&#xff09;。 最低要求&#xff1a; 计算器运行界面如下图所示&#xff0c;包含二个文本框…

Android Binder通信原理(七):java 下的C-S

源码基于&#xff1a;Android R 0. 前言 在之前的几篇博文中&#xff0c;对Android binder 的通信原理进行的深入的剖析&#xff0c;这些博文包括&#xff1a;binder 简介、servicemanager启动、service注册、service获取、Java 端的service 注册和获取。 在前一文中&#xf…

PostgreSQL处理JSON数据

源&#xff1a;https://blog.csdn.net/c_zyer/article/details/130968257?ops_request_misc&request_id&biz_id102&utm_termPostgreSQL%20%E7%9A%84JSON%20%E5%A4%84%E7%90%86&utm_mediumdistribute.pc_search_result.none-task-blog-2allsobaiduweb~default-…

pgsql:纵列字段转为横列字段

问题&#xff1a; 想要将查询出来的数据纵列字段转为横列字段。如以下是24小时内每个小时的数据表&#xff1a; SELECT deviceid,press_avg, hh FROM site_data 想要转换后的效果如下&#xff0c;将24小时内所有数据横向展示&#xff1a; 解决方案&#xff1a; 实现的sql查询…

Spring事务的介绍和使用

目录 一、Spring事务作用 二、代码实现 三、Spring事务相关配置 1、事务配置 2、事务传播行为 一、Spring事务作用 事务作用&#xff1a;在数据层保障一系列的数据库操作同成功同失败 Spring事务作用&#xff1a;在数据层或业务层保障一系列的数据库操作同成功同失败 二、…

分散输入和集中输出(Scatter-Gather I/O):readv()和writev()

readv()和writev()系统调用分别实现了分散输入和集中输出的功能。 NAMEreadv, writev, preadv, pwritev - read or write data into multiple buffersSYNOPSIS#include <sys/uio.h>ssize_t readv(int fd, const struct iovec *iov, int iovcnt);ssize_t writev(int fd, c…

蓝桥杯专题-试题版-【数字游戏】【城市建设】【最大子阵】【蚂蚁感冒】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

数字人解决方案——基于真人视频的三维重建数字人源码与训练方法

前言 1.真人视频三维重建数字人源码是基于NeRF改进的RAD-NeRF&#xff0c;NeRF&#xff08;Neural Radiance Fields&#xff09;是最早在2020年ECCV会议上的Best Paper&#xff0c;其将隐式表达推上了一个新的高度&#xff0c;仅用 2D 的 posed images 作为监督&#xff0c;即…

MongoDB存储引擎

1、前言 存储引擎是数据库的组成部分&#xff0c;负责管理数据存储。 MongoDB支持的以下存储引擎&#xff1a; 存储引擎 描述 WiredTiger存储引擎 从MongoDB 3.2开始默认的存储引擎&#xff0c;新的版本MongoDB推荐使用WiredTiger存储引擎。 MMAPv1存储引擎 MMAPv1是Mon…

微信小程序使用vant组件样式未生效解决办法

1.删除小程序自带的样式 首先在app.json里面删除这一行 2.清除缓存 重新编译 3.重新构建npm 重新编译 在工具里面

nginx之rewrite

一、Rewrite跳转的场景二、Rewrite跳转实现三、Rewrite实际场景四、常用的 Nginx 正则表达式五、Rewrite命令、语法格式六、location的分类七、location的优先级八、rewrite与location的区别九、rewrite示例9.1 基于域名的跳转9.2 基于客户端 IP 访问跳转9.3 基于旧域名跳转到新…

chatgpt赋能python:Python迭代运算:概述、应用及效果分析

Python迭代运算&#xff1a;概述、应用及效果分析 在Python编程领域中&#xff0c;迭代运算是一项基础性操作。它不仅适用于循环遍历数据&#xff0c;还支持函数式编程中的高阶函数应用&#xff08;例如map、filter等&#xff09;。本文将从多个方面探讨Python迭代运算的应用和…

高性能计算开发软件培训班-选猿代码科技IT培训机构!

学习CPU并行程序性能优化的意义&#xff1a; 学习CPU计算是现代计算机科学中不可或缺的一部分。掌握CPU计算原理和应用&#xff0c;能够提高我们的编程技能和解决问题的能力&#xff0c;帮助我们更好地应对计算机科学领域中的挑战和机遇。此外&#xff0c;CPU计算在计算机体系结…

python写路径时候的问题————转载ningqingzy的文章

作为笔记总结学习&#xff0c;如有侵权&#xff0c;立马删除。 总结有三种方法&#xff1a; 更换为绝对路径的写法&#xff1a;func1(“C:\Users\renyc”)显式声明字符串不用转义&#xff08;加r&#xff09;&#xff1a;func1(r"C:\Users\renyc")使用Linux的路径&a…

workbench 链接mysql 报错 authentication plugin caching_sha2_password

用workbench连接MySQL出现Authentication plugin ‘caching_sha2_password’ cannot be loaded的问题&#xff0c;如下图 原因 出现这个问题的原因是由于Navicat和MySQL的版本问题&#xff0c; mysql8 之前&#xff0c;加密规则是mysql_native_password&#xff1b; mysql8 之后…

leetcode97. 交错字符串(动态规划-java)

交错字符串 leetcode97. 交错字符串题目描述解题思路代码演示&#xff1a; 动态规划加状态压缩代码演示 动态规划专题 leetcode97. 交错字符串 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/interleaving-string 题目描…

线性代数高级--矩阵的秩--SVD分解定义--SVD分解的应用

目录 矩阵的秩 概念 k阶子式 矩阵的秩的定义 矩阵的秩的性质 SVD分解 概念 注意 SVD的分解过程 SVD分解的应用 矩阵的秩 概念 矩阵的秩是线性代数中的一个重要概念&#xff0c;用于描述矩阵的行&#xff08;或列&#xff09;向量的线性无关程度。矩阵的秩可以通过…