JavaScript基础

╰ 羁绊

已于 2023-08-06 10:22:36 修改

阅读量119

点赞数

文章标签： javascript 前端开发语言

于 2023-07-23 21:33:13 首次发布

本文链接：https://blog.csdn.net/qq_44957788/article/details/131800997

版权

js基础1

注释符和结束符

ctrl+/ 单行注释
alt+shift+a 块注释
注意： 结束符;可省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释和结束符</title>
</head>
<body>
    <script>      
    /*  单行注释 ctrL+/
    多行注释 alt+shift+a */
    // JS中结束符;可加可不加
    alert('第一句话');
    alert('第二句话');
    </script>
</body>
</html>

输入输出语法

输出
document.write(’ ‘)
alert(’ ‘)
console.log(’ ')
输入
prompt(’ ')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入输出语法</title>
</head>
<body>
    <script>
        // 1、文档输出内容
        document.write('我是div标签')
        document.write('<h1>我是标题</h1>')
        // 2、控制台打印输出，给程序员看
        console.log('看看对不对')
        console.log('日志')
        // 3、输入语句
        prompt('请输入您的年龄：')
    </script>
</body>
</html>

变量-“容器”

变量的基本使用

1、声明变量： let 变量名
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>
        // // 1、声明一个年龄的变量
        // let age
        // // 2、赋值,18是字面量
        // age=18
        // console.log(age)
        // let age = 18
        // console.log(age)
        // 小案例
        let num =20
        let uname = '张三'
        console.log(num)
        console.log(uname)
    </script>
</body>
</html>

变量的使用更新

let不允许重复声明

输入用户名案例

<!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、用户输入
    // prompt('请输入姓名')
    // 2、内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3、打印输出 
    document.write(uname)
    </script>   
</body>
</html>

交换两个变量案例

<!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 num1 = 10
        let num2 = 20
        let temp
        temp = num1
        num1 = num2
        num2 = temp
        console.log(num1, num2);
    </script>
</body>
</html>

变量的命名规范

注意：
1、数字不能开头
2、只允许出现$和_符号
3、起名要见名之义-小驼峰命名法

<!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 11=11
        let num1$_ =11
        //let nav-bar = 11
    </script>
</body>
</html>

输入姓名年龄案例

<!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 age=prompt('请输入您的年龄：')
        let gender=prompt('请输入您的性别：')
        document.write(uname, age, gender)
    </script>
</body>
</html>

var和let的区别

<!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 num
    // console.log(num);
    // var num = 10
    // num=10
    // console.log(num)
    // var num
    // var num=10
    // var num=20
    // console.log(num)
    num=10
    console.log(num)
    let num
   </script> 
</body>
</html>

变量拓展-数组

体验数组

<!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 = [10, 20, 30]
        // 1、声明数组
        let arr = ['刘德华', '张学友', '黎明', '郭富城']
        // 2、使用数组 数组名+[索引号] 从0
        // console.log(arr)
        // console.log(arr[0])
        // console.log(arr[2]);
        //数组的长度=索引号+1
        // 3、数组的长度
        console.log(arr.length);
        
    </script>
</body>
</html>

数组取值案例

<!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 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        console.log(arr[6]);
    </script>
</body>

常量-永远不会改变的值

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>
        // 1、常量不允许更改值
        // const PI=3.14
        // console.log(PI)
        // PI=3.15
        // console.log(PI)
        // 2、常量声明的时候必须赋值
        // const PI
    </script>
</body>
</html>

数据类型

数字类型

基本数据类型：数字类型（Number）、
引用数据类型：object对象
优先级：乘、除、取余 > 加减

<!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 num = 'pink'
        // console.log(num)
        console.log(1 + 1)
        console.log(1 * 1)
        console.log(1 / 1)
        console.log(4 % 2)
        console.log(5 % 3)
        console.log(3 % 5)
        // java 强数据类型的语言
    </script>
</body>
</html>

计算圆的面积案例

<!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、页面弹出输入框
        let r = prompt('请输入圆的半径')
        // 2、计算圆的面积《内部处理》
        let result = 3.14*r*r
        // 3、页面输出
        document.write(result)
    </script>
</body>
</html>

数据类型——NaN

NaN不是一个数字，代表计算错误。
NaN是粘性的，任何对NaN的操作都会返回NaN

数据类型-字符串类型（string）

<!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 str = 'pink'
        // let str1 = "pink"
        // let str2 = `中文`
        // console.log(str2)
        // console.log(11)
        // console.log(`11`)
        // console.log(str)
        // console.log('str')
        // console.log('pink老师讲课非常有"激情"')
        // console.log('pink老师讲课非常有\'激情\'')
        // 字符串拼接
        // console.log(1 + 1)
        // console.log('pink'+'老师')
        let age = 18
        document.write('我今年'+ age + '岁了')
    </script>
</body>
</html>

数据类型-模板字符串---->拼接字符串

必须使用反引号

``

<!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 = 18
        // 模板字符串 外面用`` 里面用${变量名}
        document.write(`我今年${age}岁了`)
    </script>
</body>
</html>

页面输出用户信息案例

<!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 age = prompt('请输入您的年龄：')
        // 输出
        document.write(`大家好，我叫${uname}，我今年贵庚${age}岁了`)
    </script>
</body>
</html>

数据类型-布尔类型（boolean）

true / false

数据类型-未定义类型（undefinied）

数据类型-null（空类型）

null作为尚未创建的对象

<!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、布尔型自变量
        console.log(3 > 4)
        let isCool = true
        console.log(isCool)
        // 2、未定义变量 弱数据类型 声明一个变量未给值
        let num
        console.log(num)
        // 3、null空
        let obj = null
        console.log(obj)
        // 计算有区别
        console.log(undefined + 1)
        console.log(null + 1);
    </script>
</body>
</html>

检测数据类型

typeof x
typeof(x)

<!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 = 10
        console.log(typeof num)
        let str = 'pink'
        console.log(typeof str)
        let str1 = '10'
        console.log(typeof str1)
        let flag = false
        console.log(typeof flag)
        let un
        console.log(typeof(un))
        let obj = null
        console.log(typeof obj)
    </script>
</body>
</html>

数据类型转换

隐式转换

加号坐标只要有一个字符串，会自动将另一个转换为字符串
减号，乘号，除号看数字

<!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(1 + 1)
        console.log('pink'+1)
        console.log(2 +2)//0
        console.log(2 + '2')//22
        console.log(2 - 2)
        console.log(2 - '2')
        console.log(+12)
        console.log(+'123') //转换为数字型
    </script>
</body>
</html>

显示转换

Number（数据）
parseInt （数据）—只保留整数
parseFloat （数据）—只保留小数

<!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>
        .box{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <script>
        let str = '123'
        console.log(Number(str))
        console.log(Number('pink'))
        // let num = Number(prompt('输入年薪'))
        // let num = +(prompt('输入年薪'))
        // console.log(Number(num))
        // console.log(num)
        console.log(parseInt('12px'))
        console.log(parseInt('12.34px'))
        console.log(parseInt('abc12.94px'))
        console.log(parseFloat('12px'))
        console.log(parseFloat('12.34px'))
        console.log(parseFloat('abc12.94px'))
    </script>
</body>
</html>

计算两个数的和案例

<!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、用户输入 prompt得到的是字符串型
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        // 2、输出
        alert(`两个数相加的和是：${num1+num2}`)
    </script>
</body>
</html>

综合案例-用户订单信息

<!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>
        // 1、用户输入
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        // 2、计算总价
         let total = price*num
        // 3、页面打印渲染
        document.write(`
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米手机青春PLUS</td>
                    <td>${price}元</td>
                    <td>${num}</td>
                    <td>${total}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `)
    </script>
</body>
</html>

js基础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>
        let num = 1
        // num = num + 1 
        num += 3
        console.log(num) 
    </script>
</body>
</html>

一元运算符

如正负
自增：++ 让变量值+1
自减：-- 让变量值-1
前置自增++i（先自加再使用）
后置自增I++（先使用再自加），使用的多
单独使用没有区别

<!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 = 10
        // num = num + 1
        // num += 1
        // 1、前置自增
        let i = 1
        // console.log(++i + 1)
        console.log(i++ + 1)
        // i++
        // console.log(i)
    </script>
</body>
</html>

比较运算符

=== 左右两边值是否类型和值都相等（开发中强烈建议使用）
NaN不等于任何值，包括它本身
不同类型之间比较会发生隐式转换

<!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(2 == '2')//比较运算符会发生隐式转换
        console.log(2 === '2')
        console.log(undefined === null)
        console.log(NaN === NaN)
        console.log(2 !== '2')
        console.log('a' < 'b')
        console.log('aa' < 'ab')
        console.log('aa' < 'aac')
    </script>
</body>
</html>

逻辑运算符

<!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(true && true)
        console.log(false && true)
        console.log(3<5 && 3 > 2)
        console.log(3<5 && 3 < 2)
        console.log('----------')
        // 逻辑或 一真则真
        console.log(true || true)
        console.log(false || true)
        console.log(false || false)
        console.log('----------')
        // 逻辑非
        console.log(!true)
        console.log(!false)
        console.log('----------')
        let num = 2
        console.log(num > 5 && num < 10)
    </script>
</body>
</html>

逻辑运算符案例

<!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、用户输入
        let num = +prompt('请输入一个数字：')
        // 2、弹出结果
        alert(num % 4 === 0 && num % 100 !== 0)
    </script>
</body>
</html>

运算符优先级

小括号 > 一元运算符（++ – ！）> 算数运算符（先乘除取余后加减）> 关系运算符（> >= < <=）> 相等运算符（== != === !==）> 逻辑运算符（先与后或）> 赋值运算符 > 逗号运算符

语句

表达式和语句

表达式可以求值，所以写在赋值语句的右侧
语句不一定有值，是一段可以执行的代码

分支语句

有选择性的执行想要的代码

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>
        // 单分支语句
        // if (true) {
        //     console.log('执行语句')
        // }
        // if (false) {
        //     console.log('执行语句')
        // }
        // 除了0 所有的数字都为真
        // if (2) {
        //     console.log('执行语句')
        // }
        // if ('pink老师') {
        //     console.log('执行语句')
        // }
        // 空字符串当假
        // if ('') {
        //     console.log('执行语句')
        // }
        // 1、用户输入
        let score = +prompt('请输入成绩：')
        // 2、进行判断输出
        if (score >= 700) {
            alert('恭喜考入黑马程序员')
        }
    </script>
</body>
</html>

双分支语句

<!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、用户输入
    let uname = prompt('请输入用户名：')
    let pwd = prompt('请输入密码：')
    //    2、判断输出 
    if (uname === 'pink' && pwd === '123456') {
        alert('登录成功')
    }else{
        alert('用户名或者密码错误')
    }
    </script>
</body>
</html>

闰年案例

<!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、用户输入
        let year = prompt('请输入年份：')
        // 2、判断输出
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
            alert(`${year}是闰年`)
        }else{
            alert(`${year}是平年`)
        }
    </script>
</body>
</html>

多分支语句

<!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、用户输入
        let score = +prompt('请输入成绩：')
        // 2、判断输出
        if (score >= 90) {
         alert('成绩优秀')   
        }else if (score >= 70){
         alert('成绩良好')   
        }else if(score >= 60){
        alert('成绩及格')   
        }else{
        alert('成绩不及格')   
        }
    </script>
</body>
</html>

三元操作符

条件？满足条件执行的代码：不满足条件执行的代码

<!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 > 5 ? 3 : 5)
        // if (3 < 5) {
        //     alert('真的')
        // }else{
        //     alert('假的')
        // }
        // 3 < 5 ? alert('真的') : alert('假的')

        let sum = 3 < 5 ? 3 : 5
        console.log(sum)
    </script>
</body>
</html>

取最大值案例

<!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、用户输入
        let num1 = +prompt('请您输入第一个数：')
        let num2 = +prompt('请您输入第二个数：')
        // 2、判断输出
        // if (num1 > num2) {
        //     alert(num1)
        // }else{
        //     alert(num2)
        // }
        num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)
    </script>
