web前端学习Day5

最新推荐文章于 2024-09-30 15:42:36 发布
最新推荐文章于 2024-09-30 15:42:36 发布
阅读量39 收藏
点赞数
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75408313/article/details/131693950
版权

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>
    <script>
        let a= [1,2,3,4,5,6]
        // for in  获得数字下标
        for (let i in a) {
            console.log(a[i])
        }
        // for of  直接获得元素
        for (let j of a) {
            console.log(a[j])
        }
    </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>
        prompt('年龄')
        // 变量：盒子---存储数据的容器      数据本身不是变量
        // 变量的声明：
        // let 变量名     var  变量名 
        let age
        //  变量赋值
        age = prompt('年龄')

        age = 33
        console.log(age)


        // 变量的初始化
        let uname = prompt('用户名')
        console.log(uname)


        // 同时定义多个变量
        let p = 'p', q = 'q'
        console.log(p,q)


    </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、骆峰命名法    
    </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
        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
        let b = 33
        console.log(a)
        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 = 'ununue'
        // console.log(typeof(uname1))
        // let uname2 = "refref"
        // console.log(typeof(uname2))
        // let uname3 = 'sefv"efcsrfg"gdds'
        // console.log(typeof(uname3))


        // 字符串拼接用+

        // let a = prompt('输入un1')
        // let b = prompt('输入un2')
        // console.log(a + b)


        // 模板字符串
        let uname = prompt('uname')
        let age = prompt('age')
        // document.write('你叫' + uname + '今年' + age)
        document.write('你叫${uname},今年${age}')
    </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')
        // alert  警示框
        alert(a+b)

        console.log(Number(a) + Number(b))
        console.log(typeof (+a))

        let c = '200.125px'
        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>

    </style>
</head>
<body>
    <h2>订单确认</h2>
    <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>}</address></td>
        </tr>
    </table>
    <script>
        let price = +prompt('')
        let num = +prompt('')
        let address = +prompt('')
        console.log(`     `)
    </script>
</body>
</html>

14-运算符

