day 5笔记

最新推荐文章于 2024-11-14 08:20:05 发布
最新推荐文章于 2024-11-14 08:20:05 发布
阅读量111 收藏
点赞数
文章标签： 笔记 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshiikun_2/article/details/131725589
版权


01-js初体验

<!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>
    <button>点击我变成粉色</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', () => {
            btn.style.backgroundColor = 'pink'
 
        })
    </script>
</body>
 
</html>

02-js引入方式

<!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>
        // 内部
        // prompt('请输入您的年龄：')
    </script>
    <!-- 外部 -->
    <script src="./03-外部js.js">
    </script>
</body>
 
</html>

03-输入输出语句

<!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>
        // 输入语句
        // prompt('请输入您的密码：')
        // 打印到页面
        document.write('你们真是小天才')
        // 可以识别标签
        document.write('<strong>你们真是小天才</strong>')
        // 控制台输出语句
        console.log('我现在要在控制台输出')
 
    </script>
</body>
 
</html>

04-变量

<!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>
 
        // 变量：盒子----存储数据的容器           数据本身不是变量
        //  变量的声明：
        // let 变量名           var  变量名
        // let age
        // //    变量赋值
        // age = prompt('请输入您的年龄：')
 
        // age = 33
        // console.log(age)
 
 
        // 变量的初始化
        // let uname = prompt('请输入您的用户名：')
        // console.log(uname)
 
 
        // 同时定义多个变量
        // let uname = 'zs', age = 21
        // console.log(uname, age)
 
        let age = prompt('请输入年龄：')
        document.write(age)
 
 
 
 
 
 
 
 
 
    </script>
</body>
 
</html>

05-变量命名规范

<!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、有效符号（大小写字母、数字、下划线、$）
        // 2、关键字、保留字不能用于变量命名
        // 3、不以数字开头
        // 4、尽量用有意义的变量名
        // 5、驼峰命名法       userName
 
    </script>
 
</body>
 
</html>

06-let和var的区别

<!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>
        // var 可以多次声明同一变量  
        console.log(age)
        // var age
        let age
    </script>
</body>
 
</html>

07-const常量

<!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>
        // 常量名大写   常量无法更改
        const PI = 3.14
        // PI = 4.456
        console.log(PI)
    </script>
</body>
 
</html>

08-数据类型

<!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>
        // js是弱数据类型语言    只有赋值之后，才知道是什么数据类型
        let uname = 21
        uname = 'gouxin'
        console.log(typeof (uname))
    </script>
</body>
 
</html>

09-基本数据类型---数字类型

<!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>
        let a = 21.21312
        let b = 33
        console.log(a)
        console.log(a + 2)
        console.log(a + b)
        console.log(a - b)
        console.log(a * b)
        console.log(a / b)
        console.log(a % 2)
 
 
 
 
 
 
    </script>
</body>
 
</html>

10-字符串类型

<!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>
        // let uname1 = 'nnnsns'
        // console.log(typeof (uname1))
        // let uname2 = "nnnsns"
        // console.log(typeof (uname2))
        // let uname3 = "nnn'gouxin'sns"
        // console.log(typeof (uname3))
        // let uname4 = 'nnn"gouxin"sns'
        // console.log(typeof (uname4))
 
 
        // 字符串拼接用+
 
        let a = +prompt("请输入num1")
        let b = +prompt("请输入num2")
        // alert   警示框
        alert(a + b)
 
 
        // 模板字符串
        // let uname = prompt("请输入名字：")
        // let age = prompt("请输入年龄：")
 
        // document.write('你叫' + uname + ',今年' + age + '岁了')
        // document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
 
 
 
 
 
    </script>
</body>
 
</html>

11-布尔类型

<!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>
        console.log(typeof (3 < 5))
        // undefinded  声明，未赋值
        // null   NaN   not a  number
        console.log(undefined + 1)
        console.log(null + 1)
 
    </script>
</body>
 
</html>

12-显示转换