</body>
</html>

数字补0案例

<!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、用户输入
        let num = prompt('请您输入一个数字：')
        // 2、判断输出 - 小于10才补0
        num = num < 10 ? 0 + num : num
        alert(num)
    </script>
</body>
</html>

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>
        switch(4){
            case 1:
            console.log('您选择的是1')
            break //推出switch
            case 2:
            console.log('您选择的是2')
            break //推出switch
            case 3:
            console.log('您选择的是3')
            break //推出switch
            default:
            console.log('没有符合条件的');
        }
    </script>
</body>
</html>

简单计算器案例

<!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个数字+1个操作符号
        let num1 = +prompt('请你输入第一个数字：')
        let num2 = +prompt('请你输入第二个数字：')
        let sp = prompt('请你输入 + - * / 其中的一个：')
        // 2、判断输出
        switch(sp){
            case '+':
                alert(`两个数的加法操作是${num1 + num2}`)
                break
            case '-':
                alert(`两个数的加法操作是${num1 - num2}`)
                break
            case '*':
                alert(`两个数的加法操作是${num1 * num2}`)
                break
            case '/':
                alert(`两个数的加法操作是${num1 / num2}`)
                break
            default:
                alert('请输入加减乘除：')
        }
    </script>
</body>
</html>

循环语句

