JS基础
JS基础 Day1
JS核心与进阶安排
JS基础~5day（基础）
let/const变量、数据类型、ES6模版字符串
运算符、分支、循环
数组
函数
对象、内置对象
Web APIs~7day（应用）
DOM获取&属性操作
事件核心
事件进阶
DOM操作&移动端滑动
正则&阶段案例
京东实战、放大镜、电梯导航
JS进阶~4day（进阶）
解构&箭头函数&剩余与展开
构造函数&ES6+函数
深入面向对象
异常、性能优化、深浅拷贝
软件准备
截图软件Snipaste
画图软件Zoomit
思维导图XMind
md笔记软件Typora
报错插件Error Lens
颜色主题插件One Dark Pro
JS简介和体验
JS介绍
是什么
是什么？运行在客户端（游览器）的编程语言
做什么？网页特效、表单验证、数据交互、服务端编程（node.js）
有什么？ECMAScript、Web APIs（DOM、BOM）
书写位置
内部JS
写html里，用script标签包住，在</body>上
alert('你好，JS！') //页面弹出警示框
外部JS
写在.js文件里，通过sript引入
<script src="XXX"></script> //标签中间不写代码，否则被忽略
内部JS
写在标签内部，vue框架会用
注释
单行//（ctrl+/）
多行/* */（shift+alt+a）
结束符
英文分号“;”
可省略
输入输出语法
语法：人与计算机的规则约定
输出语法：
语法1：向body内输出内容
document.write('要输出内容')document.write('<h1>我是标题</h1>')
语法2：页面弹出警告对话框
alert('要输出内容')
语法3：控制台输出语法，程序员调试使用
console.log('控制台打印')
输入语法：显示对话框，包含文字信息
prompt('请输入您的姓名：')
字面量（literal）
计算机中描述的事物
比如：字符串字面量、[]数组字面量、{}对象字面量
变量
是什么？计算机存储数据的容器，类似盒子
基本使用
声明变量：
let 变量名赋值（初始化）：=
eg.
let age = 18
更新变量：
age = 19（let不允许多次声明一个变量）声明多个变量：逗号隔开
eg.
let age = 18,name = 'pink'（不建议）
本质
内存：计算机存储数据的地方，一个空间
变量本质：程序在内存中申请一块存放数据的小空间
命名规则与规范
规则（法律，必遵守）
不能用关键字
只用下划线、字母、数字、$，不能数字开头
字母严格区分大小写
规范（道德，不一定遵守）
起名有意义
遵循小驼峰命名法，eg.useName
练习--输出用户信息
let uname = prompt('请输入姓名')
let age = prompt('请输入年龄')
let gender = prompt('请输入性别')
document.write(uname,age,gender)
拓展1：let和var区别
旧的JS使用var，现不使用var，有不合理的地方
拓展2：数组--将一组数据存储在单个变量名下
声明数组：
let 数组名 = [数据1, 数据2,...,数据n]使用数组：
数组名[索引号]（从0开始）长度：
数组名.length
常量
概念：用const声明的变量
注意：常量不允许重赋值，声明时必初始化
数据类型（JS弱数据类型，只有赋值才知道其数据类型）
基本数据类型
number数字型
算术运算符（+、-、*、/、%）
案例--计算圆面积
let r = prompt('请输入半径：')
let area = 3.14*r*r
document.write(area)
NaN（计算错误）
string字符串型
单引号、双引号、反引号（` `）
字符串拼接“+”
模版字符串：拼接字符串和变量
语法：``（反引号）包内容、${}包变量
document.write(`我叫${name}`)
boolean布尔型
true（真）、false（假）
undefined未定义型
声明后但没赋值默认undefined类型
null空类型
赋值了但内容为空
变量确定放对象，但还没准备好，用null代替
不合理，了解但不必用
引用数据类型
object对象
检测数据类型
typeof x或typeof(x)
类型转换
为什么需要？使用表单、prompt获取的数据默认字符串型，此时不能直接进行加法运算
隐式转换
系统内部自动转换
除＋，-*/会数据转成数字类型
+号作为正号解析可以转换成数字型
console.log(+'123')
任何数据和字符串相+结果都是字符串
显示转换
转数字型：
Number(数据)parseint(数据)（只保留整数）parseFloat(数据)（可保留小数）练习--输入两数，计算和，打印到页面
let num1 = prompt('输入第一个数字：')
let num2 = prompt('输入第二个数字：')
alert('两个数之和是：${num1+num2}')
实战案例--用户订单信息案例
输入商品价格、商品数量、收货地址，打印订单信息
<head>
<style>
h2 {
text-align: center;
}
table {
/*合并相邻边框*/
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let price = +prompt('输入商品价格：')
let num = +prompt('输入商品数量：')
let address = prompt('输入收货地址：')
let total = price * num
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>