<!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>
        let a = +prompt('num1')
        let b = +prompt('num2')
 
        console.log(Number(a) + Number(b))
        console.log(typeof (+a))
 
        let c = '200.9875px'
        console.log(parseInt(c))
        console.log(parseFloat(c))
 
 
    </script>
</body>
 
</html>

13-综合案例

<!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>
        h2 {
            text-align: center;
        }
 
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
 
        th {
            padding: 5px 30px;
        }
 
        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>
 
<body>
    <h2>订单确认</h2>
 
 
 
    <script>
        let price = +prompt('请输入单价：')
        let num = +prompt('请输入购买数量：')
        let address = prompt('请输入收货地址：')
        document.write(`
        <table>
        <thead>
            <tr>
                <th>
                    商品名称
                </th>
                <th>
                    商品价格
                </th>
                <th>
                    商品数量
                </th>
                <th>
                    总价
                </th>
                <th>
                    收货地址
                </th>
            </tr>
        </thead>
        <tr>
            <td>小米</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${price * num}</td>
            <td>${address}</td>
 
 
        </tr>
    </table>
        `)
    </script>
 
 
</body>
 
</html>

14-运算符

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script>
        // =  赋值运算符
        // let a = 21
        // a = 33
 
 
        // a += 4 // a = a + 4
        // a *= 2   //a = a * 2     74
        //a -= 3    //a = a - 3
        // a /= 2     //a = a / 2      35.5
        // alert(a)
 
 
 
        // let b = a++  //先赋值，再自增
        // alert(b)
        // alert(a)  //36.5
        // b = ++a   //先自增，再赋值
        // alert(b)
 
 
        // 比较运算符  
        // >   <   >=   <=  ==   ===
        let num1 = 2
        let num2 = '2'
        alert(num1 == num2)
        alert(num1 === num2)
        // ==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较   ===   即比较数值，也比较类型
 
 
 
 
 
 
    </script>
</body>
 
</html>

15-逻辑运算符

<!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>
        // &&     ||       !
        //  alert(4 > 3 && 3 < 5)  //两真为真，一假则假
        // alert(4 < 3 || 3 < 5)  //一真则真   全假则假
        // alert(!true)
        alert(!(4 < 3))
 
 
 
    </script>
</body>
 
</html>

16-单分支语句

<!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>
        let age = 11
        // if(条件){
        //     执行的代码
        // }
        if (age < 18) {
            document.write('你是小弟弟，不要乱跑')
        }
 
 
    </script>
</body>
 
</html>

17-双分支语句

<!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>
        let age = +prompt('请输入您的年龄：')
        if (age <= 18) {
            alert('你不要乱跑')
        } else {
            alert('恭喜你，成年了')
        }
 
    </script>
</body>
 
</html>

18-闰年

<!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>
        // year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
        let year = +prompt('请输入年份：')
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            alert('闰年')
        } else {
            alert('平年')
        }
    </script>
</body>
 
</html>

19-多分支语句

<!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>
        let age = +prompt('age：')
        if (age < 18) {
            alert('你是未成年 学习吧')
        } else if (age <= 25) {
            alert('青春年华')
        } else if (age <= 40) {
            alert('好汉不提当年勇')
        } else {
            alert('男人四十一枝花')
        }
    </script>
</body>
 
</html>

20-三元运算符

<!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>
        let age = +prompt('请输入您的年龄：')
        // if (age <= 18) {
        //     alert('你不要乱跑')
        // } else {
        //     alert('恭喜你，成年了')
        // }
 
        // 判断条件？条件成立时执行的语句：条件不成立时执行的语句
        age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')
    </script>
</body>
 
</html>

21-求最大值

