JS基础学习Day5(根据最新版补充)——js基础

目录

1.什么是js?

2.js书写的位置

3.js的基本输出语句

4.声明变量的方法

5.模板字符串

6.变量类型的隐式转换

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值