web前端--javascript

password大鸭梨

已于 2023-07-30 11:40:20 修改

阅读量95

点赞数

分类专栏： Web前端文章标签： html 前端

于 2023-07-29 04:41:46 首次发布

本文链接：https://blog.csdn.net/m0_73163437/article/details/131989469

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day5

1.js引入方式

1.（内部）用script标签写入（要么在语句后都带分号，要么都不带）<script>内容</script>

2.（外部）<script src="js的外部地址"></script>

2.常用（js方式）

1.document.write('我是js插入的语句')--给html输出的语句

2.console.log('你真6')--控制台输出语句

3.alert('警告，你小子立即退出')--alert 警示框

4.prompt('请输入您的年龄')--输入语句输入框

3.变量

1.let uname--声明变量。let变量名（存储数据的容器）

2.uname = 'neirong'--给变量赋值（变量值可改变）--变量的初始化

3.console.log(age)--打印变量（不加引号）

4.改变变量（覆盖）
uname = '11'
uname = '22'
console.log(uname)

*变量表达式（声明的同时赋值）
let age = 18
console.log(age)

4.变量命名规范

1.有效符号（大小写的字母、数字、下划线、$）

2.关键字和保留字不能用于命名（例：function、const）

3.不要以数字开头

4.尽量使用有意义的单词

5.命名用小驼峰命名法或者下划线（例：XiAn xi_an）

5.var

var 不存在块级作用域可以先使用，后声明多次声明同一变量

console.log(uname)
var uname = '11'
（结果uname为空）

6.常量

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  常量名
        const GENDER = 'nv'
        // GENDER = '男'
        console.log(GENDER)
    </script>
</body>

</html>

7.基本数据类型--字符串

1.数据类型检验方法
2.字符串拼接
*（对于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>
        // 对于javascript弱数据类型语言，只有进行赋值了，才知道是什么数据类型

        // 字符串string类型   '  '             " "        
        let a
        a = 'nihao'
        // typeof  检测数据类型的方法
        console.log(typeof (a))



        let b = "欢迎你加入js "
        console.log(typeof (b))


        let c = "你是一本参不透的'书'"

        // 字符串的拼接  +
        let uname = 'zs'
        let age = 21


        document.write('姓名是：{uname}' + uname + '年龄是：' + age)


    </script>
</body>

</html>

8.模板字符串

(声明变量：单引号，双引号，反引号)

<!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 uname = prompt('请输入用户名：')
        let password = prompt('请输入密码：')
        document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)


        let a = `gouxin`
        console.log(typeof (a))



    </script>
</body>

</html>

9.其他类型

<!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 = 1
        // 布尔类型   true   false
        console.log(2 > 3)
        // undefined   未定义
        console.log(uname)
        var uname = 'zs'
        // null    空的
        // NAN   not a number   
        console.log(undefined + 1)   //nan
        console.log(null + 1)


    </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 a = 2
        let b = '3'
        console.log(a + b)
        // 显式转换(数字类型)    Number(str)      +
        let num1 = Number(prompt('请输入数字1'))
        let num2 = Number(prompt('请输入数字2'))

        let num3 = +prompt('请输入数字1')
        let num4 = +prompt('请输入数字2')
        console.log(num1 + num2)

        // parseInt（）整数    parseFloat（浮点数）   尽可能将字符串转换为数字类型
        let c = 3.1415826
        let d = '200.22px'
        console.log(parseInt(d))
        console.log(parseFloat(d))




    </script>
</body>

</html>

11.运算符（+、-、*、/、%求余、a++先赋值、++a先加）

<!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 = 3
        let b = 5
        // +  -  *   /    %    
        console.log(a + b)
        console.log(b - a)
        console.log(b * a)
        console.log(b / a)
        // %   取余
        console.log(b % a)


        a += 3       //a = a + 3
        console.log(a)
        a -= 3    //a = a - 3
        a *= 3
        a /= 3


        // 赋值运算符的优先级高于后减减，因此，先赋值，后运算
        // let c = b--
        // 自增  自减

        // 前减减的优先级大于赋值运算符，因此，先减减，再赋值
        let c = --b
        console.log(c)

        let d = c++
        console.log(d)
        console.log(c)  //5


        let f = ++c

        console.log(f)



    </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 = 4
        let b = 5
        console.log(a > b)
        console.log(a >= b)
        console.log(a < b)
        console.log(a <= b)
        console.log(a = b)   // =   赋值运算符
        console.log(3 == '3')   // == :等于    只判断值   有隐式转换，把字符串转换为数字类型
        console.log(3 === '3')  //===:全等      判断值、数字类型是否都一致







    </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>