<!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>
        let a = +prompt('请输入num1：')
        let b = +prompt('请输入num2：')
        a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`)
 
    </script>
</body>
 
</html>

22-数字补零

<!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>
        // alert(2 < '3')
        let a = prompt('num')
        a >= 10 ? alert(a) : alert(0 + a)
 
    </script>
</body>
 
</html>

23-switch

<!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>
        let num = +prompt('请输入今天星期几了：')
        switch (num) {
            case 1:
                alert('星期一')
                break
            case 2:
                alert('星期二了')
                break
            case 3:
                alert('星期三了')
                break
            case 4:
                alert('星期四了')
                break
            case 5:
                alert('星期五了')
                break
            case 6:
                alert('周末了')
                break
            case 7:
                alert('周末了')
                break
            default:
                alert('你是外星人吗')
        }
    </script>
</body>
 
</html>

24-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>
        // while   一定要有终止条件
        let i = 10
        // while (i > 11) {
        //     console.log('你是大聪明')
        //     i--
        // }
 
 
        do {
            console.log('你是大聪明')
            i--
        } while (i > 11)
    </script>
</body>
 
</html>

25-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~100累加和
        let i = 0
        let sum = 0
        while (i < 101) {
            sum += i
            i++
        }
        alert(sum)
 
 
    </script>
</body>
 
</html>

26-for循环

<!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>
        for (let i = 1; i <= 10; i++) {
            document.write(`你真是个大聪明<br>`)
        }
        //
 
 
 
    </script>
</body>
 
</html>

27-循环嵌套

<!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>
        span {
            display: inline-block;
            margin: 15px;
        }
    </style>
</head>
 
<body>
    <script>
        for (let i = 1; i < 8; i++) {
            console.log(`今天是第${i}天`)
            for (let j = 1; j < 11; j++) {
                console.log(`这是今天第${j}朵玫瑰花`)
 
            }
        }
 
        for (let i = 1; i < 10; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j}*${i}=${i * j}</span>`);
            }
            document.write(`<br/>`)
        }
 
 
        for (let i = 1; i < 6; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`*`)
            }
            document.write(`<br/>`)
        }
 
 
    </script>
</body>
 
</html>

28-continue、break

<!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>
        for (let i = 1; i < 100; i++) {
            if (i === 50) {
                // break
                continue
            }
            console.log(i)
        }
        // break:跳出循环
        // continue：跳出本次循环
    </script>
</body>
 
</html>

29-循环加强

<!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>
        let arr = [1, 2, 3, 66, 4, 5]
        // for  in
        // for (let i in arr) {
        //     console.log(arr[i])
        // }
        // for   of
        for (let k of arr) {
            console.log(k)
        }
 
    </script>
</body>
 
</html>

30-数组

<!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>
        // let name1 = '俊杰'
        // 有序的数据序列
        //             0         1         2           3       4     5
        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
        // 数组的声明方式
        // arr[索引下标]
        alert(arr[5])
 
 
        // let arr2 = new Array()
 
 
        // 数组遍历
        // for (let i in arr) {
        //     console.log(arr[i])
        // }
 
        // 数组的操作   
        // 通过索引下标给对应元素重新赋值
        arr[1] = 'guanyu'
        console.log(arr instanceof Array)
        let arr2 = [1, 2, 3, 4]
        // concat合并数组
        arr3 = arr.concat(arr2)
        console.log(arr3)
 
        // 增 push   在数组末尾添加
        arr.push('姜加')
 
 
        // unshift  在数组首部添加元素
 
        arr.unshift('jiangjia')
 
        arr.shift()
 
        arr.pop()
        // splice(删除的起始位置，删除的个数)
        arr.splice(3, 1)
        // splice(删除的起始位置，0,要添加的元素)
        arr.splice(3, 0, 'jiangjia')
        console.log(arr)
 
        console.log(arr.join(' **'))
        console.log(arr.reverse())
 
 
 
        console.log(arr.slice(3))
 
 
 
 
 
 
 
    </script>
</body>
 
</html>

31-二维数组

<!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>
        let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
 
        // console.log(student[1][0])
        for (let i in student) {
            for (let j in student[i]) {
                console.log(student[i][j])
            }
        }
 
 
        // student.length   获取数组长度的
    </script>
</body>
 
</html>

