前端学习——jsDay1

已于 2023-07-05 14:33:06 修改
阅读量132 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端 js
于 2023-07-05 10:51:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131547546
版权

Day1 JavaScript是什么？

在这里插入图片描述
在这里插入图片描述
实现点击按钮改变颜色

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

Day1 JavaScript书写位置

在这里插入图片描述

内部js

在这里插入图片描述

外部js

在这里插入图片描述

内联js

在这里插入图片描述
在这里插入图片描述

Day1 js注释

在这里插入图片描述

Day1 js结束符

在这里插入图片描述
在这里插入图片描述

Day1 js输入输出语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        alert('你好 JS~')
        document.write('JavaScript我来了！')
        console.log('它~会魔法吧~')
    </script>
</body>

</html>

Day1 字面量

在这里插入图片描述

summary这里是引用

Day1 变量

在这里插入图片描述
在这里插入图片描述

变量的声明

在这里插入图片描述

变量的赋值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        let num = 20
        let uname = '张三'
        console.log(num)
        console.log(uname)
    </script>
</body>

</html>

更新变量

在这里插入图片描述

声明多个变量

在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
       let name = prompt('请输入姓名：')
       document.write(name)
    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
       let num1 = 10
       let num2 = 20
       let temp = num2
       num2 = num1
       num1 = temp
       console.log(num1,num2)
    </script>
</body>

</html>

变量本质

在这里插入图片描述

变量命名规则与规范

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
       let uname = prompt('请输入你的姓名：')
       let age = prompt('请输入你的年龄：')
       let gender = prompt('请输入你的性别：')
       document.write(uname,age,gender)
    </script>
</body>

</html>

let和var区别

在这里插入图片描述

数组

在这里插入图片描述

数组声明

在这里插入图片描述

数组取值

在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        let week = ['Mon','Tue','Wed','Thur','Fri','Sat','Sun']
        console.log(week[6])
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

常量

在这里插入图片描述
在这里插入图片描述

数据类型

在这里插入图片描述

数字类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        const PI = 3.1415926
        let r = prompt('请输入圆的半径：')
        let area = PI * r * r
        document.write(area)
    </script>
</body>

</html>

字符串类型

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

//反引号，${}
<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        let name = prompt('请输入姓名：')
        let age = prompt('请输入年龄：')
        document.write(`大家好，我叫${name}，今年${age}岁了`)
    </script>
</body>

</html>

布尔类型

在这里插入图片描述

未定义类型

在这里插入图片描述

空类型

在这里插入图片描述
在这里插入图片描述

检测数据类型

在这里插入图片描述
在这里插入图片描述

类型转换

在这里插入图片描述

隐式转换

在这里插入图片描述

显示转换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        alert(`两个数相加和为：${num1+num2}`)
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <script>
        let num1 = prompt('请输入第一个数：')
        let num2 = prompt('请输入第二个数：')
        let sum = Number(num1) + Number(num2)
        document.write(sum)
    </script>
</body>

</html>

实战案例

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        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 black;
        }
    </style>
</head>

<body>
    <h2>订单确认</h2>
    <script>
        let price = +prompt('请输入商品价格：')
        let num = +prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')
        let total = price * num
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>华为P60</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
        </tr>
    </table>      
        `)
    </script>
</body>

</html>
肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值