初步了解JS
JS是什么？
通常运行在浏览器中的 编程语言，可以实现人机交互效果，提供逻辑思维能力
JS能做什么？
1.监听用户行为。让网页做出相应反馈
2.网页特效（动画效果）
3.表单验证（针对表单数据的合法性进行判断）
4.数据交互（获取后台数据，渲染到前端）
5.服务端编程（node.js）
JS的组成：
1.ECMAScript
规定js基础语法核心知识
如：变量、分支语句、循环语句、对象等等
2.Web APIs (可操作性的实体对象)
DOM （document object model）浏览器帮我们实体化了一个对象：document
操作文档，页面元素进行移动、大小、添加、删除等操作
BOM （browser object model）浏览器帮我们实体化了一个对象：window
操作浏览器，页面弹窗、检测窗口宽度、存储数据到浏览器等
注意：DOM属于BOM
JS书写位置
1.内部JS：直接写在当前页面中，用script标签包裹
2.外部JS：引入外部JS文件，语法：<script src=''></script>
注意：
引入外部js：相当于在这个位置也添加了js文件中的代码
src:指定你想引入的js文件的目录路径，路径可以是相对路径，也可以是绝对路径
在引入外部js的同时，如果在script标签中还写了其它的代码，代码会被忽略
3.内嵌（行内）JS：
直接写在标签内部，例如：<button onclick="alert('123')">123</button>
书写规范：
js书写位置，应该在所有的html标签元素之后
JS的注释
1.单行注释
只能注释单行代码。快捷键CTRL+/
2.块级注释（多行注释）
能注释多行代码。语法：
/*
1
2
3
*/
JS的结束符
代表语句结束，用英文;
;可以写，可以不写（因为回车会被识别成结束符，所以一个完整的语句，不要手动换行）
实际开发中有很多人省略结束符
为了风格同意，所有代码要么都写结束符，要么都不写。（按照团队要求）
JS输入输出语法
常见的几种输出语法：
1.document.write('要输出的内容')
向body內输出内容
如果内容里面是标签，则会被解析成标签
能传递多个写入内容，用英文逗号“，”隔开
2.alert（要弹出的内容）
弹出框，如果要弹出中文，则内容需要用引号包裹
3.console.log（“要输出的内容”）
它是给程序员调试用的
它会将内容打印到浏览器的控制面板中
可以打印出多个内容：console.log('这是打印内容', '内容2', '内容3')
输入方式：
prompt（‘请输入您的姓名：’）
弹出一个输入框，可以输入内容
一般输入方式与输出方式配合使用
console.log( prompt（‘nnnn’）)
变量
变量是什么？
理解变量是计算机存储数据的“容器”
变量就是一个装东西的盒子，它可以让计算机变得有记忆。
注意：变量不是数据本身，它仅仅是一个用于存储数值的容器。
变量的基本使用
1.声明变量（创建变量）
语法：关键字let 变量名 (此处let为关键字)
如：let age;
名词解释：
关键字：系统内部已经定义好的定会，它会有特殊作用
let关键字---声明变量
if关键字---条件判断
for关键字---循环语句
字面量：字面上（表面看上去的）所见即所得的一个数据，一眼看上去就知道数据的类型和值的大小(18)，不用去深究，了解即可
2.变量的赋值
语法： 变量名 = 数据；
age = 18;
3.变量值的改变
语法：变量名 = 数据； 覆盖
连写：声明变量的同时，进行赋值
let age = 19；
声明多个变量：
语法：使用英文逗号隔开
let age = 19, name = 'haha'；
额外知识点
1.console.log可以输出多个数据
console.log(1,2,3)
2.document.write可以写多个数据
document.write(1,2,3)
3.alert不能弹出多个窗口
4.变量名不能重复声明，不然会报错。
变量的本质
内存：计算机中存储数据的地方，相当于一个大空间
变量：是程序在内存中申请的一块用于存放数据的小空间（内存中的一个地址空间）
变量的命名规则以及规范
规则：必须遵守，不遵守会报错
1.不能使用关键字
2.只能使用下划线、字母、数字、$组成，且数字不能开头
3.字母严格区分大小写，Age和age是不同变量
规范：建议，不遵守不会报错
1.起名要有意义，最好使用英文
2.遵循小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。例如userName
额外知识点：alert、prompt会阻塞主线程
数据类型
1.基本数据类型（简单数据类型）
number 数字型 0-9 正整数、小数、负数
string 字符串型
boolean 布尔型 “true”“false”
undefined 未定义型
null 空类型
2.引用数据类型（复杂数据类型）
object 对象
function 函数
array 数据
字符串
“字符串” 通过单双引号或反引号包裹的数据，根据团队规范使用（引号必须成对使用，单双引号可以嵌套使用，內单外双或內双外单。必要时可以使用\输出单引号或双引号）
拼接字符串
字符串 + 字符串
document.write('我叫' + '彦祖');
模板字符串（可以使字符串拼接更简单）
字符串加字符串拼接非常麻烦，可以使用反引号包裹字符串加变量
例如
let name = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
//console.log("我叫" + name + "," + '我今年' + age + "岁");很麻烦
console.log(`我叫${name}，我今年${age}岁`);
</script>
布尔型：
值：
true 真
flase 假
语法：
let love = true；
let love = false；
未定义型undefined：
声明一个变量，但是不赋值：变量的默认值为undefined，一般很少直接给某个变量直接赋值为undefined。
使用场景：开发中经常声明一个变量data，值为undefined。后端返回给前端的数据是否收到没有，就看值是否还为undefined。
只声明不赋值，输出结果：undefined
不声明不赋值，输出结果：报错
不声明只赋值，输出为赋值结果（不推荐使用）
空类型null：
let obj = null; （让obj这个变量为空数据）
null跟undefined的区别
undefined代表没有赋值（未初始化）
null表示赋值了，但是内容为空（已初始化，值为空）
检查数据类型
为什么需要检测类型？
JS是弱数据类型，变量到底是属于哪种类型只有赋值后才能确定
1.通过控制台的字体颜色判断（不推荐使用）
2.通过typeof检测数据类型，typeof是关键字，用来检测数据类型的
let name = 'jack'
let age = 20
let gender = true
let address
let computer = null
// typeof:检测当前数据的类型
console.log(typeof name) // string
console.log(typeof age) // number
console.log(typeof gender) // boolean
console.log(typeof address) // undefined
console.log(typeof computer) // object
隐式转换
系统内部自动的进行类型转换
1.加号左右只要有一个字符串，就把另外一个值转化为字符串
2.除了加号以外的算数运算符（除/、乘*、减-）都会把数据转换为数值
缺点：转换类型不明确，靠经验才能总结。
小技巧：+号可以作为正号解析，例如+'11'，类型为number
显式转换
自己写代码告诉系统该转换为什么类型
转换为数字型
1.Number（数据）
转换为数字型
语法:console.log(Number("11"))
当数据不能转化为数字的时候，返回NaN（not a number）
注意：NaN本身也是一个数字类型
如：colsole.log(Number("abc")) 返回值为Nan
2.parseInt（数据）
只保留整数，不会四舍五入
语法：console.log(parseInt(“1.23”))，返回值为1
console.log(parseInt(“1.99”))，返回值为1
3.parseFloat（数据）【浮点型】
可以保留小数
语法：console.log(parseFloat(“1.23”))，返回值为1.23
转换为字符型
1.String（数据）
例如：输出的都是字符串类型
console.log(String("123"));
console.log(String(123));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
2.变量.toString(进制)【进制不写的话默认为10进制】
需要声明变量
如：
let a = 123;
conso.log(a.toString())
常见的报错类型
1.Uncaught ReferenceError: age is not defined，说明age没定义
（变量拼写错误，如age写成aeg【通过搜索CTRL+F在VScode检查有无拼写错误】）
2.Identifier 'age' has already been declared，重复定义名
3.Uncaught SyntaxError: missing ) after argument list，提示：参数少了，大概率缺少右括号
4.数据类型要转换，不然可能会出现意料之外的结果。
还有以下错误：
```tex
错误信息：Identifier 'age' has already been declared
翻译： 标识 age 已经 被 声明
原因：age你重复定义了
错误信息：Invalid left-hand side in assignment
翻译： 无效的 左手 边 在 赋值
原因：左边不是一个变量，赋值时左边一定要是一个变量
错误信息：let is disallowed as a lexically bound name
翻译：let 不被允许 做为 词法范围内的 名字
原因：变量名称是关键字
错误信息：Age is not defined
翻译：Age 没有定义
原因：Age真的没有定义，你定义了但是名称写错了，你定义了但是定义的位置有问题，造成无法使用
结论：如果访问一个没有定义的变量则报上述错误
错误信息：Cannot read properties of undefined (reading 'toString')
翻译： 不能够 读取 属性 undefined 的 读取toString:不能使用undefined读取成员
原因：读取toString的对象是undefined
错误信息： Cannot read properties of null (reading 'toString')
翻译： 不能够 读取 属性 undefined 的 读取toString:不能使用null读取成员
原因：读取toString的对象是null