</head>

<body>



    <script>
        // &&  :两真才真，一假则假
        console.log(3 > 2 && 2 > 4)
        // 或   ||  :  一真则真，两假才假
        console.log(3 > 2 || 2 > 4)

        // 非    ！  取反
        console.log(!(3 > 2))

    </script>
</body>

</html>

14.单分支语句（经典例子：if的一种条件）

<!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(判断条件){
        //     执行代码块
        // }


        if (age > 18) {
            alert('欢迎光临，你成年了~')
        }
    </script>

</body>

</html>

15.双分支语句（经典例子：if的两种条件）

<!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 (条件语句1) {
        //     执行代码块1
        // } else {
        //     执行代码块2
        // }


        if (age > 18) {
            alert('你成年了思密达~')
        }
        else {
            alert('小屁孩，边儿去~')
        }
    </script>
</body>

</html>

16.多分支语句（经典例子：if的多种条件）

<!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 score = +prompt('请输入你的成绩：')


        // if (条件1) {
        //     代码块1
        // }
        // else if (条件2) {
        //     代码块2
        // }
        // else if (条件三) {
        //     代码块3
        // } else {

        // }

        if (score <= 60) {
            alert('脑子呢？？')
        } else if (score <= 80) {
            alert('还不错，继续努力就及格了')

        }
        else if (score <= 120) {
            alert('再接再厉，牛的')
        } else {
            alert('你已经是大神了，慕白你')
        }
    </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>
        //   判断条件   ?    成立时执行的代码   :   不成立时执行的代码
        // 三元运算符    双分支的简写

        // if (3 > 5) {
        //     alert('这个世界疯了')
        // } else {
        //     alert('你是不是个der')
        // }

        3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')



    </script>
</body>

</html>

18.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 week = prompt('请输入今天星期几了')

        switch (week) {
            case "1":
                alert('今天星期一，猴子穿大衣~')
                break
            case "2":
                alert('今天星期二，猴子有点二')
                break
            case "3":
                alert("今天星期三，猴子去爬山")
                break
            case "4":
                alert("今天星期四，猴子要找事")
                break
            case "5":
                alert("今天星期五，猴子打老虎")
                break
            case "6":
            case "7":
                alert("今天周末，休假")
                break
            default://无符合条件时，执行的代码
                alert("你是猴子派来的救兵吧~~~")
                break


        }
    </script>
</body>

</html>

19.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>
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        // console.log('我爱你')
        for (let i = 0; i < 100; i++) {
            console.log('我爱你')
        }

    </script>
</body>

</html>

20.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>
        let i = 1
        while (i <= 10) {
            console.log(i)
            i++
        }
        // while (true) {
        //     let n = prompt('你爱我吗？')
        //     if (n === "爱") {
        //         break
        //     }
        // }
        alert(true === 1)
    </script>
</body>

</html>

21.do...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>


        // let i = 11
        // while (i <= 10) {
        //     console.log(i)
        //     i++
        // }
        let j = 11
        do {
            console.log(j)
            j++
        } while (j <= 10)
    </script>
</body>

</html>

22.break和continue

break 退出循环
continue 退出本次循环

<!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 < 100; i++) {
            if (i === 50) {
                continue   //退出本次循环
            }
            if (i === 70) {
                break//退出循环
            }
            console.log(i)
        }
    </script>

</body>

</html>

23.循环嵌套

<!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;
            background-color: pink;
        } */
    </style>
</head>

