jsjsjs

Orangeio

已于 2023-07-13 15:50:51 修改

阅读量401

点赞数

文章标签：前端

于 2023-07-12 01:29:44 首次发布

本文链接：https://blog.csdn.net/Orangeio/article/details/131672217

版权

1.js初体验

<body>
    <button>点击我变成粉色</button>
    <script>
        let btn = document.querySelector('button') 
        btn.addEventListener('click'， () => {
            btn.style.backgroundColor = 'pink'
        })
    </script>
</body>

</html>

2.js引入方式

```
<script></script>-----内部引入
```

外部js.js   <script src="./93-外部js.js">

<body>
<script>
    // 内部
    //prompt('请输入您的年龄:')
</script>

<!-- 外部 -->
<script src="./93-外部js.js">
</script>
</body>

3.输入输出语句

输入语句-----prompt('请输入您的密码:')

打印到页面-----document.write('天才')
可以识别标签-----document.write('<strong>天才</strong>')

输出到控制台-----console.log('天才')
警示框-------alert

<body>
<script>
//输入语句
prompt('请输入您的密码:')
//打印到页面//可以识别标签
document.write('<strong>天才</strong>')
//控制台输出语句//不识别标签
console.log('天才')
</script>
<body>

请添加图片描述

4.变量

变量：盒子----存储数据的容器数据本身不是变量
变量的声明： let 变量名； var 变量名（不用）

<script>
    //prompt('请输入您的年龄：')输入语句
    let age=prompt('请输入您的年龄：')------变量赋值
    console.log(age)-----控制台打印
    doucument.write(age)
</script>

变量初始化

let uname=prompt('请输入您的用户名：')
console.log(uname)------不要加''

同时定义多个变量

let uname='张三'，age= 21
console.log(uname，age)

5.变量命名规范

<script>
变量命名规范：
1.有效符号（大小写字母、数字、下划线、$）
2.关键字、保留字不能用于变量命名
3.不以数字开头
4.尽量用有意义的变量名
5.驼峰命名法    userName  
</script>

6.let和var的区别

var：可以多次声明同一变量

var先使用后声明，不报错
    <script>  
        console.log(age)
        var age
    </script>

let先使用后声明报错
<script>
        console.log(age)
        let age
    </script>

7.const常量

PI-----常量名大小写常量无法更改

 <script>
        const PI = 3.14-----能用const用const，如果后面变化用let
        // PI = 4.456-----报错 常量无法更改
        console.log(PI)
    </script>

8.数据类型

js是弱数据类型语言只有赋值之后，才知道是什么数据类型

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

9.基本数据类型—数字类型

<script>
let a=21
let b=33
console.log(a)------->21
console.log(a+2)----->23
console.log(a+b)----->54
console.log(a-b)---->-12
console.log(a*b)----->693
console.log(a/b)----->0.6363636364
console.log(a%2)----->21
</script>

10.字符串类

两个字符串

let uname1='nnsns'
console.log(typeof (uname1))-----查看数据类型
let uname2='nnsns'
console.log(typeof (uname2))

let uname3="nn'gouxin'sns"------''嵌套 外双中单
console.log(typeof(uname3))

let uname4='nn"douxin"sns'-----外单中双
console.log(typeof(uname4))

字符串拼接用+

alert警示框

let a= +prompt("请输入num1")
let b= +prompt("请输入num2")
alert(a+b)

模板字符串(可以识别标签)

let uname=prompt("请输入名字：")
let age=prompt("请输入年龄：")

效果相同
document.write('你叫' + uname + '，今年' + 'age' + '岁了')
document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)

11.布尔类型

console.log(typeof(3<5))----布尔类型
//undefinded  声明，未赋值
//null 空  NaN  not a number缩写NAN
console.log(undefined + 1)------结果：NAN
console.log(null + 1)-------结果：1

12.显示转换

<body>
    <script>
        字符串
        let a = prompt('num1')
        let b = prompt('num2')

        转化成数字类型方法：
      1.let a = prompt('num1')
        let b = prompt('num2') 
        console.log(Number(a) + Number(b))
        
      2.let a = +prompt('num1')
        let b = +prompt('num2') 
        console.log(typeof (+a))
        
      3.let a = +prompt('num1')
        let b = +prompt('num2') 
        console.log(Number(a) + Number(b))

        let c = '200.9875px'
        console.log(parseInt(c))-------200单独拿出来去掉后面跟的东西
        console.log(parseFloat(c))------浮点型200.9875单独拿出来去掉px
    </script>
</body>

13.综合案例

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

请添加图片描述

14.运算符

赋值运算符 = += -= /= *=
a++先给别人用再自增

++a先自增再给别人用
比较运算符> < >= <= == ===

==:（隐式转换）只比较数值，将字符串转换为数字类型后进行比较

===:既比较数值，也比较类型

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

15.逻辑运算符

&&：有0为0

||：有1为1

！：非

<body>
    <script>
        // &&     ||       !
        //  alert(4 > 3 && 3 < 5)  //两真为真，一假则假
        // alert(4 < 3 || 3 < 5)  //一真则真   全假则假
        // alert(!true)
        alert(!(4 < 3))
        
    </script>
