JavaScript-DAY5学习笔记

最新推荐文章于 2024-07-25 22:24:14 发布

他是一棵杨树

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量672

点赞数 20

文章标签：学习笔记

本文链接：https://blog.csdn.net/m0_58323724/article/details/136128861

版权

1.对象

1.1 什么是对象

对象（subject）：JavaScript里的一种数据类型，可以理解是一种无序的数据结合

特点：

无序的数据的集合
可以详细的描述某个事物

1.2 对象使用

对象声明:

//方法1
let 对象名 = {}

//方法2
let 对象名 = new Object()

对象由属性和方法组成：

属性：信息或叫特征（名词）

方法：功能或叫行为（动词）

let 对象名 = {
     属性名:属性值,
     方法名:函数
}

注：

属性：数据描述性的信息称为属性

属性都是成对出现的，包括属性名和值，他们之间使用英文：分隔开
多个属性之间使用英文，分隔
属性就是依附在对象那个上的变量（外面是变量，对象内是属性）
属性名可以使用""或''，一般情况下省略

操作对象：

查询对象	对象.属性
重新赋值	对象.属性 = 值
对象添加新的数据	对象名.新属性名 = 新值
删除对象中的属性	delete 对象名.属性名

补：查的另外一种规范：对象名['属性名']

对象中的方法

例如：

let person={
name:'Andy'
sayHi:function(){
     doucument.write('hi~~~')
   }
}

方法调用对象名.方法名

注：

方法是由方法名和函数两部分构成，他们之间使用：分隔
多个方法之间使用英文，分隔
方法是依附在对象中的函数
方法名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如括号、中横线等

遍历对象

  <script>
    let shark = {
      nickname: '小豆包',
      birth: 11.4,
      rank: 'NO.1'
    }
    for (let k in shark) {
      console.log(k)
      console.log(shark[k]);
    }
  </script>

注：

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

案例

<!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>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>性别</th>
            <th>昵称</th>
        </tr>
        <script>
            // 1.数据准备
            let athletes = [
                { name: '孙颖莎', birth: '2000.11.4 ', gender: '女', nickname: '莎莎' },
                { name: '王曼昱', birth: '1999.02.09', gender: '女', nickname: '鳗鱼' },
                { name: '陈梦', birth: '1994.01.15', gender: '女', nickname: '大梦' },
                { name: '王艺迪', birth: '1997.02.14', gender: '女', nickname: '大迪' }
            ]
            for (let i = 0; i <= athletes.length; i++) {
                document.write(`
            <tr>
            <td>${i + 1}</td>
            <td>${athletes[i].name}</td>
            <td>${athletes[i].birth}</td>
            <td>${athletes[i].gender}</td>
            <td>${athletes[i].nickname}</td>
            </tr>
            `)
            }
        </script>
    </table>
</body>

</html>

1.3 内置对象

内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用

内置对象Math()：提供一系列做数学运算的方法

random	生成0-1之间的随机数（包含0不包含1）
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值

案例--取N到M之间的数

function getRandom(N,M){
return Math.floor(Math.random()*(M-N+1))+N
}

案例--随机点名

  <script>
    let nameList = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    let random = Math.floor(Math.random() * nameList.length)
    document.write(nameList[random])
  </script>

案例--随机点名不允许重复

<script>
    let nameList = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    let random = Math.floor(Math.random() * nameList.length)
    document.write(nameList[random])
    nameList.splice(random, 1)
  </script>

案例--猜数字游戏

  <script>
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1) + N)
    }
    let flag = true
    let random = getRandom(1, 10)
    for (let i = 0; i < 3; i++) {
      let num = +prompt('请输入一个1到10之间的数')
      if (num > random) {
        alert('猜大了')
      } else if (num < random) {
        alert('猜小了')
      } else {
        alert('猜对了')
        flag = false
        break
      }
    }
    if (flag) {
      alert('次数用完')
    }
  </script>

案例--随机颜色

 <script>
    // 该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式
    // 如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色；
    // 如果参数传递的是false，则输出一个随机rgb颜色
    function getRandomColor(flag = true) {
      if (flag) {
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
          'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 0; i < 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          str += arr[random]
        }
        return str
      } else {
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${g})`
      }
    }
    console.log(getRandomColor(true));
  </script>

2.综合案例

根据数据渲染列表页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <script>
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'Android APP 实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI 源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                    ]

                    for (let i = 0; i < data.length; i++) {
                        document.write(`
                        <li li >
                            <a href="#">
                            <img src=${data[i].src} alt="">
                                <h4>
                                    ${data[i].title}
                                </h4>
                                <div class="info">
                                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                                </div>
                             </a>
                        </li>`)

                    }

                </script>
            </ul>
        </div>
    </div>

</body>

</html>

效果图：