JavaScript基础（day01:let/const变量、数据类型、ES6模板字符串）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学，可以点心心支持一下哈

前言

不能只看不动手

不管多简单的代码都要练习

随时暂停视频随时写代码

不要抄代码

重点难点案例一定要多写几遍，要根据自己思路独立完成

一、基本软件以及准备工作

1.软件篇

截图软件：Snipaste

画笔软件：ZommIt64

思维导图软件：XMind 8

md笔记软件：Typora

流程图绘制软件：Diagram Designer

2.Vscode设置篇

代码报错提示：Error Lens

代码颜色主题：One Dark Pro

学习JS不要安装格式化插件（可能会与vue有冲突）

代码缩进字符改为2个字符

左右分屏：（Live Server）win+左右箭头

二、JavaScript简介和体验

1.JavaScript是什么

js是一种运行在客户端（浏览器）的编程语言，它由ECMAScript（基础语法）、web APIS（DOM、BOM）

案例（点击切换按钮的案例-体验HTML+CSS+JS实现交互效果）：

1.排他思想（没有用到类名）

  // 1. 获取所有按钮元素
  var buttons = document.querySelectorAll("button");
  // btns得到的是伪数组  里面的每一个元素 btns[i]
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
      for (var i = 0; i < buttons.length; i++) {
        buttons[i].style.backgroundColor = "";
      }
      // (2) 然后才让当前的元素背景颜色为pink 留下我自己
      this.style.backgroundColor = "pink";
    }
  }

2.用到类名

  // 1. 获取所有按钮元素
  var buttons = document.querySelectorAll("button");
  // btns得到的是伪数组  里面的每一个元素 btns[i]
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      document.querySelector(".bgColor").className = ""
      this.className = "bgColor"
    }
  }

2.JavaScript书写位置

内部、外部、行内；

书写的位置尽量写到文档末尾前面

外部js标签中间不要写代码，否则会被忽略

内部JS

外部JS

内联JS

3.JavaScript怎么写

单行注释 //

多行注释 /* */

结束符是分号；

结束符可以省略，但为了风格统一，结束符要么每句都写，要么每句都不写（团队约定）

注释

结束符

4.JavaScript输入输出语法

输出语法

输入语法

document.write("dawda");
    document.write("
dawdw
");//会解析标签
    alert("adw");
    alert("
dawdw
")//不会解析标签
    console.log("adw");
    console.log("
dawdw
");//不会解析标签
    // 输入语句
    prompt("请输入名字");
    prompt("
请输入名字
");//不会解析标签

案例（输入和输出练习）

    alert("你好 JS~")
    document.write("JavaScript 我来了！")
    console.log("它~会魔法吧~");

JavaScript代码执行顺序

字面量

总结（JavaScript介绍）

三、变量

1.变量是什么

计算机中用来存储数据的”容器“，简单理解是一个个的盒子；作用是用来存放数据的；例如：HTML标签、教室、宿舍...

注意变量指的是容器而不是数据

2.变量的基本使用

变量使用let关键字来声明，通过＝（赋值运算符）来赋值

1.声明变量

2.变量赋值

案例（课堂变量练习）

  	let num = 20;
    let uname = "张三";
    console.log(num);
    console.log(uname);

3.更新变量

4.声明多个变量

变量案例（弹出姓名）

    let name = prompt("请输入姓名")
    document.write(name)

变量案例（交换变量的值）

    let num1 = 10
    let num2 = 20
    let temp
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1)
    console.log(num2)

3.变量的本质

4.变量命名规则与规范

变量案例（输出用户信息）

    let uname = prompt("请输入您的姓名")
    let age = prompt("请输入您的年龄")
    let gender = prompt("请输入您的性别")
    document.write(uname, age, gender)

5.let和var区别

6.数组的基本使用

一种将一组数据存储在单个变量名下的优雅方式

1.声明语法

2.取值语法

案例（数组取值）

    let week = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
    console.log(week[6]);

3.一些术语

总结（数组）

四、常量的基本使用

总结（let、var、const）

五、数据类型

js是弱数据类型的语言，只有当我们赋值了，才知道是什么数据类型

1.数字类型（Number）

总结（算术运算符）

案例（计算圆的面积）

    const Π = 3.14;
    // 获取圆的半径
    let r = prompt("输入圆的半径")
    document.write("圆的面积：" + Π * r * r)

NaN

2.字符串类型（string）

模板字符串

总结（字符串）

案例（页面输出用户信息）

    let name = prompt("输入名字")
    let age = prompt("输入年龄")
    document.write(`大家好，我叫${name}，今年${age}岁了`)

3.布尔类型（boolean）

4.未定义类型（undefined）

5.null（空类型）

    console.log(undefined + 1); // NaN
    console.log(null + 1); // 1

总结（布尔类型、未定义类型、null）

6.检测数据类型

typeof

六、类型转换

1.为什么需要类型转换

2.隐式转换

比较运算符有隐式转换

 console.log(2=="2"); // true

3.显示转换

案例（输入2个数，计算两者的和，打印到页面中）

    let num1 = Number(prompt("请输入第一个数"))
    let num2 = Number(prompt("请输入第二个数"))
    document.write("两者的和：" + (num1 + num2))

案例（用户订单信息案例）

h1 {
  text-align: center;
}

table {
  height: 50px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}

td,
th {
  padding: 15px;
  border: 1px solid;
}

let money = +prompt("请输入商品价格")
    let count = +prompt("请输入商品数量")
    let adress = prompt("请输入收货地址")
    document.write(`
    
订单付款确认页面
    

        
商品名称
商品价格
商品数量
总价
收货地址
        
小米手机青春PLUS
${money}元
${count}
${money * count}元
${adress}
    
    `)