</body>

16.单分支语句

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

17.双分支语句

let age = +prompt转换为数字类型

alert警示框

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

18.闰年

year % 4 === 0 && year % 100 !== 0 || year % 400 === 0

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

19.多分支语句

if------->else if-------->else

<body>
    <script>
        let age = +prompt('age：')
        if (age < 18) {
            alert('你是未成年 学习吧')
        } else if (age <= 25) {-------默认从18开始
            alert('青春年华')
        } else if (age <= 40) {
            alert('好汉不提当年勇')
        } else {
            alert('男人四十一枝花')
        }
    </script>
</body>

20.三元运算符

双分支的简写
成立：运行？后的
不成立：运行：后的

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

        // 判断条件？条件成立时执行的语句：条件不成立时执行的语句
        age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')
    </script>
</body>

21.求最大值

<body>
    <script>
        let a = +prompt('请输入num1：')
        let b = +prompt('请输入num2：')
        a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`)
    </script>
</body>

22.数字补零

2<‘3’ 数字和字符串比较时会自动把字符串转化成数字
alert(0 + a)数字和字符串相加会把数字转化成字符串2---->02

<body>
    <script>
        // alert(2 < '3')
        let a = prompt('num')
        a >= 10 ? alert(a) : alert(0 + a)
    </script>
</body>

23.switch语句

cace1：当你的num=1的时候
break：跳出循环

default:
      alert('你是外星人吗')-----没有符合条件的时候输出

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

24.while循环

while 一定要有终止条件
i = 10 不符合 i > 11 while不执行

<body>
    <script>
        // while   一定要有终止条件
        let i = 10-----定义变量
        while (i > 11) {
        console.log('你是大聪明')
        i--
         }
    </script>
</body>

i = 10不符合 i > 11 do while 不管死活先执行一次’你是大聪明’

<body>
    <script>
        let i = 10-----定义变量
        do {
            console.log('你是大聪明')
            i--
        } while (i > 11)
    </script>
</body>

25.while练习

<body>
    <script>
        // 1~100累加和
        let i = 0
        let sum = 0
        while (i < 101) {
            sum += i
            i++
        }
        alert(sum)
    </script>
</body>

26.for循环

<body>
    <script>
        for (let i = 1; i <= 10; i++) {
            document.write(`你真是个大聪明<br>`)
        }
    </script>
</body>

27.循环嵌套

display: inline-block水平显示列表项

<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>`);
            }---------<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>

请添加图片描述

28.continue、break

break:跳出循环
continue：跳出本次循环

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

29.循环加强

arr 数组名
for in 遍历数组 i 代表索引下标
for of 遍历数组 k 代表数组元素

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

30.数组

let arr：起变量名，可以是gouxin、12、true(布尔值)
索引下标从 0 开始，快速查找数组元素

<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])
        // }

        数组的操作  增删改查 
    改  1.通过索引下标给对应元素重新赋值
        arr[1] = 'guanyu'
        console.log(arr instanceof Array)--------instanceof Array判断arr是不是数组------console.log(typeof(arr))打印出是什么数组类型


        2.let arr2 = [1, 2, 3, 4]
        arr3 = arr.concat(arr2)----------concat合并数组，包含了gouxin，guanyu，jialuo，zhadanren，12，true，1，2，3，4
        console.log(arr3)

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

        4.unshift  在数组首部添加元素
        arr.unshift('jiangjia')
        console.log(arr)
        
    删  5.arr.shift() 在数组首部删除元素
        console.log(arr)

        6.arr.pop()  删除最后一个元素
        console.log(arr)
        
        7.splice(删除的起始位置，删除的个数)
        arr.splice(3, 1)
        
        8.splice(删除的起始位置，0,要添加的元素)
        arr.splice(3, 0, 'jiangjia')
        console.log(arr)

        console.log(arr.join(' **'))-------’ ‘里面以什么方式连接gouxin **guanyu **jialuo **jiangjia **12 **true
        console.log(arr.reverse())-----颠倒数组顺序
        console.log(arr.slice(3))------数组截取3指截取的长度
    </script>
</body>

请添加图片描述

31.二维数组

<body>                               0                      1
    <script>                0        1     2        0       1      2
        let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]

        // console.log(student[1][0])-----1指[],0指xuchao
        for (let i in student) {------------二维数组遍历
            for (let j in student[i]) {
                console.log(student[i][j])
            }
        }

        // student.length   获取数组长度的
    </script>
</body>555

作业

九九乘法表 for循环

<!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>Document</title>
    <style>
        span {
            display: inline-block;
            margin: 15px;
        }
    </style>
</head>
<body>
    <script>
        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/>`)
        }
    </script>
</body>
</html>

九九乘法表 while循环

<!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>Document</title>
</head>
<body>
    <script> 
    let i = 1; 
    while (i <= 9) { 
        let j = 1; 
        while (j <= i) {
            document.write(j+ '*' +i + '=' + j*i + '    ');
            j += 1; 
            }
            document.write("<br>")
            i += 1;
            }
    </script>
</body>
</html>