Js第二天
变量
变量是什么
思考：用户数据是怎么保存起来的
通过变量，变量实际上就是一个储存数据的容器，把用户书写的数据放到一个容器里，让计算机变的有记忆。
变量：
1.可以通俗易懂的把变量理解成一个装东西的盒子。
2.变量为计算机中存储数据的容器。
变量的基本使用
1.声明变量
要使用变量，首先要声明一个变量。也就是创建一个叫什么名字的盒子。（专业说法：声明变量）
语法：
<script>
let 变量名
let是声明变量的关键字，和一个变量名（标记）
</script>
关键字：用来专门创建变量的一种词语。
变量名：理解为盒子名字是啥，也叫标识符。
2.变量赋值
创建了一个变量，并且给变量一个名字之后，就要给变量里面添加内容，也就叫做赋值（初始化）。
语法：
<script>
let 变量名
let是声明变量的关键字，和一个变量名（标记）
变量名='这里给一个内容'
</script>
变量名只是用来获取变量里面数据的，也就是只是盒子的名字，盒子里面的内容就是 变量名=“这里面才是内容”
也可以创建变量同时给他赋值
<script>
let 变量名=‘我是内容吗’
</script>
变量赋值之后，可以在给变量名重新辅助
<script>
let 变量名=‘18’
变量名=‘19’
</script>
**注意点：**变量名不能重复使用，也就是不能多次创建同一个变量
这样会报错
可以连写(声明)多个变量名
<script>
let 变量名=x,变量名2=x
</script>
**注意点:**声明多个变量时，要用逗号隔开
变量案例（熟悉练习作用）
解决方法：
1.错误方法
<script>
let num1=10,num2=20
num1=num2
console.log(num1+num2)
</script>
错误点：因为num1已经＝num2=20了，所以这个时候是20+20
2.正确方法
<script>
let num1='10',num2='20',num3
num3=num2
num2=num1
num1=num3
console.log(num1+num2)
</script>
正确思路：首先创建一个空的盒子为临时变量，用来进行内容的转移交换。让空盒子装num2的内容，这个时候num1的值就给可以放到num2，最后把临时变量num3 值给num1。
一定要按照交换顺序进行，不能乱套
变量的本质
命名规则和规范
规则
变量有一套使用的规则，必须遵守。如果不遵守就会出错
1.不能用关键字作为变量名
关键字：是有特殊含义的字符
<script>
// 不能使用关键词做命名
let let='123'
</script>
2.只能用下划线、字母、数字、$组成的数字
注意：不能以数字做开头，没有“-”中划线
<script>
// 可以使用符号
// 1.下划线
let_hello='123';
// 2.$
let $hello='123'
// 3.数字开头 不可以
let 1hello='123'
// 4.字母开头
let a123='123'
</script>
3.字母是严格区分大小写的，都代表不同变量名
<script>
// 区分大小写
let USER='用户名1'
let user='用户名2'
</script>
规范
相当于一个行为准则，不遵守不会报错，不过有点不符合通识
1.起名要符合语义
不推荐使用a,b,c等没有语义的命名。这样自己都记不住别人也看不懂
2.遵守驼峰命名法
小驼峰：首字母小写，后面每个单词首字母大写。
大驼峰：首字母大写，后面每个字母首字母大写。
<script>
// 驼峰法
// 小驼峰
let userName='这是小驼峰'
// 大驼峰
let UserName=`这是大驼峰`
</script>
注意点：不做驼峰不会报错，不过不符合规范
数据类型
本质
计算机世界中万物皆数据。
思考：为什么要给计算机程序进行数据类型的分类？
原因：
1.更加高效率的使计算机工作（利用内存）
2.方便程序员进行数据的使用
js数据两大类型
一、基本数据类型
1.数字型
语法
<script>
let num1=100,num2=200
let sum = num1+num2
console.log(sum);
</script>
输出为：100+200=300
细节：JS中正数，负数小数等任意数字都统一成为 数字类型
知识拓展：
1.JS是弱数据，变量是哪种类型要赋值了才知道
2.java是强数据，有硬性规定
2.字符串类型
**语法：**通过用引号，双引号，反引号包裹的内容都叫字符串类型。字符串会拼接
<script>
let title='我叫',
title2="字符串"
</script>
输出为：
细节：
1.单引号和双引号没有本质区别，推荐使用单引号
2.如果使用单引号，单引号里面必须是双引号，或者相反
（外双内单，内单外双）
字符串拼接的方式：
1.直接拼接
<script>
document.write("我叫"+'刘德华')
let name='liudehua'
let song='wangqings'
document.write(name+song)
</script>
思考：如何用字符串凭借 连接字符串和变量呢？
方法：
<script>
document.write('大家好，我叫'+name+'我的歌是'+song)
</script>
缺点：这样的拼接过于麻烦 可以用新的技术进行拼接
2.用符号法
<script>
document.write(`大家好，我叫${name},今年${age}了。`)
</script>
用法：
1.在英文输入法下用反引号``包裹整个内容
2.要用变量就在后面加${}包住变量
3.布尔类型
定义：表示肯定或否定
**语法：**有两个固定值 true和false 肯定用true 否定用false
<script>
let isCool = true
isCool = false
</script>
4.undefind类型
**定义：**是一种特殊的类型，叫做未定义 只有一个值：undefined
**作用：**提醒我们是否忘了赋值，矫正程序员写代码
<script>
let no 这里没有赋值 不会报错 告诉我们当前数据未定义 空
console.log(no)
</script>
5.null（空类型）
**定义：**表示 值为空
**作用：**对于初学者而言，与undefind类型使用差不多。只要发现是这两个值那就相当于 没有拿到合适的值
<script>
let yes = null
console.log(yes)
</script>
null与undefined的区别:
1.undefined 表示没有赋值 可以理解一个房子 里面啥都没一篇虚无
2.null 表示赋值了 可是值内容为空 可以理解为一个房子 里面有空气 可是看不见摸不着
对于数据类型的补充
可以不声明变量直接赋值，不过不推荐（合法但不合理 不推荐！！！）
<script>
age=18
console.log(age)
</script>
总结使用
控制台输出语音
**思考：**能不能通过程序方式，在控制台检测出数据的类型？
方法：通过typeof 关键字 检测数据类型.
<script>
let name = '黄某'
let age = 18
let isRian = true
let no
let kong = null
console.log(typeof name); /* string是字符串 */
console.log(typeof age); /* Number是数字 */
console.log(typeof isRian); /* boolean是布尔类型 */
console.log(typeof no); /* undefined类型 */
console.log(typeof null); /* 这是null显示的是object 叫对象类型*/
</script>
在控制台效果为：
作用：在以后js量大，或者js外联时，有利于观察数据并且编辑
类型转换（重要）
**思考：**因为字符串内数字输出是字符串，如何让字符串内输出数字为数字类型？
方法：类型转换
类型转换分为：
隐式转换
**本质：**系统在内部自动将数据转换
<script>
let num1 = 1
let num2 ="2"
// +号两边只要有一边是字符串，都会把另一个转换
// console.log(num1+num2)
// 除了加号意外的都会转换成数字类型
// console.log(typeof num1-num2) 此处是NaN 不是一个数字 确实number的数字类型
// 工作中比较常见的隐式转换写法
let num3 = num2 - 0; /* 此时num3是一个数字类型 */
// console.log(typeof num3)
// 最简洁的写法 就是在变量前面加+号 推荐 常用
let num4 = +num2 /* 此时转换为数字类型 */
console.log(typeof num4)
</script>
显示转换
**本质：**让转换更清晰，看得到，避免因为隐式转换带来的问题。自己告诉代码该转换成什么类型
1.转换成数字型
语法：Number(数据)
1.parseInt只保留整数 常用
2.parseFloat 保留小数点
**特点：**如果字符串里为非数字，转换失败 结果为NaN (not a number)
<script>
let num1 = 1
let num2 ="2"
// +号两边只要有一边是字符串，都会把另一个转换
// console.log(num1+num2)
// 除了加号意外的都会转换成数字类型
// console.log(typeof num1-num2) 此处是NaN 不是一个数字 确实number的数字类型
// 工作中比较常见的隐式转换写法
let num3 = num2 - 0; /* 此时num3是一个数字类型 */
// console.log(typeof num3)
// 最简洁的写法 就是在变量前面加+号 推荐 常用
let num4 = +num2 /* 此时转换为数字类型 */
console.log(typeof num4)
</script>
**注意点：**NaN也是数字类型的一种，代表非数字
2.转换成文本类型
**本质：**与数字转换用法相似
<script>
let num = 123
// 在之前隐式转换中提到 常用
// let str = 123+''
// 显示转换 1 常用
// let str = String(num)
// 显示转换 2 常用
// let str = num.toString()
console.log(typeof str)
</script>
补充知识点：
1.在反引号里是可以添加以前学过的HTML标签的。
2.如果在单引号或者双引号里添加，可以但是不能换行。
3.不要在反引号里一个字母一个字母敲HTML标签，在BODY里敲完根据需求剪切。
综合案例：
我的思路：
1.首先确定好有哪些变量
2.编辑好变量 用document.write代码简单测试是否正确
3.在body内部编辑好表格样式
4.把需要变量的值用符号拼接法带入
代码：
<body>
<script>
let goodsName = prompt('请输入商品')
let goodsPay = prompt('请输入价格')
let num = prompt('请输入数量')
let live = prompt('请输入地址')
let sum = Number(goods)*Number(num)
document.write(`
<table border="1" width="800" height="200">
<caption>
<h1>订单付款确认页面</h1>
</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>${goodsName}</td>
<td>${goodsPay}</td>
<td>${num}</td>
<td>${sum}元</td>
<td>${live}</td>
</tr>
</table>
`)
</script>
</body>
