JavaScript基础Day5

已于 2022-05-11 22:33:52 修改
阅读量167 收藏 1
点赞数
分类专栏： JavaScript基础 文章标签： javascript
于 2022-04-09 12:15:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOUKELOVE/article/details/124055927
版权

补充day4的知识点：
在这里插入图片描述
简化程序：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以需要学习一种新的数据类型：对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

let goods = {
            name: '小米10 青春版',
            num: 100012816024,
            weight: 0.55 + 'kg',
            address: '中国大陆'
        }

在这里插入图片描述
在这里插入图片描述
定义“方法”：
在这里插入图片描述
使用“方法”：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除我们很少去使用，做些了解就可以。
在这里插入图片描述
遍历对象：
在这里插入图片描述
当对象里有很多方法时，一个一个输出或使用太麻烦，所以要使用遍历对象。
在这里插入图片描述
在这里插入图片描述

重点：想实现遍历对象，使用 for in 循环语句

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
not(first-child)：hover 意为鼠标放上去，除了第一行其他都会变色。
在这里插入图片描述
在这里插入图片描述

<!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>
        
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
            <td>河北省</td>
        </tr> -->
    
    <script>
        let students = [
            {name: '小明',age: 18, gender: '男', hometown:'河北省'},
            {name: '小红',age: 19, gender: '女', hometown:'河南省'},
            {name: '小刚',age: 17, gender: '男', hometown:'山西省'},
            {name: '小丽',age: 18, gender: '女', hometown:'山东省'}
    ]   
        // 第一步 打印表格的头部和尾部
        document.write(`
        <table>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
        // 中间遍历行数  原则就是有几条数据，我就遍历几次
            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>
                `)
            }
            
        // 尾部
        document.write(`
            </table>
        `)
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
详细的说明可以去MDN阅读查询。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
随机数：
在这里插入图片描述

<script>
        //  如何生成0-10的随机数？
        document.write(Math.floor(Math.random() * (10 + 1)))
        //  如何生成5-10的随机数？
        document.write(Math.floor(Math.random() * (5 + 1)) + 5)
        //  如何生成N-M的随机数？
        document.write(Math.floor(Math.random() * (M - N + 1)) + N)
    </script>

		// 封装一个min 到 max 之间的随机数函数  
		function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
		let random = getRandom(1, 10)
		console.log(random)

在这里插入图片描述

function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
        // 声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        
        // 生成1个随机数
		let random = getRandom(0, arr.length - 1)
        document.write(arr[random])
		// console.log(random)

在这里插入图片描述

function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
        // 声明一个数组
        let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操']
        
        // 生成1个随机数
		let random = getRandom(0, arr.length - 1)
        document.write(arr[random])
		// console.log(random)

        // 之后删除这个人的名字
        // arr.splice(从哪里开始删，删几个)
        arr.splice(random, 1)
        // 检查验证筛选之后的数组是否发生变化
        console.log(arr)

在这里插入图片描述

 function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min
		}
        // 生成1-10之间的随机数
		let random = getRandom(1, 10)
        // console.log(random)

        // 用户输入 不断弹框 直到输入正确为止
        while (true) {
            let num = +prompt('请猜猜是哪个数字：')
            // 如果输入的大于随机数就提示猜大了
            if (num > random) {
                alert('对不起，你猜大了')
            } else if (num < random) {
                // 如果输入的小于随机数就提示猜小了
                alert('对不起，你猜小了')
            } else {
                // 如果正确则提示猜中了
                alert('你猜对咯')
                break  // 猜对了所以需要跳出循环
            }
            
            
        }

在这里插入图片描述

<!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="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: '我会变，你呢？',
                            num: 590
                        },
                        {
                            src: 'images/course08.png',
                            title: '我会变，你呢？',
                            num: 590
                        }
                    ]
                    // 根据数据的个数来渲染 到底有多少个小li 
                    // console.log(data.length)
                    for (let i = 0; i < data.length; i++) {
                        document.write(`
                        <li>
                            <img src=${data[i].src} alt="">
                            <h4>
                                ${data[i].title}
                            </h4>
                            <div class="info">
                                <span>高级</span> • <span> ${data[i].num}</span>人在学习
                            </div>
                        </li>
                    `)
                    }
                </script>

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

</body>

</html>

