认识JavaScript
是一个运行在浏览器的，解释型，弱项型，面向对象脚本语言
使用方法：
- 直接在html中写上一个标签
- 创建一个xx.js文件，通过引入，这里需要注意的是，在使用标签引入之后，标签内不能在写其他的js代码
3种输出方式：
控制台输出：console.log（） 弹窗输出：alert() 页面输出：document.write()
注意：建议将JS代码放在body的尾部
变量和常量
变量
重复使用到的数据，都要提前保存到一个变量之中，后面使用变量名就相当于使用变量的值，变量的值是可以修改的
特殊点
- 变量名不能以数字开头
- 建议使用下划线命名法或者驼峰命名法个命名变量名
- 命名尽量见名知意 如果变量名是name，那么保存的数据会被变为字符串 变量名不能是关键字var
用法
var 变量名=值；
常量
const 常量名=值； 常量的值不允许修改
算数运算符 + - * / %
运算方法和以前学习的运算方法并无不同
注意点：
- %是模，也叫取余，取两数相除的余数，一般用于判断奇偶性等
- +加法运算的时候如果两边都是数字，那么就是加法，但是有一方是字符串的时候，就是链接符，不再试加法运算
数据类型：分两大类
- 基础类型：5个
- Number：数字，取值有无穷个
- String：字符串，取值有无穷个
- Boolean：布尔，取值：true/false，往往用于判断
- Undefined：取值：undefined，创建了变量但是没有赋值，不能用来做一切操作
- Null：空，取值：null 可以用于结束时释放变量
- 引用类型
用户输入框：var user=prompt（“提示文字”）
分支结构：判断条件的不同选择不同的代码去执行
一个条件，一件事，满足就做，不满足就不做
if（判断条件）{执行操作}
一个条件，两件事，满足就做第一件，不满足做第二件
if（条件）{操作}else{默认操作}
多个条件，多件事，满足谁做谁，都不满足做默认操作
if（条件1）{操作1}else if（条件2）{操作2}else{默认操作 }
数据类型的转换
- number+number=number
- number+string=string
- 注意：js获取到的页面上的一切东西都是字符串
- 查看数据类型：typeof（要查看的东西）
隐式转换
- "+" 运算，碰上一个字符串，左右两边都会变成字符串，+也不在是+运算，而是变成了一个拼接操作
- ture-->1 false-->0 nul-->0
- undefined-->NaN
- "- * / %"字符串也可以转换为一个数字，前提是一个纯数字字符串，只要包含一个非数字字符串就会变成NaN
- NaN 不是一个有效数字，不是数字的数字类型。参与任何数字运算结果都为NaN，参与任何比较运算结果都为false。 通常无法通过普通比较运算来判断是不是NaN，可以通过！isNaN（这里是反用isNaN）返回-->ture(有效数字）-->false（是一个NaN）
强制转换
- 转字符串：var str=xx.toString()
- 转数字：
- parseInt（str/num）不认识小数点
- parseFloat（str）认识第一个小数点
- Number（）等同于隐式转换，垃圾
function函数
概念：需要预定义好的，以后就能反复使用的代码段
- 创建：function 函数名（）{操作}
- 调用：函数名（）
- 可以通过js写死，调用几次，执行基几次
- 用户触发：例如内容
带参数的函数
- 创建：function 函数名（形参1，形参2...）{操作}
- 调用：函数名（实参） 实参与形参的顺序要一一对应，数量也要对应
分支结构
比较运算符：>= <= > < == !=
- 作用：做判断，返回的一定是一个布尔值
- 注意：=不是比较，而是赋值，将等号右边的东西保存到左边 逻辑运算符：
- &&：与，且
- ||：或
- ！ ：非
循环
循环三要素：
- 循环条件
- 循环体
- 循环变量
while循环
- while（循环条件）{循环体；循环变量发生变化}
- 死循环：while（ture）{死循环}
- 退出循环： break；
for循环
- for（循环变量=几；循环条件；循环变量发生变化）{循环体}
- 死循环：for（；；）{死循环}
数组
- 创建：
- 直接量方式：var arr=[数据1，...];-----推荐
- 构造函数方式：var arr=new Array[数据1，...]---有坑
- 获取：数组名[i]
- 后续/添加替换元素 数组名[i]="新数据"---原本位置没人为添加，有人为替换
- 数组三大不限制
- 不限制元素类型
- 不限制元素个数
- 不限制元素的下标越界----不是个好东西
- 解决数下标问题：length 使用：数组名.length；作用：获取数组长度，从1开始 向末尾添加元素：arr[arr.length]=新增 获取数组倒数第n个元素：arr[arr.length-n] 缩容：删除倒数n个元素：arr.length-=n
- 遍历 for（i=0；i<数组名.length;i++）{数组名[i]}
DOM对象模型
查找元素
- 通过ID找元素：document.getElementById("id值")--找到返回元素，没找到返回null
- 通过class找元素：document/已经查找到的父元素.getElementsByclassName("class名")--找到返回类数组集合，没找到返回空数组
- 通过标签找元素：document/已经找到的父元素.getElementsTagNme("标签名")--找到返回类数组集合，没找到返回空数组
- 通过关系找元素：
- 父元素：elem.parentNode;--单个元素
- 子元素：elem.children;--集合
- 第一个子元素：elem.firstElementChild;--单个元素
- 最后一个子元素：elem.lastElementChild:--单个元素
- 前一个兄弟元素：elem.preciousElementSibling;--单个元素
- 后一个兄弟元素：elem.nextElementSibling;--单个元素
操作元素
-
- 内容
- innerHTML--获取和设置标签之间的内容，支持识别标签 获取：elem.innerHTML； 设置：elem.innerHTML="新内容"
- innerText--不支持识别标签 获取：elem.innerText； 设置：elem.innerText="新文本"
- value -专为input准备 获取：input.value; 设置：input.value="新内容"
-
- 属性
- 常规 获取属性值：elem.getAttribute（"属性名"）
设置属性值：elem.setAttribute("属性名"，"属性值")
- 简化---class必须写成className，不能操作自定义属性 获取：elem.属性名
设置：elem.属性名="属性值"
- 3. 样式：内联，外联，内部样式
- 内联样式 获取：elem.style.css属性名；
设置：elem.style.css属性名=“属性值”
总计：
- 一切的获取用于判断都是
- 一切的设置都是修改
