JS基础学习Day5（根据最新版补充）——js基础

L..P

已于 2023-09-15 08:48:06 修改

阅读量110

点赞数

分类专栏： JavaScript学习文章标签： javascript 学习前端

于 2023-09-12 01:12:53 首次发布

本文链接：https://blog.csdn.net/thefairwilldim/article/details/132790701

版权

JavaScript学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

7.综合案例：输入商品信息在页面中自动生成表格

1.什么是js?

js是运行在客户端（浏览器）上的一门解释性脚本编程语言（代码不需要预编译），需要解释器来执行。主要用于实现人机交互。

2.js书写的位置

一种是使用script标签直接写在HMTL代码head或body标签中，而是将js代码写在一个拓展为js的独立文件中，再在HTML文件中引用js文件，示例如下：

js文件内容如下：

项目运行结果如下：

理论上来说，上面四种书写js代码的方式都可以被实现，但是，考虑到实际开发中项目的规模以及开发中的规范，比较推荐的是第四种。

根据运行结果其实可以知道，项目是从上到下运行的，写在末尾的位置可以使浏览器更快地加载网页并展示给用户。怎么理解这个意思呢，用下面的案例一看便懂。

看上图，我现在在图中位置加了一串代码，让他取了n个随机数构成一个数组，然后再在网页中输出该数组的值，你猜猜，运行结果会是上面？

看到这个结果懂了吧！

3.js的基本输出语句

1.console.log()：用于在控制台输出信息（给程序员调试程序用的）。

2.alert()：用于弹出一个警告框，显示一条消息并等待用户关闭。

3.document.write()：用于在文档中直接写入内容。

看懂了吧，console.log()主要用于开发阶段的调试和输出信息，alert()主要用于在用户界面中显示信息，而document.write()主要用于在网页中直接写入内容。

控制台怎么进，在设置里找到开发者工具，看看后面显示的快捷键，要么点击要么快捷键。

4.声明变量的方法

1.什么是变量？

通俗点来说，变量就是计算机用来装数据的盒子。

2.声明变量的方法。

我们以前学的都是用var，但22年开始它就已经被let和const替代了。根本原因有一：var允许多次声明同一个变量，这就好比你买了一套房子，突然被另一个人买走了，而你的房就成了后来者的了；原因二，var可以先使用再声明，它就不合理，这就跟你看上了栋房子，你还没付钱他就在你名下了，这不就离谱吗？

现在用实例来解释一下，内容如下图：

那串红色的提示就是在告诉你你这个arr2已经存在了，让你换个名字。

那么，学习let和const我们需要先区分二者，let声明的变量数据是可变的，而const是用来声明常量的。看以下案例，

根据显示的结果可以看到，变量的值更改成功了，而设定的常量无法变更，并在输出时告诉你该变量不可更改。

5.模板字符串

模板字符串用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

当出现多个表达式时，模板字符串显然更加方便。

6.变量类型的隐式转换

最典型的隐式转换就是+。

注意实例6，它常用于对要求输入数字型（如金额、数量等）输入框的内容进行隐式转换。

7.综合案例：输入商品信息在页面中自动生成表格

效果展示如下：

参考代码如下：

<!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>
    h1 {
      text-align: center;
    }

    table,
    th,
    td {
      border: 2px black solid;
      border-collapse: collapse;
      margin: 0px auto;
    }

    table {
      height: 100px;
      width: 600px;
      text-align: center;
    }
  </style>

</head>

<body>
  <h1>钻戒订单</h1>


  <script>
    let price = +prompt('请输入商品的价格');
    let num = +prompt('请输入商品的数量');
    let place = prompt('请输入商品的地址');
    let sum = price * num;

    document.write(`
      <table>
        <th>商品名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>总价</th>
        <th>总价</th>
        <tr>
          <td>DR钻戒</td>
          <td>${price}</td>
          <td>${num}</td>
          <td>${sum}</td>
          <td>${place}</td>
        </tr>
      </table>
    `)


  </script>
</body>

</html>

本文内容参考自B站黑马程序员视频：

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili