JavaScript基础
1 JavaScript介绍
1.1 JS简介
1.JavaScript
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2.作用
—— 网页特效（监听用户的一些行为，让网页作出对应的反馈，如轮播图、下拉菜单等）
—— 表单验证（针对表单数据的合法性进行判断，如输入邮箱的判断）
—— 数据交互（后台的数据，渲染到前端）
—— 服务端编程（node.js）
3.JavaScript的组成
ECMAScript:(js的书写语法和书写规则)
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等。
Web APIs：
DOM 操作文档，比如对页眉元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等
1.2 JS的书写位置
与css的书写位置一样。
1.内部JavaScript
直接写在html文件里，用script标签包住。通常写在body的最底端。
2.外部JavaScript
代码写在js文件夹里以.js为扩展名的文件里。
3.内联JavaScript
代码写在标签内部。
1.3 JavaScript书写规则
1.注释
单行注释：// ,快捷键：ctrl+/
块注释：/* */，快捷键：shift+alt+a
2.结束符
英文的;代表语句结束，实际开发中，可写可不写，注意风格统一。
1.4 JavaScript输入输出语法
1.输出语法
语法1：
document.write('我是div标签')
document.write('一级标题'
)
作用：向body内输出内容，输出内容写的是标签也会被解析。
语法2：
alter('这是一个警告框！')
语法3：
console.log('控制台输出语法')
作用：程序员调试使用。
2.输入语法
语法：
prompt('请输入您的姓名：')
作用：显示一个对话框，对话框上方显示文字信息，用来提示。
3.js代码执行顺序
按照HTML文档流顺序执行JavaScript代码。
alter()和prompt()会跳过页面渲染先被执行。
2 js基础语法
2.1 变量的概念
1.变量是计算机用来存储数据的容器，通俗来理解是一个盒子。
2.变量是容器而不是数据
2.2变量的基本使用
1.声明变量：
语法：
let 变量名 //var可以声明相同的变量名也可以先使用再声明，所以现在不用var
eg：let age
2.变量赋值
age=18
可以在声明变量的同时赋值，即变量初始化
2.3 数组
1.数组的定语
语法：
let 数组名 = [数据1，数据2……]
数组的索引（下标）从0开始
数组中的元素可以数据类型不同
通过length属性来获得数组元素的个数
2.4 常量
1.使用const声明的变量称为“常量”
eg: const PI=3.14
常量必须在声明的同时赋值，并且不允许重新赋值
2.5 数据类型
1.基本数据类型
number 数字型 可以进行算术运算
string 字符串型 用‘’、“”或反引号``包裹，进行+拼接运算；模板字符串${变量名}，外面用反引号包裹，eg：`我今年${age}岁了`
boolean 布尔型 两个固定的值true和false
undefined 未定义型 声明变量但未赋值
null 空类型
#typeof 变量名 #判断变量类型
2.复杂（引用）数据类型
object 对象
3.js是弱数据类型，声明变量后通过赋值才能知道变量的类型
4.数据转换
转换为数字型
在输入时前面写上+ eg：let num1=+prompt('请输入一个数字：')
number(数据) 转换为数字类型
parseInt(数据) 保留整数
parseFloat(数据) 保留小数
5.运算符 与C语言基本相同
比较运算符中注意 === 判断值和类型是否全等，!== 判断不全等
运算符优先级也是非算关与或赋逗
3.Web APIs
3.1 DOM
1. DOM(Docment Object Moel——文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API，实现操作网页内容的功能
2.作用： 开发网页内容特效和实现用户交互
3.DOM树 将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树，非常直观的体现了标签与标签之间的关系。
4.DOM对象：浏览器根据html标签生成js对象，每个标签都是对象
3.2获取DOM对象
1.选择匹配的第一个元素
document.querySelector('css选择器') //一个或多个有效的css选择器
2.选择所有匹配的多个元素
document.querySelectorAll('css选择器') //所有元素以一个数组的形式返回，但是是伪数组，没有pop()、push()等功能
获取单个元素可以直接修改属性的值，获取多个元素就要用遍历的方式来修改单个元素的属性的值。
3.获取元素的方式
(1)根据id名称获取
语法：document.getElementById('id名称')
作用：获取文档流中id名对应的一个元素，如果没有就返回null
如果一个元素有id属性，那么该元素的值可以直接写成id名称.value。
(2) 根据元素类名获取
语法：document.getElementsByClassName('元素类名')
作用：获取文档流中所有类名对应的元素
返回值：必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
(3) 根据元素标签名获取
语法：document.getElementsByTagName('标签名')
作用：获取文档流中所有标签名对应的元素
返回值：必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
(4)根据选择器获取一个
语法：document.querySelector('css选择器')
作用：获取文档流中满足选择器规则的第一个元素
返回值：如果有就获取到第一个，没有就是null
(5)根据选择器获取一组
语法：document.querySelectorAll('css选择器')
作用：获取文档流中满足选择器规则的所有元素
返回值：如果有必然是一个伪数组，有就有多少获取多少，没有就是空的伪数组
3.3 操作元素内容
1.修改对象内容
(1)对象.innerText='值' //不解析标签
等价于对象变量.value
(2)对象.innerHTML='值' //解析标签，更常用
eg：
<div class="box">文字内容</div>
<script>
const box=document.querySelector(".box")
console.log(box.innerText)
box.innerHTML="我是一个盒子"
</script>
3.4操作元素属性
1.操作元素常用属性
对象.属性=值
2.操作元素样式属性
实现方法：(1)通过style属性操作css 对象.style.属性=新值
(2)操作类名(ClassName)操作css
(3)通过ClassList操作类控制css
3.5 操作元素类名
步骤：
1.获取：元素.classname
2.设置：元素.classname='新类名'
3.6操作元素行内样式
步骤：
1.获取：元素.style.样式名
2.设置：元素.style.样式名='样式值'
注意：如果带有中划线的样式名在js里面要用驼峰命名法去表示，诸如background-color表示为backgroundColor
3.7 获取元素非行内样式
获取：window.getComputedStyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式
3.8 节点操作
创建、插入、删除、替换和克隆节点
1.创建节点
语法：document.createElement('标签名称')
作用：创建一个指定标签元素
返回值：一个创建好的元素节点
2.插入节点
语法1：父节点.appendChild(子节点)
作用：把子节点放在父节点的内部，并且放在最后的位置
4 BOM操作
4.1 BOM操作内容
browser object model
一整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
……
常用的对象window对象(window表示对象的名称)，此对象称之为全局对象，方法也是全局方法，所以语法可以省略"window."
4.2 常用BOM操作
1.获取浏览器窗口尺寸
可视窗口宽度：window.innerWidth
可视窗口高度：window.innerHeight
2.浏览器的弹出层
提示框：window.alert(‘提示信息’)
询问框：window.confirm(‘提示信息’)
输入框：window.prompt(‘提示信息’)
3.开启和关闭标签页
开启：window.open(‘地址’)
关闭：window.close()
4.浏览器常见事件
资源加载完毕：window.οnlοad=function(){}
可视尺寸改变：window.οnresize=function(){}
滚动条位置改变：window.οnscrοll=function(){}
5.浏览器的历史记录操作
回退页面：window.history.back()
前进页面：window.history.forward()
6.浏览器卷去的尺寸
高度：
(1)document.documentElement.scrollTop
(2)document.body.scrollTop
宽度：
(1)document.documentElement.scrollLeft
(2)document.body.scrollLeft
7.浏览器滚动到
window.scrollTo():
(1)window.scrollTo(left,top)
(2)window.scrollTo({
left:xx,
top:yy,
behavior:‘smooth’
})