拓展：不同数据类型的储存方式：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Rookie_wbe
关注
专栏目录
JavaScript 基础知识 Day01
qq_73990369的博客
07-19 1097
刚学习了JS的基础知识，JS数据类型中只有number这一个数字类型，所以number在计算的时候会保留小数，不会自动取整，需要通过另外一个方法parseInt来进行取整。
JavaScript基础知识 day1
m0_64105917的博客
05-28 712
JavaScript基础知识
JavaScript基础 day1
qq_46075739的博客
11-18 738
javascript：运行现在客户端的动态【脚本】（一个基于对象）语言，独立无法实现、体现其功能所以js通常跟.html一起出现 创建javascript初衷：表单验证、动效、逻辑处理 运作方式：单线程运行方式 载体：html 文件名: .js 书写方式: 1、内嵌方式 ​ <head> <script type="text/js"> //js 代码段 </script> </head> //或 <body> &l...
day09_JavaScript基础
weixin_46703580的博客
06-19 138
JavaScript： 概念： 一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 JavaScript发展史： 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase 1995年，Netscape(网景
JavaScript基础
qq_57172082的博客
03-27 1366
文章目录一、JavaScript概述二、在JSP中引入JavaScript1、将JavaScript直接加入网页中：2、通过链接引用的方式三、JavaScript的数据类型与运算符1、数据类型2、运算符1）算术运算符2）关系运算符3）字符串运算符4）逻辑运算符5）位操作运算符6）条件运算符7）赋值运算符四、JavaScript流程控制语句（1）if条件判断结构的语法形式如下：（2）for循环控制结构的语法与Java相同，示例如下：（3）switch多路分支结构的语法形式如下：（4）while循环控制结构的语
JavaScript基础知识
你好啊cbw
03-02 1326
目录 1、概述 1.1 什么是JavaScript？ 1.1.1 概念 1.1.2 作用 1.3 JavaScript的用法 1.3.1 HTML页面中的JavaScript 1.3.2 外部的JavaScript 1.3.3 标签属性中的JavaScript 1.4 JavaScript显示数据 1.4.1 使用window.alert()弹出框 1.4.2 使用document.write()将内容写入到html文档 1.4.3 使用innerHTML写入到html元素 1.4
JavaScript 基础入门
YUELEI118的博客
04-26 2212
视频 学习笔记 JavaScript JavaScript是一门脚本语言 脚本语言和非脚本语言的区别： 程序的目标文件可以用记事本打开的就是脚本语言，JAVA的目标程序是Class文件，用记事本打不开 包含三大块 DOM编程： DOM是指对HTML中的节点进行操作。例如：div span .class #id 对网页的内容进行增删改的过程 BOM编程 对浏览器的操作，例如：后退，刷新，地址栏等 ECMAScript JavaScript的核心语法 总结：DOM和BOM的关系
Web基础 day02-JavaScript
张准的博客
12-19 187
JavaScript DHTML-动态HTML
【JavaScript】JavaScript基础篇
X_H学Java的博客
08-08 1790
JavaScript为前端三剑客之一，主要实现和用户交互的动作，本篇文章对JavaScript的基础语法进行了总结，帮助大家进一步入门JavaScript
JavaScript基础练习_day11
10-26
### JavaScript基础练习_day11知识点解析 #### 一、变量声明与作用域 **知识点概述：** 本部分内容涉及JavaScript中的变量声明方式以及不同声明方式之间的区别。JavaScript中有多种声明变量的方式，每种方式都有其...
JavaScript基础练习_day5
08-30
### JavaScript基础练习_day5知识点详解 #### 一、对折纸张达到珠穆朗玛峰高度的计算 **题目描述**： 有一张初始厚度为0.0001米的纸，每次对折纸张的厚度翻倍。问对折多少次可以使纸张的总厚度达到或超过珠穆朗玛...
JavaScript基础练习_day13
02-28
### JavaScript基础练习_day13知识点总结 #### 一、JavaScript数据类型 1. **基本数据类型**：在JavaScript中，基本数据类型包括`number`、`string`、`boolean`、`null`、`undefined`、`bigint`、`symbol`。 - `...
JavaScript基础练习_day4
08-27
### JavaScript基础练习_day4 #### 知识点概述 本次基础练习主要针对JavaScript中的几个核心概念进行探讨，包括但不限于变量作用域、异步操作、定时器的行为以及闭包的应用等。通过具体的代码示例，帮助初学者理解...
Python 13、JAVASCRIPT基础 5-2_JAVASCRIPT_Day05_PM.mp4
02-19
Python 13、JAVASCRIPT基础 5-2_JAVASCRIPT_Day05_PM.mp4
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 576
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 462
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 892
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值