断点提示

while循环

while循环就是在满足条件期间，重新执行某些代码
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、变量的起始值
        // let i = 1
        // // 2、终止条件
        // while(i <= 3 ){
        //     document.write('我要循环3次 <br>')
        //     i++
        // }
        // // 3、变量的变化量
        // 1、变量的起始值
        let end = +prompt('请输入次数：')
        let i = 1
        // 2、终止条件
        while(i <= end ){
            document.write('我要循环3次 <br>')
            i++
        }
        // 3、变量的变化量
    </script>
</body>
</html>

循环打印案例

<!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、页面输出1-100
        // let i = 1
        // while(i <= 100){
        //     document.write(`这是第${i}个数<br>`)
        //     i++
        // }
        // 2、页面输出1-100的总和并输出
            // let i = 1
            // let sum = 0
            // while(i <= 100){
            //     sum += i
            //     i++
            // }
            // console.log(sum)
        // 3、页面输出1-100的累加偶数和
        let i = 1
        let sum = 0
        while(i <= 100 ){
            if(i % 2 === 0){
                sum += i
            }
            i++
        }
        console.log(sum)
    </script>
</body>
</html>

循环推出

continue和break的区别
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>
        // let i = 1
        // while(i <= 5){
        //     if(i === 3){
        //         break
        //     }
        //     console.log(`我要吃第${i}个包子`)
        //     i++
        // }
        let i = 1
        while(i <= 5){
            if(i === 3){
                i++
                continue
            }
            console.log(`我要吃第${i}个包子`)
            i++
        }
    </script>