<!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
        a = 33


        a += 4  // a = a + 4
        a *= 2  // a = a * 2
        a -= 3  // a = a - 3
        a /= 2  // a = a / 2
        alert(a)


        let b = a++  //先赋值，再自增
        alert(b)
        alert(a)
        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 = 19
        // 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('age')
        if(age <= 18) {
            alert('12345')
        }
        else {
            alert('54321')
        }
    </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>
        let year = prompt('year')
        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('123456')
        } 
        else if (age <= 25) {
            alert('654321')
        }
        else {
            alert('1111111')
        }
    </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('110')

        // 判断条件 ？ 条件成立时执行的语句：条件不成立时执行的语句
        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>
        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('1234')
        switch(num) {
            case 1:num
                alert('1')
                break
            case 2:num
                alert('2')
                break
            case 3:num
                alert('3')
                break
            case 4:num
                alert('4')
                break
            default:
                alert('4321')
        }
    </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(0 < i <= 10) {
        //     console.log('10086')
        //     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 = 0;i <= 10;i++) {
            console.log('')
        }
    </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(`  `)
        //     for(let j = 1;j < 11;j++) {
        //         console.log(`  `)
        //     }
        // }


        for(let i = 1;i < 10;i++) {
            for(let j = 1;j < 10;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)
        }
    </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 a= [1,2,3,4,5,6]
        // for in  获得数字下标
        for (let i in a) {
            console.log(a[i])
        }
        // for of  直接获得元素
        for (let j of a) {
            console.log(a[j])
        }
    </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 = '123'
        // 有序的数据序列
        //           0      1    2    3   4
        let arr = ['tian','di','ren',12,true]
        // 数组的声明方式
        // arr[索引下标]
        alert(arr[4])

        // let arr2 = new Array()

        // 数组遍历
        for(let i in arr) {
            console.log(arr[i])
        }

        // 数组的操作
        // 通过索引下标给对应元素重新赋值
        arr[2] = 'tudi'
        console.log(arr instanceof Array)
        let arr2 = [1,2,3,4]
        // concat 合并数组
        arr3 = arr.concat(arr2)
        console.log(arr3)

        // 增  push   在数组末尾添加
        arr.push('相加')
        console.log(arr)

        // unshift   在数组首部添加元素
        arr.unshift('相加')

        arr.shift()

        arr.pop()

        // splice（删除的起始位置，删除的个数）
        arr.splice(3,1)

        // splice（添加的起始位置，0，要添加的元素）
        arr.splice(3,0,'tidi')

        // join  添加一个把所有元素结合的元素
        console.log(arr)
    </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 = [['jia',31,'sing'],['chao',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>

无妄之灾|
关注
HY的Web前端周记 Day1
qq_51167539的博客
03-14 2470
HY的Web前端开发周记 Day1 引子 2021.3.04，信息管理创新实践课程开始学习。主要了解了关于HTML、CSS、JavaScript 的基本概念及其用途，并对html基础元素、属性有了一定的了解。运用了HBuilder作为开发环境，在Hbulider上面实践了我们的第一个专属网页：个人自我介绍页。以下是我对本次课程学习的总结。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML、CSS、JavaScript HTML 超文本标记语言（英语：HyperText Markup Langu
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 4009
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
快速学习web前端day1
javfen的博客
02-03 137
自主学习web前端
WEB前端学习日志Day5
bbbbbbxxx的博客
03-20 1201
WEB前端学习日志Day5 今日学习内容总结：通过一天的学习，主要学习了CSS选择符的权重问题，并对css层叠性做解释，也学习了CSS的文本属性，并且初步了解了浮动。 1.CSS选择符的权重 选择符的权重： id > class > 标签 首先通过四个数字表示权重： 内联样式表 -> 1000 id -> 100 class -> ...
WEB前端学习日志Day 1
bbbbbbxxx的博客
03-16 1300
WEB前端学习日志网页的组成网页的构成WEB标准计算机语言HTML的发展初次尝试VScode 网页的组成 1.网址（域名） 2.资源存储空间（租用空间）：服务器 3.项目制作：a.规划网站的资源，功能等 b.网站的设计，界面，交互 c.前端设计（承上启下） d.后端 e.联调，测试 f.上线 g.维护 网页的构成 网页的结构：网页中的文字，图片等 网页的表现：网页中的排版，文字的颜色等 网页的...
WEB前端学习day1-HTML
qq_44850230的博客
03-19 1414
HTML基础知识 1.HTML语法规范 <html> <head></head> <body></body> </html> <br/> 标签是尖括号包围的关键字。 通常是双标签，开始和结束标签，如<html>等； 也有单标签，如<br/> 也可写为<br> (转义标签用``) 2.网页初始化 DOCTYPE:声明文档类型 告诉浏览器使用哪种HTML版本来显示网页 lang：定义文档
前端学习day8
m0_46896340的博客
03-17 105
移动web学习 css总结
前端学习day10
m0_46896340的博客
03-22 77
移动web完结
Web安全学习day02
weixin_52445990的博客
01-18 2551
CSRF 1.什么是CSRF？ Cross-Site Request Forgery 跨站请求伪造 CSRF概念： CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解： 攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞
web前端期末大作业（附有源码）
热门推荐
m0_74087268的博客
12-28 1万+
这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS和JavaScript。选用VSCode作为开发环境和工具来说有诸多优势之处，也给设计前端时带来了诸多益处。首先，是VSCode智能代码提示和补全。VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。其次，VSCode拥有丰富的扩展生态系统。
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
根据提供的文件内容，下面是对“2020求知讲堂web前端（html5+css3）(Day1).pdf”文件中知识点的详细说明。 首先，课程大纲概述了前端开发所需掌握的技能和知识点，包括但不限于： 1. Photoshop：虽然主要是一款...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
Web前端基础day04.zip
08-19
在Web前端开发中，布局和定位是至关重要的概念，它们决定了网页元素的排列方式和位置。...在学习过程中，可以参考压缩包中的"day04"文件，它可能包含了相关的代码示例和练习，进一步加深对这些概念的理解。
Web前端基础day02.zip
08-12
内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用,这种写法学习使用较多,工作中使用较少 外部样式: 在单独的css样式文件中写样式代码,通过link标签引入,好处:可以多页面复用,可以将...
Web前端基础day03.zip
08-19
在Web前端开发中，盒子模型（Box Model）是理解页面布局和元素尺寸计算的关键概念。这个模型描述了HTML元素如何占据空间，包括元素的内容区域、内边距、边框和外边距。让我们深入探讨一下这些组成部分以及它们如何...
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 292
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 509
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 4572
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1107
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Web前端Day1学习笔记：关键概念与标签解析
"这是一份关于web前端学习的笔记，主要涵盖了HTML基础标签和属性的使用，包括文本格式化、链接、表格、列表、注释以及一些基本样式控制。" 在web前端开发中，HTML（HyperText Markup Language）是构建网页内容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值