JavaScript基础Day1

Rookie_wbe

已于 2022-05-11 22:36:20 修改

阅读量105

点赞数

分类专栏： JavaScript基础文章标签： vscode

于 2022-04-01 17:57:08 首次发布

本文链接：https://blog.csdn.net/JOUKELOVE/article/details/123904124

版权

JavaScript基础专栏收录该内容

5 篇文章 3 订阅

订阅专栏

Day1:
在这里插入图片描述

在这里插入图片描述
课程-JS基础：

总结：

3.内联式
这种形式在实际开发中并不会用

谨记：换行符（回车）被识别为结束符，所以一个完整的语句，不要手动换行。

更多的程序员不选择写结束符。
在这里插入图片描述

document能识别标签

讲了三个输出语句，一个输入语句

字面量：
在这里插入图片描述
JavaScript介绍小结：

变量：

如上图所示：“电脑、true、35”这些都是数据，而存放数据的才是变量，也就是下面的盒子。

在这里插入图片描述
变量的基本使用：

变量不允许被多次声明

案例1：

案例2：交换变量值

变量原理及特点：

变量命名规范：

注意：字母严格区分大小写，Age和age是不同的变量。

变量拓展：

变量案例：
在这里插入图片描述
数据类型：

JS中更提倡使用单引号

在这里插入图片描述
字符串拼接：

模板字符串：

使用符号更加简便，外面用反引号包围。模板字符串里&{ }里面是可以换行的。

案例：

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

null（空类型）

在这里插入图片描述

数据类型：

类型转换：

隐式转换：
ex1:

let num = '10'

    console.log(10 +  +'10')

/     '10'原本是字符串类型，在其前面加一个+，使得它成为数字类型，所以 +'10' 就意味着数字10，即可以加入计算，+号可以作为正号解析转换成Number    /

ex2:

console.log(11 + 11)                        

    console.log('11' + 11)

    console.log(11 - 11)

    console.log('11' - 11)

    console.log(1 * 1)

    console.log('1' * 1)

    console.log(typeof '123')

    console.log(typeof +'123')

    console.log(+'11' + 11)

结果：在这里插入图片描述
显式转换：

仅作为了解：

课堂案例：
输入2个数，计算两者的和，打印到页面中
ex:

<script>
        let num1 = prompt('请输入第一个数')
        let num2 = prompt('请输入第二个数')
        num3 = +num1 + +num2
        alert(num3)
</script>

综合案例：用户订单信息案例
在这里插入图片描述
ex:

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

   <script>

  //   1.输入 price num total 三个变量

  let price = prompt('请输入商品价格：')

  let num = prompt('请输入购买的数量：')

  let address = prompt('请输入收货的地址：')

  // 2.计算总价

  let total = num * price

  // 3.渲染表格 填充数据

  document.write(` <table>

    <caption>

      <h2>订单确认</h2>

    </caption>

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