JavaScript基础第一天

最新推荐文章于 2025-05-23 18:27:54 发布

魏某某某

最新推荐文章于 2025-05-23 18:27:54 发布

阅读量58

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45356160/article/details/127694269

版权

js介绍
变量
数据类型
类型转换
实战案例

一.js介绍

在这里插入图片描述

js是什么

在这里插入图片描述

js书写位置

在这里插入图片描述

js注释

在这里插入图片描述

输入输出

在这里插入图片描述

字面量

在这里插入图片描述

二.变量

在这里插入图片描述

变量是什么

在这里插入图片描述

变量的基本使用

在这里插入图片描述

变量的本质

在这里插入图片描述

变量命名规范

在这里插入图片描述

let和var区别

在这里插入图片描述

数组

在这里插入图片描述

三.数据类型

数据类型

在这里插入图片描述

数字类型

在这里插入图片描述

字符串类型

在这里插入图片描述

字符串拼接

在这里插入图片描述

模板字符串

在这里插入图片描述

布尔类型

在这里插入图片描述

未定义类型

在这里插入图片描述

空类型

在这里插入图片描述

检测数据类型

在这里插入图片描述

四.类型转换

在这里插入图片描述

为什么要进行类型转换

在这里插入图片描述

隐式转换

在这里插入图片描述

显示转换

在这里插入图片描述

五.实战案例

在这里插入图片描述

获得的知识

1.border-collapse: collapse;作用:合并边框
2write是DOM方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中.作用:在案例中document.write()可以打印识别html
3.${ }是es6新增的字符串方法,可以配合单反引号完成字符串拼接的功能.

<!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>
        table{
            margin: 0 auto;
            border: 1px black solid;
            border-collapse: collapse;
        }
        table tr th{
            text-align: center;
            border: 1px black solid;
            padding: 10px 30px;
        }
        table tr td{
            text-align: center;
            border: 1px black solid;
            padding: 10px 30px;
        }
        caption{
            font-weight: 1000;
            font-size: 20px;
            padding-bottom: 5px;
        }       
    </style>
</head>
<body>
    <!-- <table>
        <caption>订单付款确认页面</caption>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>高端手机</td>
            <td>price</td>
            <td>num</td>
            <td>total</td>
            <td>address</td>
        </tr>
    </table> -->
    <script>
        let price = prompt('请输入数量')
        let num = prompt('请输入价格')
        let total = price*num
        let address = prompt('请输入地址')
        document.write(`
        <table>
        <caption>订单付款确认页面</caption>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>高端手机</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
        </tr>
    </table>
        `)
    document.write()
    </script>
</body>
</html>