JavaScript基础一

最新推荐文章于 2024-07-18 10:24:18 发布

在学了在学了！

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量48

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xieyihu/article/details/126908212

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

基础语法

一.内部js

1.规范

内部js，写在body上面；
外部js，代码写在以.js结尾的文件，引入到页面，中间不要写代码会被忽略；
内联js,写在标签内；

2.输入输出语法

<script>
        document.write('我愿意')
        /* 可以识别标签 */
        alert('黑马')
        console.log('我是用来测试的')
        /* 控制台输出语法 */
        prompt('您今年多大了')
    </script>

3.字面量

二.变量

1.存储数据的容器；变量不是数据本身而是容器；
2.声明变量 let 变量名；let 不允许多次声明；
3.变量的交换

   <script>
    let num1 = 10, num2 = 20
    let temp = num1
    num1 = num2
    num2 = temp
    document.write(num1 + num2)
   </script>

4.变量的本质
是程序在内存中申请的一块用来存放数据的小空间；
5.var和let的区别

可以先使用在声明；
声明过的可以重复声明；
变量提升，全局变量，没有块级作用等；

6.数组类型
分为基本数据类型和引用数据类型；
模板字符串：

<script>
    let age = prompt('用户输入年龄')
    document.write('我今年' + age + '岁啦')
   </script>

<script>
    let age = prompt('用户输入年龄')
    document.write(`我今年${age}岁啦`)
   </script>

7.null
把null作为尚未创建的对象；表示赋值了，但是内容为空；
8.检测数据类型

控制台输出
typeof

<script>
    let age = prompt('用户输入年龄')
    document.write(`我今年${age}岁啦`)
    console.log(typeof age)
   </script>

9.类型转换

为什么？是弱数据类型，只有赋值了才清楚；使用表单，promot获取过来的数据默认是字符串类型的；
隐式转换：除了+ 的算术运算符会把数据转成数字类型；但是加号作为正号解析可以转换成数字；
显式转换

<script>
    let num = '10'
    console.log(Number('10'))/* 转换成数字型Number只能放数字类型的字符，否则返回的是NaN */
    console.log(parseInt('10.111'))/* 保留整数 */
    console.log(parseFloat('10。88'))/* 保留小数 ，经常用与过滤单位*/
   </script>

三.案例

!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;
        }
        table {
            margin: 0 auto;
            text-align: center;
            border-collapse: collapse;
        }

        table th,
        td{
            border: 1px solid #000;
            padding: 15px;
        }
        table caption {
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <table>
        <caption>订单付款确认页面</caption>
        <th>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>总价</td>
            <td>收获地址</td>
        </th>
        <tr>
            <td>小米手机</td>
            <td>133</td>
            <td>133</td>
            <td>133</td>
            <td>444</td>
            <td>666</td>
        </tr>
    </table>
   <script>
    let price = prompt('请输入商品价格')
    let num = prompt('请输入商品数量')
    let address = prompt('请输入收获地址')
    let total = Number(price) + Number(num)
    document(`
    <table>
        <caption>订单付款确认页面</caption>
        <th>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>总价</td>
            <td>收获地址</td>
        </th>
        <tr>
            <td>小米手机</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${address}</td>
            <td>${total}</td>
        </tr>
    </table>
    `)
    
   </script>
</body>
</html>