陶喆...
关注
AT指令，通信步骤【7天物联网 DAY5笔记】
Mountgao1的博客
05-12 686
学习笔记：百问网 7天物联网智能家居实战训练营 文章目录AT指令ESP8266ESP8266的三种模式查看手册发送指令通信步骤网络基础UDP连接流程 AT指令 ESP8266 在乐鑫官网查看芯片手册，下载AT指令集的文档 ESP8266的三种模式 Station 模式：日常手机或电脑的模式，作为一个设备节点，去连接路由器,WiFi。 SoftAP 模式（AP，Access Point，无线访问节点、会话点或存取桥接器）：热点模式，像手机热点，供其他设备连接。 SoftAP+Station 模式：前两种
新手小吴学习笔记day5
weixin_46275573的博客
02-03 445
save(a,file="test.RData")如果报错object a not found，应该考虑a没有被赋值。
计算机图形学day1笔记
qq_74962504的博客
07-26 488
引言
Python学习笔记 DAY6
Tulp123的博客
07-07 1707
分支和循环语句
Python学习笔记 DAY4
Tulp123的博客
07-04 439
浮点数floating point numbers。复数complex numbers。整数integers。
mysql-day02笔记
2401_84048290的博客
05-13 984
select语句中嵌套select语句，被嵌套的select语句称为子查询。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
C语言学习笔记Day5
Stella_DXJ的博客
04-02 3618
目录 练习1：猜数字游戏 练习2：将三个整数从大到小输出 练习3：打印1~100之间3的倍数 练习4：给定两个数，求这两个数的最大公约数 练习5：打印1000-2000年之间的闰年 练习5：打印100-200之间的素数 goto语句 练习1：猜数字游戏 1.自动产生一个1-100之间的随机数 2.猜数字 a.猜对了，就会恭喜你游戏结束 b.你猜错了，就会告诉猜大了，还是猜小了，继续猜，直到猜对为止 3.游戏一直玩，除非退出游戏 练习2：将三个整数从大到小输出 ...
C高级day5
weixin_57136489的博客
01-17 485
JAVA学习笔记DAY5
weixin_45924474的博客
11-21 328
ThinkPHP6学习笔记day02
m0_62286783的博客
05-27 455
算法笔记|Day5哈希表基础
m0_57632621的博客
07-23 2087
算法笔记|Day5哈希表基础
Struts2_day03笔记
12-22
学习Struts2第三天笔记
Day14笔记.xmind
08-24
Day14笔记.xmind
Udmey排名第一的Python课程 day1-day5的笔记
06-02
### Udmey排名第一的Python课程 day1-day5的笔记 #### Day 1: Python基础知识 - **打印功能**: 在Python中，`print()` 函数用于显示输出。它可以在屏幕上显示文本或变量的值。 ```python print('what to print')...
day5 java笔记.md
01-19
day5 java笔记.md
Window.history API学习笔记
常备不懈
11-12 630
在现代前端开发中，单页应用（SPA）的流行让我们对于页面的浏览历史管理需求愈加明显。`window.history` API作为浏览器提供的原生API，能够帮助开发者更加细致地控制用户的导航体验。本文将介绍`window.history` API的几个常见方法，并探讨它们的使用场景。
Spring学习笔记_32——事务TransactionStatus接口
LuckyLay的博客
11-12 293
TransactionStatus是Spring框架中用于表示事务状态的一个关键接口。它提供了一系列方法来查询和控制事务的执行状态，对于编程式事务管理尤为重要。TransactionStatus接口主要用来存储事务执行的状态，并且接口中定义了一组方法，用来判断或者读取事务的状态信息，
QT开发笔记之小知识
ZaiLuShang2121的博客
11-12 331
QT学习笔记 小知识点
计算机网络详细笔记【湖科大教书匠，内含B站链接】
最新发布
qq_25467441的博客
11-14 220
https://blog.csdn.net/weixin_45488428/article/details/115102326?ops_request_misc=%257B%2522request%255Fid%2522%253A%252228292A6B-6BE1-4A80-BEA2-234F3AA87798%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=28292A6B-6BE1-4A80-BEA2-2
谷粒学院day13笔记
09-04
谷粒学院day13笔记主要学习了关于数据可视化的内容。我们首先介绍了数据可视化的概念和作用，强调了它在数据分析和传达结果方面的重要性。然后，学习了Python中常用的数据可视化工具Matplotlib的用法。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值