前端JavaScript入门-day05

简介: 前端JavaScript入门-day05

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

对象

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>


相关文章
|
2天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
33 19
|
2天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
24 13
|
2天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
7天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
2天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
11天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
23 0
|
11天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
53 0
|
11天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
26 0
|
11天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
36 0
|
11天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
34 0