</body>
</html>

综合案例-简易ATM取款机案例

<!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、开始循环 输入框写到 循环里面
        // 3、准备总金额
        let money = 100
        while(true){
            let re = +prompt(`请您选择操作：
                1.存钱
                2.取钱
                3.查看余额
                4.退出
                `)
            // 2、如果用户输入的是4 则退出循环
            if (re === 4) {
                break
            }
            // 4、根据输入做操作
            switch (re) {
                case 1:
                    // 存钱
                    let cun = +prompt('请输入存款金额：')
                    money += cun
                    break;
                case 2:
                    // 取款
                    let qu = +prompt('请输入取款金额：')
                    money -= qu
                    break
                case 3:
                    // 查看金额
                    alert(`您的银行余额为${money}`)
                    break
                default:
                    break;
            }
        }
    </script>
</body>
</html>

js基础3

for 循环用来遍历

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 <= 3; i++) {
            document.write('月薪过万<br>')
        }
    </script>
</body>
</html>

<!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++) {
        //     document.write(`今年我${i}岁了<br>`)    
        // }
        // let sum = 0
        // for (let i = 0; i <= 100; i++) {
        //     if (i % 2 === 0) {
        //         sum += i
        //     }
        // }
        // document.write(sum)
        // for (let i = 1; i <= 5; i++) {
        //     document.write('*')
            
        // }
        // 4、打印数组
        let arr = ['刘德华', '刘小强', '刘晓庆', '刘若英', '刘热巴', 'pink老师']
        // for (let i = 0; i <= arr.length - 1; i++) {
        //     console.log(arr[i])
        // }
        // 必须从0开始 因为数组的索引号从0开始
        for(i = 0;i < arr.length;i++){
            console.log(arr[i])
        }
    </script>
</body>
</html>

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 <= 5; i++) {
        //     if (i === 3) {
        //         continue//不再执行本次循环后面的语句
        //     }
        //    console.log(i) 
        //    document.write(i)
        // }
        for (let i = 1; i <= 5; i++) {
            if (i === 3) {
                break//退出整个循环，结束循环
            }
           console.log(i) 
           document.write(i)
        }
    </script>
</body>
</html>

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>
    //    外层循环打印第n天
    for (let i = 1; i <= 3; i++){
        document.write(`第${i}天<br>`)
        // 里层循环打印第n个单词
        for (let j = 1; j <= 5; j++){
            document.write(`记住了第${j}个单词<br>`)
        }
    }
    </script>
</body>
</html>

打印星星案例

<!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(i = 1; i <= 5; i++){
        //     // 里层循环打印几个星星
        //     for (let j = 1; j <= 5; j++) {
        //         document.write('$')
        //     }
        //     // 进行换行显示
        //     document.write('<br>')
        // }
        let row = +prompt('请输入行数:')
        let col = +prompt('请输入列数:')
         // 外层循环打印行数
         for(i = 1; i <= row; i++){
            // 里层循环打印几个星星
            for (let j = 1; j <= col; j++) {
                document.write('$')
            }
            // 进行换行显示
            document.write('<br>')
        }
    </script>
</body>
</html>

<!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. 外层循环打印行数
        for(let i = 1; i <= 5; i++){
            // 2. 里层循环打印列数
            for (let j = 1; j <= i; j++) {
                document.write('&')
            }
            // 换行
            document.write('<br>')
        }
    </script>
</body>
</html>

九九乘法表

<!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;
            width: 100px;
            padding: 5px 10px;
            border: 1px solid #000;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgb(255, 192, 203, .4);
            background-color: rgb(255, 192, 203, .1);
            text-align: center;
            color: hotpink;
        }
    </style>
</head>
<body>
    <script>
        // 1. 外层循环打印行数
        for(let i = 1; i <= 9; i++){
            // 2. 里层循环打印列数
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j} X ${i} = ${i*j}</span>`)
            }
            // 换行
            document.write('<br>')
        }
    </script>
</body>
</html>

数组

数组是一种数据类型

声明数组
获取数据

数组求和及平均值

<!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 = [2, 6, 1, 7, 4]
        // 1. 求和的变量 sum
        let sum = 0
        // 2. 遍历累加
        for(let i = 0; i < arr.length; i++){
            // console.log(arr[i])
            sum += arr[i]
        }
        console.log(`数组的和的结果是${sum}`)
        // 3. 平均值 和/arr.length  = 4
        console.log(`数组的平均值是: ${sum / arr.length}`)
    </script>
</body>
</html>

求数组最大值和最小值

<!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 = [2, 6, 1, 7, 400, 55, 88, 100]
        let max = arr[0]
        let min = arr[0]
        // 遍历数组
        for(let i = 1; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i]
            }
            if(min > arr[i]){
                min = arr[i]
            }
        }
        // 输出max
        console.log(max)
        console.log(min)
    </script>
</body>
</html>

操作数组

操作数组-修改

!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 = []
        // console.log(arr)
        // // console.log(arr[0])
        // arr[0] = 1
        // arr[1] = 5
        // console.log(arr)
        let arr = ['pink', 'red', 'green']
        // 修改
        // arr[0] = 'hotpink'
        // 给所有数组元素后面加老师
        for (let i = 0; i < arr.length; i++) {
            // console.log(arr[i])
            arr[i] = arr[i] + '老师'
        }
        console.log(arr)
    </script>
</body>
</html>

数组操作-新增

数组.push：往后面添加元素，并返回该数组的新长度
数组.unshift：往前面添加元素，并返回该数组的新长度

<!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 = ['pink', 'hotpink']
        // 新增 push 推
        // arr.push('deepink', 'lightpink')
        // console.log(arr)
        arr.unshift('red')
        console.log(arr)
    </script>
</body>
</html>

数组筛选案例

<!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 = [2,0,6,77,9,54,3,78,7]
        // 1、声明新数组
        let newArr = []
        // 2、遍历旧数组
        for (let i = 0; i < arr.length; i++) {
            if(arr[i] >= 10){
                // 3、满足条件的追加给新数组
                newArr.push(arr[i])
            }
        }
        // 4、输出一个新的数组
        console.log(newArr)
    </script>
</body>
</html>

数组去0案例

<!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 = [2,0,6,1,77,0,52,0,25,7]
        let newArr = []
        for(i = 0; i < arr.length; i++){
            if(arr[i] !== 0){
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>
</body>
</html>

数组操作-删除

数组.pop：从数组中删除最后元素，并返回该元素的值
数组.shift：删除第一个元素，并返回该元素的值
数组.splice：可以删除指定元素
arr.splice(起始位置，删除几个元素)

<!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 = ['red', 'green', 'blue']
        // 1、删除最后一个
        // console.log(arr.pop()) //blue
        // arr.pop()
        // arr.pop()
        // console.log(arr)
        // 2、删除第一个元素
        // arr.shift()
        // console.log(arr)
        // 3、splice() 删除指定元素
        // arr.splice(1)从green 删除到最后
        arr.splice(1, 1) //从索引号为1的位置开始删，删除一个元素
        console.log(arr)
    </script>
</body>
</html>

综合案例-根据数据生成柱形图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>
    
      
    <script>
        // 1、四次弹框效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++){
            // let num = prompt(`请输入第${i}季度的数据：`)
            // arr.push(num)
            arr.push(prompt(`请输入第${i}季度的数据：`))
        }
        // console.log(arr)
        // 盒子开头
        document.write(`<div class="box">`)

        // 盒子中间 利用循环的形式 跟数组有关系
        for(i = 0; i < arr.length; i++){
            document.write(`  
            <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
            </div>
        `)
        }

        // 盒子结尾
        document.write(`</div>`)

    </script>
</body>

</html>

js基础4

函数-执行特定任务的代码块

函数的使用-实现了代码复用

function(){

}

函数的声明
命名规范
小驼峰、前缀尽量为动词、常用动词约定
函数的调用语法

<!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、求两个数的和
        // function getSum(){
        //     let num1 = +prompt('请输入第一个数：')
        //     let num2 = +prompt('请输入第二个数：')
        //     console.log(num1 + num2)
        // }
        // getSum()
        // 2、求1~100累加和
        function getSum(){
            let sum = 0
            for (let i = 1; i <= 100; i++) {
                sum += i                
            }
            console.log(sum)
        }
        getSum()
    </script>
</body>
</html>

函数传参-提高了函数的灵活性

function(参数列表){
}

<!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 getSum(num1 = 0, num2 = 0) {
            // num1 默认的值 undefined
            document.write(num1 + num2)
        }
        getSum(1, 2)  //3
        getSum()  //0
        //  function getSum(start, end){
        //     // 形参
        //     // console.log(end)
        //     let sum = 0
        //     for (let i = start; i <= end; i++) {
        //         sum += i                
        //     }
        //     console.log(sum)
        // }
        // getSum(1, 50)//实参 -实际的参数
        // getSum(100, 200)
    </script>
</body>
</html>

函数封装数组求和案例

<!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. 封装函数
        // 给一个参数的默认值
        function getArrSum(arr = []){
            // console.log(arr)
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            console.log(sum);
        }
        getArrSum([11, 22, 33])
        getArrSum()
    </script>
</body>
</html>

实参可以是变量

<!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>
        // 求n到m的累加和
        function getSum(n = 0, m = 0){
            let sum = 0
            for(i = n; i <= m; i++){
                sum += i
            }
            console.log(sum)
        }
        // getSum()
        // getSum(1, 2)
        let n = +prompt('请输入起始值:')
        let m = +prompt('请输入结束值:')
        getSum(n, m)//实参可以是变量
    </script>
</body>
</html>

函数的返回值-把处理结果返回给调用者，也可以让其他程序使用这个结果

可以将函数内部的值交给外面使用
return后面的代码不会被执行
return不要换行
return函数可以没有return，结果是undefinied

<!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 fn(){
        //     return 20
        // }
        // // console.log(fn())
        // let re = fn()
        // console.log(re)
        // 函数求和
        function getTotalPrice(x, y){
            return x + y
        }
        let sum = getTotalPrice(1, 2)
        console.log(sum)
        console.log(sum)
    </script>
</body>
</html>

求数组最大值和最小值

<!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. 求函数的最大值
        // function getMax(x, y){
        //     return x > y ? x : y
        // }
        // let max = getMax(11, 223)
        // console.log(max)
        // 2. 求任意数组的最大值, 并且返回
        // function getArrValue(arr){
        //     // (1)先准备一个max变量存放数组的第一个值
        //     let max = arr[0]
        //     // (2)遍历比较
        //     for(let i = 1; i < arr.length; i++){
        //         if(max < arr[i]){
        //             max = arr[i]
        //         }
        //     }
        //     // (3)返回值
        //     return max
        // }
        // let max = getArrValue([11, 3, 55, 7, 9])
        // console.log(max)
        // 3. 求任意数组的最大值和最小值,并且返回值
        function getArrValue(arr){
            // (1)先准备一个max变量存放数组的第一个值
            let max = arr[0]
            let min = arr[0]
            // (2)遍历比较
            for(let i = 1; i < arr.length; i++){
                if(max < arr[i]){
                    max = arr[i]
                }
                if(min > arr[i]){
                    min = arr[i]
                }
            }
            // (3)返回值
            return [max, min]
        }
        let newArr = getArrValue([11, 3, 55, 7, 9])
        console.log(`数组的最大值是:${newArr[0]}`)
        console.log(`数组的最小值是:${newArr[1]}`)
    </script>
</body>
</html>

<!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 getSum(x, y){
        //     return x + y
        // }
        // let result = getSum(1, 2)
        // console.log(result)
        // 1. 两个相同的函数后面会覆盖前面的
        function fn(){
            console.log(1)
        }
        function fn(){
            console.log(2)
        }
        fn()
        // 2. 参数不匹配
        function fn(a, b){
            console.log(a + b)
        }
        // (1)实参多余形参 剩余的实参不参与运算
        fn(1, 2, 3)
        // (2)实参少余形参
        fn(1) //1 + undefinied = NaN
    </script>
</body>
</html>

进行函数内部执行F11

作用域-提高了逻辑的局部性，增强了程序的可靠性，减少了名字冲突

全局作用域
局部作用域

<!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 = 10  //1. 全局变量
        console.log(num)
        function fn() {
            console.log(num)
        }
        fn()
        // 2. 局部变量
        function fun(){
            let str = 'pink'
        }
        console.log(str) //错误
    </script>
</body>
</html>

特殊情况：

<!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 = 20
        // function fn(){
        //     num = 10 //全局变量来看 强烈不允许
        // }
        // fn()
        // console.log(num)

        // function fun(x, y) {
        //     //形参可以看作是函数的局部变量
        //     console.log(x)
        // }
        // fun(1, 2)
        // console.log(x) //错误
        // let num = 10
        function fn(){
            // let num = 20
            function fun() {
                // let num = 30
                console.log(num)
            }
            fun()
        }
        fn()
    </script>
</body>
</html>

变量的访问原则：采取就近原则

匿名函数

具名函数
匿名函数
没有名字的函数，无法直接使用
使用方式：
1、函数表达式
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>
        // 1、函数表达式
        fn(1, 2) //错误
        let fn = function (x, y) {
            // console.log('我是函数表达式')
            console.log(x + y)
        }
        fn(1, 2)

        // 函数表达式和具名函数的不同 function() {}
        // 1、具名函数的调用可以写到任何位置
        //2、函数表达式，必须先声明表达式，后调用
        function fun() {
            console.log(1)
        }
        fun()
    </script>
</body>
</html>

立即执行函数

场景：避免全局变量的污染
注意：不同立即执行函数必须用**分号；**分隔

<!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 = 10
        // let num = 20
        // (function(){
        //     console.log(11)
        // })()
        // (function(){
        //     let num = 10
        // })();
        // (function(){
        //     let num = 20
        // })()
        // 1. 第一种写法
        (function (x, y) {
            console.log(x + y)
        })(1, 2);
        // 2. 第二种写法
        (function(x, y){
            console.log(x + y);
        }(1, 3));
       // (function(){})();
       // (function(){}());
    </script>
</body>
</html>

综合案例-转换时分秒

<!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、用户输入
        let second = +prompt('请输入秒数：')
        // 2、封装函数
        function getTime(t) {
            console.log(t)//总秒数
            // 3、转换
            // 小时：h = parseInt(总秒数 / 60 / 60 % 24)
            // 分钟：m = parseInt(总秒数 / 60 % 60)
            // 秒数：s = parseInt(总秒数 % 60)
            let h = parseInt(t / 60 / 60 % 24)
            let m = parseInt(t / 60 % 60)
            let s = parseInt(t % 60)
            // 补0
            h = h < 10 ? '0' + h: h
            m = m < 10 ? '0' + m: m
            s = s < 10 ? '0' + s: s
            // console.log(h, m, s)
            return `转换完毕之后是${h}小时${m}分${s}秒`
        }
        let str = getTime(second)
        document.write(str)
    </script>
</body>
</html>

逻辑中断

短路

只存在于&& 和||中，当满足一定条件会让右边代码不执行

<!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 fn(x, y){
            x = x || 0
            y = y || 0
            console.log(x + y)
        }
        fn(1, 2)
        // fn()
        // console.log(false && 3 + 5)
        // let age =18
        // console.log(false && age++) //age++不执行 一假必假
        // console.log(age)
        // console.log(11 && 22) //都是真,则返回最后一个真值
        // console.log(11 || 22) //输出第一个真值
    </script>
</body>
</html>

转换为Boolean型

显示转换：
1.Boolean（内容）
’ '、0、undefinied、null、false、NaN转换为布尔值后都是false，其余则为true
隐式转换：
1、有字符串的加法" " + 1，结果是1
2、减法 - （像大多数数学运算一样）只能用于数字，会使空字符串" "转换为0
3、null经过数字转换之后会变为0
4、undefinied经过数字转换之后会变为NaN
null == NaN （正确）

js基础5

对象object（一种数据类型）-无序的数据集合

认识对象

let 对象名 = { }，{ }是对象字面量
对象由属性和方法组成

<!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、声明对象
        let pink = {
            uname: 'pink老师',
            age: 18,
            gender: '女'
        }
        console.log(pink)
        console.log(typeof pink)
    </script>
</body>
</html>

对象的使用

增删改查

属性-查：
对象.属性
属性-改：
对象名.属性 = 新值
属性-增：
没有就是新增，有就是改
对象名.属性 = 新值
属性-删：
delete 对象名.属性

<!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 pink = {
        //     uname: 'pink老师',
        //     age: 18,
        //     gender: '女'
        // }
        // // 把性别的女改为男
        // pink.gender = '男'
        // console.log(pink)
        // pink.hobby = '足球'
        // console.log(pink)
        // delete pink.age
        // console.log(pink)
        // 1、声明
        // console.log(window.name)
        let goods = {
            'goods-name': '小米10青春版',
            num: 100012816024,
            weight: '0.55kg',
            address: '中国大陆'
        }
        // console.log(address)
        // 2、使用属性 查 对象名.属性名
        // console.log(goods.address)
        // console.log(goods.name)
        // 修改
        goods.name = '小米10PLUS'
        goods.color = '粉色'
        console.log(goods)
        // console.log(goods.goods - name)
        // 查的另外一种属性
        // 对象名['属性名']
        console.log(goods['goods-name']);
        // console.log(goods.name)
        console.log(goods.num)
        console.log(goods.weight)
        console.log(goods.address)
        console.log(goods.color)
        // 查 总结
        // 1、对象名.属性名 obj.age
        // 2、对象名['属性名'] obj['age']
    </script>
</body>
</html>

对象中的方法

<!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 obj = {
            uname: '刘德华',
            //方法
            song:function(x, y){
                // console.log('冰雨')
                console.log(x + y)
            },
            dance:function(){
                console.log('王一博跳舞');
            }
        }
        // 方法调用 对象名.方法名
        obj.song(1, 2)
        obj.dance()
    </script>
</body>
</html>

遍历对象

遍历对象，获得对象值 obj[k]

<!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 不推荐遍历数组
        // let arr = ['pink', 'red', 'blue']
        // for(let k in arr){
        //     console.log(k) //数组的下标 索引号 但是是字符串型 '0'
        //     console.log(arr[k])
        // }
        // 1、遍历对象 for in
        let obj = {
            uname: 'pink老师',
            age: 18,
            gender: '男'
        }
        // 2、遍历对象
        for(let k in obj){
            console.log(k) //属性名 'uname'
            // console.log(obj.name)
            // console.log(obj.k)
            // console.log(obj.'uname')
            // console.log(obj['uname'])  'uname' === k
            console.log(obj[k])  //输出属性值 obj[k]
        }
    </script>
</body>
</html>

遍历数组对象

<!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 students = [
            {name: '小明', age: 18, gender: '男', hometown: '河北省'},
            {name: '小红', age: 19, gender: '女', hometown: '河南省'},
            {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
            {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
        ]
        for(i = 0; i < students.length; i++){
            // console.log(i) //下标索引号
            // console.log(students[i]) //每个对象
            console.log(students[i].name)
            console.log(students[i].hometown)

        }
    </script>
</body>
</html>

渲染学生信息表

<!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>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
       <!-- script写到这里· -->
        <script>
            // 1、数据准备
            let students = [
            {name: '小明', age: 18, gender: '男', hometown: '河北省'},
            {name: '小红', age: 19, gender: '女', hometown: '河南省'},
            {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
            {name: '小丽', age: 18, gender: '女', hometown: '山东省'},
            {name: '欢欢', age: 24, gender: '女', hometown: '陕西省'}
            ]
            // 2、渲染页面
            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>
                `)
            }
        </script>
    </table>