<body>
    <script>
        for (let i = 1; i < 8; i++) {
            console.log(`今天是第${i}天`);
            for (let j = 1; j <= 10; j++) {
                console.log(`这是我送的第${j}朵花`)
            }
        }


        for (let i = 1; i <= 5; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>*</span>`)
            }
            document.write(`<br/>`)
        }

    </script>
</body>

</html>

24.数组（存储多个数据的容器）

<!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 = ['gouxin', 'zs', 'ls', 'wmz', 1, 2, 3]
        arr[1] = '显眼包'
        console.log(arr[1])
        // let arr2 = new Array()

        // 常用的数组操作
        // push()    向数组末尾添加一个或多个元素的
        // arr.push(100, 22, 33, 'gouxinsimida')
        // console.log(arr)

        // unshift()
        arr.unshift(101, 102, 110, 120)
        console.log(arr)

        // pop()删除并返回数组的最后一个元素
        let b = arr.pop()
        console.log(arr)
        console.log(b)

        // shift()删除并返回数组的第一个元素
        let c = arr.shift()
        console.log(arr)
        console.log(c)

        //  [102, 110, 120, 'gouxin', '显眼包', 'ls', 'wmz', 1, 2]

        // splice()  删除元素  两个参数的时候，第一个参数代表要删除的元素的位置，第二个参数代表要删除几个
        arr.splice(2, 3)
        console.log(arr)  //[102, 110, 'ls', 'wmz', 1, 2]
        // splice()添加元素：第二个参数为0
        arr.splice(2, 0, 'gouxin', 'lixi', 1, 2, 3)
        console.log(arr)


        // concat()   连接两个或者多个数组的，并返回结果
        let arr1 = ['10086', '10010']
        let arr2 = ['1314', '4488']


        let arr3 = arr1.concat(arr2)
        console.log(arr3)
        console.log(arr1)


        // join()    把数组中所有的元素放在一个字符串里边，元素通过指定的分隔符进行拼接
        let str = arr1.join('#')
        // console.log(typeof (str))
        console.log(str)



        // reverse()  颠倒数组中元素的顺序  原来的数组改变
        let newArr = [22, 3, 12, 44, 33, 123]
        let n = newArr.reverse()
        console.log(n)
        console.log(newArr)//[123, 33, 44, 12, 3, 22]

        // sort()对数组的元素进行排序   按照utf码进行排序
        let f = newArr.sort()
        console.log(f)



        console.log(newArr.length)



        for (let i = 0; i < newArr.length; i++) {
            console.log(arr[i])
        }



    </script>
</body>

</html>

25.循环加强

for in 数组下标
for of 数组的具体值

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



    </script>
</body>

</html>

day6

1.函数

（完成待定功能的代码块精简代码、提高复用率）

<!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()
        // console.log()
        // parseInt()

        // getSum(2, 3)
        // 函数的声明方式  function   函数名(){代码块}
        function sayHi() {
            console.log('你好，function')
        }
        // 函数声明完成后，必须进行调用才能执行
        // 调用     函数名()
        sayHi()








    </script>
</body>

</html>

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>
</head>

<body>
    <script>

        // 函数小括号里用于接受实参的叫做形参
        function sayHi(msg) {
            console.log(`用户说:${msg}`)

        }



        // 函数调用时，传进去的参数，叫做实参
        sayHi('今天天气真好，狂风暴雨')




        // 求和函数
        function getSum(a, b) {
            console.log(a + b)
        }

        getSum(2, 3)
    </script>
</body>

</html>

3.函数的返回值

1.函数没有返回值，默认返回undefined
2.return 结束函数的作用，之后的代码不会再执行

<!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 = [11, 22, 12, 33, 4, 34]
        function getSum(arr) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            // console.log(sum)
            // 返回值：return   
            return sum
            // console.log('111')
        }
        // 函数没有返回值，默认返回undefined          return  结束函数的作用，之后的代码不会再执行
        let a = getSum(arr)
        document.write(a)
    </script>
</body>

</html>

4.值传递和引用传递（值和地址）

<!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 = 11
        let b = 22
        function change(x, y) {
            x = 21
            y = 33
        }
        change(a, b)
        console.log(a, b)




        // 数组：引用数据类型，将自己的地址传递给函数
        let arr = [1, 2, 3, 4, 5]
        function change2(arr) {
            arr.push(100)
        }
        change2(arr)
        console.log(arr)


    </script>

</body>

</html>