目录
3.parseFloat（数据） 可以保留小数 如果是整数转换还是保留整数
4.String（数据）转换为字符串型 变量.toString（进制）
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
一、JavaScript基础
1. JavaScript介绍
1.1 JavaScript是什么？
js是 一门运行在浏览器上的一门编程语言（脚本语言） 来实现==人机交互效果==
1.2 JavaScript的组成是什么？
1.ECMAScript(基础语法)
2.DOM
3.BOM
2.js的书写位置
1.1内部
<script>
alert('嘿嘿')
</script>
</body>
写到</body>上面的位置是因为：代码是从上到下的先后顺序执行的
js要获取元素如果写在元素上面获取不到 会出错。
1.2外部（以后开发最常用）
引入js文件 注意：当使用的是外部引入的方式标签之间是不能再写js代码的
直接引入js文件
<script src="./my.js"></script>
一般创建一个js的文件夹把js文件放在js文件夹里面引入
<script src="js/my.js"></script>
1.3行内
<button onclick="alert('enen')">点击</button>
使用很少、以后到vue会使用到。
3.js的注释
1.单行 注释
快捷键 Ctrl + /
//这是单行注释的
2.多行注释
快捷键 shift + alt + A
/* 这是多行注释的
这是多行注释的
这是多行注释的 */
vscode 的默认多行注释比较麻烦。可以自定义设置多行注释的方法：
找到左下角的管理>键盘快捷键方式
输入注释，找到切换块注释 双击修改为：Ctrl + Shift + /
个人这个和单行很好区分，挺好用的。
4.js的结束符
- 以前都是有 英文的分号 “;”做一段代码的结束符的
- 可以写也可以不写
- 现在越来越多的程序员很少有结束符了，因为在以后在Vue中有结束符会有很多报错
- 但为了统一风格要写全写，要不写都不写（按团队的需求）
5.js的输入输出语法
那么怎么和计算机做交互呢？
1.输出语法
1.document.write('需要输出的内容')
向body内输入内容
document.write('我真帅')
如果冒号内有标签名则会解析为网页元素
document.write('<h1>我真帅</h1>')
2.alert('需要输出的内容') 显示一个警示框
alert('我真帅')
3.console.log('需要输出的内容'); 控制台打印 程序员调试专用
console.log('程序员用的控制台打印')
2.输出语法
prompt('请输入内容：') 显示一个属于对话框
prompt('请输入你的名字：')
6.字面量
如：
- 100 数字字面量
- 张三 字符串字面量
- [] 数组字面量
- {} 对象字面量
二、变量
1.变量是什么？
变量是计算机储存数据的一个 ‘容器’
注意：变量不仅仅是数据本身 它们只是存储数据的一个盒子
2.变量的基本使用
1.声明变量
声明关键字 变量名
let age
age 就是变量名称 也叫标识符
2.变量的赋值
// 声明一个age 的变量
let age
// 把18 赋值给age这个变量
age = 18
// 页面打印
document.write(age)
注意：页面打印变量不加冒号 ， 加冒号只是打印冒号里面的内容
也可以声明变量的同时直接赋值
// 声明了一个变量 同时里面存放了一个18 的数据
let age = 18
3.更新变量
let age = 18
// 变量数据发生改变 重新把19 赋值给了age变量
age = 19
// 页面打印
document.write(age)
注意：千万不能更新变量的时候再let 关键字声明 因为同一个变量名不能重复声明
let age = 18
// 变量数据发生改变 重新把19 赋值给了age变量
let age = 19
// 页面打印
document.write(age)
//报错
4.多个变量声明
多个变量声明中间用逗号隔开。
let uname = 'z张三', age = 18
案例1：
需求： 浏览器中弹出对话框： 请输入姓名， 页面中输出：刚才输入的姓名
// 先声明一个变量 等号右边先执行 把输入框值得到的值赋值给变量 uname
let uname = prompt('请输入姓名：')
// 页面打印
document.write(uname)
案例2
需求：
有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1 里面放的是 20 ， num2 里面放的是 10
let num1 = 10
let num2 = 20
// 先声明一个临时变量 temp
let temp
// 把 num1 的值赋值给临时变量 那么temp = 10 num1 为空
temp = num1
// 再把num2 的值赋值给num1 那么此时num1 = 20 num2 为空
num1 = num2
// 最后把临时变量的值赋值给num2 完成需求
num2 = temp
// 页面打印
document.write('num1的值为' + num1)
document.write('num2的值为' + num2)
需要注意的是把 num1 的值赋值给临时变量temp
是temp在等号左边而不是num1
3.变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间
变量的本质就是去内存申请空间
案例：需求：让用户输入自己的名字、年龄、性别再输出到
三、数组
如果要保存的数据成千上百怎么办呢?
1.数组的基本使用
数组（Array）是一种可以按顺序存储多个数据
1.声明语法
// let 数组名 = [数据1, 数据2, ... ,数据n]
let names = ['张三', '李四', '王二', '小明']
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以张三的编号为0，李四编号为1，以此类推
- 在数组中，数据的编号也叫索引号或下标
- 数组可以存储任意类型的
2.取值语法
names[0] //张三
names[3] //小明
3.术语
- 元素是数组中每一个保存到数据是数组元素
- 下标就是数组的索引号
- length表示长度，也就是数组的个数
可以通过names.length 获取数组个数
那么names.length - 1 为数组中最后一个数组数据
四、数据类型
1.数据类型
js数据类型整体分为两大类：
基本数据类型
引用数据类型
基本数据类型：数字型（number）、字符串型（string）、布尔型（boolean）、未定义型（undefined）、空类型（null）
引入数据类型：对象（object）、函数（function）、数组（array）
1.数字型（number）
JavaScript中的正数、负数、小数、统一为数字型
注意事项：
js是弱数据类型，变量到底是哪一种类型，需要赋值之后才知道
像Java是强数据类型 例如 int a = 3 就必须是整数
强类型：声明变量的时候 需要先指明变量的类名
弱类型：声明变量的时候 并不知道属于什么类型 类型是由数据（变量的值）决定的
2.字符串型（string）
被单引号 ''、双引号""、反引号``所包裹的数据都是字符串型
注意事项：
单双引号必须成对出现
嵌套遵循
模板字符串 `` 反引号
遇到这种情况就在页面打印不出用户输入的内容 此时需要字符拼接
1.作用：
拼接字符串和变量
新出现的 在没有它之前拼接字符串比较麻烦 有 '++' 引引加加拼接法
语法：``
反引号``包裹内容${} 花括号内输入变量名
还有强大的一点反引号包裹的内容可以换行解析HTML元素
案例：
需求：页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了
<script>
// 先声明两个变量接收用户输入的内容
let uname = prompt('请输入您的年龄：')
let age = prompt('请输入您的年龄：')
// 页面打印 反引号包裹
document.write(`大家好，我叫${uname},今年${age}岁了`)
</script>
3.布尔型(boolean)
一共就两个值 true 和 false
true表示1 false表示0
4.未定义类型（undefined）
什么是未定义类型呢？
通俗来讲：声明了变量没有赋值
let age // 声明了变量但没有赋值
console.log(age) // 控制台输出 undefined
5.空类型（null）
let age = null // 表示值为空
2.检测数据类型
可以通过typeof 关键字控制台检测数据类型
let age = 18
let uname = '张三'
let flag = false
let sex
console.log(typeof age) // number
console.log(typeof uname) // string
console.log(typeof flag) // boolean
console.log(typeof sex) // underfined
五、类型转换
1.为什么需要转换类型
js是弱数据类型 它也不知道变量到底属于哪种数据类型
console.log('1000' + '200') //1000200 而不是1200
所以需要我们想要的数据类型
2.隐式转换
有一些运算符执行的时候 系统内部就自动数据转换 这就是隐式转换
规则：
+号两边只有有一个是字符串，都会把另一个转换为字符串
除了+号以外的运算符号 - * / 都会把数据转换为数字型
缺点：转换的类型不明确 很多靠猜 和经验总结
小技巧：+号作为 正号解析转换为number数字型
// 声明两个变量分别接收两个数 输入前加 + 正号就会解析成数字型 而不是拼接
let num1 = +prompt('请输入第一个数：')
let num2 = +prompt('请输入第二个数：')
// 声明一个变量让它们相加
let sum = num1 + num2
document.write(`结果为${sum}`)
3.显式转换
1.Number（数据）
- 转换为数字型
- 但是如果转换的内容非数字 则转换失败 结果为NaN （Not a Number） 不是一个数字
- NaN也是数字类型，代表的是非数字
2.parseInt（数据） 只保留整数
3.parseFloat（数据） 可以保留小数 如果是整数转换还是保留整数
4.String（数据）转换为字符串型 变量.toString（进制）
5.转换为布尔型 Boolean(数据)
- ➢ 字符串类型：空字符串会转成false 其他的都会被转换成true
- ➢ 数字类型：0与NaN会转换成 false 其他的都会被转换成true
- ➢ undefined类型：会被转换成false
- ➢ null 类型：会被转换成fals
六、综合案例
用户订单信息案例
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
<!DOCTYPE html>
<html >
<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>
table {
width: 600px;
border-collapse: collapse;
text-align: center;
margin: 20px auto;
}
table,
th,
td {
border: 1px solid #000;
}
tr {
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<script>
//声明三个变量接收用户输入的内容
let price = prompt('请您输入商品的价格：')
let num = prompt('请您输入商品的个数：')
let address = prompt('请您输入商品的地址：')
// 因为是乘号不会拼接不需要在之前加正号 加 +号反而会报错
let sum = price * num
// 声明一个变量接收用反引号`` 修改用户输入的内容
let str = `
<table>
<caption>
<h2>订单确认</h2>
</caption>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机</td>
<td>${price}</td>
<td>${num}</td>
<td>${sum}</td>
<td>${address}</td>
</tr>
</table>
`
// 界面打印
document.write(str)
</script>
</body>
</html>