</body>
</html>

内置对象

内置对象-Math

提供了一系列数学运算的方法

内置对象-生成任意范围随机数

取值在[0,1)之间的一个随机小数
生成N~M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

随机点名案例

<!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、得到一个随机数，作为数组的索引号，这个随机数是0~6
        let random = Math.floor(Math.random() * arr.length)
        // 2、页面输出数组里面的元素
        document.write(arr[random])
        // 3、splice(起始位置（下标），删除几个元素)
        arr.splice(random, 1)
        console.log(arr)
    </script>
</body>
</html>

猜数字游戏

<!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、随机生成一个数字 1~10
         function getRandom(N, M){
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        let random = getRandom(1,10)
        // 2、设定三次 三次没猜对就直接退出
        let flag = true
        for(let i = 1; i <= 3; i++){
            let num = +prompt('请您输入1~10之间的一个数字：')
            if(num > random){
                alert('您猜大了')
            }else if(num < random){
                alert('您猜小了')
            }else{
                flag = false
                alert('您猜对了，真厉害')
                break
            }
        }
        //写到for的外面来
        if(flag){
                alert('次数已经用完')
            }
    </script>
</body>
</html>

生成随机颜色

<!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>
        div {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1、自定义一个随机颜色函数
        function getRandomColor(flag = true){
            if(flag){
            // 3、如果是true 则返回#ffffff
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                // 利用for循环，累加到str里面
                for(let i =1; i <= 6; i++){
                    // 每次从数组里面随机抽取一个
                    // random 是数组的随机索引和
                    let random = Math.floor(Math.random() * arr.length)
                    str = str + arr[random]
                }
                return str
            }else{
            // 4、否则是false 则返回rgb(255,255,255)
            let r = Math.floor(Math.random() * 256)
            let g = Math.floor(Math.random() * 256)
            let b = Math.floor(Math.random() * 256)
            return `rgb(${r}, ${g}, ${b})`
            }
        }
        // 2、调用函数 getRandomColor(布尔值)
        console.log(getRandomColor(false))
        console.log(getRandomColor(true))
        console.log(getRandomColor())
        const div = document.querySelector('div')
        div.style.backgroundColor = getRandomColor()
    </script>
</body>
</html>

##-综合案例-渲染学成在线页面

<!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="./css/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: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                        {
                            src: 'images/course08.png',
                            title: '自动添加的模块',
                            num: 1000
                        },
                    ]
                    for(let i = 0; i < data.length; i++){
                        document.write(`
                        <li>
                            <a href="#">
                                <img src=${data[i].src} title = "${data[i].title}">
                                <h4>
                                    ${data[i].title}
                                </h4>
                                <div class="info">
                                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                                </div>
                            </a>
                        </li>
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>
</body>
</html>

拓展-基础数据类型和引用数据类型

值类型：简单数据类型/基本数据类型，如string, number, boolean, undefinied, null
引用类型：复杂数据类型，存储的仅仅是地址（引用），如Object, Array, Date等

简单数据类型存到栈里面，引用类型存到堆里面

<!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 num1 = 10
        let num2 = num1
        num2 = 20
        console.log(num1) //结果是10

        let obj1 = {
            age: 18
        } 
        let obj2 = obj1
        //修改属性
        obj2.age = 20
        console.log(obj1.age)
    </script>
</body>
</html>

╰ 羁绊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

js基础1注释符和结束符ctrl+/ 单行注释alt+shift+a 块注释注意：结束符;可省略<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注释和结束符</ti
复制链接

扫一扫