1.JavaScript的数据类型
1.基本数据类型：
1.nubber 数字型；
2.sting 字符串型；
3.boolean 布尔型；
4.undefined 未定义型；
5.null 空类型；
2.引用数据类型
1.object 对象
2.function 函数
3.array 数组；
2.变量
1.声明变量
1.声明变量：要想使用变量，首先需要创建变量
2.声明变量有两部分构成：声明关键字、变量名（标识)
3.let 即关键字(let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
let 变量名
let num
2.变量赋值:
1.定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
num = 100;
document.write(num);
2.也可以声明变量的时候同时给变量初始化。
<script>
let num = 100
let nam = "张三"
</script>
3.更新变量
1.变量赋值后，还可以通过简单地给它一个不同的值来更新它。
2.num的值由100变为200
<script>
let num = 100
num = 200
</script>
4.变量的综合使用
<!DOCTYPE html>
<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>
</head>
<body>
<script>
// 注意：变量不能重复
// 变量 我的名字
let username; //创建变量 username
username = '张三'; //变量赋值 张三
console.log(username); //变量的使用
// 变量 我的身高
let height; //创建变量 height
height = '180'; //变量赋值 180
console.log(height); //变量的使用
// 变量 我的外号
let nackname;//创建变量 nackname
nickname = '法外狂徒';//变量赋值 法外狂徒
console.log(nickname); //变量的使用
// 声明变量的同时也赋值
let color = 'yellow';
color = 'pink'; //变量更新
// 一次性声明多个变量 同时赋值
let username1 = '李四',
height1 ='180',
nickname1 = '法内狂徒';
</script>
</body>
</html>
3.基本数据类型
1.数字类型（number）：正数、负数、小数；
<!DOCTYPE html>
<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>
</head>
<body>
<script>
// 数字类型
// let height=100; // 数字类型 外边一定不能够加 ''
// 数字类型使用 + 表示数字的相加
let money1 = 100;
let money2 = 200;
let sum = money1 + money2 ; //输出结果 300
console.log(sum);
</script>
</body>
</html>
2.字符串类型（string）
1.通过单引号（''）、双引号（""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
2.无论单引号或是双引号必须成对使用
3.单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双)
4.必要时可以使用转义符\，输出单引号或双引号
5.字符串拼接 ${}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-字符串拼接.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 早些时候 写代码 都是这样来拼接的 看起来不太直观
let every = '大家好';
let age=100;
console.log('你好-' + every + '-世界美好');
console.log('你好' + '-' + every + '-' + '世界美好');
// 你好-大家好-世界美好
// 使用 反引号的方式来拼接 字符串 推荐！！
console.log(`你好-every-世界美好`);
// 模版字符串
console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every} 固定用法
// 错误的演示
console.log('你好-${every}-世界美好${age}');
// 反引号和 ${} 两个是一对 要配套出现 。 .;..........
</script>
</body>
</html>
3.数据类型–布尔类型（boolean）
1.true 真表示肯定的数
2.false 假表示否定的数据
4.未定义类型（undefined）
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。
我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。
5.null（空类型）
1.undefined 表示没有赋值
2.null 表示赋值了，但是内容为空
3.将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
4.控制台输出语句和检测数据类型
1.控制台输出语句：
1.控制台语句经常用于测试结果来使用。
2.可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色
3.console.log ( ) ;
<!DOCTYPE html>
<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>
</head>
<body>
<script>
let num = 100;
let name = '张三';
let iseat= true;
let foods;
let money = null; // 后面继续讲解到 引用类型的时候去补充
// console.log("num是什么数据类型");// 能不能通过程序的方式 自动的输出当前变量的数据类型！！
// typeof
console.log(typeof num); //number 输出 num变量的类型
console.log(typeof name); // string
console.log(typeof iseat);// bollean
console.log(typeof foods); // undefined
console.log(typeof money);// object 对象类型
</script>
</body>
</html>
2. 通过typeof关键字检测数据类型
1..console.log (typeof 变量名) ;
<script>
// typeof
console.log(typeof num); //number 输出 num变量的类型
console.log(typeof name); // string
console.log(typeof iseat);// bollean
console.log(typeof foods); // undefined
console.log(typeof money);// object 对象类型
</script>
5.数据类型转换
1.隐式转换:
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
2.显示转换:
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
3.转换为数字型
1.Number(数据)
2.parseInt(数据)只保留整数
3.parseFloat(数据)可以保留小数
1.String(数据)
2.变量.toString(进制)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>隐式转换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// let num1 = 1;
// let num2 = '2';
// let num3 = num2 - 0;
// console.log(typeof num3 ); // number
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的！
console.log(typeof num4);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>显示转换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 你把一个真正的 字符串 给我 转成数字，会失败！！
// let num1 = 'abbcc';
// // 显示转换 转成 数字类型
// let num2 = Number(num1);
// console.log( num2 ); // NaN num2 不是一个数字 类似 确实 number类型
// 对于 其他类型 转成数字
// 1 成功 数字本身
// 2 失败 NaN (not a number)
// let num1 = 'aaaa';
// let num2 = +num1;
// console.log(num2);// NaN
let num1 = '9.9';
// 砍价 收个整数 9块 integer
// let num2 = parseInt(9.9); // 常用
// console.log(num2);
// let num2 = parseFloat(num1); // 少
let num2 = +num1; // 常用
console.log(num2);
console.log(Number(Number(Number(num1))));
</script>
</body>
</html>
06.综合案列-确认付款页面
1. document.write 使用方法拓展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>16-document.write补充.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 把内容 输出到 body标签中
// document.write("呵呵 我又来啦 😶");
// document.write(`<h1>大标题！ <h1/>`);
// let str =`<button>大大的按钮</button>`;
// let str =`<input type="text" > <button>大大的按钮</button>`;
// 反引号 还可以换行来写代码
// 如果换行了 那么就只能使用 反引号
// 如果不换行 用那种引号都可以
let str = `
<div>
<p>
<button>按钮又来啦</button>
</p>
</div>
`;
document.write('<h1>11111</h1>');
/*
1 document.write 可以把一个 标签形式的字符串 重新插入到body标签里
2 写标签字符串的时候
如果要换行 只能使用 反引号
没有换行 用哪种方式都可以
只要是写标签字符串 都可以使用反引号-模版字符串
3 不要直接在 字符串里面 一个一个字母写 标签
要现在 body标签中 使用 快捷键 先生成 标签 然后再复制回去
*/
</script>
</body>
</html>
2.确认付款页面
<!DOCTYPE html>
<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;
box-sizing: border-box;
}
table {
/* width: 400px; */
height: 100px;
margin: 100px auto;
border-collapse: collapse;
}
caption {
font-weight: 700;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<!-- <table >
<caption>订单付款确认页面</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>收获地址</th>
</tr>
<tr>
<td>小米手机青春PLUS</td>
<td>1999元</td>
<td>3</td>
<td>59997元</td>
<td>北京顺义黑马程序员</td>
</tr>
</table> -->
<script>
let tradename = prompt('商品名称'),// 商品名称
price = prompt('商品价格'),// 商品价格
count = prompt('商品数量'),// 商品数量
total = price * count , //prompt('商品总价'),// 商品总价
address = prompt('收货地址');// 收货地址
// let goods = tradename+price+count+total+address
document.write(`
<table border="1">
<caption>订单付款确认页面</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>收获地址</th>
</tr>
<tr>
<td>${tradename}</td>
<td>${price}元</td>
<td>${count}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`);
</script>
</body>
</html>
